Added explanation at the top

tlsnotary · Dec 3, 2024 · bc17b81 · bc17b81
1 parent 95259f6
commit bc17b81
Showing 1 changed file with 43 additions and 35 deletions.
diff --git a/demo/web-to-web-p2p/src/app.tsx b/demo/web-to-web-p2p/src/app.tsx
@@ -186,47 +186,55 @@ function App(): ReactElement {
     addVerifierLog('Verified data:');
     addVerifierLog(`transcript.sent: ${t.sent()}`);
     addVerifierLog(`transcript.recv: ${t.recv()}`);
+    setStarted(false);
   }, [ready]);
 
   return (
-    <div className="w-screen h-screen grid grid-rows-2 grid-cols-2 p-2 gap-2">
-      <div className="flex flex-col items-center border border-slate-300 bg-slate-50 rounded row-span-1 col-span-1 p-4 gap-2">
-        <div className="font-semibold">Prover</div>
-        <div className="flex flex-col text-sm bg-white border border-slate-300 w-full flex-grow cursor-text py-1 overflow-y-auto">
-          {proverMessages.map((m, index) => (
-            <span key={index} className="px-2 py-1 text-slate-600 break-all">{m}</span>
-          ))}
-        </div>
+    <div>
+      <div style={{ width: '100%', padding: '10px', backgroundColor: '#f0f0f0', marginBottom: '20px' }}>
+        <h1>Web-to-Web P2P Demo</h1>
+        <p>This demo showcases peer-to-peer communication between a web prover and a web verifier using TLSNotary. The prover fetches data from <a href="https://swapi.dev" target="_blank" rel="noopener noreferrer">swapi.dev</a> and proves it to the verifier.</p>
       </div>
-      <div className="flex flex-col items-center border border-slate-300 bg-slate-100 rounded row-span-1 col-span-1 p-4 gap-2">
-        <div className="font-semibold">Verifier</div>
-        <div className="flex flex-col text-sm bg-white border border-slate-300 w-full flex-grow cursor-text py-1 overflow-y-auto">
-          {verifierMessages.map((m, index) => (
-            <span key={index} className="px-1 py-0.5 text-slate-600 break-all">{m}</span>
-          ))}
+
+      <div className="w-screen h-screen grid grid-rows-2 grid-cols-2 p-2 gap-2">
+        <div className="flex flex-col items-center border border-slate-300 bg-slate-50 rounded row-span-1 col-span-1 p-4 gap-2">
+          <div className="font-semibold">Prover</div>
+          <div className="flex flex-col text-sm bg-white border border-slate-300 w-full flex-grow cursor-text py-1 overflow-y-auto">
+            {proverMessages.map((m, index) => (
+              <span key={index} className="px-2 py-1 text-slate-600 break-all">{m}</span>
+            ))}
+          </div>
         </div>
-      </div>
-      <div className="flex flex-row justify-center row-span-1 col-span-2">
-        <Button className="h-fit" disabled={!ready || started} onClick={start}>
-          <div>
-            {ready && !started ? (
-              <>Start Demo</>
-            ) : (
-              <Watch
-                visible={true}
-                height="40"
-                width="40"
-                radius="48"
-                color="#000000"
-                ariaLabel="watch-loading"
-                wrapperStyle={{}}
-                wrapperClass=""
-              />
-            )}
+        <div className="flex flex-col items-center border border-slate-300 bg-slate-100 rounded row-span-1 col-span-1 p-4 gap-2">
+          <div className="font-semibold">Verifier</div>
+          <div className="flex flex-col text-sm bg-white border border-slate-300 w-full flex-grow cursor-text py-1 overflow-y-auto">
+            {verifierMessages.map((m, index) => (
+              <span key={index} className="px-1 py-0.5 text-slate-600 break-all">{m}</span>
+            ))}
           </div>
-        </Button>
-      </div>
-    </div >
+        </div>
+        <div className="flex flex-row justify-center row-span-1 col-span-2">
+          <Button className="h-fit" disabled={!ready || started} onClick={start}>
+            <div>
+              {ready && !started ? (
+                <>Start Demo</>
+              ) : (
+                <Watch
+                  visible={true}
+                  height="40"
+                  width="40"
+                  radius="48"
+                  color="#000000"
+                  ariaLabel="watch-loading"
+                  wrapperStyle={{}}
+                  wrapperClass=""
+                />
+              )}
+            </div>
+          </Button>
+        </div>
+      </div >
+    </div>
   );
 }