diff --git a/app/connect/page.tsx b/app/connect/page.tsx index 8e06af5..85d9789 100644 --- 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() {
{uniqueConnectors.map((connector, index) => { return ( -
connect({ connector })}> +
connect({ connector: connector, chainId: gnosis.id })}> {connector.name} {connector.id}
); diff --git a/components/dashboard.tsx b/components/dashboard.tsx index 578c7b7..9fdec35 100644 --- 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) => { + 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 => ( + + )); + } else { + return ["Not supported", ...supportedChains].map(option => ( + + )); + } + }; + return ( -
+

{networkMessage}

-

{searchParams.get("state") == "validator" ? "Check Validators Status" : "Gnosis Beacon Chain Deposit"}

+

+ {searchParams.get("state") === "validator" ? "Check Validators Status" : "Gnosis Beacon Chain Deposit"} +

-
- {truncateAddress(address)} {isCopied ? : } +
+ {truncateAddress(address)} + {isCopied ? : }
Balance:

{Number(formatEther(balance || BigInt(0))).toFixed(3)} GNO

-
+
Network: -

- {network} -

+ {networkLoading ? ( +
Loading network...
+ ) : ( +
+ +
+ )}