feat: Remove api.infuraAPIKey SDK param. Export getInfuraRpcUrls. Add env to playgrounds (#19)

jiexi · adonesky1 · web-flow · commit 990a1e1a359e · 2025-10-24T16:02:44.000-07:00
* rename RpcUrlsMap * migrate changes over * make multichain package a module * Fix import * Fix multichain package typedef? * revert export typedef change * Fix connect package build issue / multichain package exported types * Apply suggestion from @adonesky1 Co-authored-by: Alex Donesky <alex.donesky@consensys.net> * fix typo * remove biome comments * revert esm module change * comment constants * Update packages/connect-multichain/src/multichain/rpc/requestRouter.test.ts Co-authored-by: Alex Donesky <alex.donesky@consensys.net> * Update packages/connect-multichain/src/multichain/rpc/requestRouter.test.ts Co-authored-by: Alex Donesky <alex.donesky@consensys.net> * Update packages/connect-multichain/src/multichain/rpc/requestRouter.test.ts Co-authored-by: Alex Donesky <alex.donesky@consensys.net> * WIP * use getInfuraRpcUrls in playgrounds * fix rpcClient test mocks * remove old test * add dotenv for react-playground * add dotenv for node-playground * add env for react-native-playground --------- Co-authored-by: Alex Donesky <alex.donesky@consensys.net>
diff --git a/.gitignore b/.gitignore
@@ -37,3 +37,6 @@ scripts/coverage
 
 # typescript
 packages/*/*.tsbuildinfo
+
+# env files
+**/.env
diff --git a/packages/connect-multichain/src/domain/multichain/types.ts b/packages/connect-multichain/src/domain/multichain/types.ts
@@ -41,11 +41,9 @@ export type MultichainOptions = {
   /** Dapp identification and branding settings */
   dapp: DappSettings;
   /** Optional API configuration for external services */
-  api?: {
-    /** The Infura API key to use for RPC requests */
-    infuraAPIKey?: string;
+  api: {
     /** A map of RPC URLs to use for read-only requests */
-    readonlyRPCMap?: RpcUrlsMap;
+    readonlyRPCMap: RpcUrlsMap;
   };
   /** Analytics configuration */
   analytics?: { enabled: false } | { enabled: true; integrationType: string };
diff --git a/packages/connect-multichain/src/multichain/index.ts b/packages/connect-multichain/src/multichain/index.ts
@@ -67,10 +67,11 @@ import {
   getDappId,
   openDeeplink,
   setupDappMetadata,
-  setupInfuraProvider,
 } from './utils';
 import { RpcClient } from './rpc/handlers/rpcClient';
 
+export { getInfuraRpcUrls } from '../domain/multichain/api/infura';
+
 // ENFORCE NAMESPACE THAT CAN BE DISABLED
 const logger = createLogger('metamask-sdk:core');
 
@@ -129,8 +130,7 @@ export class MultichainSDK extends MultichainCore {
   }
 
   private constructor(options: MultichainOptions) {
-    const withInfuraRPCMethods = setupInfuraProvider(options);
-    const withDappMetadata = setupDappMetadata(withInfuraRPCMethods);
+    const withDappMetadata = setupDappMetadata(options);
     const allOptions = {
       ...withDappMetadata,
       ui: {
diff --git a/packages/connect-multichain/src/multichain/rpc/handlers/rpcClient.test.ts b/packages/connect-multichain/src/multichain/rpc/handlers/rpcClient.test.ts
@@ -34,8 +34,8 @@ t.describe('RpcClient', () => {
 
 		mockConfig = {
 			api: {
-				infuraAPIKey: 'test-infura-key',
 				readonlyRPCMap: {
+					'eip155:1': 'https://mainnet.infura.io/v3/01234567890',
 					'eip155:11155111': 'https://custom-sepolia.com',
 				},
 			},
@@ -79,7 +79,7 @@ t.describe('RpcClient', () => {
 	});
 
 	t.describe('request', () => {
-		t.it('should use readonlyRPCMap rpc endpoint when infuraAPIKey is provided and readonlyRPCMap contains a chainId that also exists in the infura RPC constants', async () => {
+		t.it('should use readonlyRPCMap rpc endpoint', async () => {
 			const mockJsonResponse = {
 				jsonrpc: '2.0',
 				result: '0x1234567890abcdef',
@@ -103,47 +103,6 @@ t.describe('RpcClient', () => {
 			});
 		});
 
-		t.it(
-			'should use readonlyRPCMap rpc endpoint when infuraAPIKey is provided and readonlyRPCMap does not contain a chainId that also exists in the infura RPC constants',
-			async () => {
-				const mockJsonResponse = {
-					jsonrpc: '2.0',
-					result: '0x1234567890abcdef',
-					id: 1,
-				};
-
-				const mockResponse = {
-					ok: true,
-					json: t.vi.fn().mockResolvedValue(mockJsonResponse),
-				};
-
-				mockFetch.mockResolvedValue(mockResponse);
-
-				const clientModule = await import('./rpcClient');
-				const rpcClient = new clientModule.RpcClient(
-					{
-						...mockConfig,
-						api: {
-							...mockConfig.api,
-							readonlyRPCMap: {
-								'eip155:10000': 'https://custom-rpc.com',
-							},
-						},
-					},
-					sdkInfo,
-				);
-
-				const result = await rpcClient.request({ ...baseOptions, scope: 'eip155:10000' });
-
-				t.expect(result).toBe('0x1234567890abcdef');
-				t.expect(mockFetch).toHaveBeenCalledWith('https://custom-rpc.com', {
-					method: 'POST',
-					headers: defaultHeaders,
-					body: t.expect.stringContaining('"method":"eth_getBalance"'),
-				});
-			},
-		);
-
 			t.it('should throw RPCReadonlyResponseErr when response cannot be parsed as JSON', async () => {
 				const mockResponse = {
 					ok: true,
diff --git a/packages/connect-multichain/src/multichain/rpc/handlers/rpcClient.ts b/packages/connect-multichain/src/multichain/rpc/handlers/rpcClient.ts
@@ -45,20 +45,9 @@ export class RpcClient {
 	}
 
 	private getRpcEndpoint(scope: Scope) {
-		let infuraAPIKey = this.config?.api?.infuraAPIKey;
 
 		let readonlyRPCMap: RpcUrlsMap = this.config?.api?.readonlyRPCMap ?? {};
-		if (infuraAPIKey) {
-			const urlsWithToken = getInfuraRpcUrls(infuraAPIKey);
-			if (readonlyRPCMap) {
-				readonlyRPCMap = {
-					...urlsWithToken,
-					...readonlyRPCMap,
-				};
-			} else {
-				readonlyRPCMap = urlsWithToken;
-			}
-		}
+
 		const rpcEndpoint = readonlyRPCMap[scope];
 		if (!rpcEndpoint) {
 			throw new MissingRpcEndpointErr(`No RPC endpoint found for scope ${scope}`);
diff --git a/packages/connect-multichain/src/multichain/utils/index.test.ts b/packages/connect-multichain/src/multichain/utils/index.test.ts
@@ -26,7 +26,6 @@ t.describe('Utils', () => {
 				url: 'test',
 			},
 			api: {
-				infuraAPIKey: 'testKey',
 			},
 		} as MultichainOptions;
 	});
@@ -127,30 +126,6 @@ t.describe('Utils', () => {
 		});
 	});
 
-	t.describe('setupInfuraProvider', () => {
-		t.it('should not set up infura provider if infuraAPIKey is not provided', async () => {
-			options.api!.infuraAPIKey = undefined;
-			await utils.setupInfuraProvider(options);
-			t.expect(options.api?.readonlyRPCMap).toBeUndefined();
-		});
-
-		t.it('should set up infura provider with infuraAPIKey', async () => {
-			await utils.setupInfuraProvider(options);
-			t.expect(options.api?.readonlyRPCMap?.['eip155:1']).toBe(`https://mainnet.infura.io/v3/testKey`);
-		});
-
-		t.it('Should allow customizing the readonlyRPCMap + merge with defaults', async () => {
-			const customChainId = 'eip155:12345';
-			const customEndpoint = 'https://mainnet.infura.io/12345';
-			options.api!.readonlyRPCMap = {
-				[customChainId]: customEndpoint,
-			};
-			await utils.setupInfuraProvider(options);
-			t.expect(options.api?.readonlyRPCMap?.['eip155:1']).toBe(`https://mainnet.infura.io/v3/testKey`);
-			t.expect(options.api?.readonlyRPCMap?.[customChainId]).toBe(customEndpoint);
-		});
-	});
-
 	t.describe('setupDappMetadata', () => {
 		t.beforeEach(() => {
 			// Mock the document object to avoid undefined errors
diff --git a/packages/connect-multichain/src/multichain/utils/index.ts b/packages/connect-multichain/src/multichain/utils/index.ts
@@ -7,7 +7,6 @@ import {
 } from '@metamask/utils';
 import {
   type DappSettings,
-  getInfuraRpcUrls,
   getPlatformType,
   type MultichainOptions,
   PlatformType,
@@ -118,25 +117,6 @@ export const extractFavicon = () => {
   return favicon;
 };
 
-export function setupInfuraProvider(
-  options: MultichainOptions,
-): MultichainOptions {
-  const infuraAPIKey = options.api?.infuraAPIKey;
-  if (!infuraAPIKey) {
-    return options;
-  }
-  const urlsWithToken = getInfuraRpcUrls(infuraAPIKey);
-  if (options.api?.readonlyRPCMap) {
-    options.api.readonlyRPCMap = {
-      ...options.api.readonlyRPCMap,
-      ...urlsWithToken,
-    };
-  } else if (options.api) {
-    options.api.readonlyRPCMap = urlsWithToken;
-  }
-  return options;
-}
-
 export function setupDappMetadata(
   options: MultichainOptions,
 ): MultichainOptions {
diff --git a/playground/multichain-node-playground/.env.example b/playground/multichain-node-playground/.env.example
@@ -0,0 +1 @@
+INFURA_API_KEY=
diff --git a/playground/multichain-node-playground/README.md b/playground/multichain-node-playground/README.md
@@ -1,6 +1,13 @@
 # Node.js SDK example
 
-Get started by running:
+## Configuration
+
+`cp .env.example .env`
+
+Then fill out the resulting `.env` file.
+
+
+## Usage
 
 ```bash
 # This repo expects you to use `nvm` (https://github.com/nvm-sh/nvm) for node version management.
diff --git a/playground/multichain-node-playground/package.json b/playground/multichain-node-playground/package.json
@@ -38,6 +38,7 @@
     "@types/jest": "^29.5.14",
     "@types/node": "^22.9.0",
     "deepmerge": "^4.2.2",
+    "dotenv": "^17.2.3",
     "ts-jest": "^27.1.4",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.2.0",
diff --git a/playground/multichain-node-playground/src/index.ts b/playground/multichain-node-playground/src/index.ts
@@ -1,7 +1,10 @@
-import { createMetamaskConnect, type SessionData } from '@metamask/connect-multichain';
+import { createMetamaskConnect, getInfuraRpcUrls, type SessionData } from '@metamask/connect-multichain';
 import chalk from 'chalk';
 import inquirer from 'inquirer';
 import ora, { type Ora } from 'ora';
+import dotenv from 'dotenv';
+
+dotenv.config();
 
 // Define the states our application can be in
 type AppState = 'DISCONNECTED' | 'CONNECTING' | 'CONNECTED' | 'SIGNING';
@@ -204,6 +207,9 @@ const main = async () => {
       name: 'Node.js Playground',
       url: 'https://playground.metamask.io',
     },
+    api: {
+      readonlyRPCMap: getInfuraRpcUrls(process.env.INFURA_API_KEY || ''),
+    },
   });
 
   // --- SDK Event Handler ---
diff --git a/playground/multichain-react-native-playground/.env.example b/playground/multichain-react-native-playground/.env.example
@@ -0,0 +1 @@
+EXPO_PUBLIC_INFURA_API_KEY=
diff --git a/playground/multichain-react-native-playground/README.md b/playground/multichain-react-native-playground/README.md
@@ -43,6 +43,12 @@ cd playground/multichain-react-native
 yarn start
 ```
 
+## Configuration
+
+`cp .env.example .env`
+
+Then fill out the resulting `.env` file.
+
 ## Running the App
 
 ### iOS
@@ -229,4 +235,3 @@ This is part of the MetaMask SDK monorepo. Please refer to the main repository f
 ## Support
 
 For issues and questions, please file an issue in the main MetaMask SDK repository.
-
diff --git a/playground/multichain-react-native-playground/src/sdk/SDKProvider.tsx b/playground/multichain-react-native-playground/src/sdk/SDKProvider.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable */
 
-import { createMetamaskConnect, type SDKState, type InvokeMethodOptions, type Scope, type SessionData, type MultichainCore } from '@metamask/connect-multichain';
+import { createMetamaskConnect, type SDKState, type InvokeMethodOptions, type Scope, type SessionData, type MultichainCore, getInfuraRpcUrls } from '@metamask/connect-multichain';
 import type { CaipAccountId } from '@metamask/utils';
 import type React from 'react';
 import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
@@ -33,6 +33,9 @@ export const SDKProvider = ({ children }: { children: React.ReactNode }) => {
 					name: 'playground',
 					url: 'https://playground.metamask.io',
 				},
+				api: {
+					readonlyRPCMap: getInfuraRpcUrls(process.env.EXPO_PUBLIC_INFURA_API_KEY || ''),
+				},
 				mobile: {
 					preferredOpenLink: (deeplink: string) => {
 						Linking.openURL(deeplink);
diff --git a/playground/multichain-react-playground/.env.example b/playground/multichain-react-playground/.env.example
@@ -0,0 +1 @@
+INFURA_API_KEY=
diff --git a/playground/multichain-react-playground/README.md b/playground/multichain-react-playground/README.md
@@ -6,6 +6,12 @@ A test dapp for the MetaMask Multichain API.
 
 `yarn`
 
+## Configuration
+
+`cp .env.example .env`
+
+Then fill out the resulting `.env` file.
+
 ## Usage
 
 To start the development server:
diff --git a/playground/multichain-react-playground/craco.config.js b/playground/multichain-react-playground/craco.config.js
@@ -1,3 +1,4 @@
+require('dotenv').config()
 const webpack = require('webpack');
 
 module.exports = {
@@ -29,6 +30,9 @@ module.exports = {
           Buffer: ['buffer', 'Buffer'],
           process: 'process/browser.js',
         }),
+        new webpack.DefinePlugin({
+          'process.env.INFURA_API_KEY': JSON.stringify(process.env.INFURA_API_KEY),
+        }),
       );
 
       return webpackConfig;
diff --git a/playground/multichain-react-playground/package.json b/playground/multichain-react-playground/package.json
@@ -76,6 +76,7 @@
     "buffer": "^6.0.3",
     "deepmerge": "^4.2.2",
     "depcheck": "^1.4.7",
+    "dotenv": "^17.2.3",
     "jest": "^29.6.4",
     "postcss": "^8.5.6",
     "prettier": "^3.3.3",
diff --git a/playground/multichain-react-playground/src/sdk/SDKProvider.tsx b/playground/multichain-react-playground/src/sdk/SDKProvider.tsx
@@ -2,6 +2,7 @@
 
 import {
   createMetamaskConnect,
+  getInfuraRpcUrls,
   type InvokeMethodOptions,
   type MultichainCore,
   type Scope,
@@ -50,6 +51,9 @@ export const SDKProvider = ({ children }: { children: React.ReactNode }) => {
           name: 'playground',
           url: 'https://playground.metamask.io',
         },
+        api: {
+          readonlyRPCMap: getInfuraRpcUrls(process.env.INFURA_API_KEY || ''),
+        },
         analytics: {
           enabled: false,
         },
diff --git a/yarn.lock b/yarn.lock
@@ -3953,6 +3953,7 @@ __metadata:
     "@types/node": "npm:^22.9.0"
     chalk: "npm:^4.1.2"
     deepmerge: "npm:^4.2.2"
+    dotenv: "npm:^17.2.3"
     inquirer: "npm:^8.2.4"
     ora: "npm:^5.4.1"
     ts-jest: "npm:^27.1.4"
@@ -4044,6 +4045,7 @@ __metadata:
     buffer: "npm:^6.0.3"
     deepmerge: "npm:^4.2.2"
     depcheck: "npm:^1.4.7"
+    dotenv: "npm:^17.2.3"
     jest: "npm:^29.6.4"
     postcss: "npm:^8.5.6"
     prettier: "npm:^3.3.3"
@@ -11104,6 +11106,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dotenv@npm:^17.2.3":
+  version: 17.2.3
+  resolution: "dotenv@npm:17.2.3"
+  checksum: 10/f8b78626ebfff6e44420f634773375c9651808b3e1a33df6d4cc19120968eea53e100f59f04ec35f2a20b2beb334b6aba4f24040b2f8ad61773f158ac042a636
+  languageName: node
+  linkType: hard
+
 "dotenv@npm:~16.4.5":
   version: 16.4.7
   resolution: "dotenv@npm:16.4.7"
