tlsnotary/tlsn-js
1
0
Fork 0
mirror of https://github.com/tlsnotary/tlsn-js.git synced 2026-01-09 20:47:55 -05:00
Code Issues Packages Projects Releases 10 Wiki Activity

feat: Improvements to interactive-demo (#78)

Browse Source
This commit is contained in:
Hendrik Eeckhaut
2024-12-04 11:53:01 +01:00
committed by GitHub
parent a82add9a05
commit d7b250db45
5 changed files with 93 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
demo/interactive-demo/README.md
View File

@@ -28,11 +28,18 @@ wstcp --bind-addr 127.0.0.1:55688 swapi.dev:443
npm run build
npm link
```
2. Build demo prover-ts
2. Build demo prover-ts
```bash
cd prover-ts
npm i
npm link
npm run dev
```
3. Open <http://localhost:8080/> and click **Start Prover**
3. Open <http://localhost:8080/> and click **Start Prover**
## Troubleshooting
* `Failed to connect to the server. CloseEvent...`:
* Did you start the Verifier?
* Did you start the Websocket Proxy?
* Is the Server online?

121
demo/interactive-demo/prover-ts/app.tsx
View File

@@ -33,56 +33,79 @@ function App(): ReactElement {
const verifierProxyUrl = 'ws://localhost:9816/verify';
const hostname = new URL(url).hostname;
console.time('setup');
let prover: TProver;
try {
console.time('setup');
await init({ loggingLevel: 'Info' });
console.log('Setting up Prover for', hostname);
prover = (await new Prover({ serverDns: hostname })) as TProver;
console.log('Setting up Prover: 1/2');
await prover.setup(verifierProxyUrl);
console.log('Setting up Prover: done');
console.timeEnd('setup');
} catch (error) {
const msg = `Error setting up prover: ${error}`;
console.error(msg);
setResult(msg);
setProcessing(false);
return;
}
await init({ loggingLevel: 'Info' });
let transcript;
try {
console.time('request');
console.log('Sending request to proxy');
console.log('Setting up Prover for', hostname);
const prover = (await new Prover({ serverDns: hostname })) as TProver;
console.log('Setting up Prover: 1/2');
await prover.setup(verifierProxyUrl);
console.log('Setting up Prover: done');
const resp = await prover.sendRequest(
`${websocketProxyUrl}?token=${hostname}`,
{ url, method, headers, body },
);
console.log('Response:', resp);
console.log('Wait for transcript');
transcript = await prover.transcript();
console.log('Transcript:', transcript);
console.timeEnd('request');
} catch (error) {
const msg = `Error sending request: ${error}`;
console.error(msg);
setResult(msg);
setProcessing(false);
return;
}
console.timeEnd('setup');
try {
console.time('reveal');
const reveal = {
sent: [
transcript.ranges.sent.info!,
transcript.ranges.sent.headers!['connection'],
transcript.ranges.sent.headers!['host'],
transcript.ranges.sent.headers!['content-type'],
transcript.ranges.sent.headers!['content-length'],
...transcript.ranges.sent.lineBreaks,
],
recv: [
transcript.ranges.recv.info!,
transcript.ranges.recv.headers['server'],
transcript.ranges.recv.headers['date'],
transcript.ranges.recv.headers['content-type'],
transcript.ranges.recv.json!['name'],
transcript.ranges.recv.json!['eye_color'],
transcript.ranges.recv.json!['gender'],
...transcript.ranges.recv.lineBreaks,
],
};
console.log('Start reveal:', reveal);
await prover.reveal(reveal);
console.timeEnd('reveal');
console.time('request');
console.log('Sending request to proxy');
const resp = await prover.sendRequest(
`${websocketProxyUrl}?token=${hostname}`,
{ url, method, headers, body },
);
console.log('Response:', resp);
console.log('Wait for transcript');
const transcript = await prover.transcript();
console.log('Transcript:', transcript);
console.timeEnd('request');
console.time('reveal');
const reveal = {
sent: [
transcript.ranges.sent.info!,
transcript.ranges.sent.headers!['connection'],
transcript.ranges.sent.headers!['host'],
transcript.ranges.sent.headers!['content-type'],
transcript.ranges.sent.headers!['content-length'],
...transcript.ranges.sent.lineBreaks,
],
recv: [
transcript.ranges.recv.info!,
transcript.ranges.recv.headers['server'],
transcript.ranges.recv.headers['date'],
transcript.ranges.recv.headers['content-type'],
transcript.ranges.recv.json!['name'],
transcript.ranges.recv.json!['eye_color'],
transcript.ranges.recv.json!['gender'],
...transcript.ranges.recv.lineBreaks,
],
};
console.log('Start reveal:', reveal);
await prover.reveal(reveal);
console.timeEnd('reveal');
} catch (error) {
console.dir(error);
console.error('Error during data reveal:', error);
setResult(`${error}`);
setProcessing(false);
return;
}
console.log('Ready');
@@ -91,9 +114,11 @@ function App(): ReactElement {
received: transcript.recv,
});
setResult('Unredacted data successfully revealed to Verifier.');
setResult('Unredacted data successfully revealed to Verifier. Check the Verifier\'s console output to see what exactly was shared and revealed.');
setProcessing(false);
}, [setResult, setProcessing]);
return (
@@ -102,7 +127,7 @@ function App(): ReactElement {
<div>
Before clicking the start button, make sure the{' '}
<i>interactive verifier</i> and the <i>web socket proxy</i> are running.
Check the README for the details.
Check the <a href="README.md">README</a> for the details.
</div>
<br />

8
demo/interactive-demo/prover-ts/index.ejs
View File

@@ -4,13 +4,13 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React/Typescrip Example</title>
<title>React/Typescript Example</title>
</head>
<body>
<script>
</script>
<div id="root"></div>
<script>
</script>
<div id="root"></div>
</body>
</html>

4
demo/interactive-demo/prover-ts/package.json
View File

@@ -12,7 +12,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-loader-spinner": "^6.1.6",
"tlsn-js": "file:../.."
"tlsn-js": "file:../../.."
},
"devDependencies": {
"@types/react": "^18.0.26",
@@ -27,4 +27,4 @@
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
}
}
}

5
demo/interactive-demo/prover-ts/webpack.js
View File

@@ -86,6 +86,11 @@ var options = {
},
],
}),
new CopyWebpackPlugin({
patterns: [
{ from: '../README.md', to: 'README.md' },
],
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'index.ejs'),
filename: 'index.html',