feat: add dappnode deposit section

gnosischain · Aug 8, 2024 · b406ec5 · b406ec5
1 parent 225a8cf
commit b406ec5
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 14 deletions.
diff --git a/components/dappnodeDeposit.tsx b/components/dappnodeDeposit.tsx
@@ -16,6 +16,13 @@ import {
 import { FileRejection, useDropzone } from "react-dropzone";
 import { Address } from "viem";
 import Loader from "./loader";
+import { ContractNetwork } from "@/utils/contracts";
+
+interface DappNodeDepositProps {
+  contractConfig: ContractNetwork | undefined;
+  address: `0x${string}` | undefined;
+  chainId: number;
+}
 
 export type DappnodeUser = {
   safe: string;
@@ -32,7 +39,7 @@ type Step =
   | "executed"
   | undefined;
 
-export default function DappnodeDeposit() {
+export default function DappnodeDeposit({contractConfig, address, chainId}: DappNodeDepositProps) {
   const [loading, setLoading] = useState(true);
   const [step, setStep] = useState<Step>();
   const [errorMessage, setErrorMessage] = useState("");
@@ -47,7 +54,7 @@ export default function DappnodeDeposit() {
     isWrongNetwork,
     claimStatusPending,
     claimStatusError,
-  } = useDappnodeDeposit();
+  } = useDappnodeDeposit(contractConfig, address, chainId);
 
   useEffect(() => {
     if (isWrongNetwork !== undefined) {

diff --git a/components/dashboard.tsx b/components/dashboard.tsx
@@ -202,6 +202,17 @@ export default function Dashboard() {
             chainId={chainId}
           />
         </div>
+        <div
+          className={`w-full ${
+            searchParams.get("state") === "dappnode" ? "block" : "hidden"
+          }`}
+        >
+          <DappnodeDeposit
+            contractConfig={contractConfig}
+            address={account.address}
+            chainId={chainId}
+          />
+        </div>
         <div
           className={`w-full ${
             searchParams.get("state") === "withdrawal" ? "block" : "hidden"

diff --git a/hooks/use-dappnode-deposit.ts b/hooks/use-dappnode-deposit.ts
@@ -5,7 +5,7 @@ import {
   useWriteContract,
   useWaitForTransactionReceipt,
 } from "wagmi";
-import CONTRACTS from "@/utils/contracts";
+import CONTRACTS, { ContractNetwork } from "@/utils/contracts";
 import dappnodeIncentiveABI from "@/utils/abis/dappnodeIncentive";
 import { loadCachedDeposits } from "@/utils/deposit";
 import { getPublicClient } from "wagmi/actions";
@@ -29,25 +29,21 @@ export type DappnodeUser = [
   totalStakeAmount: bigint // uint256
 ];
 
-function useDappnodeDeposit() {
+function useDappnodeDeposit(contractConfig: ContractNetwork | undefined, address: `0x${string}` | undefined, chainId: number) {
   const [deposits, setDeposits] = useState<DepositDataJson[]>([]);
   const [hasDuplicates, setHasDuplicates] = useState(false);
   const [isBatch, setIsBatch] = useState(false);
   const [filename, setFilename] = useState("");
-  const account = useAccount();
-
-  const chainId = account?.chainId || 100;
-  const contractConfig = CONTRACTS[chainId];
   const client = getPublicClient(config, { chainId: chainId as 100 });
 
   const { data: user }: { data: DappnodeUser | undefined } = useReadContract({
     abi: dappnodeIncentiveABI,
     address: contractConfig?.addresses.dappnodeIncentive,
     functionName: "users",
-    args: [account.address],
+    args: [address],
   });
 
-  const isWrongNetwork = account.chainId !== 100;
+  const isWrongNetwork = chainId !== 100;
   const { data: depositHash, writeContractAsync, isPending, isError } = useWriteContract();
   const { isSuccess: depositSuccess } = useWaitForTransactionReceipt({
     hash: depositHash,
@@ -91,7 +87,7 @@ function useDappnodeDeposit() {
             "This JSON file isn't for the right network (" +
               deposits[0].fork_version +
               "). Upload a file generated for you current network: " +
-              account.chainId
+              chainId
           );
         }
 
@@ -167,7 +163,7 @@ function useDappnodeDeposit() {
 
       return { deposits: newDeposits, hasDuplicates, _isBatch };
     },
-    [account, contractConfig, deposits]
+    [address, contractConfig, deposits]
   );
 
   const setDappnodeDepositData = useCallback(
@@ -223,7 +219,7 @@ function useDappnodeDeposit() {
         console.error(err);
       }
     }
-  }, [account, deposits]);
+  }, [address, deposits]);
 
   return {
     depositSuccess,
@@ -233,7 +229,6 @@ function useDappnodeDeposit() {
     setDappnodeDepositData,
     dappnodeDeposit,
     isWrongNetwork,
-    chainId,
     claimStatusPending: isPending,
     claimStatusError: isError,
   };