Popup ready signal to service worker

.gitignore

@@ -62,3 +62,4 @@ packages/*/package
 
 apps/extension/chromium-profile
 
+scripts/private

apps/extension/src/hooks/popup-ready.ts

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+import { PopupResponse, PopupType, Ready } from '../message/popup';
+
+type IsReady = boolean | undefined;
+
+// signals that react is ready (mounted) to service worker
+export const usePopupReady = (isReady: IsReady = undefined) => {
+  const sentMessagesRef = useRef(new Set());
+  const searchParams = new URLSearchParams(window.location.search);
+  const popupId = searchParams.get('popupId');
+
+  useEffect(() => {
+    if (popupId && (isReady === undefined || isReady) && !sentMessagesRef.current.has(popupId)) {
+      sentMessagesRef.current.add(popupId);
+
+      void chrome.runtime.sendMessage({
+        type: PopupType.Ready,
+        data: {
+          popupId,
+        },
+      } as PopupResponse<Ready>);
+    }
+  }, [popupId, isReady]);
+};

apps/extension/src/message/popup.ts

@@ -11,9 +11,10 @@ import { OriginRecord } from '../storage/types';
 export enum PopupType {
   TxApproval = 'TxApproval',
   OriginApproval = 'OriginApproval',
+  Ready = 'PopupReady',
 }
 
-export type PopupMessage = TxApproval | OriginApproval;
+export type PopupMessage = TxApproval | OriginApproval | Ready;
 export type PopupRequest<T extends PopupMessage = PopupMessage> = InternalRequest<T>;
 export type PopupResponse<T extends PopupMessage = PopupMessage> = InternalResponse<T>;
 
@@ -34,6 +35,14 @@ export type TxApproval = InternalMessage<
   }
 >;
 
+export type Ready = InternalMessage<
+  PopupType.Ready,
+  null,
+  {
+    popupId: string;
+  }
+>;
+
 export const isPopupRequest = (req: unknown): req is PopupRequest =>
   req != null &&
   typeof req === 'object' &&
@@ -42,8 +51,19 @@ export const isPopupRequest = (req: unknown): req is PopupRequest =>
   typeof req.type === 'string' &&
   req.type in PopupType;
 
+export const isPopupResponse = (res: unknown): res is PopupResponse =>
+  res != null &&
+  typeof res === 'object' &&
+  ('data' in res || 'error' in res) &&
+  'type' in res &&
+  typeof res.type === 'string' &&
+  res.type in PopupType;
+
 export const isOriginApprovalRequest = (req: unknown): req is InternalRequest<OriginApproval> =>
-  isPopupRequest(req) && req.type === PopupType.OriginApproval && 'origin' in req.request;
+  isPopupRequest(req) && req.type === PopupType.OriginApproval;
 
 export const isTxApprovalRequest = (req: unknown): req is InternalRequest<TxApproval> =>
-  isPopupRequest(req) && req.type === PopupType.TxApproval && 'authorizeRequest' in req.request;
+  isPopupRequest(req) && req.type === PopupType.TxApproval;
+
+export const isPopupReadyResponse = (res: unknown): res is InternalResponse<Ready> =>
+  isPopupResponse(res) && res.type === PopupType.Ready;

apps/extension/src/popup.ts

@@ -1,5 +1,11 @@
 import { sessionExtStorage } from './storage/session';
-import { PopupMessage, PopupRequest, PopupType } from './message/popup';
+import {
+  isPopupReadyResponse,
+  PopupMessage,
+  PopupRequest,
+  PopupResponse,
+  PopupType,
+} from './message/popup';
 import { PopupPath } from './routes/popup/paths';
 import type { InternalRequest, InternalResponse } from '@penumbra-zone/types/internal-msg/shared';
 import { Code, ConnectError } from '@connectrpc/connect';
@@ -18,9 +24,10 @@ const isChromeResponderDroppedError = (
 export const popup = async <M extends PopupMessage>(
   req: PopupRequest<M>,
 ): Promise<M['response']> => {
-  await spawnPopup(req.type);
-  // We have to wait for React to bootup, navigate to the page, and render the components
-  await new Promise(resolve => setTimeout(resolve, 800));
+  const popupId = crypto.randomUUID();
+  await spawnPopup(req.type, popupId);
+  await popupReady(popupId);
+
   const response = await chrome.runtime
     .sendMessage<InternalRequest<M>, InternalResponse<M>>(req)
     .catch((e: unknown) => {
@@ -30,6 +37,7 @@ export const popup = async <M extends PopupMessage>(
         throw e;
       }
     });
+
   if (response && 'error' in response) {
     throw errorFromJson(response.error, undefined, ConnectError.from(response));
   } else {
@@ -73,8 +81,8 @@ const throwIfNeedsLogin = async () => {
   }
 };
 
-const spawnPopup = async (pop: PopupType) => {
-  const popUrl = new URL(chrome.runtime.getURL('popup.html'));
+const spawnPopup = async (pop: PopupType, popupId: string) => {
+  const popUrl = new URL(chrome.runtime.getURL(`popup.html?popupId=${popupId}`));
 
   await throwIfNeedsLogin();
 
@@ -89,3 +97,26 @@ const spawnPopup = async (pop: PopupType) => {
       throw Error('Unknown popup type');
   }
 };
+
+const POPUP_READY_TIMEOUT = 60 * 1000;
+
+const popupReady = async (popupId: string): Promise<void> => {
+  return new Promise((resolve, reject): void => {
+    setTimeout(() => {
+      reject(new Error('Popup ready timed out'));
+    }, POPUP_READY_TIMEOUT);
+
+    const handlePopupReady = (res: PopupResponse): void => {
+      if (!isPopupReadyResponse(res)) {
+        return;
+      }
+
+      if ('data' in res && res.data.popupId === popupId) {
+        chrome.runtime.onMessage.removeListener(handlePopupReady);
+        resolve();
+      }
+    };
+
+    chrome.runtime.onMessage.addListener(handlePopupReady);
+  });
+};

apps/extension/src/routes/popup/popup-layout.tsx

@@ -1,4 +1,5 @@
 import { Outlet } from 'react-router-dom';
+import { usePopupReady } from '../../hooks/popup-ready';
 
 /**
  * @todo: Fix the issue where the detached popup isn't sized correctly. This
@@ -11,8 +12,12 @@ import { Outlet } from 'react-router-dom';
  * routes here in `PopupLayout`, and using a different root class name for each,
  * then removing the hard-coded width from `globals.css`.
  */
-export const PopupLayout = () => (
-  <div className='flex grow flex-col bg-card-radial'>
-    <Outlet />
-  </div>
-);
+export const PopupLayout = () => {
+  usePopupReady();
+
+  return (
+    <div className='flex grow flex-col bg-card-radial'>
+      <Outlet />
+    </div>
+  );
+};