From 50f6d2daa34ff2026a986a5bfb693e75a1a49317 Mon Sep 17 00:00:00 2001
From: tsukino <0xtsukino@gmail.com>
Date: Fri, 17 May 2024 01:12:20 +0800
Subject: [PATCH] feat: add view proof

---
 src/entries/Background/rpc.ts       | 53 +++++++++++++++++------------
 src/entries/Popup/Popup.tsx         | 24 +++++++++++++
 src/entries/Popup/index.tsx         | 15 --------
 src/entries/SidePanel/SidePanel.tsx | 34 +++++++++---------
 4 files changed, 71 insertions(+), 55 deletions(-)

diff --git a/src/entries/Background/rpc.ts b/src/entries/Background/rpc.ts
index c2e52365..855c53f3 100644
--- a/src/entries/Background/rpc.ts
+++ b/src/entries/Background/rpc.ts
@@ -57,6 +57,7 @@ export enum BackgroundActiontype {
   run_plugin = 'run_plugin',
   get_plugin_hashes = 'get_plugin_hashes',
   open_popup = 'open_popup',
+  change_route = 'change_route',
 }
 
 export type BackgroundAction = {
@@ -105,7 +106,6 @@ export type RequestHistory = {
 export const initRPC = () => {
   browser.runtime.onMessage.addListener(
     async (request, sender, sendResponse) => {
-      console.log(request);
       switch (request.type) {
         case BackgroundActiontype.get_requests:
           return handleGetRequests(request, sendResponse);
@@ -487,29 +487,38 @@ async function handleRunPlugin(
   return JSON.parse(out.string());
 }
 
+let cachePopup: browser.Windows.Window | null = null;
+
 async function handleOpenPopup(request: BackgroundAction) {
-  console.log('opening popup');
-  const tab = await browser.tabs.create({
-    url: browser.runtime.getURL('popup.html'),
-    active: false,
-  });
+  if (cachePopup) {
+    browser.windows.update(cachePopup.id!, {
+      focused: true,
+    });
+  } else {
+    const tab = await browser.tabs.create({
+      url: browser.runtime.getURL('popup.html') + '#' + request.data.route,
+      active: false,
+    });
 
-  console.log(request.data);
-  const popup = await browser.windows.create({
-    tabId: tab.id,
-    type: 'popup',
-    focused: true,
-    width: 480,
-    height: 640,
-    left: request.data.position.left,
-    top: request.data.position.top,
-  });
+    const popup = await browser.windows.create({
+      tabId: tab.id,
+      type: 'popup',
+      focused: true,
+      width: 480,
+      height: 640,
+      left: request.data.position.left,
+      top: request.data.position.top,
+    });
+
+    cachePopup = popup;
 
-  // browser.action.openPopup({
-  //   width: 480,
-  //   height: 640,
-  // })
+    const onPopUpClose = (windowId: number) => {
+      if (windowId === popup.id) {
+        cachePopup = null;
+        browser.windows.onRemoved.removeListener(onPopUpClose);
+      }
+    };
 
-  console.log(popup);
-  return popup;
+    browser.windows.onRemoved.addListener(onPopUpClose);
+  }
 }
diff --git a/src/entries/Popup/Popup.tsx b/src/entries/Popup/Popup.tsx
index f87a5aae..2df5f01f 100644
--- a/src/entries/Popup/Popup.tsx
+++ b/src/entries/Popup/Popup.tsx
@@ -19,6 +19,7 @@ import ProofViewer from '../../pages/ProofViewer';
 import History from '../../pages/History';
 import ProofUploader from '../../pages/ProofUploader';
 import browser from 'webextension-polyfill';
+import store from '../../utils/store';
 
 const Popup = () => {
   const dispatch = useDispatch();
@@ -49,6 +50,29 @@ const Popup = () => {
     })();
   }, []);
 
+  useEffect(() => {
+    chrome.runtime.onMessage.addListener((request) => {
+      console.log(request);
+      switch (request.type) {
+        case BackgroundActiontype.push_action: {
+          if (
+            request.data.tabId === store.getState().requests.activeTab?.id ||
+            request.data.tabId === 'background'
+          ) {
+            store.dispatch(request.action);
+          }
+          break;
+        }
+        case BackgroundActiontype.change_route: {
+          if (request.data.tabId === 'background') {
+            navigate(request.route);
+            break;
+          }
+        }
+      }
+    });
+  }, []);
+
   return (
     <div className="flex flex-col w-full h-full overflow-hidden">
       <div className="flex flex-nowrap flex-shrink-0 flex-row items-center relative gap-2 h-9 p-2 cursor-default justify-center bg-slate-300 w-full">
diff --git a/src/entries/Popup/index.tsx b/src/entries/Popup/index.tsx
index 0b586f7f..2acce274 100644
--- a/src/entries/Popup/index.tsx
+++ b/src/entries/Popup/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { HashRouter } from 'react-router-dom';
-
 import Popup from './Popup';
 import './index.scss';
 import { Provider } from 'react-redux';
@@ -11,20 +10,6 @@ import { BackgroundActiontype } from '../Background/rpc';
 const container = document.getElementById('app-container');
 const root = createRoot(container!); // createRoot(container!) if you use TypeScript
 
-chrome.runtime.onMessage.addListener((request) => {
-  switch (request.type) {
-    case BackgroundActiontype.push_action: {
-      if (
-        request.data.tabId === store.getState().requests.activeTab?.id ||
-        request.data.tabId === 'background'
-      ) {
-        store.dispatch(request.action);
-      }
-      break;
-    }
-  }
-});
-
 root.render(
   <Provider store={store}>
     <HashRouter>
diff --git a/src/entries/SidePanel/SidePanel.tsx b/src/entries/SidePanel/SidePanel.tsx
index 6cb1cf22..f9f0662f 100644
--- a/src/entries/SidePanel/SidePanel.tsx
+++ b/src/entries/SidePanel/SidePanel.tsx
@@ -1,11 +1,7 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react';
 import './sidePanel.scss';
 import browser from 'webextension-polyfill';
-import {
-  fetchPluginConfigByHash,
-  getCookiesByHost,
-  runPlugin,
-} from '../../utils/rpc';
+import { fetchPluginConfigByHash, runPlugin } from '../../utils/rpc';
 import { PluginConfig, StepConfig } from '../../utils/misc';
 import { PluginList } from '../../components/PluginList';
 import DefaultPluginIcon from '../../assets/img/default-plugin-icon.png';
@@ -43,7 +39,6 @@ export default function SidePanel(): ReactElement {
       </div>
       {!config && <PluginList />}
       {config && <PluginBody hash={hash} config={config} />}
-      {/*<PluginList />*/}
     </div>
   );
 }
@@ -110,7 +105,6 @@ function StepContent(
     hash,
     setResponse,
     lastResponse,
-    responses,
     prover,
   } = props;
   const [completed, setCompleted] = useState(false);
@@ -153,17 +147,21 @@ function StepContent(
 
   const viewProofInPopup = useCallback(async () => {
     if (!notaryRequest) return;
-    const popup = await browser.runtime.sendMessage({
+    chrome.runtime.sendMessage<any, string>({
+      type: BackgroundActiontype.verify_prove_request,
+      data: notaryRequest,
+    });
+    await browser.runtime.sendMessage({
       type: BackgroundActiontype.open_popup,
       data: {
         position: {
           left: window.screen.width / 2 - 240,
           top: window.screen.height / 2 - 300,
         },
+        route: `/verify/${notaryRequest.id}`,
       },
     });
-    console.log(popup);
-  }, [notaryRequest]);
+  }, [notaryRequest, notarizationId]);
 
   useEffect(() => {
     processStep();
@@ -171,14 +169,7 @@ function StepContent(
 
   let btnContent = null;
 
-  if (notaryRequest?.status === 'pending' || pending) {
-    btnContent = (
-      <button className="button mt-2 w-fit flex flex-row flex-nowrap items-center gap-2 cursor-default">
-        <Icon className="animate-spin" fa="fa-solid fa-spinner" size={1} />
-        <span className="text-sm">{cta}</span>
-      </button>
-    );
-  } else if (completed) {
+  if (completed) {
     btnContent = (
       <button
         className={classNames(
@@ -201,6 +192,13 @@ function StepContent(
         <span className="text-sm">View Proof</span>
       </button>
     );
+  } else if (notaryRequest?.status === 'pending' || pending || notarizationId) {
+    btnContent = (
+      <button className="button mt-2 w-fit flex flex-row flex-nowrap items-center gap-2 cursor-default">
+        <Icon className="animate-spin" fa="fa-solid fa-spinner" size={1} />
+        <span className="text-sm">{cta}</span>
+      </button>
+    );
   } else {
     btnContent = (
       <button