Multichain

package.json

@@ -43,7 +43,9 @@
     "@metamask/eslint-config-nodejs": "^6.0.0",
     "@metamask/eth-sig-util": "^7.0.1",
     "@metamask/onboarding": "^1.0.0",
+    "@metamask/providers": "^16.0.0",
     "@metamask/sdk": "^0.18.6",
+    "@metamask/utils": "^9.1.0",
     "@openzeppelin/contracts": "4.9.6",
     "@walletconnect/modal": "^2.6.2",
     "@web3modal/ethers5": "^3.2.0",
@@ -58,9 +60,11 @@
     "eslint-plugin-prettier": "^3.4.0",
     "ethereumjs-util": "^5.1.1",
     "ethers": "5.7.2",
+    "extension-port-stream": "^3.0.0",
     "gh-pages": "^5.0.0",
     "prettier": "^2.3.1",
     "process": "^0.11.10",
+    "readable-stream": "^4.5.2",
     "stream-browserify": "^3.0.0",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",

src/caip-stream.js

@@ -0,0 +1,79 @@
+import { isObject } from '@metamask/utils';
+import { Transform, pipeline, Duplex } from 'readable-stream';
+
+export class SplitStream extends Duplex {
+  constructor(substream) {
+    super({ objectMode: true });
+    this.substream = substream || new SplitStream(this);
+  }
+
+  _read() {
+    return undefined;
+  }
+
+  _write(value, _encoding, callback) {
+    this.substream.push(value);
+    callback();
+  }
+}
+
+export class CaipToMultiplexStream extends Transform {
+  constructor() {
+    super({ objectMode: true });
+  }
+
+  _write(value, _encoding, callback) {
+    if (isObject(value) && value.type === 'caip-x') {
+      this.push({
+        name: 'metamask-provider',
+        data: value.data,
+      });
+    }
+    callback();
+  }
+}
+
+export class MultiplexToCaipStream extends Transform {
+  constructor() {
+    super({ objectMode: true });
+  }
+
+  _write(value, _encoding, callback) {
+    if (isObject(value) && value.name === 'metamask-provider') {
+      this.push({
+        type: 'caip-x',
+        data: value.data,
+      });
+    }
+    callback();
+  }
+}
+
+/**
+ * Creates a pipeline using a port stream meant to be consumed by the JSON-RPC engine:
+ * - accepts only incoming CAIP messages intended for evm providers from the port stream
+ * - translates those incoming messages into the internal multiplexed format for 'metamask-provider'
+ * - writes these messages to a new stream that the JSON-RPC engine should operate off
+ * - accepts only outgoing messages in the internal multiplexed format for 'metamask-provider' from this new stream
+ * - translates those outgoing messages back to the CAIP message format
+ * - writes these messages back to the port stream
+ *
+ * @param portStream - The source and sink duplex stream
+ * @returns a new duplex stream that should be operated on instead of the original portStream
+ */
+export const createCaipStream = (portStream) => {
+  const splitStream = new SplitStream();
+  const caipToMultiplexStream = new CaipToMultiplexStream();
+  const multiplexToCaipStream = new MultiplexToCaipStream();
+
+  pipeline(
+    portStream,
+    caipToMultiplexStream,
+    splitStream,
+    multiplexToCaipStream,
+    portStream,
+    (err) => console.log('MetaMask CAIP stream', err),
+  );
+
+  return splitStream.substream;
+};

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">
@@ -192,6 +215,59 @@ <h4 class="card-title">
               </div>
             </div>
           </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">
+                  Multichain Actions
+                </h4>
+
+                <button
+                  class="btn btn-primary btn-lg btn-block mb-3"
+                  id="providerAuthorize"
+                >
+                  Send Provider Authorize
+                </button>
+                <button
+                  class="btn btn-primary btn-lg btn-block mb-3"
+                  id="providerAuthorizeFailing"
+                >
+                  Send Provider Authorize (Failing)
+                </button>
+                <button
+                class="btn btn-primary btn-lg btn-block mb-3"
+                id="providerRequestMainnetBlockNumber"
+              >
+                Send Mainnet Block Number Provider Request
+              </button>
+                <button
+                class="btn btn-primary btn-lg btn-block mb-3"
+                id="providerRequestMainnetGasPrice"
+              >
+                Send Mainnet Gas Price Provider Request
+              </button>
+                <button
+                class="btn btn-primary btn-lg btn-block mb-3"
+                id="providerRequestLineaBlockNumber"
+              >
+                Send Linea Block Number Provider Request
+              </button>
+                <button
+                class="btn btn-primary btn-lg btn-block mb-3"
+                id="providerRequestLineaGasPrice"
+              >
+                Send Linea Gas Price Provider Request
+              </button>
+                <button
+                class="btn btn-primary btn-lg btn-block mb-3"
+                id="providerRequestWalletGetPermissions"
+              >
+                Send Wallet Get Permissions Provider Request
+              </button>
+              <pre class="alert alert-secondary" id="multichainResult"></pre>
+              </div>
+            </div>
+          </div>
         </div>
       </section>
 
@@ -906,7 +982,6 @@ <h5>Transactions</h5>
                 >
                   Send Eth Malicious x10 Batch
                 </button>
-
                 <button
                   class="btn btn-primary btn-lg btn-block mb-3"
                   id="sendEIP1559Queue"
@@ -1596,4 +1671,4 @@ <h4 class="card-title">
 
     <script src="main.js" defer></script>
   </body>
-</html>
+</html>