fix: update logging level to work with alpha6; update verify method i…

…n background; add version to option page (#79)
tlsnotary · Aug 14, 2024 · 4c78625 · 4c78625
1 parent d15d021
commit 4c78625
Show file tree

Hide file tree

Showing 12 changed files with 111 additions and 78 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,8 +38,8 @@
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.4.2",
     "tailwindcss": "^3.3.3",
-    "tlsn-jsV5.3": "npm:tlsn-js@0.1.0-alpha.5.3",
-    "tlsn-js": "0.1.0-alpha.6.1"
+    "tlsn-js": "0.1.0-alpha.6.2",
+    "tlsn-jsV5.3": "npm:tlsn-js@0.1.0-alpha.5.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/entries/Background/rpc.ts b/src/entries/Background/rpc.ts
@@ -84,6 +84,7 @@ export enum BackgroundActiontype {
   get_plugins_response = 'get_plugins_response',
   run_plugin_request = 'run_plugin_request',
   run_plugin_response = 'run_plugin_response',
+  get_logging_level = 'get_logging_level',
 }
 
 export type BackgroundAction = {
@@ -188,6 +189,9 @@ export const initRPC = () => {
           return handleGetPluginsRequest(request);
         case BackgroundActiontype.run_plugin_request:
           return handleRunPluginCSRequest(request);
+        case BackgroundActiontype.get_logging_level:
+          getLoggingFilter().then(sendResponse);
+          return true;
         default:
           break;
       }
@@ -299,7 +303,6 @@ async function handleRetryProveReqest(
       ...req,
       notaryUrl,
       websocketProxyUrl,
-      loggingFilter: await getLoggingFilter(),
     },
   });
 
@@ -363,7 +366,6 @@ async function handleProveRequestStart(
       websocketProxyUrl,
       secretHeaders,
       secretResps,
-      loggingFilter: await getLoggingFilter(),
     },
   });
 
@@ -428,7 +430,6 @@ async function runPluginProver(request: BackgroundAction, now = Date.now()) {
       maxSentData,
       secretHeaders,
       secretResps,
-      loggingFilter: await getLoggingFilter(),
     },
   });
 }
@@ -862,7 +863,6 @@ async function handleNotarizeRequest(request: BackgroundAction) {
               websocketProxyUrl,
               secretHeaders,
               secretResps,
-              loggingFilter: await getLoggingFilter(),
             },
           });
         } catch (e) {

diff --git a/src/entries/Offscreen/Offscreen.tsx b/src/entries/Offscreen/Offscreen.tsx
@@ -13,6 +13,7 @@ import { urlify } from '../../utils/misc';
 import { BackgroundActiontype } from '../Background/rpc';
 import browser from 'webextension-polyfill';
 import { Proof, ProofV1 } from '../../utils/types';
+import { Method } from 'tlsn-js/wasm/pkg';
 
 const { init, Prover, NotarizedSession, TlsProof }: any = Comlink.wrap(
   new Worker(new URL('./worker.ts', import.meta.url)),
@@ -21,7 +22,10 @@ const { init, Prover, NotarizedSession, TlsProof }: any = Comlink.wrap(
 const Offscreen = () => {
   useEffect(() => {
     (async () => {
-      await init({ loggingLevel: 'Info' });
+      const loggingLevel = await browser.runtime.sendMessage({
+        type: BackgroundActiontype.get_logging_level,
+      });
+      await init({ loggingLevel });
       // @ts-ignore
       chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
         switch (request.type) {
@@ -99,9 +103,8 @@ const Offscreen = () => {
           }
           case BackgroundActiontype.verify_proof: {
             (async () => {
-              console.log('verify_proof', request.data);
-              // const result = await verify(request.data);
-              // sendResponse(result);
+              const result = await verifyProof(request.data);
+              sendResponse(result);
             })();
 
             return true;
@@ -181,8 +184,8 @@ async function createProof(options: {
   url: string;
   notaryUrl: string;
   websocketProxyUrl: string;
-  method?: string;
-  headers: {
+  method?: Method;
+  headers?: {
     [name: string]: string;
   };
   body?: any;
@@ -194,8 +197,8 @@ async function createProof(options: {
 }): Promise<ProofV1> {
   const {
     url,
-    method,
-    headers,
+    method = 'GET',
+    headers = {},
     body,
     maxSentData,
     maxRecvData,

diff --git a/src/entries/Popup/Popup.tsx b/src/entries/Popup/Popup.tsx
@@ -35,12 +35,8 @@ import { getConnection } from '../Background/db';
 
 const Popup = () => {
   const dispatch = useDispatch();
-  const activeTab = useActiveTab();
-  const url = useActiveTabUrl();
   const navigate = useNavigate();
 
-  const [showConnectionDetails, setShowConnectionDetails] = useState(false);
-
   useEffect(() => {
     (async () => {
       const [tab] = await browser.tabs.query({
@@ -146,22 +142,24 @@ function AppConnectionLogo() {
       className="absolute right-2 flex flex-nowrap flex-row items-center gap-1 justify-center w-fit cursor-pointer"
       onClick={() => setShowConnectionDetails(true)}
     >
-      <div className="flex flex-row relative bg-slate-500 border-[1px] border-black rounded-full">
+      <div className="flex flex-row relative bg-black border-[1px] border-black rounded-full">
         {!!activeTab?.favIconUrl ? (
           <img
             src={activeTab?.favIconUrl}
             className="h-5 rounded-full"
             alt="logo"
           />
         ) : (
-          <Icon fa="fa-solid fa-globe" size={1.25} />
+          <Icon
+            fa="fa-solid fa-globe"
+            className="bg-white text-slate-400 rounded-full"
+            size={1.25}
+          />
         )}
         <div
           className={classNames(
-            'absolute right-[-2px] bottom-[-2px] rounded-full',
+            'absolute right-[-2px] bottom-[-2px] rounded-full h-[10px] w-[10px] border-[2px]',
             {
-              'bg-green-500 h-[10px] w-[10px] border-[2px]':
-                activeTab?.favIconUrl,
               'bg-green-500': connected,
               'bg-slate-500': !connected,
             },

diff --git a/src/pages/History/index.tsx b/src/pages/History/index.tsx
@@ -18,6 +18,7 @@ import {
   getNotaryRequest,
   setNotaryRequestCid,
 } from '../../entries/Background/db';
+const charwise = require('charwise');
 
 export default function History(): ReactElement {
   const history = useHistoryOrder();
@@ -131,6 +132,12 @@ export function OneRequestHistory(props: {
             {requestUrl?.pathname}
           </div>
         </div>
+        <div className="flex flex-row">
+          <div className="font-bold text-slate-400">Time:</div>
+          <div className="ml-2 text-slate-800">
+            {new Date(charwise.decode(props.requestId, 'hex')).toISOString()}
+          </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>
@@ -140,7 +147,7 @@ export function OneRequestHistory(props: {
           <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="font-bold text-slate-400">TLS Proxy API:</div>
           <div className="ml-2 text-slate-800">
             {request?.websocketProxyUrl}
           </div>

diff --git a/src/pages/Options/index.tsx b/src/pages/Options/index.tsx
@@ -24,20 +24,18 @@ import {
   NOTARY_PROXY,
   MAX_RECV,
   MAX_SENT,
-  LOGGING_LEVEL_INFO,
-  LOGGING_LEVEL_NONE,
-  LOGGING_LEVEL_DEBUG,
-  LOGGING_LEVEL_TRACE,
 } from '../../utils/constants';
 import Modal, { ModalContent } from '../../components/Modal/Modal';
 import browser from 'webextension-polyfill';
+import { LoggingLevel } from 'tlsn-js';
+import { version } from '../../../package.json';
 
 export default function Options(): ReactElement {
   const [notary, setNotary] = useState(NOTARY_API);
   const [proxy, setProxy] = useState(NOTARY_PROXY);
   const [maxSent, setMaxSent] = useState(MAX_SENT);
   const [maxReceived, setMaxReceived] = useState(MAX_RECV);
-  const [loggingLevel, setLoggingLevel] = useState(LOGGING_LEVEL_INFO);
+  const [loggingLevel, setLoggingLevel] = useState<LoggingLevel>('Info');
 
   const [dirty, setDirty] = useState(false);
   const [shouldReload, setShouldReload] = useState(false);
@@ -50,7 +48,7 @@ export default function Options(): ReactElement {
       setProxy((await getProxyApi()) || NOTARY_PROXY);
       setMaxReceived((await getMaxRecv()) || MAX_RECV);
       setMaxSent((await getMaxSent()) || MAX_SENT);
-      setLoggingLevel((await getLoggingFilter()) || LOGGING_LEVEL_INFO);
+      setLoggingLevel((await getLoggingFilter()) || 'Info');
     })();
   }, [advanced]);
 
@@ -170,7 +168,7 @@ function InputField(props: {
 
   return (
     <div className="flex flex-col flex-nowrap py-1 px-2 gap-2">
-      <div className="font-semibold">{label}</div>
+      <div className="font-semibold cursor-default">{label}</div>
       <input
         type={type}
         className="input border"
@@ -194,6 +192,10 @@ function NormalOptions(props: {
 
   return (
     <div>
+      <div className="flex flex-col flex-nowrap py-1 px-2 gap-2 cursor-default">
+        <div className="font-semibold">Version</div>
+        <div className="input border bg-slate-100">{version}</div>
+      </div>
       <InputField
         label="Notary API"
         placeholder="https://api.tlsnotary.org"
@@ -214,9 +216,9 @@ function NormalOptions(props: {
           setDirty(true);
         }}
       />
-      <div className="flex flex-col flex-nowrap py-1 px-2 gap-2">
+      <div className="flex flex-col flex-nowrap py-1 px-2 gap-2 cursor-default">
         <div className="font-semibold">Explorer URL</div>
-        <div className="input border">{EXPLORER_API}</div>
+        <div className="input border bg-slate-100">{EXPLORER_API}</div>
       </div>
     </div>
   );
@@ -225,12 +227,12 @@ function NormalOptions(props: {
 function AdvancedOptions(props: {
   maxSent: number;
   maxReceived: number;
-  loggingLevel: string;
+  loggingLevel: LoggingLevel;
   setShouldReload: (reload: boolean) => void;
   setMaxSent: (value: number) => void;
   setMaxReceived: (value: number) => void;
   setDirty: (value: boolean) => void;
-  setLoggingLevel: (level: string) => void;
+  setLoggingLevel: (level: LoggingLevel) => void;
 }) {
   const {
     maxSent,
@@ -270,16 +272,17 @@ function AdvancedOptions(props: {
         <select
           className="select !bg-white border !px-2 !py-1"
           onChange={(e) => {
-            setLoggingLevel(e.target.value);
+            setLoggingLevel(e.target.value as LoggingLevel);
             setDirty(true);
             setShouldReload(true);
           }}
           value={loggingLevel}
         >
-          <option value={LOGGING_LEVEL_NONE}>None</option>
-          <option value={LOGGING_LEVEL_INFO}>Info</option>
-          <option value={LOGGING_LEVEL_DEBUG}>Debug</option>
-          <option value={LOGGING_LEVEL_TRACE}>Trace</option>
+          <option value="Error">Error</option>
+          <option value="Warn">Warn</option>
+          <option value="Info">Info</option>
+          <option value="Debug">Debug</option>
+          <option value="Trace">Trace</option>
         </select>
       </div>
       <div className="flex flex-row flex-nowrap justify-end gap-2 p-2"></div>