add json parameter to wasm prover and verifier (#20)

* wip

* wip;
git st

* add verifier

* wip

* finish generic request notarizer

.eslintrc

@@ -24,6 +24,8 @@
     "import/resolver": "typescript"
   },
   "ignorePatterns": [
+    "node_modules",
+    "zip",
     "build",
     "wasm",
     "tlsn",

package.json

@@ -18,10 +18,12 @@
     "@fortawesome/fontawesome-free": "^6.4.2",
     "async-mutex": "^0.4.0",
     "buffer": "^6.0.3",
+    "charwise": "^3.0.1",
     "classnames": "^2.3.2",
     "comlink": "^4.4.1",
     "fast-deep-equal": "^3.1.3",
     "fuse.js": "^6.6.2",
+    "level": "^8.0.0",
     "node-cache": "^5.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/History/index.tsx

@@ -0,0 +1,131 @@
+import React, { ReactElement, useState, useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router';
+import {
+  useHistoryOrder,
+  useRequestHistory,
+  deleteRequestHistory,
+} from '../../reducers/history';
+import Icon from '../../components/Icon';
+import { get, NOTARY_API_LS_KEY, PROXY_API_LS_KEY } from '../../utils/storage';
+import { urlify, download } from '../../utils/misc';
+import { BackgroundActiontype } from '../../pages/Background/actionTypes';
+
+export default function History(): ReactElement {
+  const history = useHistoryOrder();
+
+
+  return (
+    <div className="flex flex-col flex-nowrap overflow-y-auto">
+      {history.map((id) => {
+        return <OneRequestHistory key={id} requestId={id} />;
+      })}
+    </div>
+  );
+}
+
+function OneRequestHistory(props: { requestId: string }): ReactElement {
+  const dispatch = useDispatch();
+  const request = useRequestHistory(props.requestId);
+  const navigate = useNavigate();
+  const { proof, status } = request || {};
+  const requestUrl = urlify(request.url);
+
+  const onRetry = useCallback(async () => {
+    const notaryUrl = await get(NOTARY_API_LS_KEY);
+    const websocketProxyUrl = await get(PROXY_API_LS_KEY);
+    chrome.runtime.sendMessage<any, string>({
+      type: BackgroundActiontype.retry_prove_request,
+      data: {
+        id: props.requestId,
+        notaryUrl,
+        websocketProxyUrl,
+      },
+    });
+  }, [props.requestId]);
+
+  const onView = useCallback(() => {
+    chrome.runtime.sendMessage<any, string>({
+      type: BackgroundActiontype.verify_prove_request,
+      data: request,
+    });
+    navigate('/verify/' + request.id);
+  }, [request]);
+
+  const onDelete = useCallback(async () => {
+    dispatch(deleteRequestHistory(props.requestId));
+  }, [props.requestId]);
+
+  return (
+    <div className="flex flex-row flex-nowrap border rounded-md p-2 gap-1 hover:bg-slate-50 cursor-pointer">
+      <div className="flex flex-col flex-nowrap flex-grow">
+        <div className="flex flex-row items-center text-xs">
+          <div className="bg-slate-200 text-slate-400 px-1 py-0.5 rounded-sm">
+            {request?.method}
+          </div>
+          <div className="text-black font-bold px-2 py-1 rounded-md">
+            {requestUrl?.pathname}
+          </div>
+        </div>
+        <div className="flex flex-row">
+          <div className="font-bold text-slate-400">Host:</div>
+          <div className="ml-2 text-slate-800">
+            {requestUrl?.host}
+          </div>
+        </div>
+        <div className="flex flex-row">
+          <div className="font-bold text-slate-400">Notary API:</div>
+          <div className="ml-2 text-slate-800">{request?.notaryUrl}</div>
+        </div>
+        <div className="flex flex-row">
+          <div className="font-bold text-slate-400">TLS Proxy API: </div>
+          <div className="ml-2 text-slate-800">
+            {request?.websocketProxyUrl}
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col gap-1">
+        {status === 'success' && (
+          <>
+            <div
+              className="flex flex-row flex-grow-0 gap-2 self-end items-center justify-end px-2 py-1 bg-slate-600 text-slate-200 hover:bg-slate-500 hover:text-slate-100 hover:font-bold"
+              onClick={onView}
+            >
+              <Icon className="" fa="fa-solid fa-receipt" size={1} />
+              <span className="text-xs font-bold">View Proof</span>
+            </div>
+            <div
+              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-slate-200 hover:text-slate-500 hover:font-bold"
+              onClick={() => download(`${request?.id}.json`, JSON.stringify(request.proof))}
+            >
+              <Icon className="" fa="fa-solid fa-download" size={1} />
+              <span className="text-xs font-bold">Download</span>
+            </div>
+          </>
+        )}
+        {(!status || status === 'error') && (
+          <div
+            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-slate-200 hover:text-slate-500 hover:font-bold"
+            onClick={onRetry}
+          >
+            <Icon fa="fa-solid fa-arrows-rotate" size={1} />
+            <span className="text-xs font-bold">Retry</span>
+          </div>
+        )}
+        {status === 'pending' && (
+          <div 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">
+            <Icon className="animate-spin" fa="fa-solid fa-spinner" size={1} />
+            <span className="text-xs font-bold">Pending</span>
+          </div>
+        )}
+        <div
+          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}
+        >
+          <Icon className="" fa="fa-solid fa-trash" size={1} />
+          <span className="text-xs font-bold">Delete</span>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Notarize/index.tsx

@@ -0,0 +1,15 @@
+import React, { ReactElement } from 'react';
+import { useParams } from 'react-router';
+import { useRequestHistory } from '../../reducers/history';
+import RequestBuilder from '../../pages/RequestBuilder';
+
+export default function Notarize(): ReactElement {
+  const params = useParams<{ requestId: string }>();
+  const request = useRequestHistory(params.requestId);
+
+  return (
+    <div className="flex flex-col flex-nowrap flex-grow">
+      {request?.id}
+    </div>
+  );
+}