feat: update the "metamask-sdk" package to the latest version

.changeset/fuzzy-sheep-notice.md

@@ -0,0 +1,6 @@
+---
+"@wagmi/connectors": minor
+"create-wagmi": minor
+---
+
+This PR updates the MetaMask SDK package to version "0.15.0", addressing bundle size problems and enhancing the MetaMask connector's logic. It resolves certain bugs and ensures functionality without the extensionOnly=true option.Additionally, it is important to note that dappMetadata is now mandatory for integration.Furthermore, to ensure compatibility with mobile devices, it is required to set the Infura API key.

packages/connectors/package.json

@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@coinbase/wallet-sdk": "3.9.1",
-    "@metamask/sdk": "0.14.3",
+    "@metamask/sdk": "0.18.3",
     "@safe-global/safe-apps-provider": "0.18.1",
     "@safe-global/safe-apps-sdk": "8.1.0",
     "@walletconnect/ethereum-provider": "2.11.2",
@@ -56,10 +56,7 @@
     "@wagmi/core": "workspace:*",
     "msw": "^2.0.6"
   },
-  "contributors": [
-    "awkweb.eth <t@wevm.dev>",
-    "jxom.eth <j@wevm.dev>"
-  ],
+  "contributors": ["awkweb.eth <t@wevm.dev>", "jxom.eth <j@wevm.dev>"],
   "funding": "https://github.com/sponsors/wevm",
   "keywords": [
     "react",
@@ -71,4 +68,4 @@
     "web3",
     "abi"
   ]
-}
+}

packages/connectors/src/metaMask.ts

@@ -14,7 +14,6 @@ import {
   RpcError,
   SwitchChainError,
   UserRejectedRequestError,
-  type WalletPermission,
   getAddress,
   numberToHex,
 } from 'viem'
@@ -32,13 +31,7 @@ export type MetaMaskParameters = Evaluate<
 >
 
 metaMask.type = 'metaMask' as const
-/**
- * @deprecated
- *
- * __Warning__ This connector has a large file size due to the underlying `@metamask/sdk`. For mobile
- * support, it is recommended to use {@link walletConnect}. For desktop support, you should rely on Multi Injected
- * Provider Discovery (EIP-6963) via the Wagmi {@link Config}.
- */
+
 export function metaMask(parameters: MetaMaskParameters = {}) {
   type Provider = SDKProvider
   type Properties = {
@@ -48,7 +41,7 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
   type Listener = Parameters<Provider['on']>[1]
 
   let sdk: MetaMaskSDK
-  let walletProvider: Provider | undefined
+  let sdkImport: Promise<typeof import('@metamask/sdk')> | undefined
 
   return createConnector<Provider, Properties, StorageItem>((config) => ({
     id: 'metaMaskSDK',
@@ -59,36 +52,13 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
       if (provider)
         provider.on('connect', this.onConnect.bind(this) as Listener)
     },
-    async connect({ chainId, isReconnecting } = {}) {
+    async connect({ chainId } = {}) {
       const provider = await this.getProvider()
 
       let accounts: readonly Address[] | null = null
-      if (!isReconnecting) {
-        accounts = await this.getAccounts().catch(() => null)
-        const isAuthorized = !!accounts?.length
-        if (isAuthorized)
-          // Attempt to show another prompt for selecting account if already connected
-          try {
-            const permissions = (await provider.request({
-              method: 'wallet_requestPermissions',
-              params: [{ eth_accounts: {} }],
-            })) as WalletPermission[]
-            accounts = (permissions[0]?.caveats?.[0]?.value as string[])?.map(
-              (x) => getAddress(x),
-            )
-          } catch (err) {
-            const error = err as RpcError
-            // Not all injected providers support `wallet_requestPermissions` (e.g. MetaMask iOS).
-            // Only bubble up error if user rejects request
-            if (error.code === UserRejectedRequestError.code)
-              throw new UserRejectedRequestError(error)
-            // Or prompt is already open
-            if (error.code === ResourceUnavailableRpcError.code) throw error
-          }
-      }
 
       try {
-        if (!accounts?.length) {
+        if (!accounts) {
           const requestedAccounts = (await sdk.connect()) as string[]
           accounts = requestedAccounts.map((x) => getAddress(x))
         }
@@ -164,41 +134,35 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
     async getChainId() {
       const provider = await this.getProvider()
       const chainId =
-        provider.chainId ?? (await provider?.request({ method: 'eth_chainId' }))
+        provider.getChainId() ??
+        (await provider?.request({ method: 'eth_chainId' }))
       return Number(chainId)
     },
     async getProvider() {
-      if (!walletProvider) {
-        if (!sdk || !sdk?.isInitialized()) {
-          const { MetaMaskSDK } = await import('@metamask/sdk')
-          sdk = new MetaMaskSDK({
-            dappMetadata: { name: 'wagmi' },
-            enableAnalytics: false,
-            extensionOnly: true,
-            modals: {
-              // Disable by default since it pops up when mobile tries to reconnect
-              otp() {
-                const noop = () => {}
-                return { mount: noop, unmount: noop }
-              },
-            },
-            useDeeplink: true,
-            _source: 'wagmi',
-            ...parameters,
-            checkInstallationImmediately: false,
-            checkInstallationOnAllCalls: false,
-          })
-          await sdk.init()
-        }
-        try {
-          walletProvider = sdk.getProvider()
-        } catch (error) {
-          // TODO: SDK sometimes throws errors when MM extension or mobile provider is not detected (don't throw for those errors)
-          const regex = /^SDK state invalid -- undefined( mobile)? provider$/
-          if (!regex.test((error as Error).message)) throw error
-        }
+      if (!sdk) {
+        if (!sdkImport) sdkImport = import('@metamask/sdk') as any
+
+        const sdkModule = await sdkImport
+
+        if (!sdkModule) throw new Error('MetaMask SDK not found')
+        if (!parameters || !parameters.dappMetadata)
+          throw new Error('dappMetadata is required and must be provided.')
+
+        sdk = new sdkModule.MetaMaskSDK({
+          ...parameters,
+          dappMetadata: parameters.dappMetadata,
+          _source: 'wagmi',
+          readonlyRPCMap: Object.fromEntries(
+            config.chains.map((chain) => [
+              chain.id,
+              chain.rpcUrls.default.http[0]!,
+            ]),
+          ),
+        })
+        await sdk.init()
       }
-      return walletProvider!
+
+      return sdk.getProvider()!
     },
     async isAuthorized() {
       try {

packages/create-wagmi/templates/next/src/wagmi.ts

@@ -1,11 +1,21 @@
 import { http, createConfig } from 'wagmi'
 import { mainnet, sepolia } from 'wagmi/chains'
-import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors'
+import {
+  coinbaseWallet,
+  injected,
+  walletConnect,
+  metaMask,
+} from 'wagmi/connectors'
 
 export const config = createConfig({
   chains: [mainnet, sepolia],
   connectors: [
     injected(),
+    metaMask({
+      dappMetadata: {
+        name: 'Create Wagmi',
+      },
+    }),
     coinbaseWallet({ appName: 'Create Wagmi' }),
     walletConnect({ projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID }),
   ],

packages/create-wagmi/templates/vite-react/src/wagmi.ts

@@ -1,11 +1,21 @@
 import { http, createConfig } from 'wagmi'
 import { mainnet, sepolia } from 'wagmi/chains'
-import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors'
+import {
+  coinbaseWallet,
+  injected,
+  walletConnect,
+  metaMask,
+} from 'wagmi/connectors'
 
 export const config = createConfig({
   chains: [mainnet, sepolia],
   connectors: [
     injected(),
+    metaMask({
+      dappMetadata: {
+        name: 'Create Wagmi',
+      },
+    }),
     coinbaseWallet({ appName: 'Create Wagmi' }),
     walletConnect({ projectId: import.meta.env.VITE_WC_PROJECT_ID }),
   ],

packages/create-wagmi/templates/vite-vanilla/src/wagmi.ts

@@ -1,11 +1,21 @@
-import { coinbaseWallet, injected, walletConnect } from '@wagmi/connectors'
+import {
+  coinbaseWallet,
+  injected,
+  walletConnect,
+  metaMask,
+} from '@wagmi/connectors'
 import { http, createConfig } from '@wagmi/core'
 import { mainnet, sepolia } from '@wagmi/core/chains'
 
 export const config = createConfig({
   chains: [mainnet, sepolia],
   connectors: [
     injected(),
+    metaMask({
+      dappMetadata: {
+        name: 'Create Wagmi',
+      },
+    }),
     coinbaseWallet({ appName: 'Create Wagmi' }),
     walletConnect({ projectId: import.meta.env.VITE_WC_PROJECT_ID }),
   ],

playgrounds/vite-core/src/wagmi.ts

@@ -1,10 +1,15 @@
-import { coinbaseWallet, walletConnect } from '@wagmi/connectors'
+import { coinbaseWallet, metaMask, walletConnect } from '@wagmi/connectors'
 import { http, createConfig, createStorage } from '@wagmi/core'
 import { mainnet, optimism, sepolia } from '@wagmi/core/chains'
 
 export const config = createConfig({
   chains: [mainnet, sepolia, optimism],
   connectors: [
+    metaMask({
+      dappMetadata: {
+        name: 'Wagmi - Vite Core React Playground',
+      },
+    }),
     walletConnect({ projectId: import.meta.env.VITE_WC_PROJECT_ID }),
     coinbaseWallet({ appName: 'Vite React Playground' }),
   ],

playgrounds/vite-react/src/wagmi.ts

@@ -1,7 +1,7 @@
 import { del, get, set } from 'idb-keyval'
 import { http, createConfig } from 'wagmi'
 import { celo, mainnet, optimism, sepolia } from 'wagmi/chains'
-import { coinbaseWallet, walletConnect } from 'wagmi/connectors'
+import { coinbaseWallet, metaMask, walletConnect } from 'wagmi/connectors'
 
 // biome-ignore lint/correctness/noUnusedVariables: <explanation>
 const indexedDBStorage = {
@@ -19,6 +19,11 @@ const indexedDBStorage = {
 export const config = createConfig({
   chains: [mainnet, sepolia, optimism, celo],
   connectors: [
+    metaMask({
+      dappMetadata: {
+        name: 'Wagmi - Vite React Playground',
+      },
+    }),
     walletConnect({
       projectId: import.meta.env.VITE_WC_PROJECT_ID,
     }),

playgrounds/vite-ssr-react/lib/wagmi.ts

@@ -1,11 +1,15 @@
 import { http, cookieStorage, createConfig, createStorage } from 'wagmi'
 import { celo, mainnet, optimism, sepolia } from 'wagmi/chains'
-import { coinbaseWallet, injected, safe, walletConnect } from 'wagmi/connectors'
+import { coinbaseWallet, metaMask, safe, walletConnect } from 'wagmi/connectors'
 
 export const config = createConfig({
   chains: [mainnet, sepolia, optimism, celo],
   connectors: [
-    injected({ target: 'metaMask' }),
+    metaMask({
+      dappMetadata: {
+        name: 'Wagmi - Vite React SSR Playground',
+      },
+    }),
     walletConnect({ projectId: import.meta.env.VITE_WC_PROJECT_ID }),
     coinbaseWallet({ appName: 'Vite React Playground', darkMode: true }),
     safe({ debug: true, shimDisconnect: true }),