-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.tsx
90 lines (85 loc) · 2.46 KB
/
app.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
86
87
88
89
90
import React, { ReactElement, useCallback, useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { prove, verify } from 'tlsn-js';
import { Proof } from 'tlsn-js/build/types';
import { Watch } from 'react-loader-spinner'
const container = document.getElementById('root');
const root = createRoot(container!);
const Kub= 1;
root.render(<App />);
function App(): ReactElement {
const [processing, setProcessing] = useState(false);
const [result, setResult] = useState<{
time: number;
sent: string;
recv: string;
notaryUrl: string;
} | null>(null);
const [proof, setProof] = useState<Proof | null>(null);
///https://taipei-backend.vercel.app/api/sign-token/credit/
/// method: 'POST',
////body:`{"name":"Rahul","id":69420}`,
const onClick = useCallback(async () => {
setProcessing(true);
const p = await prove('https://taipei-backend.vercel.app/api/sign-token/credit', {
method: 'POST',
maxTranscriptSize: 16384,
notaryUrl: 'https://notary.pse.dev',
websocketProxyUrl: 'ws://localhost:55688',
body: '{"name": "Rahul", "id": 69420}'
});
setProof(p);
}, [setProof, setProcessing]);
useEffect(() => {
(async () => {
if (proof) {
const r = await verify(proof);
setResult(r);
setProcessing(false);
}
})();
}, [proof, setResult]);
return (
<div>
<button onClick={!processing ? onClick : undefined} disabled={processing}>
Start demo
</button>
<div>
<b>Proof: </b>
{!processing && !proof
? <i>not started</i>
: !proof
? <>
Proving data from swapi...
<Watch
visible={true}
height="40"
width="40"
radius="48"
color="#000000"
ariaLabel="watch-loading"
wrapperStyle={{}}
wrapperClass=""
/>
Open <i>Developer tools</i> to follow progress
</>
: <>
<details>
<summary>View Proof</summary>
<pre>{JSON.stringify(proof, null, 2)}</pre>
</details>
</>
}
</div>
<div>
<b>Verification: </b>
{!proof
? <i>not started</i>
: !result
? <i>verifying</i>
: <pre>{JSON.stringify(result, null, 2)}</pre>
}
</div>
</div>
);
}