externally_connectable legacy API POC

package.json

@@ -42,7 +42,10 @@
     "@metamask/eslint-config": "^6.0.0",
     "@metamask/eslint-config-nodejs": "^6.0.0",
     "@metamask/onboarding": "^1.0.0",
+    "@metamask/providers": "^16.0.0",
     "@openzeppelin/contracts": "4.9.3",
+    "@walletconnect/modal": "^2.6.2",
+    "@web3modal/ethers5": "^3.2.0",
     "assert": "^2.1.0",
     "base64-sol": "1.1.0",
     "clean-webpack-plugin": "^4.0.0",
@@ -54,9 +57,8 @@
     "eslint-plugin-prettier": "^3.4.0",
     "eth-sig-util": "^2.5.3",
     "ethereumjs-util": "^5.1.1",
-    "@web3modal/ethers5": "^3.2.0",
-    "@walletconnect/modal": "^2.6.2",
     "ethers": "5.7.2",
+    "extension-port-stream": "^3.0.0",
     "gh-pages": "^3.1.0",
     "prettier": "^2.3.1",
     "process": "^0.11.10",

src/index.html

@@ -44,8 +44,8 @@ <h3 class="card-title">
             <div class="warning-message-text">No EIP-6963 Provider Detected</div>
           </div>
         </div>
-        <div class="row" id="eip6963" hidden>
-          <div class="col-xl-8 col-lg-6 col-md-12 col-sm-12 col-12">
+        <div class="row">
+          <div id="eip6963" hidden class="col-xl-8 col-lg-6 col-md-12 col-sm-12 col-12">
             <div class="card eip6963-providers">
               <div class="card-body">
                 <h4 class="card-title">
@@ -79,6 +79,29 @@ <h4 class="card-title">
             >
               Use window.ethereum
           </div>
+          <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12">
+            <div class="card">
+              <div class="card-body">
+                <h4 class="card-title">
+                  externally_connectable
+                </h4>
+                <div class="form-group">
+                  <input
+                    class="form-control"
+                    type="text"
+                    placeholder="Extension ID"
+                    id="externallyConnectableExtensionId"
+                  />
+                </div>
+                <button
+                  class="btn btn-primary btn-lg btn-block mb-3"
+                  id="useExternallyConnectableProviderButton"
+                >
+                  Use externally_connectable Provider
+                </button>
+              </div>
+          </div>
+        </div>
       </section>
       <section>
         <h3 class="card-title">
@@ -364,7 +387,7 @@ <h4 class="card-title">
                   Transfer Tokens
                 </button>
 
-                <a 
+                <a
                   id="transferTokensDeeplink"
                 >
                   <button
@@ -875,7 +898,7 @@ <h4 class="card-title">
                 <h4>
                   Batch of 10 Malicious Transactions
                 </h4>
-          
+
                 <button
                   class="btn btn-primary btn-lg btn-block mb-3"
                   id="sendEIP1559Batch"
@@ -886,7 +909,7 @@ <h4>
                 <h4>
                   Queue of 10 Malicious Transactions
                 </h4>
-          
+
                 <button
                   class="btn btn-primary btn-lg btn-block mb-3"
                   id="sendEIP1559Queue"
@@ -1501,4 +1524,4 @@ <h4 class="card-title">
 
     <script src="main.js" defer></script>
   </body>
-</html>
+</html>

src/index.js

@@ -10,6 +10,8 @@ import {
 } from 'eth-sig-util';
 import { ethers } from 'ethers';
 import { toChecksumAddress } from 'ethereumjs-util';
+import { MetaMaskInpageProvider } from '@metamask/providers';
+import PortStream from 'extension-port-stream';
 import { getPermissionsDisplayString, stringifiableToHex } from './utils';
 import Constants from './constants.json';
 import {
@@ -53,6 +55,23 @@ if (!tokenDecimals) {
 
 const scrollTo = urlSearchParams.get('scrollTo');
 
+/**
+ * Browser
+ */
+const getBrowser = () => {
+  if ('chrome' in globalThis) {
+    // eslint-disable-next-line no-undef
+    return chrome;
+  }
+
+  if ('browser' in globalThis) {
+    // eslint-disable-next-line no-undef
+    return browser;
+  }
+
+  throw new Error('failed to resolve browser object');
+};
+
 /**
  * DOM
  */
@@ -67,6 +86,12 @@ const providersDiv = document.getElementById('providers');
 const useWindowProviderButton = document.getElementById(
   'useWindowProviderButton',
 );
+const useExternallyConnectableProviderButton = document.getElementById(
+  'useExternallyConnectableProviderButton',
+);
+const externallyConnectableExtensionId = document.getElementById(
+  'externallyConnectableExtensionId',
+);
 
 // Dapp Status Section
 const networkDiv = document.getElementById('network');
@@ -618,6 +643,30 @@ const setActiveProviderDetailWindowEthereum = () => {
   setActiveProviderDetail(providerDetail);
 };
 
+const setActiveProviderDetailExternallyConnectable = () => {
+  const extensionId = externallyConnectableExtensionId.value;
+
+  const extensionPort = getBrowser().runtime.connect(extensionId);
+  const connectionStream = new PortStream(extensionPort);
+  const externallyConnectableProvider = new MetaMaskInpageProvider(
+    connectionStream,
+    {
+      shouldSendMetadata: true,
+    },
+  );
+
+  const providerDetail = {
+    info: {
+      uuid: '',
+      name: extensionId,
+      icon: '',
+    },
+    provider: externallyConnectableProvider,
+  };
+
+  setActiveProviderDetail(providerDetail);
+};
+
 const existsProviderDetail = (newProviderDetail) => {
   const existingProvider = providerDetails.find(
     (providerDetail) =>
@@ -3280,6 +3329,8 @@ const initializeFormElements = () => {
    */
 
   useWindowProviderButton.onclick = setActiveProviderDetailWindowEthereum;
+  useExternallyConnectableProviderButton.onclick =
+    setActiveProviderDetailExternallyConnectable;
 };
 
 const setDeeplinks = () => {
@@ -3294,7 +3345,6 @@ const setDeeplinks = () => {
  */
 
 const initialize = async () => {
-  setActiveProviderDetailWindowEthereum();
   detectEip6963();
   initializeFormElements();
   setDeeplinks();