feat: metamask sdk connector (#2425)

* fix(wallet): restore metamask connector logic

* fix: prefer walletconnect for desktop qr code

* fix: metamask sdk options

* chore: changeset

* fix: explicit metamask provider check

Author: DanielSinclair

.changeset/two-rats-do.md

@@ -0,0 +1,5 @@
+---
+"@rainbow-me/rainbowkit": patch
+---
+
+The `metaMaskWallet` wallet connector now utilizes the [MetaMask SDK](https://docs.metamask.io/sdk/) for more reliable, faster connections on mobile

packages/rainbowkit/src/wallets/walletConnectors/metaMaskWallet/metaMaskWallet.ts

@@ -1,17 +1,20 @@
-import type { WindowProvider } from '../../../types/utils';
-import { isAndroid, isIOS } from '../../../utils/isMobile';
-import type { DefaultWalletOptions, Wallet } from '../../Wallet';
-import {
-  getInjectedConnector,
-  hasInjectedProvider,
-} from '../../getInjectedConnector';
+import { createConnector } from 'wagmi';
+import { metaMask } from 'wagmi/connectors';
+import type {
+  DefaultWalletOptions,
+  Wallet,
+  WalletDetailsParams,
+} from '../../Wallet';
+import { hasInjectedProvider } from '../../getInjectedConnector';
 import { getWalletConnectConnector } from '../../getWalletConnectConnector';
+import { isMobile } from '../../../utils/isMobile';
+import type { WindowProvider } from '../../../types/utils';
 
 export type MetaMaskWalletOptions = DefaultWalletOptions;
 
 function isMetaMask(ethereum?: WindowProvider['ethereum']): boolean {
-  // Logic borrowed from wagmi's MetaMaskConnector
-  // https://github.com/wagmi-dev/references/blob/main/packages/connectors/src/metaMask.ts
+  // Logic borrowed from wagmi's legacy MetaMaskConnector
+  // Non-exhaustive list of wallets that try to make themselves look like MetaMask
   if (!ethereum?.isMetaMask) return false;
   // Brave tries to make itself look like MetaMask
   // Could also try RPC `web3_clientVersion` if following is unreliable
@@ -61,22 +64,16 @@ export const metaMaskWallet = ({
   projectId,
   walletConnectParameters,
 }: MetaMaskWalletOptions): Wallet => {
-  // Not using the explicit isMetaMask fn to check for MetaMask
-  // so that users can continue to use the MetaMask button
-  // to interact with wallets compatible with window.ethereum.
-  // The connector's getProvider will instead favor the real MetaMask
-  // in window.providers scenarios with multiple wallets injected.
-  const isMetaMaskInjected = hasInjectedProvider({ flag: 'isMetaMask' });
-  const shouldUseWalletConnect = !isMetaMaskInjected;
+  // Custom logic to explicitly detect MetaMask
+  // Whereas hasInjectedProvider only checks for impersonated `isMetaMask`
+  // We need this because MetaMask SDK hangs on impersonated wallets
+  // Previously MetaMask provider would trigger for impersonated wallets
+  const isMetaMaskInjected =
+    typeof window !== 'undefined' ? isMetaMask(window.ethereum) : false;
 
-  const getUri = (uri: string) => {
-    return isAndroid()
-      ? uri
-      : isIOS()
-        ? // currently broken in MetaMask v6.5.0 https://github.com/MetaMask/metamask-mobile/issues/6457
-          `metamask://wc?uri=${encodeURIComponent(uri)}`
-        : `https://metamask.app.link/wc?uri=${encodeURIComponent(uri)}`;
-  };
+  // TODO: This is a temporary solution to prefer WalletConnect for desktop qr code.
+  const shouldUseWalletConnect = !isMetaMaskInjected && !isMobile();
+  const shouldUseMetaMaskConnector = isMetaMaskInjected || isMobile();
 
   return {
     id: 'metaMask',
@@ -85,7 +82,7 @@ export const metaMaskWallet = ({
     iconUrl: async () => (await import('./metaMaskWallet.svg')).default,
     iconAccent: '#f6851a',
     iconBackground: '#fff',
-    installed: !shouldUseWalletConnect ? isMetaMaskInjected : undefined,
+    installed: isMetaMaskInjected ? isMetaMaskInjected : undefined,
     downloadUrls: {
       android: 'https://play.google.com/store/apps/details?id=io.metamask',
       ios: 'https://apps.apple.com/us/app/metamask/id1438144202',
@@ -98,13 +95,14 @@ export const metaMaskWallet = ({
       opera: 'https://addons.opera.com/extensions/details/metamask-10',
       browserExtension: 'https://metamask.io/download',
     },
-
     mobile: {
-      getUri: shouldUseWalletConnect ? getUri : undefined,
+      // MetaMask mobile deep linking handled by wagmi, return URI unchanged.
+      getUri: shouldUseMetaMaskConnector ? (uri: string) => uri : undefined,
     },
     qrCode: shouldUseWalletConnect
       ? {
-          getUri,
+          getUri: (uri: string) =>
+            `https://metamask.app.link/wc?uri=${encodeURIComponent(uri)}`,
           instructions: {
             learnMoreUrl: 'https://metamask.io/faqs/',
             steps: [
@@ -160,13 +158,39 @@ export const metaMaskWallet = ({
           projectId,
           walletConnectParameters,
         })
-      : getInjectedConnector({
-          target:
-            typeof window !== 'undefined'
-              ? (window as WindowProvider).ethereum?.providers?.find(
-                  isMetaMask,
-                ) ?? window.ethereum
-              : undefined,
-        }),
+      : // MetaMask connector
+        (walletDetails: WalletDetailsParams) => {
+          return createConnector((config) => {
+            const metamaskConnector = metaMask({
+              dappMetadata: {
+                connector: 'rainbowkit',
+                name: walletConnectParameters?.metadata?.name,
+                iconUrl: walletConnectParameters?.metadata?.icons[0],
+                url: walletConnectParameters?.metadata?.url,
+              },
+              headless: true,
+              checkInstallationImmediately: false,
+              enableAnalytics: false,
+            })(config);
+
+            /**
+             * Override getChainId to avoid metamask error
+             *
+             * @see https://github.com/rainbow-me/rainbowkit/blob/cdcaa25d66b522119852502f71c8efc02b1abdd9/packages/rainbowkit/src/wallets/useWalletConnectors.ts#L57
+             * And @see https://github.com/wevm/wagmi/blob/275cccb51437908a2d7d3dab0549c6050b6340d3/packages/connectors/src/metaMask.ts#L154
+             */
+            return {
+              ...metamaskConnector,
+              ...walletDetails,
+              getChainId: async () => {
+                try {
+                  return await metamaskConnector.getChainId();
+                } catch {
+                  return config.chains[0]?.id ?? 1;
+                }
+              },
+            };
+          });
+        },
   };
 };