feat: Metamask SDK integration with the metamask wallet connector

.changeset/rotten-lies-join.md

@@ -0,0 +1,6 @@
+---
+"@rainbow-me/rainbowkit": minor
+"example": patch
+---
+
+Metamask SDK integration with the metamask wallet connector

examples/with-create-react-app/package.json

@@ -16,7 +16,7 @@
  "typescript": "5.4.2",
  "util": "0.12.5",
  "viem": "2.9.31",
- "wagmi": "^2.9.2",
+ "wagmi": "^2.10.7",
  "@tanstack/react-query": "^5.28.4"
  },
  "scripts": {

examples/with-next-app-i18n/package.json

@@ -14,7 +14,7 @@
  "react": "^18.3.0",
  "react-dom": "^18.3.0",
  "viem": "2.9.31",
- "wagmi": "^2.9.2",
+ "wagmi": "^2.10.7",
  "@tanstack/react-query": "^5.28.4"
  },
  "devDependencies": {

examples/with-next-app/package.json

@@ -13,7 +13,7 @@
  "react": "^18.3.0",
  "react-dom": "^18.3.0",
  "viem": "2.9.31",
- "wagmi": "^2.9.2",
+ "wagmi": "^2.10.7",
  "@tanstack/react-query": "^5.28.4"
  },
  "devDependencies": {

examples/with-next-custom-button/package.json

@@ -13,7 +13,7 @@
  "react": "^18.3.0",
  "react-dom": "^18.3.0",
  "viem": "2.9.31",
- "wagmi": "^2.9.2",
+ "wagmi": "^2.10.7",
  "@tanstack/react-query": "^5.28.4"
  },
  "devDependencies": {

examples/with-next-mint-nft/package.json

@@ -14,7 +14,7 @@
  "react": "^18.3.0",
  "react-dom": "^18.3.0",
  "viem": "2.9.31",
- "wagmi": "^2.9.2",
+ "wagmi": "^2.10.7",
  "@tanstack/react-query": "^5.28.4"
  },
  "devDependencies": {

examples/with-next-rainbow-button/package.json

@@ -13,7 +13,7 @@
  "react": "^18.3.0",
  "react-dom": "^18.3.0",
  "viem": "2.9.31",
- "wagmi": "^2.9.2",
+ "wagmi": "^2.10.7",
  "@tanstack/react-query": "^5.28.4"
  },
  "devDependencies": {

examples/with-next-siwe-iron-session/package.json

@@ -16,7 +16,7 @@
  "react-dom": "^18.3.0",
  "siwe": "^2.1.4",
  "viem": "2.9.31",
- "wagmi": "^2.9.2",
+ "wagmi": "^2.10.7",
  "@tanstack/react-query": "^5.28.4"
  },
  "devDependencies": {

examples/with-next-siwe-next-auth/package.json

@@ -17,7 +17,7 @@
  "react-dom": "^18.3.0",
  "siwe": "^2.1.4",
  "viem": "2.9.31",
- "wagmi": "^2.9.2",
+ "wagmi": "^2.10.7",
  "@tanstack/react-query": "^5.28.4"
  },
  "devDependencies": {

examples/with-next-wallet-button/package.json

@@ -13,7 +13,7 @@
  "react": "^18.3.0",
  "react-dom": "^18.3.0",
  "viem": "2.9.31",
- "wagmi": "^2.9.2",
+ "wagmi": "^2.10.7",
  "@tanstack/react-query": "^5.28.4"
  },
  "devDependencies": {

examples/with-next/package.json

@@ -13,7 +13,7 @@
  "react": "^18.3.0",
  "react-dom": "^18.3.0",
  "viem": "2.9.31",
- "wagmi": "^2.9.2",
+ "wagmi": "^2.10.7",
  "@tanstack/react-query": "^5.28.4"
  },
  "devDependencies": {

examples/with-remix/package.json

@@ -16,7 +16,7 @@
  "react": "^18.3.0",
  "react-dom": "^18.3.0",
  "viem": "2.9.31",
- "wagmi": "^2.9.2",
+ "wagmi": "^2.10.7",
  "@tanstack/react-query": "^5.28.4"
  },
  "devDependencies": {

examples/with-vite/package.json

@@ -13,7 +13,7 @@
  "react": "^18.3.0",
  "react-dom": "^18.3.0",
  "viem": "2.9.31",
- "wagmi": "^2.9.2",
+ "wagmi": "^2.10.7",
  "@tanstack/react-query": "^5.28.4"
  },
  "devDependencies": {

package.json

@@ -72,7 +72,7 @@
  "typescript": "5.4.2",
  "viem": "2.9.31",
  "vitest": "^0.33.0",
- "wagmi": "^2.9.2",
+ "wagmi": "^2.10.7",
  "dotenv": "^16.4.5"
  },
  "packageManager": "pnpm@9.1.1",

packages/create-rainbowkit/generated-test-app/package.json

@@ -14,7 +14,7 @@
  "react": "^18.3.0",
  "react-dom": "^18.3.0",
  "viem": "2.9.31",
- "wagmi": "^2.9.2"
+ "wagmi": "^2.10.7"
  },
  "devDependencies": {
  "@types/node": "^18.19.3",

packages/create-rainbowkit/templates/next-app/package.json

@@ -14,7 +14,7 @@
  "react": "^18.3.0",
  "react-dom": "^18.3.0",
  "viem": "2.9.31",
- "wagmi": "^2.9.2"
+ "wagmi": "^2.10.7"
  },
  "devDependencies": {
  "@types/node": "^18.19.3",

packages/example/package.json

@@ -16,7 +16,7 @@
  "react-dom": "^18.3.0",
  "siwe": "^2.1.4",
  "viem": "2.9.31",
- "wagmi": "^2.9.2"
+ "wagmi": "^2.10.7"
  },
  "scripts": {
  "dev": "next dev",

packages/example/src/wagmi.ts

@@ -123,6 +123,10 @@ const sei = {
 // Testing `preference` type
 coinbaseWallet.preference = 'all';
 
+metaMaskWallet.parameters = {
+ // infuraAPIKey: '01234',
+};
+
 export const config = getDefaultConfig({
  appName: 'RainbowKit Demo',
  projectId,

packages/rainbow-button/package.json

@@ -40,7 +40,7 @@
  "react": ">=18",
  "react-dom": ">=18",
  "viem": "2.x",
- "wagmi": "^2.9.0"
+ "wagmi": "^2.10.7"
  },
  "repository": {
  "type": "git",

packages/rainbowkit/package.json

@@ -46,7 +46,7 @@
  "react": ">=18",
  "react-dom": ">=18",
  "viem": "2.x",
- "wagmi": "^2.9.0"
+ "wagmi": "^2.10.7"
  },
  "devDependencies": {
  "@testing-library/jest-dom": "^6.2.0",

packages/rainbowkit/src/wallets/useWalletConnectors.ts

@@ -20,6 +20,10 @@ import {
  rainbowKitConnectorWithWalletConnect,
 } from './groupedWallets';
 import { addRecentWalletId, getRecentWalletIds } from './recentWalletIds';
+import {
+ METAMASK_WALLET_ID,
+ MetaMaskConnector,
+} from './walletConnectors/metaMaskWallet/metaMaskWallet';
 
 export interface WalletConnector extends WalletInstance {
  ready?: boolean;
@@ -107,6 +111,10 @@ export function useWalletConnectors(
  return provider.qrUrl;
  }
 
+ if (connector.id === METAMASK_WALLET_ID) {
+ return (connector as unknown as MetaMaskConnector).getDisplayUri();
+ }
+
  return new Promise<string>((resolve) =>
  // Wagmi v2 doesn't have a return type for provider yet
  // @ts-expect-error

packages/rainbowkit/src/wallets/walletConnectors/metaMaskWallet/README.md

@@ -0,0 +1,57 @@
+# Implementation of MetaMask Wallet Connector
+
+ Rainbow kit relies on the [Wagmi library](https://github.com/wevm/wagmi/tree/main) and its connectors, but it wraps the connector in a custom “wallet” to add more functionality. The Wagmi [metamask connector](https://github.com/wevm/wagmi/blob/main/packages/connectors/src/metaMask.ts) use the [metamask sdk](https://github.com/MetaMask/metamask-sdk/tree/main).
+
+ Due to specific usage of Wagmi by RainbowKit, we had to fix some issues.
+
+## Fix the `getChainId` function
+ RainbowKit requests the chainId from the connector before connecting to it. 
+ In our case, we need to start the MetaMask connector even if the browser extension is not installed, to allow connection through the QR code. 
+ However, the current implementation of the `getChainId` function in the MetaMask connector throws an error if the browser extension is not installed.
+
+ See the folowing call stack:
+ - [rainbowkit/packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.tsx#selectWallet](https://github.com/EdouardBougon/rainbowkit/blob/497614b30db7e636b4e560f1b81f6a1315e13429/packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.tsx#L149)
+ - [rainbowkit/packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.tsx#connectToWallet](https://github.com/EdouardBougon/rainbowkit/blob/497614b30db7e636b4e560f1b81f6a1315e13429/packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.tsx#L161)
+ - [wagmi/packages/connectors/src/metaMask.ts#connect](https://github.com/wevm/wagmi/blob/4e9493aa0fb2d7801040a4000e8c634eb0aba608/packages/connectors/src/metaMask.ts#L61)
+ - [metamask-sdk/packages/sdk/src/sdk.ts#connect](https://github.com/MetaMask/metamask-sdk/blob/23127c42357e93fa23968e769051ded8bcb9f718/packages/sdk/src/sdk.ts#L274)
+ - [metamask-sdk/packages/sdk/src/services/MetaMaskSDK/ConnectionManager/connect.ts#connect](https://github.com/MetaMask/metamask-sdk/blob/23127c42357e93fa23968e769051ded8bcb9f718/packages/sdk/src/services/MetaMaskSDK/ConnectionManager/connect.ts#L16)
+ - [metamask-sdk/packages/sdk/src/provider/initializeMobileProvider.ts#sendRequest](https://github.com/MetaMask/metamask-sdk/blob/90f2b7e96bcb7cca2f6c409909435325a615e2c1/packages/sdk/src/provider/initializeMobileProvider.ts#L122)
+ - [metamask-sdk/packages/sdk/src/provider/initializeMobileProvider.ts#return chainId](https://github.com/MetaMask/metamask-sdk/blob/23127c42357e93fa23968e769051ded8bcb9f718/packages/sdk/src/provider/initializeMobileProvider.ts#L193)
+
+ To avoid this error, we decided to override the `getChainId` function of the connector to return the first id in the chain list if the call throws an error.
+
+
+## Fixing the Emission of `display_uri`
+ RainbowKit uses the `display_uri` event to display the QR code for wallet connection. 
+ It starts listening to this event before connecting to the wallet, repeating the process at each connection attempt. 
+ However, the MetaMask SDK only emits this event once, during the first connection attempt. 
+ If the user closes the connection modal and tries to connect again, the QR code will not be displayed.
+
+ See the folowing call stack:
+
+ - [rainbowkit/packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.tsx#selectWallet](https://github.com/EdouardBougon/rainbowkit/blob/497614b30db7e636b4e560f1b81f6a1315e13429/packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.tsx#L149)
+ - [rainbowkit/packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.tsx#onQrCode](https://github.com/EdouardBougon/rainbowkit/blob/497614b30db7e636b4e560f1b81f6a1315e13429/packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.tsx#L131)
+ - [rainbowkit/packages/rainbowkit/src/wallets/useWalletConnectors.ts#getQrCodeUri](https://github.com/EdouardBougon/rainbowkit/blob/497614b30db7e636b4e560f1b81f6a1315e13429/packages/rainbowkit/src/wallets/useWalletConnectors.ts#L210) 
+ - [rainbowkit/packages/rainbowkit/src/wallets/useWalletConnectors.ts#getWalletConnectUri](https://github.com/EdouardBougon/rainbowkit/blob/497614b30db7e636b4e560f1b81f6a1315e13429/packages/rainbowkit/src/wallets/useWalletConnectors.ts#L121) (Start listening to the display_uri event)
+ - [rainbowkit/packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.tsx#connectToWallet](https://github.com/EdouardBougon/rainbowkit/blob/497614b30db7e636b4e560f1b81f6a1315e13429/packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.tsx#L161)
+ - [wagmi/packages/connectors/src/metaMask.ts#connect](https://github.com/wevm/wagmi/blob/4e9493aa0fb2d7801040a4000e8c634eb0aba608/packages/connectors/src/metaMask.ts#L61)
+ - [metamask-sdk/packages/sdk/src/sdk.ts#connect](https://github.com/MetaMask/metamask-sdk/blob/23127c42357e93fa23968e769051ded8bcb9f718/packages/sdk/src/sdk.ts#L274)
+ - [metamask-sdk/packages/sdk/src/services/MetaMaskSDK/ConnectionManager/connect.ts#connect](https://github.com/MetaMask/metamask-sdk/blob/23127c42357e93fa23968e769051ded8bcb9f718/packages/sdk/src/services/MetaMaskSDK/ConnectionManager/connect.ts#L16)
+ - [metamask-sdk/packages/sdk/src/sdk.ts#init](https://github.com/MetaMask/metamask-sdk/blob/23127c42357e93fa23968e769051ded8bcb9f718/packages/sdk/src/sdk.ts#L266)
+ - [❌ metamask-sdk/packages/sdk/src/services/MetaMaskSDK/InitializerManager/initializeMetaMaskSDK.ts#initializeMetaMaskSDK](https://github.com/MetaMask/metamask-sdk/blob/23127c42357e93fa23968e769051ded8bcb9f718/packages/sdk/src/services/MetaMaskSDK/InitializerManager/initializeMetaMaskSDK.ts#L16) (If we already attempted to connect, the second attempt will stop here)
+ - [metamask-sdk/packages/sdk/src/services/MetaMaskSDK/InitializerManager/performSDKInitialization.ts#performSDKInitialization](https://github.com/MetaMask/metamask-sdk/blob/23127c42357e93fa23968e769051ded8bcb9f718/packages/sdk/src/services/MetaMaskSDK/InitializerManager/performSDKInitialization.ts#L41)
+ - [metamask-sdk/packages/sdk/src/services/RemoteConnection/RemoteConnection.ts#startConnection](https://github.com/MetaMask/metamask-sdk/blob/23127c42357e93fa23968e769051ded8bcb9f718/packages/sdk/src/services/RemoteConnection/RemoteConnection.ts#L154)
+ - [metamask-sdk/packages/sdk/src/services/RemoteConnection/ConnectionManager/startConnection.ts#startConnection](https://github.com/MetaMask/metamask-sdk/blob/23127c42357e93fa23968e769051ded8bcb9f718/packages/sdk/src/services/RemoteConnection/ConnectionManager/startConnection.ts#L26)
+ - [provider.emit('display_uri', qrcodeLink);](https://github.com/MetaMask/metamask-sdk/blob/23127c42357e93fa23968e769051ded8bcb9f718/packages/sdk/src/services/RemoteConnection/ConnectionManager/startConnection.ts#L112)
+
+ The ❌ mark where the second connection attempt will stop.
+
+ To resolve this, we added a specific condition in RainbowKit to get the displayUri content [here](https://github.com/EdouardBougon/rainbowkit/blob/497614b30db7e636b4e560f1b81f6a1315e13429/packages/rainbowkit/src/wallets/useWalletConnectors.ts#L103). 
+ The `display_uri` value is cached in the connector and will be deleted if the connection is closed, and updated if the connector emit a new `display_uri` event.
+
+
+## Exposed parameters
+We decided only the folowing parameters are relevant to be exposed to the user:
+ - `infuraAPIKey`
+
+We don't want that the user access to the modal content, or any other parameters that could be used to change the behavior of the connector.