-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.tsx
85 lines (74 loc) · 2.44 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import { CheckCircleOutlined } from '@ant-design/icons';
import { Tag, Button, message } from 'antd';
import { SISMO_CLAIM, SISMO_CONFIG, SISMO_GROUP_ID } from '../ClaimHelperCard/consts';
import { useAddRecentTransaction } from '@rainbow-me/rainbowkit';
import { ContractTransaction } from 'ethers';
import { useEffect, useState } from 'react';
import { useSigner } from 'wagmi';
import { getSismoHelper } from '../../web3/contracts';
import { useSismoConnect } from '@sismo-core/sismo-connect-react';
interface SismoConnectProps {
verified: boolean;
enabled: boolean;
onSuccess: () => void;
}
export default function SismoConnect({ verified, enabled, onSuccess }: SismoConnectProps) {
const { data: signer } = useSigner();
const addRecentTransaction = useAddRecentTransaction();
const [isLoading, setIsLoading] = useState(false);
const [isSuccess, setIsSuccess] = useState(false);
const { sismoConnect, responseBytes } = useSismoConnect({
config: SISMO_CONFIG
});
const onVerify = async (responseBytes: string) => {
console.log(`In sismo verification loop with ${responseBytes}`);
if (!signer) {
return message.error('Connect the wallet first');
}
setIsLoading(true);
try {
const sismoHelper = await getSismoHelper(signer);
const tx: ContractTransaction = await sismoHelper
.verify(SISMO_GROUP_ID, responseBytes);
addRecentTransaction({
hash: tx.hash,
description: 'Verify ETHGlobal Staking via Sismo Proof',
});
const receipt = await tx.wait();
console.log(`Sismo transaction responded with: ${receipt}`);
setIsSuccess(true);
onSuccess();
message.success('ETHGlobal Staking via Sismo Verified!');
} catch (err: any) {
console.log(err);
message.error(err.reason ?? err.message);
} finally {
setIsLoading(false);
}
};
const onSismoProofRequest = () => {
sismoConnect.request({ claim: SISMO_CLAIM });
};
useEffect(() => {
if (!responseBytes || !signer) return;
onVerify(responseBytes);
}, [responseBytes, signer]);
return (
<>
{(verified || isSuccess) ? (
<Tag icon={<CheckCircleOutlined />} color="success">
ETHGlobal Staker, wow!
</Tag>
) : (
<Button
shape="round"
onClick={onSismoProofRequest}
loading={isLoading}
disabled={!enabled}
>
Prove with Sismo
</Button>
)}
</>
);
}