feat: add a button to claim withdrawals

src/hooks/use-claim-balance.js

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+import useDepositContract from "./use-deposit-contract";
+
+function useClaimBalance(depositContractAddress, wallet) {
+  const contract = useDepositContract(depositContractAddress, wallet);
+  const [balance, setBalance] = useState(0n);
+
+  useEffect(() => {
+    if (!contract) {
+      return;
+    }
+
+    contract.withdrawableAmount(wallet.address).then(setBalance);
+  }, [contract, wallet.address]);
+
+  return balance;
+}
+
+export default useClaimBalance;

src/hooks/use-deposit-contract.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+import { Contract } from "ethers";
+
+import depositAbi from "../abis/deposit";
+
+function useDepositContract(depositContractAddress, wallet) {
+  const [contract, setContract] = useState();
+
+  useEffect(() => {
+    if (!depositContractAddress || !wallet) {
+      return;
+    }
+
+    const contract = new Contract(
+      depositContractAddress,
+      depositAbi,
+      wallet.provider.getSigner()
+    );
+    setContract(contract);
+  }, [depositContractAddress, wallet]);
+
+  return contract;
+}
+
+export default useDepositContract;

src/hooks/use-stepper-data.js

@@ -9,6 +9,7 @@ export const Step = {
   DepositPending: 'deposit_pending',
   DepositOverview: 'deposit_overview',
   ValidatorStatus: 'validator_status',
+  WithdrawalClaim: 'withdrawal_claim'
 }
 
 function useStepperData () {

src/views/stepper/stepper.view.jsx

@@ -20,6 +20,7 @@ import ValidatorStatus from '../validator-status/validator-status.view'
 import useDappnodeWhitelist from '../../hooks/use-dappnode-whitelist'
 import useDappnodeContract from '../../hooks/use-dappnode-contract'
 import { NETWORKS } from '../../constants';
+import WithdrawalClaim from '../withdrawal-claim/withdrawal-claim.view'
 
 function Stepper () {
   const classes = useStepperStyles()
@@ -41,6 +42,7 @@ function Stepper () {
   const tabs = [{ name: 'Deposit', step: Step.Deposit }]
   if(network && network.addresses.dappnodeDeposit)
     tabs.push({ name: 'DAppNode', step: Step.DappNodeDeposit })
+  tabs.push({name:'Withdrawal Claim', step: Step.WithdrawalClaim })
   tabs.push({ name: 'Validator Status', step: Step.ValidatorStatus })
 
   const [activeTab, setActiveTab] = useState(tabs[0].name)
@@ -82,7 +84,7 @@ function Stepper () {
               key={tab.name}
               className={activeTab === tab.name ? classes.tabActive : classes.tab}
               onClick={() => selectTab(tab)}
-              disabled={![Step.Deposit, Step.DappNodeDeposit, Step.DepositOverview, Step.ValidatorStatus].includes(step)}
+              disabled={![Step.Deposit, Step.DappNodeDeposit, Step.DepositOverview, Step.ValidatorStatus, Step.WithdrawalClaim].includes(step)}
             >
               <span className={classes.tabName}>{tab.name}</span>
             </button>
@@ -204,6 +206,14 @@ function Stepper () {
                 />
               )
             }
+            case Step.WithdrawalClaim: {
+              return <WithdrawalClaim
+                wallet={wallet}
+                network={network}
+                tokenInfo={tokenInfo}
+                balance={tokenBalance}
+                onDisconnectWallet={disconnectWallet} />
+            }
             default: {
               return <></>
             }

src/views/withdrawal-claim/withdrawal-claim.styles.js

@@ -0,0 +1,32 @@
+import { createUseStyles } from "react-jss";
+
+const useStyles = createUseStyles((theme) => ({
+  container: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    paddingTop: theme.spacing(0),
+    paddingBottom: theme.spacing(4),
+  },
+  claimButton: {
+    fontSize: theme.spacing(2),
+    fontWeight: theme.fontWeights.bold,
+    margin: `${theme.spacing(12)}px auto ${theme.spacing(4)}px`,
+    padding: `${theme.spacing(3)}px 0`,
+    background: theme.palette.primary,
+    color: theme.palette.white,
+    width: "40%",
+    borderRadius: theme.spacing(12.5),
+    appearance: "none",
+    border: "none",
+    transition: theme.buttonTransition,
+    cursor: "pointer",
+    "&:disabled": {
+      background: theme.palette.grey.dark,
+      cursor: "default",
+    },
+  },
+}));
+
+export default useStyles;

src/views/withdrawal-claim/withdrawal-claim.view.jsx

@@ -0,0 +1,55 @@
+import Header from "../shared/header/header.view";
+import useStyles from "./withdrawal-claim.styles";
+import useClaimBalance from "../../hooks/use-claim-balance";
+import { formatUnits } from "ethers/lib/utils";
+import useDepositContract from "../../hooks/use-deposit-contract";
+import { useState } from "react";
+
+function WithdrawalClaim({ network, wallet, onDisconnectWallet, tokenInfo }) {
+  const classes = useStyles();
+  const claimBalance = useClaimBalance(network.addresses.deposit, wallet);
+  const contract = useDepositContract(network.addresses.deposit, wallet);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const onClaim = async () => {
+    setLoading(true);
+    setError("");
+
+    try {
+      await contract.claimWithdrawal(wallet.address);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className={classes.container}>
+      <Header
+        address={wallet.address}
+        title="Gnosis Withdrawal Claims"
+        onDisconnectWallet={onDisconnectWallet}
+        tokenInfo={tokenInfo}
+        network={network}
+      />
+
+      <div style={{ marginTop: "64px" }}>
+        Claimable balance:{" "}
+        {Number(formatUnits(claimBalance, tokenInfo.decimals))}{" "}
+        {tokenInfo.symbol}
+      </div>
+      <button
+        className={classes.claimButton}
+        onClick={onClaim}
+        disabled={loading}
+      >
+        Claim
+      </button>
+      {error}
+    </div>
+  );
+}
+
+export default WithdrawalClaim;