switch to react-toastify

package.json

@@ -68,6 +68,7 @@
     "react-qr-code": "^2.0.15",
     "react-redux": "8.1.3",
     "react-syntax-highlighter": "15.5.0",
+    "react-toastify": "^10.0.5",
     "react-use": "17.4.3",
     "remark-gfm": "4.0.0",
     "sharp": "0.32.6",
@@ -133,4 +134,4 @@
     }
   },
   "packageManager": "[email protected]+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
-}
+}

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

@@ -2,6 +2,9 @@ import { bech32 } from "bech32";
 import { ethers } from "ethers";
 import { useState } from "react";
 import QRCode from "react-qr-code";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import { useTheme } from "nextra-theme-docs";
 
 import { convertAddress } from "../AddressConverter.utils";
 
@@ -11,6 +14,8 @@ export const AddressConverter = () => {
   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 {
@@ -27,7 +32,7 @@ export const AddressConverter = () => {
   };
 
   const handleConversion = () => {
-    setErrorMessage(""); // Reset error message
+    setErrorMessage("");
 
     if (!isValidAddress(address)) {
       setErrorMessage("Invalid address format.");
@@ -61,7 +66,16 @@ export const AddressConverter = () => {
   const copyToClipboard = () => {
     if (convertedAddress) {
       navigator.clipboard.writeText(convertedAddress);
-      alert("Address copied to clipboard!");
+      toast.success("Address copied to clipboard!", {
+        theme,
+        position: "top-right",
+        autoClose: 3000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+      });
     }
   };
 
@@ -91,6 +105,7 @@ export const AddressConverter = () => {
 
   return (
     <div className="mt-8">
+      <ToastContainer />
       <div className="h-[16px] mb-4 text-sm text-gray-500">
         {address.startsWith("0x") && isValidAddress(address) && (
           <p>

yarn.lock

@@ -12472,6 +12472,13 @@ [email protected], react-syntax-highlighter@^15.5.0:
     prismjs "^1.27.0"
     refractor "^3.6.0"
 
+react-toastify@^10.0.5:
+  version "10.0.5"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-10.0.5.tgz#6b8f8386060c5c856239f3036d1e76874ce3bd1e"
+  integrity sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==
+  dependencies:
+    clsx "^2.1.0"
+
 react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"