feat: add progress for notarization request and resurface error message

package.json

@@ -24,6 +24,7 @@
     "classnames": "^2.3.2",
     "comlink": "^4.4.1",
     "copy-to-clipboard": "^3.3.3",
+    "dayjs": "^1.11.13",
     "fast-deep-equal": "^3.1.3",
     "fuse.js": "^6.6.2",
     "level": "^8.0.0",

src/entries/Background/db.ts

@@ -1,7 +1,9 @@
 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';
+import { pushToRedux } from '../utils';
+import { addRequestCid } from '../../reducers/history';
 const charwise = require('charwise');
 
 export const db = new Level('./ext-db', {
@@ -111,6 +113,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 {
@@ -76,6 +77,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',
@@ -158,6 +160,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;
@@ -169,6 +197,7 @@ export type RequestHistory = {
   notaryUrl: string;
   websocketProxyUrl: string;
   status: '' | 'pending' | 'success' | 'error';
+  progress?: RequestProgress;
   error?: any;
   proof?: { session: any; substrings: any };
   requestBody?: any;
@@ -197,6 +226,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:
@@ -393,6 +424,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,

src/entries/Offscreen/rpc.ts

@@ -1,5 +1,9 @@
 import browser from 'webextension-polyfill';
-import { BackgroundActiontype } from '../Background/rpc';
+import {
+  BackgroundActiontype,
+  progressText,
+  RequestProgress,
+} from '../Background/rpc';
 import { Method } from 'tlsn-wasm';
 import {
   NotaryServer,
@@ -8,7 +12,7 @@ import {
   Transcript,
   Verifier as TVerifier,
 } from 'tlsn-js';
-import { urlify } from '../../utils/misc';
+import { devlog, urlify } from '../../utils/misc';
 import * as Comlink from 'comlink';
 import { PresentationJSON as PresentationJSONa7 } from 'tlsn-js/build/types';
 import { subtractRanges } from './utils';
@@ -52,21 +56,21 @@ export const onNotarizationRequest = async (request: any) => {
         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',
       },
     });
 
     browser.runtime.sendMessage({
       type: OffscreenActionTypes.notarization_response,
       data: {
         id,
-        error,
+        error: error?.message || 'Unknown error',
       },
     });
   }
@@ -80,20 +84,21 @@ export const onCreateProverRequest = async (request: any) => {
 
     provers[id] = prover;
 
+    updateRequestProgress(id, RequestProgress.ReadingTranscript);
     browser.runtime.sendMessage({
       type: OffscreenActionTypes.create_prover_response,
       data: {
         id,
         transcript: await prover.transcript(),
       },
     });
-  } catch (error) {
+  } catch (error: any) {
     console.error(error);
     browser.runtime.sendMessage({
       type: OffscreenActionTypes.create_prover_response,
       data: {
         id,
-        error,
+        error: error?.message || 'Unknown error',
       },
     });
   }
@@ -106,6 +111,7 @@ export const onCreatePresentationRequest = async (request: any) => {
   try {
     if (!prover) throw new Error(`Cannot find prover ${id}.`);
 
+    updateRequestProgress(id, RequestProgress.FinalizingOutputs);
     const notarizationOutputs = await prover.notarize(commit);
 
     const presentation = (await new Presentation({
@@ -126,13 +132,13 @@ export const onCreatePresentationRequest = async (request: any) => {
     });
 
     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',
       },
     });
   }
@@ -151,13 +157,13 @@ export const onProcessProveRequest = async (request: any) => {
         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',
       },
     });
   }
@@ -367,22 +373,30 @@ 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,
   });
 
-  await prover.setup(await notary.sessionUrl(maxSentData, maxRecvData));
+  updateRequestProgress(id, RequestProgress.GettingSession);
+  const sessionUrl = 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 = {
@@ -396,6 +410,7 @@ async function createProof(options: {
     ),
   };
 
+  updateRequestProgress(id, RequestProgress.FinalizingOutputs);
   const notarizationOutputs = await prover.notarize(commit);
 
   const presentation = (await new Presentation({
@@ -436,15 +451,22 @@ async function createProver(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,
   });
 
-  await prover.setup(await notary.sessionUrl(maxSentData, maxRecvData));
+  updateRequestProgress(id, RequestProgress.GettingSession);
+  const sessionUrl = 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,
@@ -482,3 +504,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/entries/Popup/index.tsx

@@ -4,6 +4,11 @@ import { HashRouter } from 'react-router-dom';
 import Popup from './Popup';
 import './index.scss';
 import { Provider } from 'react-redux';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
 import store from '../../utils/store';
 
 const container = document.getElementById('app-container');