feat: add support for read only RPC calls (#33)

* feat: wip draft evm layer

* chore: more wip

* chore: update provider

* basic feature set

* add lint commands and update tsconfig

* clean up and docs

* lint fixes to match new repo

* update build steps

* simplify getEthAccounts and ensure unique addresses

* modify eth_accounts and eth_coinbase logic

* change currentAccount to a getter

* better chain changed handling

* fix chain configuration

* clean up constants

* remove eip155 constants

* remove optional chain id parameter

* explicit error when invoking ignored method

* refactor and clean-up

* set chain id upon connecting

* port legacy react demo app into repo

* clean up build and dts

* use helpers from @metamask/chain-agnostic-permission

* use @metamask/utils

* update utils on provider

* add logging

* fix provider request chain id

* add session recovery

* fix sentTransaction in test dapp

* feat: add send message capability to transports

* chore: add vite --host script to allow access to playground app via other devices on network

* feat: add vite plugign node polyfills for Buffer support

* add transport notification handler after connect

* fix: make sure qr preload function is supported on all build types

* enable revoke permissions on disconnect

* add connectAndSign

* improve jsdoc

* update README

* add dev-watch mode to connect-multichain

* update legacy playground readme

* WIP: EVM Wrapper MwpTransport caching (#29)

* WIP

* WIP

* fix build

* v broken

* a bit less broken

* fix accountsChanged

* clear cache on disconnect

* remove notificationQueue. Attempt to get cached eth_accounts and eth_chainId

* Fix onConnect and disconnect events? Not sure about this one

* fix: de-parametrize TransportResponse for fixing build

* add responses to the default transport

---------

Co-authored-by: Alex Donesky <[email protected]>
Co-authored-by: ffmcgee <[email protected]>
Co-authored-by: Alex Mendonca <[email protected]>

* cleanup listeners and separate listening roles across class

* fix build

* fix: make sure In App Browser uses default transport

* Fix MWP disconnection by moving wallet_revokeSession call out of ConnectEvm and into default transport

* Fix hasExtensionInstalled and resolve resume not working for IAB

* fix: make sure initial chain id matches permitted chain id

* refactor: properly type wallet_getSession response from attemptSessionRecory + minor docs update

* Fix add/switchChain not prompting for deeplink (#30)

* WIP

* WIP

* fix build

* v broken

* a bit less broken

* fix accountsChanged

* clear cache on disconnect

* remove notificationQueue. Attempt to get cached eth_accounts and eth_chainId

* Fix onConnect and disconnect events? Not sure about this one

* fix: de-parametrize TransportResponse for fixing build

* add responses to the default transport

* Add opendeeplink method in core

---------

Co-authored-by: Alex Donesky <[email protected]>
Co-authored-by: ffmcgee <[email protected]>
Co-authored-by: Alex Mendonca <[email protected]>

* feat: add support for read only rpc calls

* refactor: minor clean up

* restore preload

* fix specs

* lint

* changelog

* cleanup console logs

* changelog

* changelog

* changelog

* changelog

* refactor: validate that the chain is configured for all RPC calls

* refactor: typing readonlyRpcMap

* refactor: inline default timeout for RpcClient

* revert: formatting requestRouter.ts

* test: rpcClient test update (expect AbortSignal)

* minor lint reverts

---------

Co-authored-by: Alex Mendonca <[email protected]>
Co-authored-by: Jiexi Luan <[email protected]>
Co-authored-by: Alex Donesky <[email protected]>

Author: 4 people

packages/connect-evm/src/connect.ts

@@ -86,7 +86,6 @@ export class MetamaskConnectEVM {
    * @param options - The options for the MetamaskConnectEVM instance
    * @param options.core - The core instance of the Multichain SDK
    * @param options.eventHandlers - Optional event handlers for EIP-1193 provider events
-   * @param options.notificationQueue - Optional queue of notifications received during initialization
    */
   constructor({ core, eventHandlers }: MetamaskConnectEVMOptions) {
     this.#core = core;
@@ -423,7 +422,10 @@ export class MetamaskConnectEVM {
   }): Promise<unknown> {
     logger('direct request to metamask-provider called', request);
     const result = this.#core.transport.sendEip1193Message(request);
-    if (request.method === 'wallet_addEthereumChain' || request.method === 'wallet_switchEthereumChain') {
+    if (
+      request.method === 'wallet_addEthereumChain' ||
+      request.method === 'wallet_switchEthereumChain'
+    ) {
       this.#core.openDeeplinkIfNeeded();
     }
     return result;
@@ -613,27 +615,43 @@ export class MetamaskConnectEVM {
  * Creates a new Metamask Connect/EVM instance
  *
  * @param options - The options for the Metamask Connect/EVM layer
+ * @param options.dapp - Dapp identification and branding settings
+ * @param options.api - API configuration including read-only RPC map
+ * @param options.api.readOnlyRpcMap - A map of CAIP chain IDs to RPC URLs for read-only requests
  * @param options.eventEmitter - The event emitter to use for the Metamask Connect/EVM layer
  * @param options.eventHandlers - The event handlers to use for the Metamask Connect/EVM layer
  * @returns The Metamask Connect/EVM layer instance
  */
 export async function createMetamaskConnectEVM(
-  options: Pick<MultichainOptions, 'dapp'> & {
+  options: Pick<MultichainOptions, 'dapp' | 'api'> & {
     eventEmitter?: MinimalEventEmitter;
     eventHandlers?: EventHandlers;
   },
 ): Promise<MetamaskConnectEVM> {
   logger('Creating Metamask Connect/EVM with options:', options);
 
+  // Validate that readOnlyRpcMap is provided and not empty
+  if (
+    !options.api?.readonlyRPCMap ||
+    Object.keys(options.api.readonlyRPCMap).length === 0
+  ) {
+    throw new Error(
+      'readOnlyRpcMap is required and must contain at least one chain configuration',
+    );
+  }
+
   try {
-    // @ts-expect-error TODO: address this
     const core = await createMetamaskConnect({
       ...options,
+      api: {
+        readonlyRPCMap: options.api.readonlyRPCMap,
+      },
     });
 
     return new MetamaskConnectEVM({
       core,
       eventHandlers: options.eventHandlers,
+      readOnlyRpcMap: options.api.readonlyRPCMap,
     });
   } catch (error) {
     console.error('Error creating Metamask Connect/EVM', error);

packages/connect-evm/src/index.ts

@@ -1,4 +1,5 @@
-export { createMetamaskConnectEVM, MetamaskConnectEVM } from './connect';
+export { getInfuraRpcUrls } from '@metamask/connect-multichain';
+export { createMetamaskConnectEVM, type MetamaskConnectEVM } from './connect';
 export type { EIP1193Provider } from './provider';
 
 export type * from './types';

packages/connect-evm/src/provider.ts

@@ -1,4 +1,4 @@
-import type { MultichainCore } from '@metamask/connect-multichain';
+import type { MultichainCore, Scope } from '@metamask/connect-multichain';
 import { EventEmitter } from '@metamask/connect-multichain';
 import { hexToNumber, numberToHex } from '@metamask/utils';
 
@@ -57,9 +57,22 @@ export class EIP1193Provider extends EventEmitter<EIP1193ProviderEvents> {
     }
 
     const chainId = hexToNumber(this.#selectedChainId);
+    const scope: Scope = `eip155:${chainId}`;
+
+    // Validate that the chain is configured in readOnlyRpcMap
+    // This check is performed here to provide better error messages
+    // The RpcClient will also validate, but this gives us a chance to provide
+    // a clearer error message before the request is routed
+    const coreOptions = (this.#core as any).options; // TODO: options is `protected readonly` property, this needs to be refactored so `any` type assertion is not necessary
+    const readonlyRPCMap = coreOptions?.api?.readonlyRPCMap ?? {};
+    if (!readonlyRPCMap[scope]) {
+      throw new Error(
+        `Chain ${scope} is not configured in readOnlyRpcMap. Please add an RPC URL for this chain.`,
+      );
+    }
 
     return this.#core.invokeMethod({
-      scope: `eip155:${chainId}`,
+      scope,
       request: {
         method: request.method,
         params: request.params,

packages/connect-evm/src/types.ts

@@ -6,7 +6,7 @@ import type { EIP1193Provider } from './provider';
 export type Hex = `0x${string}`;
 export type Address = Hex;
 export type CaipAccountId = `${string}:${string}:${string}`;
-
+export type CaipChainId = `${string}:${string}`;
 export type MinimalEventEmitter = Pick<EIP1193Provider, 'on' | 'off' | 'emit'>;
 
 export type EIP1193ProviderEvents = {
@@ -27,6 +27,7 @@ export type MetamaskConnectEVMOptions = {
   core: MultichainCore;
   eventHandlers?: EventHandlers;
   notificationQueue?: unknown[];
+  readOnlyRpcMap?: Record<CaipChainId, string>;
 };
 
 export type AddEthereumChainParameter = {

packages/connect-multichain/src/multichain/index.ts

@@ -32,7 +32,11 @@ import {
 } from '@metamask/multichain-api-client';
 import type { CaipAccountId, Json } from '@metamask/utils';
 
-import { METAMASK_CONNECT_BASE_URL, METAMASK_DEEPLINK_BASE, MWP_RELAY_URL } from '../config';
+import {
+  METAMASK_CONNECT_BASE_URL,
+  METAMASK_DEEPLINK_BASE,
+  MWP_RELAY_URL,
+} from '../config';
 import {
   getVersion,
   type InvokeMethodOptions,
@@ -59,12 +63,12 @@ import {
   isSecure,
   PlatformType,
 } from '../domain/platform';
+import { RpcClient } from './rpc/handlers/rpcClient';
 import { RequestRouter } from './rpc/requestRouter';
 import { DefaultTransport } from './transports/default';
 import { MWPTransport } from './transports/mwp';
 import { keymanager } from './transports/mwp/KeyManager';
 import { getDappId, openDeeplink, setupDappMetadata } from './utils';
-import { RpcClient } from './rpc/handlers/rpcClient';
 
 export { getInfuraRpcUrls } from '../domain/multichain/api/infura';
 
@@ -209,8 +213,6 @@ export class MultichainSDK extends MultichainCore {
   private async getStoredTransport(): Promise<
     DefaultTransport | MWPTransport | undefined
   > {
-    const { ui } = this.options;
-    const { preferExtension = true } = ui;
     const transportType = await this.storage.getTransport();
     const hasExtensionInstalled = await hasExtension();
     if (transportType) {
@@ -602,7 +604,7 @@ export class MultichainSDK extends MultichainCore {
 
     const rpcClient = new RpcClient(options, sdkInfo);
     const requestRouter = new RequestRouter(transport, rpcClient, options);
-    return requestRouter.invokeMethod(request) as Promise<Json>;
+    return requestRouter.invokeMethod(request);
   }
 
   // DRY THIS WITH REQUEST ROUTER

packages/connect-multichain/src/multichain/rpc/handlers/rpcClient.test.ts

@@ -96,11 +96,12 @@ t.describe('RpcClient', () => {
 			const result = await rpcClient.request({ ...baseOptions, scope: 'eip155:11155111' });
 
 			t.expect(result).toBe('0x1234567890abcdef');
-			t.expect(mockFetch).toHaveBeenCalledWith('https://custom-sepolia.com', {
+			t.expect(mockFetch).toHaveBeenCalledWith('https://custom-sepolia.com', t.expect.objectContaining({
 				method: 'POST',
 				headers: defaultHeaders,
 				body: t.expect.stringContaining('"method":"eth_getBalance"'),
-			});
+				signal: t.expect.any(AbortSignal),
+			}));
 		});
 
 			t.it('should throw RPCReadonlyResponseErr when response cannot be parsed as JSON', async () => {
@@ -161,11 +162,12 @@ t.describe('RpcClient', () => {
 
 				const result = await clientWithCustomRPC.request(baseOptions);
 				t.expect(result).toBe('0x123456account12345');
-				t.expect(mockFetch).toHaveBeenCalledWith('https://custom-ethereum-node.com/rpc', {
+				t.expect(mockFetch).toHaveBeenCalledWith('https://custom-ethereum-node.com/rpc', t.expect.objectContaining({
 					method: 'POST',
 					headers: defaultHeaders,
 					body: t.expect.stringMatching(/^\{"jsonrpc":"2\.0","method":"eth_accounts","id":\d+\}$/),
-				});
+					signal: t.expect.any(AbortSignal),
+				}));
 			});
 
       t.it('should throw MissingRpcEndpointErr when no RPC endpoint is available', async () => {

packages/connect-multichain/src/multichain/rpc/handlers/rpcClient.ts

@@ -29,6 +29,7 @@ export class RpcClient {
 
 	/**
 	 * Routes the request to a configured RPC node.
+	 * @param options - The invoke method options
 	 */
 	async request(options: InvokeMethodOptions): Promise<Json> {
 		const { request } = options;
@@ -39,7 +40,7 @@ export class RpcClient {
 			id: getNextRpcId(),
 		});
 		const rpcEndpoint = this.getRpcEndpoint(options.scope);
-		const rpcRequest = await this.fetch(rpcEndpoint, body, 'POST', this.getHeaders(rpcEndpoint));
+		const rpcRequest = await this.fetchWithTimeout(rpcEndpoint, body, 'POST', this.getHeaders(rpcEndpoint), 30_000); // 30 seconds default timeout
 		const response = await this.parseResponse(rpcRequest);
 		return response;
 	}
@@ -55,22 +56,37 @@ export class RpcClient {
 		return rpcEndpoint;
 	}
 
-	private async fetch(endpoint: string, body: string, method: string, headers: Record<string, string>) {
+	private async fetchWithTimeout(
+		endpoint: string,
+		body: string,
+		method: string,
+		headers: Record<string, string>,
+		timeout: number,
+	): Promise<Response> {
+		const controller = new AbortController();
+		const timeoutId = setTimeout(() => controller.abort(), timeout);
+
 		try {
 			const response = await fetch(endpoint, {
 				method,
 				headers,
 				body,
+				signal: controller.signal,
 			});
+			clearTimeout(timeoutId);
 			if (!response.ok) {
 				throw new RPCHttpErr(endpoint, method, response.status);
 			}
 			return response;
 		} catch (error) {
+			clearTimeout(timeoutId);
 			if (error instanceof RPCHttpErr) {
 				throw error;
 			}
-			throw new RPCReadonlyRequestErr(error.message);
+			if (error instanceof Error && error.name === 'AbortError') {
+				throw new RPCReadonlyRequestErr(`Request timeout after ${timeout}ms`);
+			}
+			throw new RPCReadonlyRequestErr(error instanceof Error ? error.message : 'Unknown error');
 		}
 	}
 

playground/legacy-evm-react-vite-playground/src/App.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import {
   MetamaskConnectEVM,
   createMetamaskConnectEVM,
+  getInfuraRpcUrls,
 } from '@metamask/connect-evm';
 import './App.css';
 import { send_eth_signTypedData_v4, send_personal_sign } from './SignHelpers';
@@ -16,11 +17,25 @@ function useSDK() {
 
   useEffect(() => {
     const setupSDK = async () => {
+      const infuraApiKey = import.meta.env.VITE_INFURA_API_KEY || '';
+      const readOnlyRpcMap = infuraApiKey
+        ? getInfuraRpcUrls(infuraApiKey)
+        : {
+            // Fallback public RPC endpoints if no Infura key is provided
+            'eip155:1': 'https://eth.llamarpc.com',
+            'eip155:5': 'https://goerli.infura.io/v3/demo',
+            'eip155:11155111': 'https://sepolia.infura.io/v3/demo',
+            'eip155:137': 'https://polygon-rpc.com',
+          };
+
       const clientSDK = await createMetamaskConnectEVM({
         dapp: {
           name: 'NEXTJS demo',
           url: 'https://localhost:3000',
         },
+        api: {
+          readonlyRPCMap: readOnlyRpcMap,
+        },
       });
       const provider = await clientSDK.getProvider();
 
@@ -99,26 +114,55 @@ export const App = () => {
     }
   };
 
-  const readOnlyCalls = async () => {
-    // if (!sdk?.hasReadOnlyRPCCalls() && !provider) {
-    //   setResponse(
-    //     'readOnlyCalls are not set and provider is not set. Please set your infuraAPIKey in the SDK Options',
-    //   );
-    //   return;
-    // }
-    // try {
-    //   const result = await provider?.request({
-    //     method: 'eth_blockNumber',
-    //     params: [],
-    //   });
-    //   const gotFrom = sdk?.hasReadOnlyRPCCalls()
-    //     ? 'infura'
-    //     : 'MetaMask provider';
-    //   setResponse(`(${gotFrom}) ${result}`);
-    // } catch (e) {
-    //   console.log(`error getting the blockNumber`, e);
-    //   setResponse('error getting the blockNumber');
-    // }
+  const eth_getBalance = async () => {
+    if (!provider || !account) {
+      setResponse('Provider or account not available');
+      return;
+    }
+    try {
+      const result = await provider.request({
+        method: 'eth_getBalance',
+        params: [account, 'latest'],
+      });
+      setResponse(`Balance: ${result}`);
+    } catch (e) {
+      console.error('Error getting balance', e);
+      setResponse(`Error: ${e instanceof Error ? e.message : 'Unknown error'}`);
+    }
+  };
+
+  const eth_blockNumber = async () => {
+    if (!provider) {
+      setResponse('Provider not available');
+      return;
+    }
+    try {
+      const result = await provider.request({
+        method: 'eth_blockNumber',
+        params: [],
+      });
+      setResponse(`Block Number: ${result}`);
+    } catch (e) {
+      console.error('Error getting block number', e);
+      setResponse(`Error: ${e instanceof Error ? e.message : 'Unknown error'}`);
+    }
+  };
+
+  const eth_gasPrice = async () => {
+    if (!provider) {
+      setResponse('Provider not available');
+      return;
+    }
+    try {
+      const result = await provider.request({
+        method: 'eth_gasPrice',
+        params: [],
+      });
+      setResponse(`Gas Price: ${result}`);
+    } catch (e) {
+      console.error('Error getting gas price', e);
+      setResponse(`Error: ${e instanceof Error ? e.message : 'Unknown error'}`);
+    }
   };
 
   const addEthereumChain = () => {
@@ -295,13 +339,30 @@ export const App = () => {
             Add Polygon Chain
           </button>
 
-          <button
-            className={'Button-Normal'}
-            style={{ padding: 10, margin: 10 }}
-            onClick={readOnlyCalls}
-          >
-            readOnlyCalls
-          </button>
+          <div style={{ marginTop: 20, borderTop: '1px solid #ccc', paddingTop: 10 }}>
+            <h3>Read-Only RPC Calls</h3>
+            <button
+              className={'Button-Normal'}
+              style={{ padding: 10, margin: 10 }}
+              onClick={eth_getBalance}
+            >
+              eth_getBalance
+            </button>
+            <button
+              className={'Button-Normal'}
+              style={{ padding: 10, margin: 10 }}
+              onClick={eth_blockNumber}
+            >
+              eth_blockNumber
+            </button>
+            <button
+              className={'Button-Normal'}
+              style={{ padding: 10, margin: 10 }}
+              onClick={eth_gasPrice}
+            >
+              eth_gasPrice
+            </button>
+          </div>
         </div>
       ) : (
         <div>