wip

tlsnotary · Nov 4, 2024 · 0e8b310 · 0e8b310
1 parent 421b618
commit 0e8b310
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 7 deletions.
diff --git a/src/entries/Background/ws.ts b/src/entries/Background/ws.ts
@@ -22,6 +22,8 @@ import browser, { storage } from 'webextension-polyfill';
 import { OffscreenActionTypes } from '../Offscreen/types';
 import { getMaxRecv, getMaxSent, getRendezvousApi } from '../../utils/storage';
 import { SidePanelActionTypes } from '../SidePanel/types';
+import { Transcript } from 'tlsn-js';
+import { VerifierOutput } from 'tlsn-wasm';
 
 const state: {
   clientId: string;
@@ -279,6 +281,18 @@ export const connectSession = async () => {
       }
       case 'proof_request_end': {
         const { pluginHash, proof } = message.params;
+        const transcript = new Transcript({
+          sent: proof.transcript.sent,
+          recv: proof.transcript.recv,
+        });
+
+        state.presentation = {
+          sent: transcript.sent(),
+          recv: transcript.recv(),
+        };
+
+        pushToRedux(setP2PPresentation(state.presentation));
+
         browser.runtime.sendMessage({
           type: OffscreenActionTypes.end_p2p_proof_request,
           data: {
@@ -512,9 +526,22 @@ export const startProofRequest = async (pluginHash: string) => {
 
 export const endProofRequest = async (data: {
   pluginHash: string;
-  proof: any;
+  proof: VerifierOutput;
 }) => {
+  const transcript = new Transcript({
+    sent: data.proof.transcript.sent,
+    recv: data.proof.transcript.recv,
+  });
+
+  state.presentation = {
+    sent: transcript.sent(),
+    recv: transcript.recv(),
+  };
+
+  pushToRedux(setP2PPresentation(state.presentation));
+
   const { socket, clientId, pairing } = state;
+
   if (socket && clientId && pairing) {
     socket.send(
       bufferify({

diff --git a/src/entries/Offscreen/Offscreen.tsx b/src/entries/Offscreen/Offscreen.tsx
@@ -158,8 +158,6 @@ const Offscreen = () => {
               await waitForEvent(OffscreenActionTypes.prover_setup);
 
               verifier.verify().then((res) => {
-                console.log(res);
-
                 browser.runtime.sendMessage({
                   type: BackgroundActiontype.proof_request_end,
                   data: {
@@ -279,7 +277,7 @@ const Offscreen = () => {
                 OffscreenActionTypes.end_p2p_proof_request,
               );
               await prover.reveal(commit);
-              console.log(await endRequest);
+              await endRequest;
             })();
             break;
           }

diff --git a/src/pages/PeerToPeer/index.tsx b/src/pages/PeerToPeer/index.tsx
@@ -39,6 +39,7 @@ import { sha256 } from '../../utils/misc';
 import { openSidePanel } from '../../entries/utils';
 import { SidePanelActionTypes } from '../../entries/SidePanel/types';
 import { verify } from 'tlsn-js-v5';
+import ProofViewer from '../ProofViewer';
 
 export function P2PHome(): ReactElement {
   const clientId = useClientId();
@@ -235,11 +236,26 @@ function IncomingProof({
   accept: () => void;
   isProving: boolean;
 }) {
+  const presentation = useP2PPresentation();
+  const [showingTranscript, showTranscript] = useState(false);
+
   if (isProving) {
     return (
       <>
+        {presentation && showingTranscript && (
+          <Modal
+            className="h-full m-0 rounded-none"
+            onClose={() => showTranscript(false)}
+          >
+            <ProofViewer
+              className="h-full"
+              sent={presentation.sent}
+              recv={presentation.recv}
+            />
+          </Modal>
+        )}
         <div className="font-semibold text-orange-500">
-          Proving to your peer...
+          {presentation ? 'Proving Completed' : 'Proving to your peer...'}
         </div>
         <Plugin
           className="w-full bg-white !cursor-default hover:!bg-white active:!bg-white hover:!border-slate-300"
@@ -248,6 +264,15 @@ function IncomingProof({
           onClick={() => null}
           unremovable
         />
+        <div className="flex flex-row gap-2">
+          <button
+            className="button button--primary"
+            onClick={() => showTranscript(true)}
+            disabled={!presentation}
+          >
+            View
+          </button>
+        </div>
       </>
     );
   }
@@ -285,18 +310,44 @@ function OutgoingProof({
   outgoingPluginHash: string;
   cancel: () => void;
 }) {
+  const presentation = useP2PPresentation();
+  const [showingTranscript, showTranscript] = useState(false);
+
   if (isVerifying) {
     return (
       <>
+        {presentation && showingTranscript && (
+          <Modal
+            className="h-full m-0 rounded-none"
+            onClose={() => showTranscript(false)}
+          >
+            <ProofViewer
+              className="h-full"
+              sent={presentation.sent}
+              recv={presentation.recv}
+            />
+          </Modal>
+        )}
         <div className="font-semibold text-orange-500">
-          Verifying with your peer...
+          {presentation
+            ? 'Verification Completed'
+            : 'Verifying with your peer...'}
         </div>
         <Plugin
           className="w-full bg-white !cursor-default hover:!bg-white active:!bg-white hover:!border-slate-300"
           hash={outgoingPluginHash}
           onClick={() => null}
           unremovable
         />
+        <div className="flex flex-row gap-2">
+          <button
+            className="button button--primary"
+            onClick={() => showTranscript(true)}
+            disabled={!presentation}
+          >
+            View
+          </button>
+        </div>
       </>
     );
   }

diff --git a/src/pages/ProofViewer/index.tsx b/src/pages/ProofViewer/index.tsx
@@ -9,8 +9,10 @@ import c from 'classnames';
 import { useRequestHistory } from '../../reducers/history';
 import Icon from '../../components/Icon';
 import { download } from '../../utils/misc';
+import classNames from 'classnames';
 
 export default function ProofViewer(props?: {
+  className?: string;
   recv?: string;
   sent?: string;
 }): ReactElement {
@@ -20,7 +22,12 @@ export default function ProofViewer(props?: {
   const [tab, setTab] = useState('sent');
 
   return (
-    <div className="flex flex-col w-full py-2 gap-2 flex-grow">
+    <div
+      className={classNames(
+        'flex flex-col w-full py-2 gap-2 flex-grow',
+        props?.className,
+      )}
+    >
       <div className="flex flex-col px-2">
         <div className="flex flex-row gap-2 items-center">
           <Icon