feat: fix little ui issues

sismo-core · Jul 21, 2023 · eb6d08c · eb6d08c
1 parent 34e167b
commit eb6d08c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 13 deletions.
diff --git a/front/src/app/components/Header.tsx b/front/src/app/components/Header.tsx
@@ -16,25 +16,30 @@ const Header: React.FC = () => {
         the frontend <br />
         3. The frontend forwards the response to ERC20 smart contract via claimWithSismo function{" "}
         <br />
-        4. The smart contract verifies the proofs contained in the response and stores
-        verified claims and auths <br />
+        4. The smart contract verifies the proofs contained in the response and stores verified
+        claims and auths <br />
         5. The frontend reads the verified claims and auths from the contract and displays them
       </p>
       <div>
         <p>
-          <b className="code-snippet">front/src/app/page.tsx</b>: Frontend - Integrate Sismo Connect Button and make Sismo Connect request
+          <b className="code-snippet">front/src/app/page.tsx</b>: Frontend - Integrate Sismo Connect
+          Button and make Sismo Connect request
         </p>
         <p>
-          <b className="code-snippet">front/src/app/sismo-connect-config.ts</b>: Sismo Connect configuration and requests
+          <b className="code-snippet">front/src/app/sismo-connect-config.ts</b>: Sismo Connect
+          configuration and requests
         </p>
         <p>
-          <b className="code-snippet">src/Airdrop.sol</b>: Contract - verifies Sismo Connect response and stores verified claims, auths and signed message
+          <b className="code-snippet">src/Airdrop.sol</b>: Contract - verifies Sismo Connect
+          response and stores verified claims, auths and signed message
         </p>
         <p className="callout">
           {" "}
           Notes: <br />
-          1. You should exactly the same Configuration (AppId and impersonation), AuthRequests and ClaimsRequests in the frontend and in your contract <br />
-          2. If you are using metamask and transactions hang. Go to settings > advanced > clear activity and nonce data <br />
+          1. You should exactly have the same Configuration (AppId and impersonation), AuthRequests
+          and ClaimsRequests in the frontend and in your contract <br />
+          2. If you are using metamask and transactions hang. Go to settings &gt; advanced &gt;
+          clear activity and nonce data <br />
           3. First ZK Proof generation takes longer time, especially with bad internet as there is a
           zkey file to download once in the data vault connection <br />
           4. The more proofs you request, the longer it takes to generate them (about 2 secs per

diff --git a/front/src/app/page.tsx b/front/src/app/page.tsx
@@ -110,7 +110,12 @@ export default function Home() {
     } catch (e: any) {
       setClaimError(formatError(e));
     } finally {
-      setPageState("responseReceived");
+      setPageState((prev) => {
+        if (prev === "verified") {
+          return "verified";
+        }
+        return "responseReceived";
+      });
     }
   }
 

diff --git a/front/src/utils/useContract.tsx b/front/src/utils/useContract.tsx
@@ -77,11 +77,15 @@ export default function useContract({
     let txReceipt: TransactionReceipt | undefined;
     if (chain.id === 5151111) {
       const timeout = new Promise((_, reject) =>
-        setTimeout(() => {
-          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)
+        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"
+              )
+            ),
+          10000
+        )
       );
       const txReceiptPromise = hash && waitForTransaction({ hash: hash });
       const race = await Promise.race([txReceiptPromise, timeout]);