feat: Improvements to interactive-demo (#78)

tlsnotary · Dec 4, 2024 · d7b250d · d7b250d
1 parent a82add9
commit d7b250d
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 60 deletions.
diff --git 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 <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?
diff --git 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 {
       <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 />

diff --git a/demo/interactive-demo/prover-ts/index.ejs b/demo/interactive-demo/prover-ts/index.ejs
@@ -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>
diff --git 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"
   }
-}
+}
diff --git 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',