Added Ethereum Address Checksum tool (#159)

* Added Ethereum Address Checksum tool

* Fixed checksum check methods and copy button

* Added og image for ethereum checksum tool

* Updated labels for address checksum web3 tool

src/data/tools.ts

@@ -51,6 +51,14 @@ const tools: Web3ToolItem[] = [
     icon: 'code-square-01',
     badges: [],
     isExternal: true
+  },
+  {
+    slug: 'ethereum-address-checksum',
+    title: 'Ethereum Address Checksum',
+    intro: 'Check if an address passes checksum validation and convert to a checksum address.',
+    category: 'Ethereum',
+    icon: 'code-square-01',
+    badges: []
   }
 ]
 

src/pages/web3-tools/ethereum-address-checksum.astro

@@ -0,0 +1,26 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import EthereumAddressChecksum from "../../views/web3-tools/EthereumAddressChecksum.astro";
+import Seo from "../../components/Seo.astro";
+
+import styles from "./ethereum-address-checksum.scss?inline";
+---
+
+<BaseLayout>
+  <Seo
+    slot="seo"
+    title="Ethereum Address Checksum"
+    description="Ethereum Address Checksum"
+    og={{
+      image: "/assets/images/meta/og/web3-ethereum-address-checksum.png",
+      imageAlt: "Ethereum Address Checksum",
+    }}
+  />
+  <style slot="header" is:inline set:html={styles}></style>
+  <EthereumAddressChecksum />
+
+  <Fragment slot="footer">
+    <script src="../../scripts/web3-tools/ethereum-address-checksum/index.js"
+    ></script>
+  </Fragment>
+</BaseLayout>

src/pages/web3-tools/ethereum-address-checksum.scss

@@ -0,0 +1,30 @@
+@import "../../styles/global.scss";
+
+@import "../../elements/buttons/Button.scss";
+@import "../../elements/buttons/_base/index.scss";
+@import "../../elements/buttons/PrimaryButton.scss";
+@import "../../elements/Icon.scss";
+@import "../../elements/Message.scss";
+@import "../../elements/Input.scss";
+@import "../../elements/Hint.scss";
+@import "../../elements/Breadcrumb.scss";
+@import "../../elements/radio/Radio.scss";
+
+@import "../../components/Footer.scss";
+@import "../../components/VideoModal.scss";
+@import "../../components/HeaderSection.scss";
+@import "../../components/NewsletterSignupForm.scss";
+@import "../../components/EmailSubscription.scss";
+
+@import "../../components/Header/Header.scss";
+@import "../../components/Header/LanguageSelector.scss";
+@import "../../components/Header/ThemeSelector.scss";
+@import "../../components/Header/Navigation.scss";
+@import "../../components/Header/SubMenu.scss";
+@import "../../components/Header/Section.scss";
+@import "../../components/Header/VideoSection.scss";
+@import "../../components/Header/HamburgerButton.scss";
+@import "../../components/CookiePopup.scss";
+
+@import "../../views/web3-tools/EthereumAddressChecksum.scss";
+

src/scripts/web3-tools/ethereum-address-checksum/dom.js

@@ -0,0 +1,83 @@
+import { utils } from 'ethers'
+
+const toChecksumSection = document.querySelector('.ethereum.checksum.container .inner > .section#toChecksumAddress')
+const checkChecksumSection = document.querySelector('.ethereum.checksum.container .inner > .section#checkAddressChecksum')
+
+const handleCopy = (copyBtn, copiedBtn) => {
+  copyBtn.addEventListener('click', async () => {
+    try {
+      await navigator.clipboard.writeText(copyBtn.getAttribute('data-address'))
+      copyBtn.style.display = 'none'
+      copiedBtn.style.display = 'block'
+
+      setTimeout(() => {
+        copiedBtn.style.display = 'none'
+        copyBtn.style.display = 'block'
+      }, 1000)
+    } catch (err) {
+      console.error('Failed to copy: ', err)
+    }
+  })
+}
+
+const handleAction = (section, handler = () => {}) => {
+  const input = section.querySelector('.address input')
+  const output = section.querySelector('.result textarea')
+  const error = section.querySelector('& > p.error')
+
+  const copyButton = section.querySelector('.result .copy.button button')
+  const copiedButtonContainer = section.querySelector('.result .copied.button')
+
+  if (copyButton) {
+    handleCopy(copyButton, copiedButtonContainer)
+  }
+
+  input.addEventListener('input', () => {
+    output.value = ''
+    error.textContent = ''
+
+    if (copyButton) {
+      copyButton.setAttribute('disabled', true)
+    }
+
+    if (!input.value.trim()) {
+      return
+    }
+
+    handler(input, output, copyButton, error)
+  })
+}
+
+const handleToChecksum = (input, output, copyButton, error) => {
+  try {
+    const result = utils.getAddress(input.value.toLowerCase())
+    output.value = result
+
+    if (copyButton) {
+      copyButton.removeAttribute('disabled')
+      copyButton.setAttribute('data-address', result)
+    }
+  } catch (e) {
+    console.error(e)
+    output.value = ''
+    error.textContent = e.message
+  }
+}
+
+const handleCheckChecksum = (input, output, copyButton) => {
+  try {
+    const result = utils.getAddress(input.value)
+    output.value = result === input.value ? 'Valid Checksum Address' : 'Invalid Checksum Address'
+
+    if (copyButton) {
+      copyButton.removeAttribute('disabled')
+      copyButton.setAttribute('data-address', result)
+    }
+  } catch (e) {
+    console.error(e)
+    output.value = 'Invalid Checksum Address'
+  }
+}
+
+handleAction(toChecksumSection, handleToChecksum)
+handleAction(checkChecksumSection, handleCheckChecksum)

src/scripts/web3-tools/ethereum-address-checksum/index.js

@@ -0,0 +1,10 @@
+// Global Start
+import '../../components/nav/mega-menu'
+import '../../components/nav/hamburger'
+import '../../global/cookie'
+import '../../global/video'
+import '../../global/index'
+// Global End
+import '../../components/subscription/index'
+
+import './dom'

src/views/web3-tools/EthereumAddressChecksum.astro

@@ -0,0 +1,102 @@
+---
+import HeaderSection from "../../components/HeaderSection.astro";
+import Breadcrumb from "../../elements/Breadcrumb.astro";
+import Icon from "../../elements/Icon.astro";
+import Button from "../../elements/buttons/Button.astro";
+import Input from "../../elements/Input.astro";
+
+const title = "Ethereum Address Checksum";
+
+const items = [
+  {
+    link: "/",
+    name: "Home",
+  },
+  {
+    link: "/web3-tools",
+    name: "Web3 Tools",
+  },
+  {
+    link: `#`,
+    name: title,
+  },
+];
+
+const t = (x: string): string => x;
+---
+
+<HeaderSection
+  color={"basic"}
+  alignment={"center"}
+  heading={t("Ethereum Address Checksum")}
+/>
+
+<div class="ethereum checksum full width container">
+  <div class="inner container">
+    <Breadcrumb items={items} />
+
+    <div class="section" id="toChecksumAddress">
+      <div class="title">
+        <h2>To Checksum Address</h2>
+        <p>Convert an Ethereum address to a checksum address.</p>
+      </div>
+
+      <Input
+        label="Enter an Address"
+        type="text"
+        id="check-address"
+        className="address"
+        placeholder="Example: 0xa49f7D387417bF589581240c79374B5b9d69496A"
+      />
+
+      <Input
+        label="Result"
+        id="check-output"
+        className="result"
+        readonly
+        placeholder=""
+        type={"textarea"}
+      >
+        <div class="copy button container">
+          <Button type="button" disabled>
+            <Icon variant="copy-01" /> Copy Result
+          </Button>
+        </div>
+
+        <div class="copied button container">
+          <Button type="button">
+            <Icon variant="check" /> Copied
+          </Button>
+        </div>
+      </Input>
+
+      <p class="error"></p>
+    </div>
+
+    <div class="section" id="checkAddressChecksum">
+      <div class="title">
+        <h2>Check Address Checksum</h2>
+        <p>Checks if the supplied address passes checksum validation.</p>
+      </div>
+
+      <Input
+        label="Enter an Address"
+        type="text"
+        id="to-address"
+        className="address"
+        placeholder="Example: 0xa49F7d387417bF589581240C79374B5B9D69496a"
+      />
+
+      <Input
+        label="Result"
+        id="to-output"
+        className="result"
+        readonly
+        placeholder=""
+        type={"textarea"}
+      />
+
+      <p class="error"></p>
+    </div>
+  </div>
+</div>

src/views/web3-tools/EthereumAddressChecksum.scss

@@ -0,0 +1,95 @@
+@use "../../design-system/utils";
+@use "../../design-system/colors";
+@use "../../design-system/shadows";
+@use "../../design-system/typography/styles";
+@use "../../design-system/typography/weights";
+@use "../../design-system/theme/light";
+@use "../../design-system/theme/dark";
+
+.ethereum.checksum.container {
+  .inner {
+    padding: 56px 0 288px;
+    max-width: 754px;
+    margin: 0 auto;
+
+    ol.breadcrumb {
+      margin-top: 0;
+    }
+
+    div.section {
+      margin-top: 56px;
+
+      div.title {
+        h2 {
+          @include styles.text-xl;
+          @include weights.semibold;
+        }
+
+        p {
+          margin-top: 8px;
+          @include styles.text-md;
+          color: colors.$gray-600;
+        }
+      }
+
+      .input.container {
+        margin-top: 24px;
+      }
+
+      .result.container {
+        margin-top: 16px;
+        position: relative;
+
+        textarea {
+          height: 76px;
+          min-height: 76px;
+          resize: vertical;
+        }
+
+        .copy.button.container, .copied.button.container {
+          position: absolute;
+          bottom: 12px;
+          right: 14px;
+
+          button {
+            span.content {
+              display: flex;
+              gap: 8px;
+            }
+
+            &:disabled {
+              opacity: 0.5;
+              cursor: not-allowed;
+              background-color: rgb(102, 112, 133);
+              border: none;
+            }
+          }
+        }
+
+        .copied.button.container {
+          display: none;
+        }
+      }
+
+      p.error {
+        margin-top: 12px;
+        color: colors.$error-500;
+
+      }
+    }
+  }
+}
+
+.dark {
+  .ethereum.checksum.container {
+    .inner {
+      div.section {
+        div.title {
+          p {
+            color: colors.$gray-300;
+          }
+        }
+      }
+    }
+  }
+}