feat: implement p2p prover and verifier

src/components/PluginList/index.scss

@@ -6,7 +6,7 @@
     padding: 0;
     overflow: hidden;
     transition: 200ms opacity;
-
+    transition-delay: 200ms;
   }
 
   &:hover {

src/components/PluginList/index.tsx

@@ -7,7 +7,11 @@
 } from 'react';
 import { fetchPluginHashes, removePlugin, runPlugin } from '../../utils/rpc';
 import { usePluginHashes } from '../../reducers/plugins';
-import { PluginConfig } from '../../utils/misc';
+import {
+  getPluginConfig,
+  hexToArrayBuffer,
+  PluginConfig,
+} from '../../utils/misc';
 import DefaultPluginIcon from '../../assets/img/default-plugin-icon.png';
 import classNames from 'classnames';
 import Icon from '../Icon';
@@ -20,90 +24,121 @@
   PluginInfoModalHeader,
 } from '../PluginInfo';
 import { getPluginConfigByHash } from '../../entries/Background/db';
-
-export function PluginList(props: { className?: string }): ReactElement {
+import { OffscreenActionTypes } from '../../entries/Offscreen/types';
+import { SidePanelActionTypes } from '../../entries/SidePanel/types';
+import { openSidePanel } from '../../entries/utils';
+
+export function PluginList({
+  className,
+  unremovable,
+  onClick,
+}: {
+  className?: string;
+  unremovable?: boolean;
+  onClick?: (hash: string) => void;
+}): ReactElement {
   const hashes = usePluginHashes();
 
   useEffect(() => {
     fetchPluginHashes();
   }, []);
 
   return (
-    <div
-      className={classNames('flex flex-col flex-nowrap gap-1', props.className)}
-    >
+    <div className={classNames('flex flex-col flex-nowrap gap-1', className)}>
       {!hashes.length && (
         <div className="flex flex-col items-center justify-center text-slate-400 cursor-default select-none">
           <div>No available plugins</div>
         </div>
       )}
       {hashes.map((hash) => (
-        <Plugin key={hash} hash={hash} />
+        <Plugin
+          key={hash}
+          hash={hash}
+          unremovable={unremovable}
+          onClick={onClick}
+        />
       ))}
     </div>
   );
 }
 
-export function Plugin(props: {
+export function Plugin({
+  hash,
+  hex,
+  unremovable,
+  onClick,
+  className,
+}: {
   hash: string;
-  onClick?: () => void;
+  hex?: string;
+  className?: string;
+  onClick?: (hash: string) => void;
+  unremovable?: boolean;
 }): ReactElement {
   const [error, showError] = useState('');
   const [config, setConfig] = useState<PluginConfig | null>(null);
   const [pluginInfo, showPluginInfo] = useState(false);
   const [remove, showRemove] = useState(false);
 
-  const onClick = useCallback(async () => {
+  const onRunPlugin = useCallback(async () => {
     if (!config || remove) return;
 
+    if (onClick) {
+      onClick(hash);
+      return;
+    }
+
     try {
-      await runPlugin(props.hash, 'start');
+      await openSidePanel();
 
-      const [tab] = await browser.tabs.query({
-        active: true,
-        currentWindow: true,
+      browser.runtime.sendMessage({
+        type: SidePanelActionTypes.execute_plugin_request,
+        data: {
+          pluginHash: hash,
+        },
       });
 
-      await browser.storage.local.set({ plugin_hash: props.hash });
-
-      // @ts-ignore
-      if (chrome.sidePanel) await chrome.sidePanel.open({ tabId: tab.id });
+      await runPlugin(hash, 'start');
 
       window.close();
     } catch (e: any) {
       showError(e.message);
     }
-  }, [props.hash, config, remove]);
+  }, [hash, config, remove, onClick]);
 
   useEffect(() => {
     (async function () {
-      setConfig(await getPluginConfigByHash(props.hash));
+      if (hex) {
+        setConfig(await getPluginConfig(hexToArrayBuffer(hex)));
+      } else {
+        setConfig(await getPluginConfigByHash(hash));
+      }
     })();
-  }, [props.hash]);
+  }, [hash, hex]);
 
   const onRemove: MouseEventHandler = useCallback(
     (e) => {
       e.stopPropagation();
-      removePlugin(props.hash);
+      removePlugin(hash);
       showRemove(false);
     },
-    [props.hash, remove],
+    [hash, remove],
   );
 
   const onConfirmRemove: MouseEventHandler = useCallback(
     (e) => {
       e.stopPropagation();
       showRemove(true);
     },
-    [props.hash, remove],
+    [hash, remove],
   );
 
   const onPluginInfo: MouseEventHandler = useCallback(
     (e) => {
       e.stopPropagation();
       showPluginInfo(true);
     },
-    [props.hash, pluginInfo],
+    [hash, pluginInfo],
   );
 
   if (!config) return <></>;
@@ -113,8 +148,9 @@
       className={classNames(
         'flex flex-row justify-center border rounded border-slate-300 p-2 gap-2 plugin-box',
         'cursor-pointer hover:bg-slate-100 hover:border-slate-400 active:bg-slate-200',
+        className,
       )}
-      onClick={onClick}
+      onClick={onRunPlugin}
     >
       {!!error && <ErrorModal onClose={() => showError('')} message={error} />}
       {!remove ? (
@@ -129,11 +165,13 @@
                   className="flex flex-row items-center justify-center cursor-pointer plugin-box__remove-icon"
                   onClick={onPluginInfo}
                 />
-                <Icon
-                  fa="fa-solid fa-xmark"
-                  className="flex flex-row items-center justify-center cursor-pointer text-red-500 bg-red-200 rounded-full plugin-box__remove-icon"
-                  onClick={onConfirmRemove}
-                />
+                {!unremovable && (
+                  <Icon
+                    fa="fa-solid fa-xmark"
+                    className="flex flex-row items-center justify-center cursor-pointer text-red-500 bg-red-200 rounded-full plugin-box__remove-icon"
+                    onClick={onConfirmRemove}
+                  />
+                )}
               </div>
             </div>
             <div>{config.description}</div>