Working Content->background->UI->background->Content message passing

packages/app-extension/package.json

@@ -9,12 +9,12 @@
     "@cardinal/token-manager": "^1.7.9",
     "@coral-xyz/background": "*",
     "@coral-xyz/chat-sdk": "*",
-    "@coral-xyz/provider-core": "*",
-    "@coral-xyz/provider-injection": "*",
     "@coral-xyz/chat-xplat": "*",
     "@coral-xyz/common": "*",
     "@coral-xyz/db": "*",
     "@coral-xyz/message-sdk": "*",
+    "@coral-xyz/provider-core": "*",
+    "@coral-xyz/provider-injection": "*",
     "@coral-xyz/react-common": "*",
     "@coral-xyz/recoil": "*",
     "@coral-xyz/secure-background": "*",

packages/app-extension/src/index.tsx

@@ -5,6 +5,12 @@ import {
   isValidEventOrigin,
   openPopupWindow,
 } from "@coral-xyz/common";
+import {
+  SecureUITransportReceiver,
+  SecureUITransportSender,
+} from "@coral-xyz/secure-background/src/clients";
+import type { SECURE_UI_EVENTS } from "@coral-xyz/secure-background/src/services/secureUI/events";
+import { v4 } from "uuid";
 
 import "./index.css";
 
@@ -25,9 +31,17 @@ chrome.runtime
   })
   .catch(console.error);
 
-// Connect to the background script so it can detect if the popup is closed
-chrome.runtime.connect();
+const secureUITransportReceiver =
+  new SecureUITransportReceiver<SECURE_UI_EVENTS>();
 
+secureUITransportReceiver.setHandler(async (request) => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return {
+    ...request,
+    request: undefined,
+    response: { approved: true },
+  };
+});
 //
 // Configure event listeners.
 //
@@ -56,6 +70,9 @@ root.render(
     <Suspense fallback={null}>
       <App />
     </Suspense>
+    <Suspense fallback={null}>
+      {/* <SecureUI receiver={secureUITransportReceiver} /> */}
+    </Suspense>
     <Suspense fallback={null}>
       <LedgerIframe />
     </Suspense>

packages/background/src/index.ts

@@ -1,10 +1,14 @@
 import { IS_MOBILE } from "@coral-xyz/common";
 import {
   KeyringStore,
-  mockTransportClient,
+  mockTransportSender,
   startSecureService,
 } from "@coral-xyz/secure-background";
-import { ContentScriptTransportServer } from "@coral-xyz/secure-background/src/clients";
+import {
+  ContentScriptTransportReceiver,
+  SecureUITransportReceiver,
+  SecureUITransportSender,
+} from "@coral-xyz/secure-background/src/clients";
 import { EventEmitter } from "eventemitter3";
 
 import * as coreBackend from "./backend/core";
@@ -38,14 +42,15 @@ export function start(cfg: Config): Background {
   const _ethereumConnection = ethereumConnection.start(cfg, events, ethereumB);
 
   if (!cfg.isMobile) {
-    const contentScriptServer = new ContentScriptTransportServer();
+    const contentScriptReceiver = new ContentScriptTransportReceiver();
+    const secureUISender = new SecureUITransportSender();
 
     // New secure service
     startSecureService(
       {
-        backendNotificationClient: mockTransportClient,
-        secureUIClient: mockTransportClient,
-        secureServer: contentScriptServer,
+        backendNotificationClient: mockTransportSender,
+        secureUIClient: secureUISender,
+        secureServer: contentScriptReceiver,
         secureStorage: LocalStorageDb,
       },
       keyringStore

packages/common/src/channel/index.ts

@@ -1,3 +1,4 @@
 export * from "./app-ui";
 export * from "./content-script";
+export * from "./injected-request-manager";
 export * from "./plugin";

packages/provider-core/src/request-manager.ts → packages/common/src/channel/injected-request-manager.ts

@@ -1,22 +1,14 @@
-import type {
-  Event,
-  ResponseHandler,
-  RpcRequest,
-  RpcResponse,
-} from "@coral-xyz/common";
-import { getLogger } from "@coral-xyz/common";
+import type { Event, ResponseHandler, RpcRequest, RpcResponse } from "../";
+import { getLogger, isValidEventOrigin } from "../";
 
-import { isValidEventOrigin } from ".";
-
-const logger = getLogger("common/request-manager");
-
-export class RequestManager {
+export class InjectedRequestManager {
   private _responseResolvers: { [requestId: number]: ResponseHandler } = {};
   private _requestId = 0;
   private _requestChannel: string;
   private _responseChannel: string;
   private _parent?: boolean;
   private _url?: string;
+  private _logger: any;
 
   constructor(
     requestChannel: string,
@@ -28,6 +20,8 @@ export class RequestManager {
     this._requestId = 0;
     this._responseResolvers = {};
     this._parent = parent;
+    this._logger = getLogger("common/request-manager");
+
     if (parent) {
       this._url = window.location.href;
     }
@@ -45,7 +39,7 @@ export class RequestManager {
     const { id, result, error } = event.data.detail;
     const resolver = this._responseResolvers[id];
     if (!resolver) {
-      logger.error("unexpected event", event);
+      this._logger.error("unexpected event", event);
       throw new Error("unexpected event");
     }
     delete this._responseResolvers[id];

packages/common/src/constants.ts

@@ -21,6 +21,8 @@ export const CHANNEL_SOLANA_RPC_RESPONSE = "channel-solana-rpc-response";
 export const CHANNEL_SECURE_BACKGROUND_REQUEST = "channel-secure-event-request";
 export const CHANNEL_SECURE_BACKGROUND_RESPONSE =
   "channel-secure-event-response";
+export const CHANNEL_SECURE_UI_REQUEST = "channel-secure-ui-request";
+export const CHANNEL_SECURE_UI_RESPONSE = "channel-secure-ui-response";
 export const CHANNEL_SOLANA_NOTIFICATION = "channel-solana-notification";
 export const CHANNEL_SOLANA_CONNECTION_RPC_UI =
   "channel-solana-connection-rpc-ui";

packages/provider-core/src/common/ethereum.ts

@@ -1,3 +1,4 @@
+import type { InjectedRequestManager } from "@coral-xyz/common";
 import {
   ETHEREUM_RPC_METHOD_SIGN_AND_SEND_TX,
   ETHEREUM_RPC_METHOD_SIGN_MESSAGE,
@@ -8,13 +9,12 @@ import type { UnsignedTransaction } from "@ethersproject/transactions";
 import { ethers } from "ethers";
 
 import type { ChainedRequestManager } from "../chained-request-manager";
-import type { RequestManager } from "../request-manager";
 
 const { base58: bs58 } = ethers.utils;
 
 export async function signTransaction(
   publicKey: string,
-  requestManager: RequestManager | ChainedRequestManager,
+  requestManager: InjectedRequestManager | ChainedRequestManager,
   transaction: UnsignedTransaction
 ): Promise<TransactionRequest> {
   const serializedTx = encodeTransaction(transaction);
@@ -26,7 +26,7 @@ export async function signTransaction(
 
 export async function sendTransaction(
   publicKey: string,
-  requestManager: RequestManager | ChainedRequestManager,
+  requestManager: InjectedRequestManager | ChainedRequestManager,
   transaction: UnsignedTransaction
 ): Promise<any> {
   const serializedTx = encodeTransaction(transaction);
@@ -38,7 +38,7 @@ export async function sendTransaction(
 
 export async function sendAndConfirmTransaction(
   publicKey: string,
-  requestManager: RequestManager | ChainedRequestManager,
+  requestManager: InjectedRequestManager | ChainedRequestManager,
   transaction: UnsignedTransaction
 ): Promise<any> {
   const signature = this.sendTransaction(
@@ -52,7 +52,7 @@ export async function sendAndConfirmTransaction(
 
 export async function signMessage(
   publicKey: string,
-  requestManager: RequestManager | ChainedRequestManager,
+  requestManager: InjectedRequestManager | ChainedRequestManager,
   msg: string
 ): Promise<Uint8Array> {
   const encodedMsg = ethers.utils.base58.encode(ethers.utils.toUtf8Bytes(msg));

packages/provider-core/src/common/solana.ts

@@ -1,3 +1,4 @@
+import type { InjectedRequestManager } from "@coral-xyz/common";
 import {
   isVersionedTransaction,
   SOLANA_RPC_METHOD_SIGN_ALL_TXS,
@@ -22,13 +23,12 @@ import type {
 import { decode, encode } from "bs58";
 
 import type { ChainedRequestManager } from "../chained-request-manager";
-import type { RequestManager } from "../request-manager";
 
 export async function sendAndConfirm<
   T extends Transaction | VersionedTransaction
 >(
   publicKey: PublicKey,
-  requestManager: RequestManager | ChainedRequestManager,
+  requestManager: InjectedRequestManager | ChainedRequestManager,
   connection: Connection,
   tx: T,
   signers?: Signer[],
@@ -48,7 +48,7 @@ export async function sendAndConfirm<
 
 export async function send<T extends Transaction | VersionedTransaction>(
   publicKey: PublicKey,
-  requestManager: RequestManager | ChainedRequestManager,
+  requestManager: InjectedRequestManager | ChainedRequestManager,
   connection: Connection,
   tx: T,
   signers?: Signer[],
@@ -90,7 +90,7 @@ export async function signTransaction<
   T extends Transaction | VersionedTransaction
 >(
   publicKey: PublicKey,
-  requestManager: RequestManager | ChainedRequestManager,
+  requestManager: InjectedRequestManager | ChainedRequestManager,
   connection: Connection,
   tx: T
 ): Promise<T> {
@@ -118,7 +118,7 @@ export async function signAllTransactions<
   T extends Transaction | VersionedTransaction
 >(
   publicKey: PublicKey,
-  requestManager: RequestManager | ChainedRequestManager,
+  requestManager: InjectedRequestManager | ChainedRequestManager,
   connection: Connection,
   txs: Array<T>
 ): Promise<Array<T>> {
@@ -163,7 +163,7 @@ export async function signAllTransactions<
 
 export async function simulate<T extends Transaction | VersionedTransaction>(
   publicKey: PublicKey,
-  requestManager: RequestManager | ChainedRequestManager,
+  requestManager: InjectedRequestManager | ChainedRequestManager,
   connection: Connection,
   tx: T,
   signers?: Signer[],
@@ -201,7 +201,7 @@ export async function simulate<T extends Transaction | VersionedTransaction>(
 
 export async function signMessage(
   publicKey: PublicKey,
-  requestManager: RequestManager | ChainedRequestManager,
+  requestManager: InjectedRequestManager | ChainedRequestManager,
   msg: Uint8Array
 ): Promise<Uint8Array> {
   const msgStr = encode(msg);

packages/provider-core/src/index.ts

@@ -2,6 +2,5 @@ export { ChainedRequestManager } from "./chained-request-manager";
 export { ProviderEthereumInjection } from "./provider-ethereum";
 export { ProviderEthereumXnftInjection } from "./provider-ethereum-xnft";
 export { ProviderSolanaInjection } from "./provider-solana";
-export { RequestManager } from "./request-manager";
 export { ProviderRootXnftInjection } from "./root-provider-xnft";
 export { isValidEventOrigin } from "@coral-xyz/common";

packages/provider-core/src/provider-ethereum-xnft.ts

@@ -6,6 +6,7 @@ import {
   CHANNEL_ETHEREUM_CONNECTION_INJECTED_RESPONSE,
   CHANNEL_PLUGIN_NOTIFICATION,
   getLogger,
+  InjectedRequestManager,
   PLUGIN_NOTIFICATION_CONNECT,
   PLUGIN_NOTIFICATION_ETHEREUM_CONNECTION_URL_UPDATED,
   PLUGIN_NOTIFICATION_ETHEREUM_PUBLIC_KEY_UPDATED,
@@ -16,7 +17,6 @@ import type { ethers } from "ethers";
 import * as cmn from "./common/ethereum";
 import { PrivateEventEmitter } from "./common/PrivateEventEmitter";
 import type { ChainedRequestManager } from "./chained-request-manager";
-import { RequestManager } from "./request-manager";
 import { isValidEventOrigin } from ".";
 
 const logger = getLogger("provider-xnft-injection");
@@ -26,7 +26,7 @@ const logger = getLogger("provider-xnft-injection");
 //
 export class ProviderEthereumXnftInjection extends PrivateEventEmitter {
   #requestManager: ChainedRequestManager | ChainedRequestManager;
-  #connectionRequestManager: RequestManager;
+  #connectionRequestManager: InjectedRequestManager;
 
   #publicKey?: string;
   #connectionUrl?: string;
@@ -39,7 +39,7 @@ export class ProviderEthereumXnftInjection extends PrivateEventEmitter {
     }
 
     this.#requestManager = requestManager;
-    this.#connectionRequestManager = new RequestManager(
+    this.#connectionRequestManager = new InjectedRequestManager(
       CHANNEL_ETHEREUM_CONNECTION_INJECTED_REQUEST,
       CHANNEL_ETHEREUM_CONNECTION_INJECTED_RESPONSE
     );

packages/provider-core/src/provider-ethereum.ts

@@ -9,6 +9,7 @@ import {
   ETHEREUM_RPC_METHOD_CONNECT,
   ETHEREUM_RPC_METHOD_SWITCH_CHAIN,
   getLogger,
+  InjectedRequestManager,
   NOTIFICATION_ETHEREUM_ACTIVE_WALLET_UPDATED,
   NOTIFICATION_ETHEREUM_CHAIN_ID_UPDATED,
   NOTIFICATION_ETHEREUM_CONNECTED,
@@ -20,7 +21,6 @@ import { ethers } from "ethers";
 import EventEmitter from "eventemitter3";
 
 import * as cmn from "./common/ethereum";
-import { RequestManager } from "./request-manager";
 import { isValidEventOrigin } from ".";
 
 const logger = getLogger("provider-ethereum-injection");
@@ -99,12 +99,12 @@ export class ProviderEthereumInjection extends EventEmitter {
   /**
    * Channel to send extension specific RPC requests to the extension.
    */
-  requestManager: RequestManager;
+  requestManager: InjectedRequestManager;
 
   /**
    *  Channel to send Solana connection API requests to the extension.
    */
-  connectionRequestManager: RequestManager;
+  connectionRequestManager: InjectedRequestManager;
 
   /**
    * The chain ID of the currently connected Ethereum chain.
@@ -144,12 +144,12 @@ export class ProviderEthereumInjection extends EventEmitter {
   constructor() {
     super();
 
-    this.requestManager = new RequestManager(
+    this.requestManager = new InjectedRequestManager(
       CHANNEL_ETHEREUM_RPC_REQUEST,
       CHANNEL_ETHEREUM_RPC_RESPONSE
     );
 
-    this.connectionRequestManager = new RequestManager(
+    this.connectionRequestManager = new InjectedRequestManager(
       CHANNEL_ETHEREUM_CONNECTION_INJECTED_REQUEST,
       CHANNEL_ETHEREUM_CONNECTION_INJECTED_RESPONSE
     );