-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.tsx
62 lines (53 loc) · 1.68 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
import { App, Button, QRCode, Tag, message } from 'antd';
import { CheckCircleOutlined } from '@ant-design/icons';
import { query } from './query';
import { useState } from 'react';
import { getPolygonHelper } from '../../web3/contracts';
import { useProvider } from 'wagmi';
interface PolygonIDProps {
verified: boolean;
enabled: boolean;
onSuccess: () => void;
}
const PolygonID = ({ verified, enabled, onSuccess }: PolygonIDProps) => {
const provider = useProvider();
const { modal } = App.useApp();
const [isSuccess, setIsSuccess] = useState(false);
const qr = <QRCode value={JSON.stringify(query)} color="#6e38cc" size={512} />;
const listenToVerify = async (destroyModal: any) => {
console.log(`Listening to verify for Polygon...`);
const polygonContract = await getPolygonHelper(provider);
polygonContract.once('ProofAccepted', () => {
console.log(`Proof accepted for Polygon! Received the event!`);
onSuccess();
polygonContract.removeAllListeners('ProofAccepted');
destroyModal();
setIsSuccess(true);
message.success('Diploma via Polygon ID Verified!');
});
};
const onProof = () => {
const { destroy } = modal.info({
title: 'PolygonID ZK Diploma Verification',
content: qr,
width: 620,
centered: true,
okText: 'I am finished!',
});
listenToVerify(destroy);
};
return (
<>
{verified || isSuccess ? (
<Tag icon={<CheckCircleOutlined />} color="success">
Educated enough
</Tag>
) : (
<Button shape="round" onClick={onProof} disabled={!enabled}>
Prove GPA Score
</Button>
)}
</>
);
};
export default PolygonID;