Merge pull request #32 from gnosischain/dev

Bug fixes on new Gnosis Deposit UI
gnosischain · May 16, 2024 · 80c7dc1 · 80c7dc1
2 parents 163e04f + 6eab2cf
commit 80c7dc1
Show file tree

Hide file tree

Showing 23 changed files with 1,224 additions and 1,694 deletions.
diff --git 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() {
         </div>
         <p className="text-2xl lg:text-3xl text-black font-bold mt-8 w-1/2 text-center">Choose your preferred wallet</p>
         <div className="w-full flex flex-col divide-slate-700 divide-y mt-8">
-          {connectors.map((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} onClick={() => connect({ connector })}>
-              {connector.name} <Image src={"/" + connector.id + ".png"} alt={connector.id} width={55} height={24} />
-            </div>
-          ))}
+          {connectors.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} onClick={() => connect({ connector })}>
+                {connector.name} <Image src={connectorImages[index]} alt={connector.id} width={48} height={24} />
+              </div>
+            );
+          })}
         </div>
       </div>
     </main>

diff --git 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 (
     <Suspense fallback={<div>Loading...</div>}>
-      <main className="flex h-screen flex-col items-center justify-center">
+      <main className="flex h-full lg:h-screen flex-col items-center justify-center">
         <div className="w-full lg:w-[775px] bg-[#133629CC] h-full lg:h-auto backdrop-blur-sm p-4 lg:rounded-2xl flex gap-y-6 flex-col justify-start items-center">
           <div className="w-full gap-x-4 flex justify-between">
             <NavigationTab value="deposit" />
@@ -30,8 +30,7 @@ export default function Page() {
               Learn more about the Gnosis Beacon Chain
             </Link>
             <div className="w-2/4 lg:w-1/4 flex justify-center items-center">
-              {" "}
-              <DropDown />{" "}
+              <DropDown />
             </div>
           </div>
           <div className="w-full flex lg:hidden justify-center">

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -18,7 +18,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <div className="bg-[url('../public/background.jpg')] bg-cover bg-center w-full h-full">
+        <div className="bg-[url('../public/background.jpg')] bg-cover bg-center w-full h-full text-white">
           <Providers>{children}</Providers>
         </div>
       </body>

diff --git a/app/page.tsx b/app/page.tsx
@@ -14,7 +14,9 @@ export default function Page() {
         <Link href="/connect" className="bg-[#DD7143] px-8 py-4 rounded-full text-xl font-semibold">
           Connect Wallet
         </Link>
-        <p className="mt-20 underline">Learn more about Gnosis Beacon Chain</p>
+        <Link target="_blank" className="w-full flex justify-center mt-20 text-sm lg:text-base items-center underline hover:text-slate-200" href={"https://docs.gnosischain.com/node/"}>
+          Learn more about the Gnosis Beacon Chain
+        </Link>
       </div>
     </main>
   );

diff --git a/components/dashboard.tsx b/components/dashboard.tsx
@@ -18,16 +18,25 @@ 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) {
       setAddress(account.address);
     }
   }, [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 (
-    <div className="w-full 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 px-4 py-6">
+      <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>
       <div className="w-full flex mt-4">
         <div className="w-full lg:w-2/6 flex flex-col text-base">
@@ -68,7 +78,7 @@ export default function Dashboard() {
           <div className="flex flex-col gap-y-4 justify-between items-start mt-4 lg:mt-0">
             <div>
               Balance:
-              <p className="font-bold text-2xl lg:text-4xl">{Math.round(Number(formatEther(balance || BigInt(0))))} GNO</p>
+              <p className="font-bold text-xl lg:text-3xl">{Math.round(Number(formatEther(balance || BigInt(0))))} GNO</p>
             </div>
             <div>
               Network:

diff --git 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<Address>("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 (
     <div className="w-full bg-[#FFFFFFB2] h-[280px] p-6 flex flex-col justify-center items-center rounded-2xl">
       {loading ? (
@@ -93,7 +103,11 @@ export default function Deposit() {
       ) : step === "summary" ? (
         <div className="w-full flex flex-col items-center">
           <div className="flex items-center">
-            <CheckIcon className="h-5 w-5" /> Your transaction is completed !
+            <CheckIcon className="h-5 w-5" /> Your transaction is completed ! View it
+            <Link href={"https://gnosis.blockscout.com/tx/" + tx} target="_blank" className="text-[#DD7143] underline ml-1">
+              here
+            </Link>
+            .
           </div>
           <button className="text-[#DD7143] flex items-center px-4 py-1 rounded-full mt-4 text-base font-semibold" onClick={() => setStep("deposit")}>
             Back <ArrowUturnLeftIcon className="h-4 w-4 ml-2" />

diff --git a/components/dropdown.tsx b/components/dropdown.tsx
@@ -16,23 +16,23 @@ export default function DropDown() {
             <div className="px-1 py-1 ">
               <Menu.Item>
                 {({ active }) => (
-                  <Link target="_blank" className={`${active ? "bg-stone-100" : ""} text-gray-900 group flex w-full items-center rounded-md px-2 py-2 text-sm`} href={""}>
+                  <Link target="_blank" className={`${active ? "bg-stone-100" : ""} text-gray-900 group flex w-full items-center rounded-md px-2 py-2 text-sm`} href={"https://docs.gnosischain.com/faq/Node%20FAQs/generalQuestions"}>
                     <QuestionMarkCircleIcon className="h-5 w-5 mr-2" />
                     FAQ
                   </Link>
                 )}
               </Menu.Item>
               <Menu.Item>
                 {({ active }) => (
-                  <Link target="_blank" className={`${active ? "bg-stone-100" : ""} text-gray-900 group flex w-full items-center rounded-md px-2 py-2 text-sm`} href={"https://docs.gnosischain.com/"}>
+                  <Link target="_blank" className={`${active ? "bg-stone-100" : ""} text-gray-900 group flex w-full items-center rounded-md px-2 py-2 text-sm`} href={"https://docs.gnosischain.com/node"}>
                     <DocumentIcon className="h-5 w-5 mr-2" />
                     Official Docs
                   </Link>
                 )}
               </Menu.Item>
               <Menu.Item>
                 {({ active }) => (
-                  <Link target="_blank" className={`${active ? "bg-stone-100" : ""} text-gray-900 group flex w-full items-center rounded-md px-2 py-2 text-sm`} href={""}>
+                  <Link target="_blank" className={`${active ? "bg-stone-100" : ""} text-gray-900 group flex w-full items-center rounded-md px-2 py-2 text-sm`} href={"https://gnosisvalidator.substack.com"}>
                     <NewspaperIcon className="h-5 w-5 mr-2" />
                     Validator Newsletter
                   </Link>

diff --git a/components/navigation-tab.tsx b/components/navigation-tab.tsx
@@ -10,7 +10,7 @@ type ActionKey = "deposit" | "withdrawal" | "validator";
 
 const texts: Record<ActionKey, string> = {
   deposit: "Deposit",
-  withdrawal: "Withdrawal Claim",
+  withdrawal: "Autoclaim Rewards",
   validator: "Validator Status",
 };
 

diff --git a/components/validator.tsx b/components/validator.tsx
@@ -50,7 +50,7 @@ export default function Validator() {
         }
       }
     }
-  }, []);
+  }, [validateStatus]);
   const { getRootProps, getInputProps } = useDropzone({ onDrop, accept: { "application/json": [] } });
 
   return (

diff --git a/components/withdrawal.tsx b/components/withdrawal.tsx
@@ -3,18 +3,20 @@ import useClaimBalance from "@/hooks/use-claim-balance";
 import { ArrowUturnLeftIcon, CheckIcon } from "@heroicons/react/20/solid";
 import { useCallback, useEffect, useState } from "react";
 import Loader from "./loader";
+import { Address } from "viem";
+import Link from "next/link";
 
 export default function Withdrawal() {
-  const { claim, claimBalance, claimSuccess } = useClaimBalance();
-  const { register, updateConfig, unregister, isRegister, autoclaimSuccess } = useAutoclaim();
+  const { claim, claimBalance, claimSuccess, claimHash } = useClaimBalance();
+  const { register, updateConfig, unregister, isRegister, autoclaimSuccess, autoclaimHash } = useAutoclaim();
   const [timeValue, setTimeValue] = useState(1);
   const [amountValue, setAmountValue] = useState(1);
   const [step, setStep] = useState("claim");
+  const [tx, setTx] = useState<Address>("0x0");
   const [loading, setLoading] = useState(false);
 
   const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setTimeValue(parseFloat(event.target.value));
-    console.log(parseFloat(event.target.value));
   };
 
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -35,7 +37,7 @@ export default function Withdrawal() {
         await register(timeValue, amountValue);
       }
     }
-  }, [timeValue, amountValue, register, updateConfig]);
+  }, [timeValue, amountValue, isRegister, register, updateConfig]);
 
   const onClaim = useCallback(async () => {
     setLoading(true);
@@ -54,6 +56,14 @@ export default function Withdrawal() {
     }
   }, [claimSuccess, autoclaimSuccess]);
 
+  useEffect(() => {
+    if (claimHash) {
+      setTx(claimHash);
+    } else if (autoclaimHash) {
+      setTx(autoclaimHash);
+    }
+  }, [claimHash, autoclaimHash]);
+
   return (
     <div className="w-full bg-[#FFFFFFB2] h-[280px] p-4 flex flex-col justify-center items-center rounded-2xl">
       {loading ? (
@@ -63,6 +73,7 @@ export default function Withdrawal() {
         </div>
       ) : step === "claim" ? (
         <>
+          <div className="w-full text-sm flex justify-center">Set up automated claim with your preferred frequency and threshold.</div>
           <div className="flex h-full flex-col justify-center gap-y-4">
             <div className="flex flex-col">
               <label htmlFor="default-input" className="block mb-2 text-xs font-bold text-gray-700">
@@ -117,7 +128,11 @@ export default function Withdrawal() {
       ) : step === "summary" ? (
         <div className="w-full flex flex-col items-center">
           <div className="flex items-center">
-            <CheckIcon className="h-5 w-5" /> Your transaction is completed !
+            <CheckIcon className="h-5 w-5" /> Your transaction is completed ! View it
+            <Link href={"https://gnosis.blockscout.com/tx/" + tx} target="_blank" className="text-[#DD7143] underline ml-1">
+              here
+            </Link>
+            .
           </div>
           <button className="text-[#DD7143] flex items-center px-4 py-1 rounded-full mt-4 text-base font-semibold" onClick={() => setStep("claim")}>
             Back <ArrowUturnLeftIcon className="h-4 w-4 ml-2" />

diff --git a/hooks/use-autoclaim.ts b/hooks/use-autoclaim.ts
@@ -12,15 +12,11 @@ function useAutoclaim() {
   const chainId = account?.chainId || 100;
   const contractConfig = CONTRACTS[chainId];
   const client = getPublicClient(config, { chainId: chainId as 100 | 10200 });
-  const { data: hash, writeContract } = useWriteContract();
+  const { data: autoclaimHash, writeContract } = useWriteContract();
   const { isSuccess: autoclaimSuccess } = useWaitForTransactionReceipt({
-    hash,
+    hash: autoclaimHash,
   });
 
-  if (!contractConfig) {
-    throw Error(`No contract configuration found for chain ID ${chainId}`);
-  }
-
   useEffect(() => {
     async function fetchEvents() {
       if (contractConfig && account.address && account.address !== "0x0") {
@@ -49,25 +45,31 @@ function useAutoclaim() {
 
   const register = useCallback(
     async (days: number, amount: number) => {
-      const timeStamp = BigInt(days * 86400000);
-      writeContract({ address: contractConfig.addresses.claimRegistry, abi: claimRegistryABI, functionName: "register", args: [account.address || "0x0", timeStamp, BigInt(amount)] });
+      if (contractConfig) {
+        const timeStamp = BigInt(days * 86400000);
+        writeContract({ address: contractConfig.addresses.claimRegistry, abi: claimRegistryABI, functionName: "register", args: [account.address || "0x0", timeStamp, BigInt(amount)] });
+      }
     },
     [account]
   );
 
   const updateConfig = useCallback(
     async (days: number, amount: number) => {
-      const timeStamp = BigInt(days * 86400000);
-      writeContract({ address: contractConfig.addresses.claimRegistry, abi: claimRegistryABI, functionName: "updateConfig", args: [account.address || "0x0", timeStamp, BigInt(amount)] });
+      if (contractConfig) {
+        const timeStamp = BigInt(days * 86400000);
+        writeContract({ address: contractConfig.addresses.claimRegistry, abi: claimRegistryABI, functionName: "updateConfig", args: [account.address || "0x0", timeStamp, BigInt(amount)] });
+      }
     },
     [account]
   );
 
   const unregister = useCallback(async () => {
-    writeContract({ address: contractConfig.addresses.claimRegistry, abi: claimRegistryABI, functionName: "unregister", args: [account.address || "0x0"] });
+    if (contractConfig) {
+      writeContract({ address: contractConfig.addresses.claimRegistry, abi: claimRegistryABI, functionName: "unregister", args: [account.address || "0x0"] });
+    }
   }, [account]);
 
-  return { register, updateConfig, unregister, isRegister, autoclaimSuccess };
+  return { register, updateConfig, unregister, isRegister, autoclaimSuccess, autoclaimHash };
 }
 
 export default useAutoclaim;
diff --git a/hooks/use-claim-balance.ts b/hooks/use-claim-balance.ts
@@ -14,20 +14,18 @@ function useClaimBalance() {
     functionName: "withdrawableAmount",
     args: [account.address || "0x0"],
   });
-  const { data: hash, writeContract } = useWriteContract();
+  const { data: claimHash, writeContract } = useWriteContract();
   const { isSuccess: claimSuccess } = useWaitForTransactionReceipt({
-    hash,
+    hash: claimHash,
   });
 
-  if (!contractConfig) {
-    throw Error(`No contract configuration found for chain ID ${chainId}`);
-  }
+  const claim = useCallback(async () => {
+    if (contractConfig) {
+      writeContract({ address: contractConfig.addresses.deposit, abi: depositABI, functionName: "claimWithdrawal", args: [account.address || "0x0"] });
+    }
+  }, [account]);
 
-  const claim = useCallback(async() =>{
-    writeContract({ address: contractConfig.addresses.deposit, abi: depositABI, functionName: "claimWithdrawal", args: [account.address || "0x0"] });
-  }, [account])
-
-  return { claim, claimBalance, claimSuccess };
+  return { claim, claimBalance, claimSuccess, claimHash };
 }
 
 export default useClaimBalance;