feat: fix little ui issues

sismo-core · Jul 22, 2023 · 119df1e · 119df1e
1 parent ba2e830
commit 119df1e
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]);