diff --git a/app/connect/page.tsx b/app/connect/page.tsx index 5b22df7..d311a49 100644 --- a/app/connect/page.tsx +++ b/app/connect/page.tsx @@ -7,9 +7,11 @@ import Image from "next/image"; import { useAccount, useConnect } from "wagmi"; import Link from "next/link"; +const connectorImages = ["coinbaseWallet.png", "walletConnect.png", "metaMask.png"]; + export default function Page() { const account = useAccount(); - const { connectors, connect, status, error } = useConnect(); + const { connectors, connect } = useConnect(); const router = useRouter(); useEffect(() => { @@ -28,11 +30,13 @@ export default function Page() {

Choose your preferred wallet

- {connectors.map((connector) => ( -
connect({ connector })}> - {connector.name} {connector.id} -
- ))} + {connectors.map((connector, index) => { + return ( +
connect({ connector })}> + {connector.name} {connector.id} +
+ ); + })}
diff --git a/app/connected/page.tsx b/app/connected/page.tsx index 78367e1..d34d1ee 100644 --- a/app/connected/page.tsx +++ b/app/connected/page.tsx @@ -1,4 +1,4 @@ -'use client'; //TODO move down suspense into components +"use client"; //TODO move down suspense into components import Image from "next/image"; import DropDown from "@/components/dropdown"; @@ -10,7 +10,7 @@ import { Suspense } from "react"; export default function Page() { return ( Loading...}> -
+
@@ -30,8 +30,7 @@ export default function Page() { Learn more about the Gnosis Beacon Chain
- {" "} - {" "} +
diff --git a/app/layout.tsx b/app/layout.tsx index c1f114c..c9b2dd8 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -18,7 +18,7 @@ export default function RootLayout({ return ( -
+
{children}
diff --git a/app/page.tsx b/app/page.tsx index 811c00b..e5622c4 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -14,7 +14,9 @@ export default function Page() { Connect Wallet -

Learn more about Gnosis Beacon Chain

+ + Learn more about the Gnosis Beacon Chain +
); diff --git a/components/dashboard.tsx b/components/dashboard.tsx index 1c24e99..25d7c6e 100644 --- a/components/dashboard.tsx +++ b/components/dashboard.tsx @@ -18,9 +18,10 @@ export default function Dashboard() { const [connectionAttempted, setConnectionAttemped] = useState(false); const { disconnect } = useDisconnect(); const router = useRouter(); - const { balance } = useDeposit(); + const { balance, isWrongNetwork } = useDeposit(); const [address, setAddress] = useState(""); - const [network, setNetwork] = useState(""); + const [networkMessage, setNetworkMessage] = useState(""); + const [network, setNetwork] = useState("Not supported"); useEffect(() => { if (account.address) { @@ -28,6 +29,14 @@ export default function Dashboard() { } }, [account.address]); + useEffect(() => { + if (isWrongNetwork) { + setNetworkMessage("Wrong Network. Please connect to Gnosis Chain"); + } else { + setNetworkMessage(""); + } + }, [isWrongNetwork]); + useEffect(() => { if (account.chain?.name) { setNetwork(account.chain.name); @@ -37,10 +46,10 @@ export default function Dashboard() { useEffect(() => { if (account.isConnecting) { setConnectionAttemped(true); - } else if(connectionAttempted && !account.isConnected) { + } else if (connectionAttempted && !account.isConnected) { router.push("/"); } - }, [account.isConnecting]); + }, [account.isConnecting, connectionAttempted, account.isConnected]); const handleCopyAddress = async () => { if (account.address) { @@ -57,7 +66,8 @@ export default function Dashboard() { }; return ( -
+
+

{networkMessage}

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

@@ -68,7 +78,7 @@ export default function Dashboard() {
Balance: -

{Math.round(Number(formatEther(balance || BigInt(0))))} GNO

+

{Math.round(Number(formatEther(balance || BigInt(0))))} GNO

Network: diff --git a/components/deposit.tsx b/components/deposit.tsx index c0b906e..5360fd0 100644 --- a/components/deposit.tsx +++ b/components/deposit.tsx @@ -7,11 +7,14 @@ import { useCallback, useEffect, useState } from "react"; import { useDropzone } from "react-dropzone"; import { FileRejection } from "react-dropzone"; import Loader from "./loader"; +import Link from "next/link"; +import { Address } from "viem"; export default function Deposit() { - const { setDepositData, depositData, deposit, depositSuccess } = useDeposit(); + const { setDepositData, depositData, deposit, depositSuccess, depositHash } = useDeposit(); const [errorMessage, setErrorMessage] = useState(""); const [loading, setLoading] = useState(false); + const [tx, setTx] = useState
("0x0"); const [step, setStep] = useState("deposit"); const onDrop = useCallback(async (acceptedFiles: File[], rejectedFiles: FileRejection[]) => { if (rejectedFiles.length > 0) { @@ -41,7 +44,8 @@ export default function Deposit() { }; reader.readAsText(acceptedFiles[0]); } - }, []); + }, [setDepositData]); + const { getRootProps, getInputProps } = useDropzone({ onDrop, accept: { "application/json": [] }, maxFiles: 1 }); const onDeposit = useCallback(async () => { @@ -56,6 +60,12 @@ export default function Deposit() { } }, [depositSuccess]); + useEffect(() => { + if (depositHash) { + setTx(depositHash); + } + }, [depositHash]); + return (
{loading ? ( @@ -93,7 +103,11 @@ export default function Deposit() { ) : step === "summary" ? (
- Your transaction is completed ! + Your transaction is completed ! View it + + here + + .