[BRO-39] Migrate away from injecting API (Draft example of chrome API)

examples/voting/src/Wallet.jsx

@@ -6,7 +6,7 @@
 /* eslint-disable import/no-unresolved */
 /* eslint-disable no-plusplus */
 import React from 'react';
-import { detectConcordiumProvider } from '@concordium/browser-wallet-api-helpers';
+import { concordiumWalletApiProxy } from '@concordium/browser-wallet-api-helpers';
 import { Alert, Button } from 'react-bootstrap';
 import {
     AccountTransactionType,
@@ -19,7 +19,7 @@ import moment from 'moment';
 import { RAW_SCHEMA_BASE64, TESTNET_GENESIS_BLOCK_HASH } from './config';
 
 export async function init(setConnectedAccount) {
-    const client = await detectConcordiumProvider();
+    const client = concordiumWalletApiProxy;
     // Listen for relevant events from the wallet.
     client.on('accountChanged', (account) => {
         console.debug('browserwallet event: accountChange', { account });

packages/browser-wallet-api-helpers/src/detector.ts

@@ -31,3 +31,26 @@ export async function detectConcordiumProvider(timeout = 5000): Promise<WalletAp
         }
     });
 }
+
+function sendMsgToExtension(target: string, payload: object) {
+    const editorExtensionId = 'meacpflndgfiiioniiafpcnpehchnaab';
+    return new Promise((resolve) => {
+        chrome.runtime.sendMessage(editorExtensionId, { target, payload }, (response) => {
+            resolve(response);
+        });
+    });
+}
+
+// intercept all interactions with object
+// in this way we can remotely interact with class instance inside BrowserWallet
+// by forwarding 'property' name and payload
+const proxyHandler = {
+    get(target, prop) {
+        return function (...args) {
+            return sendMsgToExtension(prop, args);
+        };
+    },
+};
+
+// {} as WalletApi - also enables TS annotations
+export const concordiumWalletApiProxy = new Proxy({} as WalletApi, proxyHandler);

packages/browser-wallet-api-helpers/src/index.ts

@@ -1,3 +1,3 @@
 export * from './wallet-api-types';
 export * from './util';
-export { detectConcordiumProvider } from './detector';
+export { detectConcordiumProvider, concordiumWalletApiProxy } from './detector';

packages/browser-wallet/src/background/index.ts

@@ -638,3 +638,30 @@ forwardToPopup(
     withPromptEnd,
     (msg) => createMessageTypeFilter(MessageType.Web3IdProof)(msg) && isAgeProof(msg.payload)
 );
+
+// import { walletApi } from '@concordium/browser-wallet-api';
+// We cannot do a simple import in this case
+// It creates circular dependencies that cause errors during build
+// walletApi is build to work in page context, not inside BW
+
+// Alternatively we can create new implementation of class WalletApi
+// For example implementation of connect()
+// Inside can be used bgMessageHandler.sendInternalMessage
+// But BW page with connect prompt, will try to receive 'window.location' of the page from which request was made
+// So now value 'location' should be provided in payload, and corresponding changes made in React component
+// All this leads to more changes across BW, not just only of creation of new WalletApi class
+class WalletApi {
+    public async connect(): Promise<string | undefined> {
+        return Promise.resolve(bgMessageHandler.sendInternalMessage(InternalMessageType.Connect));
+    }
+}
+
+const walletApi = new WalletApi();
+
+chrome.runtime.onMessageExternal.addListener(function (request, sender, sendResponse) {
+    const { payload, target } = request;
+    walletApi[target](...payload).then((response) => {
+        sendResponse(response);
+    });
+    return true;
+});