Add a transacting state to deposit modal

ResearchHub · Dec 12, 2024 · 6e145f8 · 6e145f8
1 parent e9886f6
commit 6e145f8
Showing 1 changed file with 29 additions and 8 deletions.
diff --git a/components/Ethereum/DepositScreen.js b/components/Ethereum/DepositScreen.js
@@ -59,14 +59,23 @@ export function DepositScreen(props) {
     ],
   });
 
-  const { data, write } = useContractWrite(config);
+  const { data, write, isError } = useContractWrite({
+    ...config,
+    onError: (error) => {
+      setIsTransacting(false);
+      captureEvent({
+        error,
+        msg: "Deposit transaction rejected",
+        data: {
+          amount,
+          from_address: address,
+        },
+      });
+    },
+  });
   const [balance, setBalance] = useState(0);
 
-  const {
-    data: RSCBalance,
-    isError,
-    isLoading: isLoadingBalance,
-  } = useContractRead({
+  const { data: RSCBalance, isError: isLoadingBalance } = useContractRead({
     address: RSCContractAddress,
     abi: CONTRACT_ABI,
     functionName: "balanceOf",
@@ -86,8 +95,11 @@ export function DepositScreen(props) {
     setAmount(e.target.value);
   };
 
+  const [isTransacting, setIsTransacting] = useState(false);
+
   useEffect(() => {
     if (data?.hash) {
+      setIsTransacting(false);
       const PAYLOAD = {
         amount,
         transaction_hash: data.hash,
@@ -115,13 +127,16 @@ export function DepositScreen(props) {
 
   const signTransaction = async (e) => {
     e && e.preventDefault();
+    setIsTransacting(true);
 
     if (!signer) {
+      setIsTransacting(false);
       openWeb3ReactModal();
       return;
     }
 
     if (chain.id !== CHAIN_ID) {
+      setIsTransacting(false);
       switchNetwork(CHAIN_ID);
     }
 
@@ -168,8 +183,14 @@ export function DepositScreen(props) {
       />
       <div className={css(styles.buttonContainer)}>
         <Button
-          disabled={!ethAccount}
-          label={!RSCBalance ? "Connect Your Wallet" : "Confirm"}
+          disabled={!ethAccount || isTransacting}
+          label={
+            !RSCBalance
+              ? "Connect Your Wallet"
+              : isTransacting
+              ? "Processing..."
+              : "Confirm"
+          }
           type="submit"
           customButtonStyle={styles.button}
           rippleClass={styles.button}