feat: add switch network button

gnosischain · Jul 18, 2024 · 7141b64 · 7141b64
1 parent c102262
commit 7141b64
Show file tree

Hide file tree

Showing 8 changed files with 1,461 additions and 1,430 deletions.
diff --git a/app/connect/page.tsx b/app/connect/page.tsx
@@ -6,6 +6,7 @@ import { XMarkIcon } from "@heroicons/react/20/solid";
 import Image from "next/image";
 import { Connector, useAccount, useConnect } from "wagmi";
 import Link from "next/link";
+import { gnosis } from "viem/chains";
 
 export default function Page() {
   const account = useAccount();
@@ -38,7 +39,7 @@ export default function Page() {
         <div className="w-full flex flex-col divide-slate-700 divide-y mt-8 overflow-y-auto">
           {uniqueConnectors.map((connector, index) => {
             return (
-              <div className="flex w-full justify-between items-center text-black hover:bg-[#E8E1CF] py-4 p-2 first:rounded-t-lg last:rounded-b-lg" key={connector.uid} id={connector.name === "MetaMask" ? "metamask" : ""} onClick={() => connect({ connector })}>
+              <div className="flex w-full justify-between items-center text-black hover:bg-[#E8E1CF] py-4 p-2 first:rounded-t-lg last:rounded-b-lg" key={connector.uid} id={connector.name === "MetaMask" ? "metamask" : ""} onClick={() => connect({ connector: connector, chainId: gnosis.id })}>
                 {connector.name} <Image src={"./" + connector.id + ".png"} alt={connector.id} width={48} height={24} />
               </div>
             );

diff --git a/components/dashboard.tsx b/components/dashboard.tsx
@@ -1,97 +1,139 @@
 "use client";
 
-import useDeposit from "@/hooks/use-deposit";
-import { truncateAddress } from "@/utils/truncateAddress";
-import { ArrowRightStartOnRectangleIcon, DocumentDuplicateIcon, CheckIcon } from "@heroicons/react/24/outline";
+import { useEffect, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
+import { useAccount, useDisconnect, useSwitchChain } from "wagmi";
 import { formatEther } from "viem";
-import { useAccount, useDisconnect } from "wagmi";
+import { truncateAddress } from "@/utils/truncateAddress";
+import { ArrowRightStartOnRectangleIcon, DocumentDuplicateIcon, CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
+import { Select } from "@headlessui/react";
+import useDeposit from "@/hooks/use-deposit";
 import Deposit from "./deposit";
 import Withdrawal from "./withdrawal";
-import { useEffect, useState } from "react";
 import Validator from "./validator";
 
 export default function Dashboard() {
   const searchParams = useSearchParams();
-  const account = useAccount();
-  const [isCopied, setIsCopied] = useState(false);
-  const [connectionAttempted, setConnectionAttemped] = useState(false);
-  const { disconnect } = useDisconnect();
   const router = useRouter();
+  const { disconnect } = useDisconnect();
+  const { chains, switchChain } = useSwitchChain();
   const { balance, isWrongNetwork } = useDeposit();
+  const account = useAccount();
+  const [isCopied, setIsCopied] = useState(false);
+  const [connectionAttempted, setConnectionAttempted] = useState(false);
   const [address, setAddress] = useState("");
   const [networkMessage, setNetworkMessage] = useState("");
-  const [network, setNetwork] = useState("Not supported");
+  const [network, setNetwork] = useState("");
+  const [networkLoading, setNetworkLoading] = useState(true);
 
   useEffect(() => {
-    if (account.address) {
-      setAddress(account.address);
-    }
+    if (account.address) setAddress(account.address);
   }, [account.address]);
 
   useEffect(() => {
-    if (isWrongNetwork) {
-      setNetworkMessage("Wrong Network. Please connect to Gnosis Chain");
-    } else {
-      setNetworkMessage("");
-    }
+    setNetworkMessage(isWrongNetwork ? "Wrong Network. Please connect to Gnosis Chain" : "");
   }, [isWrongNetwork]);
 
   useEffect(() => {
-    if (account.chain?.name) {
-      setNetwork(account.chain.name);
+    if (chains.length > 0) {
+      const currentNetwork = chains.find(chain => chain.id === account.chain?.id);
+      if (currentNetwork) {
+        setNetwork(currentNetwork.name);
+      } else {
+        setNetwork("Not supported");
+      }
+      setNetworkLoading(false);
     }
-  }, [account.chain?.name]);
+  }, [account.chain?.id, chains]);
 
   useEffect(() => {
     if (account.isConnecting) {
-      setConnectionAttemped(true);
+      setConnectionAttempted(true);
     } else if (connectionAttempted && !account.isConnected) {
       router.push("/");
     }
   }, [account.isConnecting, connectionAttempted, account.isConnected, router]);
 
-  useEffect(() => {
-    console.log("SearchParams change:", searchParams.get("state"));
-  }, [searchParams]);
-
-  useEffect(() => {
-    console.log("Account change:", account);
-  }, [account]);
-
   const handleCopyAddress = async () => {
     if (account.address) {
       try {
         await navigator.clipboard.writeText(account.address);
         setIsCopied(true);
-        setTimeout(() => {
-          setIsCopied(false);
-        }, 1000);
+        setTimeout(() => setIsCopied(false), 1000);
       } catch (err) {
         console.error("Failed to copy!", err);
       }
     }
   };
 
+  const handleNetworkChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedNetwork = e.target.value;
+    const selectedChain = chains.find(chain => chain.name === selectedNetwork);
+    if (selectedChain) {
+      switchChain({ chainId: selectedChain.id });
+    }
+  };
+
+  const renderNetworkOptions = () => {
+    const supportedChains = ["Gnosis", "Gnosis Chiado"];
+    const currentNetwork = chains.find(chain => chain.id === account.chain?.id)?.name;
+
+    if (currentNetwork && supportedChains.includes(currentNetwork)) {
+      return supportedChains.map(option => (
+        <option key={option} value={option}>
+          {option}
+        </option>
+      ));
+    } else {
+      return ["Not supported", ...supportedChains].map(option => (
+        <option key={option} value={option}>
+          {option}
+        </option>
+      ));
+    }
+  };
+
   return (
-    <div className="w-full relative h-[590px] lg:h-[375px] bg-[#F0EBDE] flex flex-col text-black rounded-2xl items-center justify-between px-4 py-6">
+    <div className="w-full relative h-[590px] lg:h-[375px] bg-[#F0EBDE] flex flex-col text-black rounded-2xl items-center justify-between p-4">
       <p className="text-red-400 text-sm font-bold rounded-md absolute z-20 top-1">{networkMessage}</p>
-      <p className="font-bold text-xl lg:text-2xl">{searchParams.get("state") == "validator" ? "Check Validators Status" : "Gnosis Beacon Chain Deposit"}</p>
+      <p className="font-bold text-xl lg:text-2xl">
+        {searchParams.get("state") === "validator" ? "Check Validators Status" : "Gnosis Beacon Chain Deposit"}
+      </p>
       <div className="w-full flex flex-col-reverse lg:flex-row mt-4">
         <div className="w-full lg:w-2/6 flex flex-col text-base">
-          <div id="accounts" className="w-min bg-[#133629] hidden lg:flex items-center rounded-full mt-4 mb-2 lg:mb-7 text-white p-2 hover:cursor-pointer hover:bg-[#2a4a3e]" onClick={handleCopyAddress}>
-            {truncateAddress(address)} {isCopied ? <CheckIcon className="ml-2 h-5 w-5" /> : <DocumentDuplicateIcon className="ml-2 h-5 w-5" />}
+          <div
+            id="accounts"
+            className="w-min bg-[#133629] hidden lg:flex items-center rounded-full mt-4 mb-2 lg:mb-7 text-white p-2 hover:cursor-pointer hover:bg-[#2a4a3e]"
+            onClick={handleCopyAddress}
+          >
+            {truncateAddress(address)}
+            {isCopied ? <CheckIcon className="ml-2 h-5 w-5" /> : <DocumentDuplicateIcon className="ml-2 h-5 w-5" />}
           </div>
           <div className="flex flex-col gap-y-4 justify-between items-start mt-4 lg:mt-0">
             <div>
               Balance:
               <p className="font-bold text-xl lg:text-2xl">{Number(formatEther(balance || BigInt(0))).toFixed(3)} GNO</p>
             </div>
-            <div>
+            <div className="w-full">
               Network:
-              <p className="font-bold text-lg" id="network">
-                {network}
-              </p>
+              {networkLoading ? (
+                <div>Loading network...</div>
+              ) : (
+                <div className="relative w-36">
+                  <Select
+                    className="block w-full bg-[#F0EBDE] appearance-none border-b border-[#133629] focus:outline-none p-1"
+                    id="network"
+                    value={network}
+                    onChange={handleNetworkChange}
+                  >
+                    {renderNetworkOptions()}
+                  </Select>
+                  <ChevronDownIcon
+                    className="group pointer-events-none absolute top-2 right-2.5 size-4"
+                    aria-hidden="true"
+                  />
+                </div>
+              )}
             </div>
             <button
               onClick={() => {
@@ -108,10 +150,10 @@ export default function Dashboard() {
         <div className={`w-full ${searchParams.get("state") === "deposit" ? "block" : "hidden"}`}>
           <Deposit />
         </div>
-        <div className={`w-full ${searchParams.get("state") === "withdrawal" ? "block" : "hidden"} `}>
+        <div className={`w-full ${searchParams.get("state") === "withdrawal" ? "block" : "hidden"}`}>
           <Withdrawal />
         </div>
-        <div className={`w-full ${searchParams.get("state") === "validator" ? "block" : "hidden"} `}>
+        <div className={`w-full ${searchParams.get("state") === "validator" ? "block" : "hidden"}`}>
           <Validator />
         </div>
       </div>

diff --git a/components/deposit.tsx b/components/deposit.tsx
@@ -80,7 +80,7 @@ export default function Deposit() {
   }, [depositHash]);
 
   return (
-    <div className="w-full bg-[#FFFFFFB2] h-[280px] p-6 flex flex-col justify-center items-center rounded-2xl">
+    <div className="w-full h-full bg-[#FFFFFFB2] p-6 flex flex-col justify-center items-center rounded-2xl">
       {loading ? (
         <>
           <Loader />

diff --git a/components/validator.tsx b/components/validator.tsx
@@ -58,7 +58,7 @@ export default function Validator() {
   const { getRootProps, getInputProps } = useDropzone({ onDrop, accept: { "application/json": [] } });
 
   return (
-    <div className="w-full bg-[#FFFFFFB2] h-[280px] p-6 flex flex-col justify-center items-center rounded-2xl">
+    <div className="w-full h-full bg-[#FFFFFFB2] p-6 flex flex-col justify-center items-center rounded-2xl">
       {loading ? (
         <>
           <Loader />

diff --git a/components/withdrawal.tsx b/components/withdrawal.tsx
@@ -62,7 +62,7 @@ export default function Withdrawal() {
   }, [claimHash, autoclaimHash]);
 
   return (
-    <div className="w-full bg-[#FFFFFFB2] h-[280px] p-4 flex flex-col justify-center items-center rounded-2xl">
+    <div className="w-full h-full bg-[#FFFFFFB2] p-4 flex flex-col justify-center items-center rounded-2xl">
       {loading ? (
         <div>
           <Loader />