Vanilla Nextra theme

package.json

@@ -33,6 +33,7 @@
     "axios": "1.6.5",
     "bech32": "2.0.0",
     "clsx": "1.2.1",
+    "date-fns": "^4.1.0",
     "dotenv": "16.3.1",
     "ethers": "5.7.2",
     "framer-motion": "6.5.1",
@@ -45,7 +46,9 @@
     "nextra-theme-docs": "2.13.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-qr-code": "^2.0.15",
     "react-redux": "8.1.3",
+    "react-toastify": "^10.0.5",
     "sharp": "0.32.6",
     "shiki": "1.3.0",
     "swagger-ui-react": "5.17.2",
@@ -101,5 +104,6 @@
       "preset": "emotion",
       "disableShortCss": false
     }
-  }
+  },
+  "packageManager": "[email protected]+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
 }

src/components/Docs/components/AddressConverter/components/AddressConverter.tsx

@@ -1,40 +1,179 @@
+import "react-toastify/dist/ReactToastify.css";
+
+import { bech32 } from "bech32";
+import { ethers } from "ethers";
+import { useTheme } from "nextra-theme-docs";
 import { useState } from "react";
+import QRCode from "react-qr-code";
+import { toast, ToastContainer } from "react-toastify";
 
 import { convertAddress } from "../AddressConverter.utils";
 
 export const AddressConverter = () => {
   const [address, setAddress] = useState("");
   const [convertedAddress, setConvertedAddress] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
+  const [isChecksumAddress, setIsChecksumAddress] = useState(false);
+
+  const { theme } = useTheme();
+
+  // Check if the address is valid (ignoring checksum)
+  const isValidAddress = (address: string) => {
+    try {
+      if (address.startsWith("0x")) {
+        // Validate Ethereum address without considering checksum
+        return ethers.utils.isAddress(address.toLowerCase());
+      } else {
+        const decoded = bech32.decode(address);
+        return decoded.prefix === "zeta";
+      }
+    } catch (error) {
+      return false;
+    }
+  };
+
+  const handleConversion = () => {
+    setErrorMessage("");
+
+    if (!isValidAddress(address)) {
+      setErrorMessage("Invalid address format.");
+      return;
+    }
+
+    try {
+      // Convert address if the address is valid
+      let converted = convertAddress(address);
+      setConvertedAddress(converted);
+
+      // If it's an Ethereum address, check if it's checksummed
+      if (address.startsWith("0x")) {
+        // Handle non-checksummed addresses without throwing errors
+        try {
+          setIsChecksumAddress(address === ethers.utils.getAddress(address));
+        } catch (error) {
+          setIsChecksumAddress(false); // Non-checksummed address
+        }
+      } else {
+        setIsChecksumAddress(false); // Not applicable for ZetaChain addresses
+      }
+
+      setErrorMessage(""); // Clear error if conversion succeeds
+    } catch (error) {
+      setErrorMessage("Conversion failed, but the address is valid.");
+      console.error("Conversion error:", error);
+    }
+  };
+
+  const copyToClipboard = () => {
+    if (convertedAddress) {
+      navigator.clipboard.writeText(convertedAddress);
+      toast.success("Address copied to clipboard!", {
+        theme,
+        position: "top-right",
+        autoClose: 3000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+      });
+    }
+  };
+
+  const handleAddressChange = (event: any) => {
+    const newAddress = event.target.value;
+    setAddress(newAddress);
+    setErrorMessage(""); // Reset error message when input changes
+    setConvertedAddress(""); // Reset converted address
+
+    // Check checksum status for Ethereum addresses
+    if (newAddress.startsWith("0x") && isValidAddress(newAddress)) {
+      try {
+        setIsChecksumAddress(newAddress === ethers.utils.getAddress(newAddress));
+      } catch (error) {
+        setIsChecksumAddress(false); // Handle non-checksummed addresses gracefully
+      }
+    } else {
+      setIsChecksumAddress(false);
+    }
+  };
+
+  const getButtonStatus = () => {
+    if (!address) return "Enter an address";
+    if (!isValidAddress(address)) return "Invalid address";
+    return "Convert";
+  };
 
   return (
-    <div className="mt-6">
+    <div className="mt-8">
+      <ToastContainer />
+      <div className="h-[16px] mb-4 text-sm text-gray-500">
+        {address.startsWith("0x") && isValidAddress(address) && (
+          <p>
+            {isChecksumAddress ? (
+              "This address is checksummed."
+            ) : (
+              <>
+                This address is{" "}
+                <a
+                  href="https://docs.alchemy.com/docs/how-to-handle-checksum-addresses"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-500 underline"
+                >
+                  not checksummed
+                </a>
+                .
+              </>
+            )}
+          </p>
+        )}
+      </div>
+
       <div className="flex items-center gap-3 mb-3">
         <input
           type="text"
           value={address}
-          onChange={(event) => setAddress(event.target.value)}
+          onChange={handleAddressChange}
           placeholder="0x or zeta address"
-          className="border border-grey-200 dark:border-grey-500 rounded p-3 sm:w-[450px] bg-transparent dark:bg-grey-800 outline-none"
+          autoComplete="off"
+          className="tracking-wide border border-gray-200 dark:border-gray-500 rounded p-3 sm:w-[450px] bg-transparent dark:bg-gray-800 outline-none"
         />
-
         <button
           type="button"
-          onClick={() => {
-            try {
-              const converted = convertAddress(address);
-
-              setConvertedAddress(converted);
-            } catch (error) {
-              console.error(error);
-            }
-          }}
-          className="border border-grey-200 dark:border-grey-500 rounded p-3 hover:border-green-100 hover:dark:border-green-100 transition-[border-color]"
+          onClick={handleConversion}
+          disabled={!address || !isValidAddress(address)}
+          className="border border-gray-200 dark:border-gray-500 rounded p-3 hover:border-green-100 hover:dark:border-green-100 transition disabled:opacity-50 disabled:cursor-not-allowed min-w-[150px] whitespace-nowrap"
         >
-          Convert
+          {getButtonStatus()}
         </button>
       </div>
 
-      <p style={{ marginBottom: "1rem" }}>Converted address: {convertedAddress}</p>
+      {errorMessage && <p className="text-red-500 mb-3">{errorMessage}</p>}
+
+      {convertedAddress && (
+        <>
+          <div className="flex items-center gap-3 mb-3">
+            <input
+              type="text"
+              value={convertedAddress}
+              disabled
+              className="tracking-wide border border-gray-200 dark:border-gray-500 rounded p-3 sm:w-[450px] bg-transparent dark:bg-gray-800 outline-none"
+            />
+            <button
+              onClick={copyToClipboard}
+              className="border border-gray-200 dark:border-gray-500 rounded p-3 hover:border-green-100 hover:dark:border-green-100 transition min-w-[150px] whitespace-nowrap"
+            >
+              Copy
+            </button>
+          </div>
+          <div className="mt-3 flex">
+            <div className="border-8 border-white rounded-md">
+              <QRCode value={convertedAddress} size={128} />
+            </div>
+          </div>
+        </>
+      )}
     </div>
   );
 };