diff --git a/demo/interactive-demo/README.md b/demo/interactive-demo/README.md index 330de72..1dfb89c 100644 --- a/demo/interactive-demo/README.md +++ b/demo/interactive-demo/README.md @@ -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 and click **Start Prover** \ No newline at end of file + 3. Open 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? \ No newline at end of file diff --git a/demo/interactive-demo/prover-ts/app.tsx b/demo/interactive-demo/prover-ts/app.tsx index fa2a412..0b63fe2 100644 --- a/demo/interactive-demo/prover-ts/app.tsx +++ b/demo/interactive-demo/prover-ts/app.tsx @@ -33,56 +33,79 @@ function App(): ReactElement { const verifierProxyUrl = 'ws://localhost:9816/verify'; const hostname = new URL(url).hostname; - console.time('setup'); - - await init({ loggingLevel: 'Info' }); - - 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'); - - console.timeEnd('setup'); - - 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'); + 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; + } + + let transcript; + try { + 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'); + 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; + } + + 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'); + + } 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 {
Before clicking the start button, make sure the{' '} interactive verifier and the web socket proxy are running. - Check the README for the details. + Check the README for the details.

diff --git a/demo/interactive-demo/prover-ts/index.ejs b/demo/interactive-demo/prover-ts/index.ejs index 7bd6dac..c39083c 100644 --- a/demo/interactive-demo/prover-ts/index.ejs +++ b/demo/interactive-demo/prover-ts/index.ejs @@ -4,13 +4,13 @@ - React/Typescrip Example + React/Typescript Example - -
+ +
\ No newline at end of file diff --git a/demo/interactive-demo/prover-ts/package.json b/demo/interactive-demo/prover-ts/package.json index 0a701e1..324d105 100644 --- a/demo/interactive-demo/prover-ts/package.json +++ b/demo/interactive-demo/prover-ts/package.json @@ -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" } -} \ No newline at end of file +} diff --git a/demo/interactive-demo/prover-ts/webpack.js b/demo/interactive-demo/prover-ts/webpack.js index bf71b21..a3b0fc5 100644 --- a/demo/interactive-demo/prover-ts/webpack.js +++ b/demo/interactive-demo/prover-ts/webpack.js @@ -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',