Skip to content

Commit

Permalink
feat: fix little ui issues
Browse files Browse the repository at this point in the history
  • Loading branch information
yum0e committed Jul 21, 2023
1 parent 34e167b commit eb6d08c
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 13 deletions.
19 changes: 12 additions & 7 deletions front/src/app/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 6 additions & 1 deletion front/src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
});
}
}

Expand Down
14 changes: 9 additions & 5 deletions front/src/utils/useContract.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
Expand Down

0 comments on commit eb6d08c

Please sign in to comment.