From dc658680ed6b02f421c251172517221a7b1b47c9 Mon Sep 17 00:00:00 2001
From: Hendrik Eeckhaut <hendrik@eeckhaut.org>
Date: Tue, 14 Jan 2025 09:42:07 +0100
Subject: [PATCH] Improved React demo

---
 demo/react-ts-webpack/src/app.tsx | 131 ++++++++++++++++++++----------
 1 file changed, 90 insertions(+), 41 deletions(-)

diff --git a/demo/react-ts-webpack/src/app.tsx b/demo/react-ts-webpack/src/app.tsx
index 9810d2e..bb1e907 100644
--- a/demo/react-ts-webpack/src/app.tsx
+++ b/demo/react-ts-webpack/src/app.tsx
@@ -21,6 +21,14 @@ const root = createRoot(container!);
 
 root.render(<App />);
 
+const local = true; // Toggle between local and remote notary
+const notaryUrl = local ? 'http://localhost:7047' : 'https://notary.pse.dev/v0.1.0-alpha.7';
+const websocketProxyUrl = local ? 'ws://localhost:55688' : 'wss://notary.pse.dev/proxy?token=swapi.dev';
+const loggingLevel = 'Info'; // https://github.com/tlsnotary/tlsn/blob/main/crates/wasm/src/log.rs#L8
+
+const serverUrl = 'https://swapi.dev/api/people/1';
+const serverDns = 'swapi.dev';
+
 function App(): ReactElement {
   const [initialized, setInitialized] = useState(false);
   const [processing, setProcessing] = useState(false);
@@ -30,22 +38,24 @@ function App(): ReactElement {
 
   useEffect(() => {
     (async () => {
-      await init({ loggingLevel: 'Info' });
+      await init({ loggingLevel: loggingLevel });
       setInitialized(true);
     })();
   }, []);
 
   const onClick = useCallback(async () => {
     setProcessing(true);
-    const notary = NotaryServer.from(`http://localhost:7047`);
+    const notary = NotaryServer.from(notaryUrl);
     console.time('submit');
     const prover = (await new Prover({
-      serverDns: 'swapi.dev',
+      serverDns: serverDns,
+      maxRecvData: 2048,
     })) as TProver;
 
     await prover.setup(await notary.sessionUrl());
-    const resp = await prover.sendRequest('ws://localhost:55688', {
-      url: 'https://swapi.dev/api/people/1',
+
+    const resp = await prover.sendRequest(websocketProxyUrl, {
+      url: serverUrl,
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
@@ -99,13 +109,14 @@ function App(): ReactElement {
   const onAltClick = useCallback(async () => {
     setProcessing(true);
     const proof = await (Prover.notarize as typeof TProver.notarize)({
-      notaryUrl: 'http://localhost:7047',
-      websocketProxyUrl: 'ws://localhost:55688',
-      url: 'https://swapi.dev/api/people/1',
+      notaryUrl: notaryUrl,
+      websocketProxyUrl: websocketProxyUrl,
+      url: serverUrl,
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
       },
+
       body: {
         hello: 'world',
         one: 1,
@@ -125,7 +136,7 @@ function App(): ReactElement {
         const proof = (await new Presentation(
           presentationJSON.data,
         )) as TPresentation;
-        const notary = NotaryServer.from(`http://localhost:7047`);
+        const notary = NotaryServer.from(notaryUrl);
         const notaryKey = await notary.publicKey('hex');
         const verifierOutput = await proof.verify();
         const transcript = new Transcript({
@@ -151,26 +162,78 @@ function App(): ReactElement {
       <h1 className="text-2xl font-bold mb-6 text-slate-700">
         TLSNotary React TypeScript Demo{' '}
       </h1>
-      <div className="mb-4">
-        <button
-          onClick={!processing ? onClick : undefined}
-          disabled={processing || !initialized}
-          className={`px-4 py-2 rounded-md text-white shadow-md font-semibold
-            ${processing || !initialized ? 'bg-slate-400 cursor-not-allowed' : 'bg-slate-600 hover:bg-slate-700'}`}
-        >
-          Start Demo (Normal config)
-        </button>
+      <div className="mb-4 max-w-2xl">
+        <p>
+          This demo showcases how to use TLSNotary in a React/TypeScript app with the tlsn-js library.
+          We will fetch JSON data from the Star Wars API, notarize the TLS request using TLSNotary,
+          and verify the proof. The demo runs entirely in the browser.
+        </p>
+        <p>
+          <a href="https://docs.tlsnotary.org/quick_start/tlsn-js.html" className="text-blue-500 hover:underline">
+            More info
+          </a>
+        </p>
+        <table className="table-auto w-full mt-4">
+          <thead>
+            <tr>
+              <th className="px-4 py-2 text-left">Demo Settings</th>
+              <th className="px-4 py-2 text-left">URL</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td className="border px-4 py-2">Server</td>
+              <td className="border px-4 py-2">{serverUrl}</td>
+            </tr>
+            <tr>
+              <td className="border px-4 py-2">Notary Server</td>
+              <td className="border px-4 py-2">{notaryUrl}</td>
+            </tr>
+            <tr>
+              <td className="border px-4 py-2">WebSocket Proxy</td>
+              <td className="border px-4 py-2">{websocketProxyUrl}</td>
+            </tr>
+          </tbody>
+        </table>
       </div>
+
       <div className="mb-4">
-        <button
-          onClick={!processing ? onAltClick : undefined}
-          disabled={processing || !initialized}
-          className={`px-4 py-2 rounded-md text-white shadow-md font-semibold
-            ${processing || !initialized ? 'bg-slate-400 cursor-not-allowed' : 'bg-slate-600 hover:bg-slate-700'}`}
-        >
-          Start Demo 2 (With helper method)
-        </button>
+        <p className="mb-2">
+          There are two versions of the demo: one with a normal config and one with a helper method.
+        </p>
+        <div className="flex justify-center gap-4">
+          <button
+            onClick={!processing ? onClick : undefined}
+            disabled={processing || !initialized}
+            className={`px-4 py-2 rounded-md text-white shadow-md font-semibold
+          ${processing || !initialized ? 'bg-slate-400 cursor-not-allowed' : 'bg-slate-600 hover:bg-slate-700'}`}
+          >
+            Start Demo (Normal config)
+          </button>
+          <button
+            onClick={!processing ? onAltClick : undefined}
+            disabled={processing || !initialized}
+            className={`px-4 py-2 rounded-md text-white shadow-md font-semibold
+          ${processing || !initialized ? 'bg-slate-400 cursor-not-allowed' : 'bg-slate-600 hover:bg-slate-700'}`}
+          >
+            Start Demo 2 (With helper method)
+          </button>
+        </div>
       </div>
+      {processing && (
+        <div className="mt-6 flex justify-center items-center">
+          <Watch
+            visible={true}
+            height="40"
+            width="40"
+            radius="48"
+            color="#1E293B"
+            ariaLabel="watch-loading"
+            wrapperStyle={{}}
+            wrapperClass=""
+          />
+        </div>
+      )}
       <div className="flex flex-col sm:flex-row gap-6 w-full max-w-4xl">
         <div className="flex-1 bg-slate-50 border border-slate-200 rounded p-4">
           <b className="text-slate-600">Proof: </b>
@@ -178,7 +241,7 @@ function App(): ReactElement {
             <i className="text-slate-500">not started</i>
           ) : !presentationJSON ? (
             <div className="flex flex-col items-start space-y-2">
-              <span>Proving data from swapi...</span>
+              <span>Proving data from {serverDns}...</span>
               <span className="text-slate-500">
                 Open <i>Developer tools</i> to follow progress
               </span>
@@ -207,20 +270,6 @@ function App(): ReactElement {
           )}
         </div>
       </div>
-      {processing && (
-        <div className="mt-6 flex justify-center items-center">
-          <Watch
-            visible={true}
-            height="40"
-            width="40"
-            radius="48"
-            color="#1E293B"
-            ariaLabel="watch-loading"
-            wrapperStyle={{}}
-            wrapperClass=""
-          />
-        </div>
-      )}
     </div>
   );
 }