feat: remove switch network competition, hide claim button with errors,

add error support when contract not deployed
sismo-core · Jul 17, 2023 · 6253f86 · 6253f86
1 parent 64184b6
commit 6253f86
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 25 deletions.
diff --git a/front/src/app/page.tsx b/front/src/app/page.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react";
 import Header from "./components/Header";
-import { useAccount, useNetwork, useSwitchNetwork } from "wagmi";
+import { useAccount, useNetwork } from "wagmi";
 import { useConnectModal } from "@rainbow-me/rainbowkit";
 import {
   formatError,
@@ -45,7 +45,6 @@ export default function Home() {
     onConnect: async ({ address }) => address && (await fundMyAccountOnLocalFork(address)),
   });
   const { chain } = useNetwork();
-  const { switchNetwork } = useSwitchNetwork();
   const { openConnectModal, connectModalOpen } = useConnectModal();
 
   const { airdropContract, switchNetworkAsync, waitingForTransaction, error } = useContract({
@@ -58,7 +57,8 @@ export default function Home() {
     setAppState((prev) => {
       return { ...prev, pageState: "responseReceived" };
     });
-  }, [responseBytes]);
+    setClaimError(error);
+  }, [responseBytes, error, claimError]);
 
   /* *************************  Reset state **************************** */
   function resetApp() {
@@ -111,6 +111,10 @@ export default function Home() {
       }
     } catch (e: any) {
       setClaimError(formatError(e));
+    } finally {
+      setAppState((prev) => {
+        return { ...prev, pageState: "responseReceived" };
+      });
     }
   }
 
@@ -156,25 +160,34 @@ export default function Home() {
                 />
               </>
             )}
-            <div className="status-wrapper">
-              {appState.pageState == "responseReceived" && (
-                <button onClick={() => claimAirdrop()}>{"Claim"}</button>
-              )}
-              {appState.pageState == "confirmingTransaction" && (
-                <button disabled={true}>{"Confirm tx in wallet"}</button>
-              )}
-              {appState.pageState == "verifying" && (
-                <span className="verifying"> Verifying ZK Proofs onchain... </span>
-              )}
-              {appState.pageState == "verified" && (
-                <span className="verified"> ZK Proofs Verified! </span>
-              )}
-            </div>
-            {isConnected && !appState.amountClaimed && (error || claimError) && (
+            {claimError !== null && (
+              <div className="status-wrapper">
+                {appState.pageState == "responseReceived" && (
+                  <button onClick={() => claimAirdrop()}>{"Claim"}</button>
+                )}
+                {appState.pageState == "confirmingTransaction" && (
+                  <button disabled={true}>{"Confirm tx in wallet"}</button>
+                )}
+                {appState.pageState == "verifying" && (
+                  <span className="verifying"> Verifying ZK Proofs onchain... </span>
+                )}
+                {appState.pageState == "verified" && (
+                  <span className="verified"> ZK Proofs Verified! </span>
+                )}
+              </div>
+            )}
+            {isConnected && !appState.amountClaimed && claimError && (
               <>
-                <p style={{ color: "#ff6347" }}>{error}</p>
-                {error.slice(0, 16) === "Please switch to" && (
-                  <button onClick={() => switchNetwork?.(CHAIN.id)}>Switch chain</button>
+                <p style={{ color: "#ff6347" }}>{claimError}</p>
+                {claimError.slice(0, 50) ===
+                  'The contract function "balanceOf" returned no data' && (
+                  <p style={{ color: "#0BDA51" }}>
+                    Please restart your frontend with "yarn dev" command and try again, it will
+                    automatically deploy a new contract for you!
+                  </p>
+                )}
+                {claimError.slice(0, 16) === "Please switch to" && (
+                  <button onClick={() => switchNetworkAsync?.(CHAIN.id)}>Switch chain</button>
                 )}
               </>
             )}

diff --git a/front/src/utils/useContract.tsx b/front/src/utils/useContract.tsx
@@ -57,6 +57,7 @@ export default function useContract({
     async function simulate() {
       try {
         await airdropContract.simulate.claimWithSismo([responseBytes, address]);
+        await airdropContract.simulate.balanceOf([address]);
       } catch (e: any) {
         return setError(formatError(e));
       }
@@ -72,10 +73,8 @@ export default function useContract({
     if (chain.id === 5151111) {
       const timeout = new Promise((_, reject) =>
         setTimeout(() => {
-          reject(
-            new Error(
-              "Transaction timed-out: If you are running a local fork on Anvil please make sure to reset your wallet nonce. In metamask:  Go to settings > advanced > clear activity and nonce data"
-            )
+          setError(
+            "Transaction timed-out: If you are running a local fork on Anvil please make sure to reset your wallet nonce. In metamask:  Go to settings > advanced > clear activity and nonce data"
           );
         }, 10000)
       );