feat: add progress for notarization request

src/entries/Background/db.ts

@@ -1,5 +1,5 @@
 import { Level } from 'level';
-import type { RequestHistory } from './rpc';
+import { RequestHistory, RequestProgress } from './rpc';
 import { PluginConfig, PluginMetadata, sha256 } from '../../utils/misc';
 import mutex from './mutex';
 const charwise = require('charwise');
@@ -111,6 +111,24 @@ export async function setNotaryRequestError(
   return newReq;
 }
 
+export async function setNotaryRequestProgress(
+  id: string,
+  progress: RequestProgress,
+): Promise<RequestHistory | null> {
+  const existing = await historyDb.get(id);
+
+  if (!existing) return null;
+
+  const newReq: RequestHistory = {
+    ...existing,
+    progress,
+  };
+
+  await historyDb.put(id, newReq);
+
+  return newReq;
+}
+
 export async function setNotaryRequestVerification(
   id: string,
   verification: { sent: string; recv: string },

src/entries/Background/rpc.ts

@@ -28,6 +28,7 @@ import {
   setDefaultPluginsInstalled,
   setLocalStorage,
   setSessionStorage,
+  setNotaryRequestProgress,
 } from './db';
 import { addOnePlugin, removeOnePlugin } from '../../reducers/plugins';
 import {
@@ -86,6 +87,7 @@ export enum BackgroundActiontype {
   prove_request_start = 'prove_request_start',
   process_prove_request = 'process_prove_request',
   finish_prove_request = 'finish_prove_request',
+  update_request_progress = 'update_request_progress',
   verify_prove_request = 'verify_prove_request',
   verify_proof = 'verify_proof',
   delete_prove_request = 'delete_prove_request',
@@ -169,6 +171,32 @@ export type RequestLog = {
   responseHeaders?: browser.WebRequest.HttpHeaders;
 };
 
+export enum RequestProgress {
+  CreatingProver,
+  GettingSession,
+  SettingUpProver,
+  SendingRequest,
+  ReadingTranscript,
+  FinalizingOutputs,
+}
+
+export function progressText(progress: RequestProgress): string {
+  switch (progress) {
+    case RequestProgress.CreatingProver:
+      return 'Creating prover...';
+    case RequestProgress.GettingSession:
+      return 'Getting session url from notary...';
+    case RequestProgress.SettingUpProver:
+      return 'Setting up prover mpc backend...';
+    case RequestProgress.SendingRequest:
+      return 'Sending request...';
+    case RequestProgress.ReadingTranscript:
+      return 'Reading request transcript...';
+    case RequestProgress.FinalizingOutputs:
+      return 'Finalizing notarization outputs...';
+  }
+}
+
 export type RequestHistory = {
   id: string;
   url: string;
@@ -180,6 +208,7 @@ export type RequestHistory = {
   notaryUrl: string;
   websocketProxyUrl: string;
   status: '' | 'pending' | 'success' | 'error';
+  progress?: RequestProgress;
   error?: any;
   proof?: { session: any; substrings: any };
   requestBody?: any;
@@ -208,6 +237,8 @@ export const initRPC = () => {
           return handleGetProveRequests(request, sendResponse);
         case BackgroundActiontype.finish_prove_request:
           return handleFinishProveRequest(request, sendResponse);
+        case BackgroundActiontype.update_request_progress:
+          return handleUpdateRequestProgress(request, sendResponse);
         case BackgroundActiontype.delete_prove_request:
           return removeNotaryRequest(request.data);
         case BackgroundActiontype.retry_prove_request:
@@ -388,6 +419,19 @@ async function handleFinishProveRequest(
   return sendResponse();
 }
 
+async function handleUpdateRequestProgress(
+  request: BackgroundAction,
+  sendResponse: (data?: any) => void,
+) {
+  const { id, progress } = request.data;
+
+  const newReq = await setNotaryRequestProgress(id, progress);
+  if (!newReq) return;
+  await pushToRedux(addRequestHistory(await getNotaryRequest(id)));
+
+  return sendResponse();
+}
+
 async function handleRetryProveReqest(
   request: BackgroundAction,
   sendResponse: (data?: any) => void,
@@ -740,6 +784,7 @@ async function handleSetSessionStorage(
       await setSessionStorage(hostname, key, value as string);
     }
 
+    // TODO: Fix non-existent event name
     sendResponse({ type: BackgroundActiontype.sessionStorage_set });
   }
 }

src/entries/Offscreen/Offscreen.tsx

@@ -3,20 +3,19 @@ import * as Comlink from 'comlink';
 import { OffscreenActionTypes } from './types';
 import {
   NotaryServer,
-  Prover as TProver,
-  Verifier as TVerifier,
   Presentation as TPresentation,
+  Prover as TProver,
   Transcript,
+  Verifier as TVerifier,
 } from 'tlsn-js';
 import { verify } from 'tlsn-js-v5';
 
+import { devlog, urlify } from '../../utils/misc';
 import {
-  hexToArrayBuffer,
-  makePlugin,
-  safeParseJSON,
-  urlify,
-} from '../../utils/misc';
-import { BackgroundActiontype } from '../Background/rpc';
+  BackgroundActiontype,
+  progressText,
+  RequestProgress,
+} from '../Background/rpc';
 import browser from 'webextension-polyfill';
 import { PresentationJSON } from '../../utils/types';
 import { PresentationJSON as PresentationJSONa7 } from 'tlsn-js/build/types';
@@ -25,7 +24,6 @@ import { subtractRanges } from './utils';
 import { mapSecretsToRange } from '../Background/plugins/utils';
 import { waitForEvent } from '../utils';
 import type { ParsedTranscriptData } from 'tlsn-js/src/types';
-import { getPluginByHash } from '../Background/db';
 
 const { init, Prover, Presentation, Verifier }: any = Comlink.wrap(
   new Worker(new URL('./worker.ts', import.meta.url)),
@@ -66,13 +64,13 @@ const Offscreen = () => {
                     proof,
                   },
                 });
-              } catch (error) {
+              } catch (error: any) {
                 console.error(error);
                 browser.runtime.sendMessage({
                   type: BackgroundActiontype.finish_prove_request,
                   data: {
                     id,
-                    error,
+                    error: error?.message || 'Unknown error',
                   },
                 });
 
@@ -145,13 +143,13 @@ const Offscreen = () => {
                 });
 
                 delete provers[id];
-              } catch (error) {
+              } catch (error: any) {
                 console.error(error);
                 browser.runtime.sendMessage({
                   type: BackgroundActiontype.finish_prove_request,
                   data: {
                     id,
-                    error,
+                    error: error?.message || 'Unknown error.',
                   },
                 });
               }
@@ -172,13 +170,13 @@ const Offscreen = () => {
                     proof: proof,
                   },
                 });
-              } catch (error) {
+              } catch (error: any) {
                 console.error(error);
                 browser.runtime.sendMessage({
                   type: BackgroundActiontype.finish_prove_request,
                   data: {
                     id,
-                    error,
+                    error: error?.message || 'Unknown error.',
                   },
                 });
               }
@@ -420,22 +418,29 @@ async function createProof(options: {
 
   const hostname = urlify(url)?.hostname || '';
   const notary = NotaryServer.from(notaryUrl);
+
+  updateRequestProgress(id, RequestProgress.CreatingProver);
   const prover: TProver = await new Prover({
     id,
     serverDns: hostname,
     maxSentData,
     maxRecvData,
   });
+  updateRequestProgress(id, RequestProgress.GettingSession);
+  const sessionUrl = await notary.sessionUrl(maxSentData, maxRecvData);
 
-  await prover.setup(await notary.sessionUrl(maxSentData, maxRecvData));
+  updateRequestProgress(id, RequestProgress.SettingUpProver);
+  await prover.setup(sessionUrl);
 
+  updateRequestProgress(id, RequestProgress.SendingRequest);
   await prover.sendRequest(websocketProxyUrl + `?token=${hostname}`, {
     url,
     method,
     headers,
     body,
   });
 
+  updateRequestProgress(id, RequestProgress.ReadingTranscript);
   const transcript = await prover.transcript();
 
   const commit = {
@@ -449,6 +454,7 @@ async function createProof(options: {
     ),
   };
 
+  updateRequestProgress(id, RequestProgress.FinalizingOutputs);
   const notarizationOutputs = await prover.notarize(commit);
 
   const presentation = (await new Presentation({
@@ -584,3 +590,14 @@ async function verifyProof(
 
   return result;
 }
+
+function updateRequestProgress(id: string, progress: RequestProgress) {
+  devlog(`Request ${id}: ${progressText(progress)}`);
+  browser.runtime.sendMessage({
+    type: BackgroundActiontype.update_request_progress,
+    data: {
+      id,
+      progress: progress,
+    },
+  });
+}

src/pages/History/index.tsx

@@ -9,7 +9,10 @@ import {
 import Icon from '../../components/Icon';
 import { getNotaryApi, getProxyApi } from '../../utils/storage';
 import { urlify, download, upload } from '../../utils/misc';
-import { BackgroundActiontype } from '../../entries/Background/rpc';
+import {
+  BackgroundActiontype,
+  progressText,
+} from '../../entries/Background/rpc';
 import Modal, { ModalContent } from '../../components/Modal/Modal';
 import classNames from 'classnames';
 import copy from 'copy-to-clipboard';
@@ -119,7 +122,7 @@ export function OneRequestHistory(props: {
   return (
     <div
       className={classNames(
-        'flex flex-row flex-nowrap border rounded-md p-2 gap-1 hover:bg-slate-50 cursor-pointer',
+        'flex flex-row flex-nowrap border rounded-md p-2 gap-1 hover:bg-slate-50 cursor-pointer relative',
         props.className,
       )}
     >
@@ -190,18 +193,24 @@ export function OneRequestHistory(props: {
           <RetryButton hidden={hideActions.includes('retry')} />
         )}
         {status === 'pending' && (
-          <button className="flex flex-row flex-grow-0 gap-2 self-end items-center justify-end px-2 py-1 bg-slate-100 text-slate-300 font-bold">
+          <div className="absolute top-0 left-0 w-full h-full text-center flex flex-row flex-grow-0 gap-2 self-end items-center justify-center px-2 py-1 bg-black/70 text-white/90 font-bold">
             <Icon className="animate-spin" fa="fa-solid fa-spinner" size={1} />
-            <span className="text-xs font-bold">Pending</span>
-          </button>
+            <span className="text-xs font-bold">
+              {request?.progress
+                ? `(${request.progress + 1}/6) ${progressText(request.progress)}`
+                : 'Pending...'}
+            </span>
+          </div>
+        )}
+        {status !== 'pending' && (
+          <ActionButton
+            className="flex flex-row flex-grow-0 gap-2 self-end items-center justify-end px-2 py-1 bg-slate-100 text-slate-300 hover:bg-red-100 hover:text-red-500 hover:font-bold"
+            onClick={onDelete}
+            fa="fa-solid fa-trash"
+            ctaText="Delete"
+            hidden={hideActions.includes('delete')}
+          />
         )}
-        <ActionButton
-          className="flex flex-row flex-grow-0 gap-2 self-end items-center justify-end px-2 py-1 bg-slate-100 text-slate-300 hover:bg-red-100 hover:text-red-500 hover:font-bold"
-          onClick={onDelete}
-          fa="fa-solid fa-trash"
-          ctaText="Delete"
-          hidden={hideActions.includes('delete')}
-        />
       </div>
     </div>
   );