Isomorphic message utils

shim.d.ts

@@ -21,6 +21,8 @@ declare module "@arconnect/webext-bridge" {
      */
     chunk: ProtocolWithReturn<ApiCall<Chunk>, ApiResponse<number>>;
 
+    // AUTH POPUP:
+
     /**
      * `createAuthPopup()` in `auth.utils.ts` sends `auth_request` messages from the background to the auth popup, which
      * are received in `auth.provider.ts`.
@@ -58,11 +60,22 @@ declare module "@arconnect/webext-bridge" {
      */
     auth_app_disconnected: number;
 
+    // EMBEDDED:
+
+    embedded_open: null;
+    embedded_close: null;
+    embedded_resize: null;
+    embedded_auth: null;
+    embedded_balance: null;
+    embedded_info: null;
+
     // OTHER:
 
     switch_wallet_event: string | null;
     copy_address: string;
     event: Event;
+
+    // TODO: This doesn't seem to be doing anything. Get rid of `replaceArProtocolLinks`
     ar_protocol: ProtocolWithReturn<{ url: string }, { url: sting }>;
   }
 }

src/api/background/background-setup.ts

@@ -27,6 +27,7 @@ import {
   handleTabUpdate
 } from "~api/background/handlers/browser/tabs/tabs.handler";
 import { log, LOG_GROUP } from "~utils/log/log.utils";
+import { isomorphicOnMessage } from "~utils/messaging/messaging.utils";
 
 export function setupBackgroundService() {
   log(
@@ -36,8 +37,8 @@ export function setupBackgroundService() {
 
   // MESSAGES:
   // Watch for API call and chunk messages:
-  onMessage("api_call", handleApiCallMessage);
-  onMessage("chunk", handleChunkMessage);
+  isomorphicOnMessage("api_call", handleApiCallMessage);
+  isomorphicOnMessage("chunk", handleChunkMessage);
 
   // LIFECYCLE:
 

src/api/background/handlers/browser/tabs/tabs.handler.ts

@@ -24,8 +24,8 @@ export async function handleTabUpdate(
 
   if (popupTabID !== -1 && changeInfo?.status === "loading") {
     isomorphicSendMessage({
+      destination: `popup@${popupTabID}`,
       messageId: "auth_tab_reloaded",
-      tabId: popupTabID,
       data: tabID
     });
   }
@@ -82,8 +82,8 @@ export async function handleTabClosed(closedTabID: number) {
 
   // If some other tab was closed and there's a popup, notify the popup in case it has AuthRequest from the closed tab:
   isomorphicSendMessage({
+    destination: `popup@${popupTabID}`,
     messageId: "auth_tab_closed",
-    tabId: popupTabID,
     data: closedTabID
   });
 }

src/api/background/handlers/storage/active-address-change/active-address-change.handler.ts

@@ -33,30 +33,31 @@ export async function handleActiveAddressChange({
     if (permissionCheck.has.length === 0) return;
 
     // trigger emitter
-    await sendMessage(
-      "event",
-      {
+    await isomorphicSendMessage({
+      destination: `content-script@${tab.id}`,
+      messageId: "event",
+      data: {
         name: "activeAddress",
         value: permissionCheck.result ? newAddress : null
-      },
-      `content-script@${tab.id}`
-    );
+      }
+    });
 
     const popupTabID = getCachedAuthPopupWindowTabID();
 
     if (popupTabID) {
       isomorphicSendMessage({
+        destination: `popup@${popupTabID}`,
         messageId: "auth_active_wallet_change",
-        tabId: popupTabID,
+        // tabId: popupTabID,
         data: tab.id
       });
     }
 
     // trigger event via message
-    await sendMessage(
-      "switch_wallet_event",
-      permissionCheck ? newAddress : null,
-      `content-script@${tab.id}`
-    );
+    await isomorphicSendMessage({
+      destination: `content-script@${tab.id}`,
+      messageId: "switch_wallet_event",
+      data: permissionCheck ? newAddress : null
+    });
   });
 }

src/api/background/handlers/storage/app-config-change/app-config-change.handler.ts

@@ -8,6 +8,7 @@ import { forEachTab } from "~applications/tab";
 import { compareGateways } from "~gateways/utils";
 import type { InitAppParams } from "~applications/application";
 import Application, { PREFIX } from "~applications/application";
+import { isomorphicSendMessage } from "~utils/messaging/messaging.utils";
 
 export async function handleAppConfigChange(
   changes: Record<string, StorageChange<InitAppParams>>,
@@ -98,10 +99,16 @@ export async function handleAppConfigChange(
     const eventsForTab = events
       .filter(({ appURL }) => getAppURL(tab.url) === appURL)
       .map((e) => e.event);
+
     // send the events
     for (const event of eventsForTab) {
       // trigger emiter
-      await sendMessage("event", event, `content-script@${tab.id}`);
+      // TODO: Remove this await here
+      await isomorphicSendMessage({
+        destination: `content-script@${tab.id}`,
+        messageId: "event",
+        data: event
+      });
     }
   });
 }

src/api/background/handlers/storage/apps-change/app-change.handler.ts

@@ -19,14 +19,14 @@ export async function handleAppsChange({
 }: StorageChange<string[]>) {
   // message to send the event
   const triggerEvent = (tabID: number, type: "connect" | "disconnect") =>
-    sendMessage(
-      "event",
-      {
+    isomorphicSendMessage({
+      destination: `content-script@${tabID}`,
+      messageId: "event",
+      data: {
         name: type,
         value: null
-      },
-      `content-script@${tabID}`
-    );
+      }
+    });
 
   // trigger events
   forEachTab(async (tab) => {
@@ -45,8 +45,8 @@ export async function handleAppsChange({
 
       if (popupTabID) {
         isomorphicSendMessage({
+          destination: `popup@${popupTabID}`,
           messageId: "auth_app_disconnected",
-          tabId: popupTabID,
           data: tab.id
         });
       }
@@ -73,8 +73,8 @@ export async function handleAppsChange({
 
       if (popupTabID) {
         isomorphicSendMessage({
+          destination: `popup@${popupTabID}`,
           messageId: "auth_app_disconnected",
-          tabId: popupTabID,
           data: tab.id
         });
       }

src/api/background/handlers/storage/wallet-change/wallet-change.handler.ts

@@ -5,6 +5,7 @@ import Application from "~applications/application";
 import { forEachTab } from "~applications/tab";
 import { getAppURL } from "~utils/format";
 import browser from "webextension-polyfill";
+import { isomorphicSendMessage } from "~utils/messaging/messaging.utils";
 
 /**
  * Added wallets change listener.
@@ -32,14 +33,14 @@ export async function handleWalletsChange({
     if (permissionCheck.has.length === 0) return;
 
     // trigger emiter
-    await sendMessage(
-      "event",
-      {
+    await isomorphicSendMessage({
+      destination: `content-script@${tab.id}`,
+      messageId: "event",
+      data: {
         name: "addresses",
         value: permissionCheck.result ? addresses : null
-      },
-      `content-script@${tab.id}`
-    );
+      }
+    });
   });
 
   // add or remove ANS label change listener

src/api/foreground/foreground-setup-ar-protocol-links.ts

@@ -1,5 +1,6 @@
 import { sendMessage } from "@arconnect/webext-bridge";
 import { isString } from "typed-assert";
+import { isomorphicSendMessage } from "~utils/messaging/messaging.utils";
 
 // TODO: This is not enough for client-rendered pages (e.g. React apps):
 
@@ -21,12 +22,11 @@ export async function replaceArProtocolLinks() {
   for (const el of elements) {
     // ask the background script to return the correct ar:// url
     try {
-      // TODO: Replace with postMessage for the embedded wallet:
-      const res = await sendMessage(
-        "ar_protocol",
-        { url: el[fields[el.tagName]] },
-        "background"
-      );
+      const res = await isomorphicSendMessage({
+        destination: "background",
+        messageId: "ar_protocol",
+        data: { url: el[fields[el.tagName]] }
+      });
 
       // check result
       isString(res?.url);

src/api/foreground/foreground-setup-events.ts

@@ -1,4 +1,5 @@
 import { onMessage } from "@arconnect/webext-bridge";
+import { isomorphicOnMessage } from "~utils/messaging/messaging.utils";
 
 // Some backend handlers (`src/api/background/handlers/*`) will use `sendMessage(...)` to communicate with the
 // `event.ts` content script, which in turn calls `postMessage()`, dispatches events or performs certain actions in the
@@ -10,9 +11,9 @@ import { onMessage } from "@arconnect/webext-bridge";
 //
 // See https://stackoverflow.com/questions/16266474/javascript-listen-for-postmessage-events-from-specific-iframe
 
-export function setupEventListeners(iframe?: HTMLIFrameElement) {
+export function setupEventListeners() {
   // event emitter events
-  onMessage("event", ({ data, sender }) => {
+  isomorphicOnMessage("event", ({ data, sender }) => {
     if (sender.context !== "background") return;
 
     // send to mitt instance
@@ -24,7 +25,7 @@ export function setupEventListeners(iframe?: HTMLIFrameElement) {
 
   // listen for wallet switches
   /** @deprecated */
-  onMessage("switch_wallet_event", ({ data, sender }) => {
+  isomorphicOnMessage("switch_wallet_event", ({ data, sender }) => {
     if (sender.context !== "background") return;
 
     // dispatch custom event
@@ -35,9 +36,10 @@ export function setupEventListeners(iframe?: HTMLIFrameElement) {
     );
   });
 
+  // TODO: This will never be used for the embedded wallet, so there's no need to change it to `isomorphicSendMessage()`:
   // copy address in the content script
   // (not possible in the background)
-  onMessage("copy_address", async ({ sender, data: addr }) => {
+  isomorphicOnMessage("copy_address", async ({ sender, data: addr }) => {
     if (sender.context !== "background") return;
 
     const input = document.createElement("input");

src/api/modules/sign/sign_auth.ts

@@ -74,8 +74,8 @@ export function signAuth(
 
         for (const chunk of dataChunks.concat(tagChunks)) {
           await isomorphicSendMessage({
+            destination: `popup@${popupWindowTabID}`,
             messageId: "auth_chunk",
-            tabId: popupWindowTabID,
             data: chunk
           });
         }
@@ -95,8 +95,8 @@ export function signAuth(
         };
 
         await isomorphicSendMessage({
+          destination: `popup@${popupWindowTabID}`,
           messageId: "auth_chunk",
-          tabId: popupWindowTabID,
           data: endChunk
         });
 
@@ -164,8 +164,8 @@ export function signAuthKeystone(
 
         for (const chunk of dataChunks) {
           await isomorphicSendMessage({
+            destination: `popup@${popupWindowTabID}`,
             messageId: "auth_chunk",
-            tabId: popupWindowTabID,
             data: chunk
           });
         }
@@ -185,8 +185,8 @@ export function signAuthKeystone(
         };
 
         await isomorphicSendMessage({
+          tabId: `popup@${popupWindowTabID}`,
           messageId: "auth_chunk",
-          tabId: popupWindowTabID,
           data: endChunk
         });
 

src/applications/tab.ts

@@ -1,5 +1,7 @@
 import browser from "webextension-polyfill";
 
+// TODO: Mock all these for the embedded wallet...
+
 /**
  * Get a browser tab by id
  *

src/contents/api.ts

@@ -3,6 +3,7 @@ import type { PlasmoCSConfig } from "plasmo";
 import type { ApiCall } from "shim";
 import injectedScript from "url:./injected/setup-wallet-sdk.injected-script.ts";
 import { log, LOG_GROUP } from "~utils/log/log.utils";
+import { isomorphicSendMessage } from "~utils/messaging/messaging.utils";
 
 log(LOG_GROUP.SETUP, "api.content-script.ts");
 
@@ -34,6 +35,9 @@ container.removeChild(script);
 //
 //    iframeElement.contentWindow.postMessage(...);
 
+// TODO: The embedded wallet probably needs a listener equivalent to this one, or replace the postMessage in
+// `foreground-setup-wallet.ts`.
+
 window.addEventListener(
   "message",
   async ({ data }: MessageEvent<ApiCall & { ext: "arconnect" }>) => {
@@ -50,11 +54,11 @@ window.addEventListener(
     log(LOG_GROUP.API, `${data.type} (${data.callID})...`);
 
     // send call to the background
-    const res = await sendMessage(
-      data.type === "chunk" ? "chunk" : "api_call",
-      data,
-      "background"
-    );
+    const res = await isomorphicSendMessage({
+      destination: "background",
+      messageId: data.type === "chunk" ? "chunk" : "api_call",
+      data
+    });
 
     log(LOG_GROUP.API, `${data.type} (${data.callID}) =`, res);