UI changes

src/entries/Background/rpc.ts

@@ -204,6 +204,8 @@ export type RequestHistory = {
   verification?: {
     sent: string;
     recv: string;
+    verifierKey: string;
+    notaryKey?: string;
   };
   secretHeaders?: string[];
   secretResps?: string[];

src/entries/Offscreen/rpc.ts

@@ -12,7 +12,7 @@
   Transcript,
   Verifier as TVerifier,
 } from 'tlsn-js';
-import { devlog, urlify } from '../../utils/misc';
+import { convertNotaryWsToHttp, devlog, urlify } from '../../utils/misc';
 import * as Comlink from 'comlink';
 import { PresentationJSON as PresentationJSONa7 } from 'tlsn-js/build/types';
 import { subtractRanges } from './utils';
@@ -176,7 +176,8 @@
 
 export const onVerifyProofRequest = async (request: any) => {
   const proof: PresentationJSON = request.data.proof;
-  const result: { sent: string; recv: string } = await verifyProof(proof);
+  const result: { sent: string; recv: string; verifierKey?: string; notaryKey?: string } =
+    await verifyProof(proof);
 
   chrome.runtime.sendMessage<any, string>({
     type: BackgroundActiontype.finish_prove_request,
@@ -185,6 +186,8 @@
       verification: {
         sent: result.sent,
         recv: result.recv,
+        verifierKey: result.verifierKey,
+        notaryKey: result.notaryKey
       },
     },
   });
@@ -480,7 +483,12 @@
 async function verifyProof(
   proof: PresentationJSON,
 ): Promise<{ sent: string; recv: string }> {
-  let result: { sent: string; recv: string };
+  let result: {
+    sent: string;
+    recv: string;
+    verifierKey?: string;
+    notaryKey?: string;
+  };
 
   switch (proof.version) {
     case undefined: {
@@ -494,14 +502,23 @@
         sent: verifierOutput.transcript.sent,
         recv: verifierOutput.transcript.recv,
       });
+      const vk = await presentation.verifyingKey();
+      const verifyingKey = Buffer.from(vk.data).toString('hex');
+      const notaryUrl = proof.meta.notaryUrl
+        ? convertNotaryWsToHttp(proof.meta.notaryUrl)
+        : '';
+      const publicKey = await new NotaryServer(notaryUrl)
+        .publicKey()
+        .catch(() => '');
       result = {
         sent: transcript.sent(),
         recv: transcript.recv(),
+        verifierKey: verifyingKey,
+        notaryKey: publicKey,
       };
       break;
     }
   }
-
   return result;
 }
 

src/pages/History/request-menu.tsx

@@ -33,6 +33,7 @@ export default function RequestMenu({
   const request = useRequestHistory(requestId);
   const [showingShareConfirmation, setShowingShareConfirmation] =
     useState(false);
+  const [showRemoveModal, setShowRemoveModal] = useState(false);
 
   const onRetry = useCallback(async () => {
     const notaryUrl = await getNotaryApi();
@@ -64,6 +65,12 @@ export default function RequestMenu({
           showMenu={showMenu}
         />
       )}
+      <RemoveHistory
+        onRemove={onDelete}
+        showRemovalModal={showRemoveModal}
+        setShowRemoveModal={setShowRemoveModal}
+        onCancel={() => setShowRemoveModal(false)}
+      />
       <div
         className="fixed top-0 left-0 w-screen h-screen z-10 cursor-default"
         onClick={(e) => {
@@ -116,8 +123,7 @@ export default function RequestMenu({
             className="border-b border-slate-300 !text-red-500"
             onClick={(e) => {
               e.stopPropagation();
-              onDelete();
-              showMenu(false);
+              setShowRemoveModal(true);
             }}
           >
             Delete
@@ -254,3 +260,49 @@ function ShareConfirmationModal({
     </Modal>
   );
 }
+
+function RemoveHistory(props: {
+  onRemove: () => void;
+  showRemovalModal: boolean;
+  setShowRemoveModal: (show: boolean) => void;
+  onCancel: () => void;
+}): ReactElement {
+  const { onRemove, setShowRemoveModal, showRemovalModal } = props;
+
+  const onCancel = useCallback(() => {
+    setShowRemoveModal(false);
+  }, [showRemovalModal]);
+  console.log('remove modal');
+  return !showRemovalModal ? (
+    <></>
+  ) : (
+    <Modal
+      onClose={onCancel}
+      className="flex flex-col items-center text-base cursor-default justify-center !w-auto mx-4 my-[50%] p-4 gap-4"
+    >
+      <ModalContent className="flex flex-col w-full gap-4 items-center text-base justify-center">
+        <div className="text-base">
+          Are you sure you want to delete this attestation?
+        </div>
+        <div className="mb-1">
+          <span className="text-red-500 font-bold">Warning:</span> this cannot
+          be undone.
+        </div>
+        <div className="flex flex-row gap-2 justify-end">
+          <button
+            className="m-0 w-24 bg-slate-100 text-slate-300 hover:bg-slate-200 hover:text-slate-500"
+            onClick={onCancel}
+          >
+            Cancel
+          </button>
+          <button
+            className="m-0 w-24 bg-red-100 text-red-300 hover:bg-red-200 hover:text-red-500"
+            onClick={onRemove}
+          >
+            Delete
+          </button>
+        </div>
+      </ModalContent>
+    </Modal>
+  );
+}

src/pages/ProofUploader/index.tsx

@@ -7,14 +7,17 @@
 import Icon from '../../components/Icon';
 import { BackgroundActiontype } from '../../entries/Background/rpc';
 import ProofViewer from '../ProofViewer';
+import { convertNotaryWsToHttp } from '../../utils/misc';
 
 export default function ProofUploader(): ReactElement {
   const [proof, setProof] = useState<{
     recv: string;
     sent: string;
+    verifierKey?: string;
+    notaryKey?: string;
   } | null>(null);
   const [uploading, setUploading] = useState(false);
-
+  const [metadata, setMetaData] = useState<any>({ meta: '', version: '' });
   const onFileUpload: ChangeEventHandler<HTMLInputElement> = useCallback(
     async (e) => {
       // @ts-ignore
@@ -26,8 +29,14 @@
           const result = event.target?.result;
           if (result) {
             const proof = JSON.parse(result as string);
+            const notaryUrl = convertNotaryWsToHttp(proof.meta.notaryUrl);
+            proof.meta.notaryUrl = notaryUrl;
+            setMetaData({ meta: proof.meta, version: proof.version });
             const res = await chrome.runtime
-              .sendMessage<any, { recv: string; sent: string }>({
+              .sendMessage<
+                any,
+                { recv: string; sent: string; verifierKey?: string; notaryKey?: string }
+              >({
                 type: BackgroundActiontype.verify_proof,
                 data: proof,
               })
@@ -48,7 +57,15 @@
   );
 
   if (proof) {
-    return <ProofViewer recv={proof.recv} sent={proof.sent} />;
+    return (
+      <ProofViewer
+        recv={proof.recv}
+        sent={proof.sent}
+        verifierKey={proof.verifierKey}
+        notaryKey={proof.notaryKey}
+        info={metadata}
+      />
+    );
   }
 
   return (

src/pages/ProofViewer/index.tsx

@@ -2,6 +2,7 @@
   ReactNode,
   ReactElement,
   useState,
+  useEffect,
   MouseEventHandler,
   useCallback,
 } from 'react';
@@ -12,14 +13,20 @@
   useRequestHistory,
 } from '../../reducers/history';
 import Icon from '../../components/Icon';
-import { download } from '../../utils/misc';
+import { convertNotaryWsToHttp, download } from '../../utils/misc';
 import classNames from 'classnames';
 import { useDispatch } from 'react-redux';
 
 export default function ProofViewer(props?: {
   className?: string;
   recv?: string;
   sent?: string;
+  verifierKey?: string;
+  notaryKey?: string;
+  info?: {
+    meta: { notaryUrl: string; websocketProxyUrl: string };
+    version: string;
+  };
 }): ReactElement {
   const dispatch = useDispatch();
   const { requestId } = useParams<{ requestId: string }>();
@@ -33,6 +40,16 @@
       navigate(-1);
     }
   }, [requestId]);
+  const [isPopup, setIsPopup] = useState(false);
+
+  useEffect(() => {
+    if (
+      window.opener ||
+      window.matchMedia('(display-mode: standalone)').matches
+    ) {
+      setIsPopup(true);
+    }
+  }, []);
 
   return (
     <div
@@ -43,21 +60,29 @@
     >
       <div className="flex flex-col px-2">
         <div className="flex flex-row gap-2 items-center">
-          <Icon
-            className={c(
-              'px-1 select-none cursor-pointer',
-              'text-slate-400 border-b-2 border-transparent hover:text-slate-500 active:text-slate-800',
-            )}
-            onClick={() => navigate(-1)}
-            fa="fa-solid fa-xmark"
-          />
+          {!isPopup && (
+            <Icon
+              className={c(
+                'px-1 select-none cursor-pointer',
+                'text-slate-400 border-b-2 border-transparent hover:text-slate-500 active:text-slate-800',
+              )}
+              onClick={() => navigate(-1)}
+              fa="fa-solid fa-xmark"
+            />
+          )}
           <TabLabel onClick={() => setTab('sent')} active={tab === 'sent'}>
             Sent
           </TabLabel>
           <TabLabel onClick={() => setTab('recv')} active={tab === 'recv'}>
             Recv
           </TabLabel>
-          <div className="flex flex-row flex-grow items-center justify-end gap-2">
+          <TabLabel
+            onClick={() => setTab('metadata')}
+            active={tab === 'metadata'}
+          >
+            Metadata
+          </TabLabel>
+          <div className="flex flex-row flex-grow items-center justify-end">
             {!props?.recv && (
               <button
                 className="button"
@@ -90,6 +115,38 @@
             readOnly
           ></textarea>
         )}
+        {tab === 'metadata' && (
+          <div className="w-full resize-none bg-slate-100 text-slate-800 border p-2 text-[10px] break-all h-full outline-none font-mono">
+            <MetadataRow
+              label="Version"
+              //@ts-ignore
+              value={props?.info?.version || request?.proof?.version}
+            />
+            <MetadataRow
+              label="Notary URL"
+              value={
+                //@ts-ignore
+                props?.info?.meta?.notaryUrl || convertNotaryWsToHttp(request?.proof?.meta?.notaryUrl)
+              }
+            />
+            <MetadataRow
+              label="Websocket Proxy URL"
+              value={
+                props?.info?.meta?.websocketProxyUrl ||
+                //@ts-ignore
+                request?.proof?.meta?.websocketProxyUrl
+              }
+            />
+            <MetadataRow
+              label="Verifying Key"
+              value={props?.verifierKey || request?.verification?.verifierKey}
+            />
+            <MetadataRow
+              label="Notary Key"
+              value={props?.notaryKey || request?.verification?.notaryKey}
+              />
+          </div>
+        )}
       </div>
     </div>
   );
@@ -113,3 +170,20 @@
     </button>
   );
 }
+
+function MetadataRow({
+  label,
+  value,
+}: {
+  label: string;
+  value: string | undefined;
+}) {
+  return (
+    <div>
+      <div>{label}:</div>
+      <div className="text-sm font-semibold whitespace-pre-wrap">
+        {value || 'N/A'}
+      </div>
+    </div>
+  );
+}

src/utils/misc.ts

@@ -89,6 +89,15 @@ export const copyText = async (text: string): Promise<void> => {
   }
 };
 
+export function convertNotaryWsToHttp(notaryWs: string) {
+  const { protocol, pathname, hostname, port } = new URL(notaryWs);
+  const p = protocol === 'wss:' ? 'https:' : 'http:';
+  const pt = port ? `:${port}` : '';
+  const path = pathname === '/' ? '' : pathname.replace('/notarize', '');
+  const h = hostname === 'localhost' ? '127.0.0.1' : hostname;
+  return p + '//' + h + pt + path;
+}
+
 export async function replayRequest(req: RequestLog): Promise<string> {
   const options = {
     method: req.method,