finish generic request notarizer

src/components/RequestDetail/index.tsx

@@ -9,7 +9,12 @@ import {
   BackgroundActiontype,
   RequestLog,
 } from '../../pages/Background/actionTypes';
+import {
+  notarizeRequest,
+  useRequest,
+} from '../../reducers/requests';
 import classNames from 'classnames';
+import { useDispatch } from 'react-redux';
 import {
   Navigate,
   Route,
@@ -20,17 +25,57 @@ import {
 } from 'react-router';
 import Icon from '../Icon';
 import NavigateWithParams from '../NavigateWithParams';
+import { get, NOTARY_API_LS_KEY, PROXY_API_LS_KEY } from '../../utils/storage';
+import { urlify } from '../../utils/misc';
 
 type Props = {
-  data: RequestLog | null;
+  requestId: string;
 };
 
+const maxTranscriptSize = 16384;
+
+const authToken = 'a28cae3969369c26c1410f5bded83c3f4f914fbc';
+const accessToken =
+  'AAAAAAAAAAAAAAAAAAAAANRILgAAAAAAnNwIzUejRCOuH5E6I8xnZz4puTs%3D1Zv7ttfk8LF81IUq16cHjhLTvJu4FA33AGWWjCpTnA';
+const csrfToken =
+  'b73b3488687683372af2ea77486a444ccaa5327bbabad709df1b5161a6b83c8d7ec19106a82cb8dd5f8569632ee95ab4c6dc2abf5ad2ed7fa11b8340fcbe86a8fc00df28db6c4109a807f7cb12dd19da';
+const userAgent =
+  'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36';
+
+
 export default function RequestDetail(props: Props): ReactElement {
-  const params = useParams<{ requestId: string }>();
+  const request = useRequest(props.requestId);
   const navigate = useNavigate();
-  const { data } = props;
+  const dispatch = useDispatch();
+
+  const notarize = useCallback(async () => {
+    const notaryUrl = await get(NOTARY_API_LS_KEY);
+    const websocketProxyUrl = await get(PROXY_API_LS_KEY);
+    const headers = request
+        .requestHeaders.reduce((acc, h) => {
+          if (!(/^(origin|referer|Accept-Language|Accept-EncodingAccept)$|^(sec-|x-twitter-)/i.test(h.name))) {
+            acc[h.name] = h.value;
+          }
+          return acc;
+        }, { Host: urlify(request.url)?.hostname });
+
+    //TODO: for some reason, these needs to be override for twitter to work
+    headers['Accept-Encoding'] = 'identity';
+    headers['Connection'] = 'close';
+
+    dispatch(notarizeRequest({
+      url: request.url,
+      method: request.method,
+      headers,
+      body: request.body,
+      maxTranscriptSize,
+      notaryUrl,
+      websocketProxyUrl,
+    }))
+    navigate(`/history`);
+  }, [request]);
 
-  if (!data) return <></>;
+  if (!request) return <></>;
 
   return (
     <>
@@ -51,15 +96,15 @@ export default function RequestDetail(props: Props): ReactElement {
         </RequestDetailsHeaderTab>
         <button
           className="absolute right-2 bg-primary/[0.9] text-white font-bold px-2 py-0.5 hover:bg-primary/[0.8] active:bg-primary"
-          onClick={() => navigate('/notary/' + params.requestId)}
+          onClick={notarize}
         >
           Notarize
         </button>
       </div>
       <Routes>
-        <Route path="headers" element={<RequestHeaders data={props.data} />} />
-        <Route path="payloads" element={<RequestPayload data={props.data} />} />
-        <Route path="response" element={<WebResponse data={props.data} />} />
+        <Route path="headers" element={<RequestHeaders requestId={props.requestId} />} />
+        <Route path="payloads" element={<RequestPayload requestId={props.requestId} />} />
+        <Route path="response" element={<WebResponse requestId={props.requestId} />} />
         <Route path="/" element={<NavigateWithParams to="/headers" />} />
       </Routes>
     </>
@@ -88,7 +133,7 @@ function RequestDetailsHeaderTab(props: {
 }
 
 function RequestPayload(props: Props): ReactElement {
-  const { data } = props;
+  const data = useRequest(props.requestId);
   const [url, setUrl] = useState<URL | null>();
   const [json, setJson] = useState<any | null>();
   const [formData, setFormData] = useState<URLSearchParams | null>(null);
@@ -212,7 +257,7 @@ function RequestPayload(props: Props): ReactElement {
 }
 
 function WebResponse(props: Props): ReactElement {
-  const { data } = props;
+  const data = useRequest(props.requestId);
   const [response, setResponse] = useState<Response | null>(null);
   const [json, setJSON] = useState<any | null>(null);
   const [text, setText] = useState<string | null>(null);
@@ -383,7 +428,7 @@ function WebResponse(props: Props): ReactElement {
 }
 
 function RequestHeaders(props: Props): ReactElement {
-  const { data } = props;
+  const data = useRequest(props.requestId);
 
   return (
     <div className="flex flex-col flex-nowrap overflow-y-auto">

src/pages/Home/index.tsx

@@ -48,56 +48,6 @@ export default function Home(): ReactElement {
           Options
         </NavButton>
       </div>
-      <div className="flex flex-col flex-nowrap justify-center items-center gap-2 bg-slate-100 border border-slate-200 p-2">
-        <div className="text-sm text-slate-300">
-          <b>Development Only</b>
-        </div>
-        <div className="flex flex-row flex-nowrap justify-center">
-          <button
-            className="right-2 bg-primary/[0.9] text-white font-bold px-2 py-0.5 hover:bg-primary/[0.8] active:bg-primary"
-            onClick={async () => {
-              const notaryUrl = await get(NOTARY_API_LS_KEY);
-              const websocketProxyUrl = await get(PROXY_API_LS_KEY);
-              const userAgent =
-                'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36';
-              const authToken = 'a28cae3969369c26c1410f5bded83c3f4f914fbc';
-              const accessToken =
-                'AAAAAAAAAAAAAAAAAAAAANRILgAAAAAAnNwIzUejRCOuH5E6I8xnZz4puTs%3D1Zv7ttfk8LF81IUq16cHjhLTvJu4FA33AGWWjCpTnA';
-              const csrfToken =
-                'b73b3488687683372af2ea77486a444ccaa5327bbabad709df1b5161a6b83c8d7ec19106a82cb8dd5f8569632ee95ab4c6dc2abf5ad2ed7fa11b8340fcbe86a8fc00df28db6c4109a807f7cb12dd19da';
-              const twitterId = '0xTsukino';
-              const maxTranscriptSize = 16384;
-
-              const res: any = await chrome.runtime.sendMessage<any, string>({
-                type: BackgroundActiontype.prove_request_start,
-                data: {
-                  url: 'https://api.twitter.com/1.1/account/settings.json',
-                  method: 'GET',
-                  headers: {
-                    Host: 'api.twitter.com',
-                    Accept: '*/*',
-                    'Accept-Encoding': 'identity',
-                    Connection: 'close',
-                    'User-Agent': userAgent,
-                    Authorization: `Bearer ${accessToken}`,
-                    Cookie: `auth_token=${authToken}; ct0=${csrfToken}`,
-                    'X-Csrf-Token': csrfToken,
-                  },
-                  body: '',
-                  maxTranscriptSize,
-                  notaryUrl,
-                  websocketProxyUrl,
-                },
-              });
-
-              console.log(res);
-            }}
-          >
-            Notarize
-          </button>
-        </div>
-        {wasmRes && <div>{wasmRes}</div>}
-      </div>
       {!suggestions.length && (
         <div className="flex flex-col flex-nowrap">
           <div className="flex flex-col items-center justify-center text-slate-300 cursor-default select-none">

src/pages/Requests/Request.tsx

@@ -5,11 +5,10 @@ import { useRequest } from '../../reducers/requests';
 
 export default function Request(): ReactElement {
   const params = useParams<{ requestId: string }>();
-  const request = useRequest(params.requestId);
 
   return (
     <>
-      <RequestDetail data={request} />
+      <RequestDetail requestId={params.requestId} />
     </>
   );
 }

src/reducers/requests.ts

@@ -1,7 +1,9 @@
-import { type RequestLog } from '../pages/Background/actionTypes';
+import { type RequestLog, type RequestHistory } from '../pages/Background/actionTypes';
 import { useSelector } from 'react-redux';
 import { AppRootState } from './index';
 import deepEqual from 'fast-deep-equal';
+import { get, NOTARY_API_LS_KEY, PROXY_API_LS_KEY } from '../utils/storage';
+import { BackgroundActiontype } from '../pages/Background/actionTypes';
 
 enum ActionType {
   '/requests/setRequests' = '/requests/setRequests',
@@ -33,6 +35,37 @@ export const setRequests = (requests: RequestLog[]): Action<RequestLog[]> => ({
   payload: requests,
 });
 
+export const notarizeRequest = (options: RequestHistory) => async () => {
+  const notaryUrl = await get(NOTARY_API_LS_KEY);
+  const websocketProxyUrl = await get(PROXY_API_LS_KEY);
+
+  console.log({
+    type: BackgroundActiontype.prove_request_start,
+    data: {
+      url: options.url,
+      method: options.method,
+      headers: options.headers,
+      body: options.body,
+      maxTranscriptSize: options.maxTranscriptSize,
+      notaryUrl,
+      websocketProxyUrl,
+    },
+  })
+
+  chrome.runtime.sendMessage<any, string>({
+    type: BackgroundActiontype.prove_request_start,
+    data: {
+      url: options.url,
+      method: options.method,
+      headers: options.headers,
+      body: options.body,
+      maxTranscriptSize: options.maxTranscriptSize,
+      notaryUrl,
+      websocketProxyUrl,
+    },
+  });
+}
+
 export const setActiveTab = (
   activeTab: chrome.tabs.Tab | null,
 ): Action<chrome.tabs.Tab | null> => ({
@@ -54,7 +87,7 @@ export default function requests(
       return {
         ...state,
         map: {
-          ...action.payload.reduce(
+          ...(action.payload || []).reduce(
             (acc: { [requestId: string]: RequestLog }, req: RequestLog) => {
               if (req) {
                 acc[req.requestId] = req;