@wagmi/connectors 7.2.0 → 8.0.0

package/src/metaMask.ts

@@ -1,32 +1,15 @@
 import type {
-  MetaMaskSDK,
-  MetaMaskSDKOptions,
-  RPC_URLS_MAP,
-  SDKProvider,
-} from '@metamask/sdk'
+  createEVMClient,
+  EIP1193Provider,
+  MetamaskConnectEVM,
+} from '@metamask/connect-evm'
+import { ChainNotConfiguredError, createConnector } from '@wagmi/core'
+import type { ExactPartial, OneOf, UnionCompute } from '@wagmi/core/internal'
 import {
-  ChainNotConfiguredError,
-  type Connector,
-  createConnector,
-  extractRpcUrls,
-  ProviderNotFoundError,
-} from '@wagmi/core'
-import type {
-  Compute,
-  ExactPartial,
-  OneOf,
-  RemoveUndefined,
-  UnionCompute,
-} from '@wagmi/core/internal'
-import {
-  type AddEthereumChainParameter,
   type Address,
   getAddress,
-  type Hex,
-  hexToNumber,
   numberToHex,
   type ProviderConnectInfo,
-  type ProviderRpcError,
   ResourceUnavailableRpcError,
   type RpcError,
   SwitchChainError,
@@ -36,8 +19,22 @@ import {
 } from 'viem'
 
 export type MetaMaskParameters = UnionCompute<
-  WagmiMetaMaskSDKOptions &
-    OneOf<
+  ExactPartial<Omit<CreateEVMClientParameters, 'api' | 'eventHandlers'>> & {
+    /**
+     * @deprecated Use `dapp` instead.
+     *
+     * Metadata is used to fill details for the UX on confirmation screens in MetaMask.
+     */
+    dappMetadata?: { name?: string; url?: string; iconUrl?: string } | undefined
+    /**
+     * @deprecated Use `debug` instead.
+     */
+    logging?: { sdk?: boolean } | undefined
+    /**
+     * @deprecated Use `ui.headless` instead.
+     */
+    headless?: boolean | undefined
+  } & OneOf<
       | {
           /* Shortcut to connect and sign a message */
           connectAndSign?: string | undefined
@@ -50,66 +47,28 @@ export type MetaMaskParameters = UnionCompute<
     >
 >
 
-type WagmiMetaMaskSDKOptions = Compute<
-  ExactPartial<
-    Omit<
-      MetaMaskSDKOptions,
-      | '_source'
-      | 'forceDeleteProvider'
-      | 'forceInjectProvider'
-      | 'injectProvider'
-      | 'useDeeplink'
-      | 'readonlyRPCMap'
-    >
-  >
->
+type CreateEVMClientParameters = Parameters<typeof createEVMClient>[0]
 
 metaMask.type = 'metaMask' as const
 export function metaMask(parameters: MetaMaskParameters = {}) {
-  type Provider = SDKProvider
+  type Provider = EIP1193Provider
   type Properties = {
     onConnect(connectInfo: ProviderConnectInfo): void
     onDisplayUri(uri: string): void
+    getInstance(): Promise<MetamaskConnectEVM>
   }
-  type Listener = Parameters<Provider['on']>[1]
-
-  let sdk: MetaMaskSDK
-  let provider: Provider | undefined
-  let providerPromise: Promise<typeof provider>
 
-  let accountsChanged: Connector['onAccountsChanged'] | undefined
-  let chainChanged: Connector['onChainChanged'] | undefined
-  let connect: Connector['onConnect'] | undefined
-  let displayUri: ((uri: string) => void) | undefined
-  let disconnect: Connector['onDisconnect'] | undefined
+  let metamask: MetamaskConnectEVM | undefined
+  let metamaskPromise: Promise<MetamaskConnectEVM> | undefined
 
   return createConnector<Provider, Properties>((config) => ({
     id: 'metaMaskSDK',
     name: 'MetaMask',
     rdns: ['io.metamask', 'io.metamask.mobile'],
     type: metaMask.type,
-    async setup() {
-      const provider = await this.getProvider()
-      if (provider?.on) {
-        if (!connect) {
-          connect = this.onConnect.bind(this)
-          provider.on('connect', connect as Listener)
-        }
-
-        // We shouldn't need to listen for `'accountsChanged'` here since the `'connect'` event should suffice (and wallet shouldn't be connected yet).
-        // Some wallets, like MetaMask, do not implement the `'connect'` event and overload `'accountsChanged'` instead.
-        if (!accountsChanged) {
-          accountsChanged = this.onAccountsChanged.bind(this)
-          provider.on('accountsChanged', accountsChanged as Listener)
-        }
-      }
-    },
     async connect({ chainId, isReconnecting, withCapabilities } = {}) {
-      const provider = await this.getProvider()
-      if (!displayUri) {
-        displayUri = this.onDisplayUri
-        provider.on('display_uri', displayUri as Listener)
-      }
+      const instance = await this.getInstance()
+      const provider = instance.getProvider()
 
       let accounts: readonly Address[] = []
       if (isReconnecting) accounts = await this.getAccounts().catch(() => [])
@@ -118,25 +77,28 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
         let signResponse: string | undefined
         let connectWithResponse: unknown | undefined
         if (!accounts?.length) {
+          const chainIds = config.chains.map((chain) => numberToHex(chain.id))
           if (parameters.connectAndSign || parameters.connectWith) {
             if (parameters.connectAndSign)
-              signResponse = await sdk.connectAndSign({
-                msg: parameters.connectAndSign,
+              signResponse = await instance.connectAndSign({
+                chainIds,
+                message: parameters.connectAndSign,
               })
             else if (parameters.connectWith)
-              connectWithResponse = await sdk.connectWith({
+              connectWithResponse = await instance.connectWith({
+                chainIds,
                 method: parameters.connectWith.method,
                 params: parameters.connectWith.params,
               })
 
             accounts = await this.getAccounts()
           } else {
-            const requestedAccounts = (await sdk.connect()) as string[]
-            accounts = requestedAccounts.map((x) => getAddress(x))
+            const result = await instance.connect({ chainIds })
+            accounts = result.accounts.map((x) => getAddress(x))
           }
         }
         // Switch to chain if provided
-        let currentChainId = (await this.getChainId()) as number
+        let currentChainId = await this.getChainId()
         if (chainId && currentChainId !== chainId) {
           const chain = await this.switchChain!({ chainId }).catch((error) => {
             if (error.code === UserRejectedRequestError.code) throw error
@@ -145,43 +107,19 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
           currentChainId = chain?.id ?? currentChainId
         }
 
-        if (displayUri) {
-          provider.removeListener('display_uri', displayUri)
-          displayUri = undefined
-        }
-
         if (signResponse)
           provider.emit('connectAndSign', {
             accounts,
-            chainId: currentChainId,
+            chainId: numberToHex(currentChainId),
             signResponse,
           })
         else if (connectWithResponse)
           provider.emit('connectWith', {
             accounts,
-            chainId: currentChainId,
+            chainId: numberToHex(currentChainId),
             connectWithResponse,
           })
 
-        // Manage EIP-1193 event listeners
-        // https://eips.ethereum.org/EIPS/eip-1193#events
-        if (connect) {
-          provider.removeListener('connect', connect)
-          connect = undefined
-        }
-        if (!accountsChanged) {
-          accountsChanged = this.onAccountsChanged.bind(this)
-          provider.on('accountsChanged', accountsChanged as Listener)
-        }
-        if (!chainChanged) {
-          chainChanged = this.onChainChanged.bind(this)
-          provider.on('chainChanged', chainChanged as Listener)
-        }
-        if (!disconnect) {
-          disconnect = this.onDisconnect.bind(this)
-          provider.on('disconnect', disconnect as Listener)
-        }
-
         return {
           // TODO(v3): Make `withCapabilities: true` default behavior
           accounts: (withCapabilities
@@ -199,140 +137,82 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
       }
     },
     async disconnect() {
-      const provider = await this.getProvider()
-
-      // Manage EIP-1193 event listeners
-      if (chainChanged) {
-        provider.removeListener('chainChanged', chainChanged)
-        chainChanged = undefined
-      }
-      if (disconnect) {
-        provider.removeListener('disconnect', disconnect)
-        disconnect = undefined
-      }
-      if (!connect) {
-        connect = this.onConnect.bind(this)
-        provider.on('connect', connect as Listener)
-      }
-
-      await sdk.terminate()
+      const instance = await this.getInstance()
+      return instance.disconnect()
     },
     async getAccounts() {
-      const provider = await this.getProvider()
+      const instance = await this.getInstance()
+      if (instance.accounts.length)
+        return instance.accounts.map((x) => getAddress(x))
+      // Fallback to provider if SDK doesn't return accounts
+      const provider = instance.getProvider()
       const accounts = (await provider.request({
         method: 'eth_accounts',
       })) as string[]
       return accounts.map((x) => getAddress(x))
     },
     async getChainId() {
-      const provider = await this.getProvider()
-      const chainId =
-        provider.getChainId() ||
-        (await provider?.request({ method: 'eth_chainId' }))
+      const instance = await this.getInstance()
+      if (instance.getChainId()) return Number(instance.getChainId())
+      // Fallback to provider if SDK doesn't return chainId
+      const provider = instance.getProvider()
+      const chainId = await provider.request({ method: 'eth_chainId' })
       return Number(chainId)
     },
     async getProvider() {
-      async function initProvider() {
-        // Unwrapping import for Vite compatibility.
-        // See: https://github.com/vitejs/vite/issues/9703
-        const MetaMaskSDK = await (async () => {
-          const { default: SDK } = await (() => {
-            // safe webpack optional peer dependency dynamic import
-            try {
-              return import('@metamask/sdk')
-            } catch {
-              throw new Error('dependency "@metamask/sdk" not found')
-            }
-          })()
-          if (typeof SDK !== 'function' && typeof SDK.default === 'function')
-            return SDK.default
-          return SDK as unknown as typeof SDK.default
-        })()
-
-        const readonlyRPCMap: RPC_URLS_MAP = {}
-        for (const chain of config.chains)
-          readonlyRPCMap[numberToHex(chain.id)] = extractRpcUrls({
-            chain,
-            transports: config.transports,
-          })?.[0]
-
-        sdk = new MetaMaskSDK({
-          // Workaround cast since MetaMask SDK does not support `'exactOptionalPropertyTypes'`
-          ...(parameters as RemoveUndefined<typeof parameters>),
-          _source: 'wagmi',
-          forceDeleteProvider: false,
-          forceInjectProvider: false,
-          injectProvider: false,
-          readonlyRPCMap,
-          dappMetadata: {
-            ...parameters.dappMetadata,
-            // Test if name and url are set AND not empty
-            name: parameters.dappMetadata?.name
-              ? parameters.dappMetadata?.name
-              : 'wagmi',
-            url: parameters.dappMetadata?.url
-              ? parameters.dappMetadata?.url
-              : typeof window !== 'undefined'
-                ? window.location.origin
-                : 'https://wagmi.sh',
-          },
-          useDeeplink: true,
-        })
-        const result = await sdk.init()
-        // On initial load, sometimes `sdk.getProvider` does not return provider.
-        // https://github.com/wevm/wagmi/issues/4367
-        // Use result of `init` call if available.
-        const provider = (() => {
-          if (result?.activeProvider) return result.activeProvider
-          return sdk.getProvider()
-        })()
-        if (!provider) throw new ProviderNotFoundError()
-        return provider
-      }
-
-      if (!provider) {
-        if (!providerPromise) providerPromise = initProvider()
-        provider = await providerPromise
-      }
-      return provider!
+      const instance = await this.getInstance()
+      return instance.getProvider()
     },
     async isAuthorized() {
       try {
         // MetaMask mobile provider sometimes fails to immediately resolve
         // JSON-RPC requests on page load
-        const timeout = 200
+        const timeout = 10
         const accounts = await withRetry(
-          () => withTimeout(() => this.getAccounts(), { timeout }),
-          {
-            delay: timeout + 1,
-            retryCount: 3,
-          },
+          async () =>
+            withTimeout(
+              async () => {
+                const accounts = await this.getAccounts()
+                if (!accounts.length) throw new Error('try again')
+                return accounts
+              },
+              { timeout },
+            ),
+          { delay: timeout + 1, retryCount: 3 },
         )
-        return !!accounts.length
+        return Boolean(accounts.length)
       } catch {
         return false
       }
     },
     async switchChain({ addEthereumChainParameter, chainId }) {
-      const provider = await this.getProvider()
-
-      const chain = config.chains.find((x) => x.id === chainId)
+      const chain = config.chains.find(({ id }) => id === Number(chainId))
       if (!chain) throw new SwitchChainError(new ChainNotConfiguredError())
 
+      const hexChainId = numberToHex(chainId)
+
       try {
-        await provider.request({
-          method: 'wallet_switchEthereumChain',
-          params: [{ chainId: numberToHex(chainId) }],
+        const instance = await this.getInstance()
+        await instance.switchChain({
+          chainId: hexChainId,
+          chainConfiguration: {
+            blockExplorerUrls: addEthereumChainParameter?.blockExplorerUrls
+              ? [...addEthereumChainParameter.blockExplorerUrls]
+              : chain.blockExplorers?.default.url
+                ? [chain.blockExplorers.default.url]
+                : undefined,
+            chainId: hexChainId,
+            chainName: addEthereumChainParameter?.chainName ?? chain.name,
+            iconUrls: addEthereumChainParameter?.iconUrls,
+            nativeCurrency:
+              addEthereumChainParameter?.nativeCurrency ?? chain.nativeCurrency,
+            rpcUrls: addEthereumChainParameter?.rpcUrls
+              ? [...addEthereumChainParameter.rpcUrls]
+              : chain.rpcUrls.default?.http
+                ? [...chain.rpcUrls.default.http]
+                : undefined,
+          },
         })
-
-        // During `'wallet_switchEthereumChain'`, MetaMask makes a `'net_version'` RPC call to the target chain.
-        // If this request fails, MetaMask does not emit the `'chainChanged'` event, but will still switch the chain.
-        // To counter this behavior, we request and emit the current chain ID to confirm the chain switch either via
-        // this callback or an externally emitted `'chainChanged'` event.
-        // https://github.com/MetaMask/metamask-extension/issues/24247
-        await waitForChainIdToSync()
-        await sendAndWaitForChangeEvent(chainId)
-
         return chain
       } catch (err) {
         const error = err as RpcError
@@ -340,113 +220,13 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
         if (error.code === UserRejectedRequestError.code)
           throw new UserRejectedRequestError(error)
 
-        // Indicates chain is not added to provider
-        if (
-          error.code === 4902 ||
-          // Unwrapping for MetaMask Mobile
-          // https://github.com/MetaMask/metamask-mobile/issues/2944#issuecomment-976988719
-          (error as ProviderRpcError<{ originalError?: { code: number } }>)
-            ?.data?.originalError?.code === 4902
-        ) {
-          try {
-            await provider.request({
-              method: 'wallet_addEthereumChain',
-              params: [
-                {
-                  blockExplorerUrls: (() => {
-                    const { default: blockExplorer, ...blockExplorers } =
-                      chain.blockExplorers ?? {}
-                    if (addEthereumChainParameter?.blockExplorerUrls)
-                      return addEthereumChainParameter.blockExplorerUrls
-                    if (blockExplorer)
-                      return [
-                        blockExplorer.url,
-                        ...Object.values(blockExplorers).map((x) => x.url),
-                      ]
-                    return
-                  })(),
-                  chainId: numberToHex(chainId),
-                  chainName: addEthereumChainParameter?.chainName ?? chain.name,
-                  iconUrls: addEthereumChainParameter?.iconUrls,
-                  nativeCurrency:
-                    addEthereumChainParameter?.nativeCurrency ??
-                    chain.nativeCurrency,
-                  rpcUrls: (() => {
-                    if (addEthereumChainParameter?.rpcUrls?.length)
-                      return addEthereumChainParameter.rpcUrls
-                    return [chain.rpcUrls.default?.http[0] ?? '']
-                  })(),
-                } satisfies AddEthereumChainParameter,
-              ],
-            })
-
-            await waitForChainIdToSync()
-            await sendAndWaitForChangeEvent(chainId)
-
-            return chain
-          } catch (err) {
-            const error = err as RpcError
-            if (error.code === UserRejectedRequestError.code)
-              throw new UserRejectedRequestError(error)
-            throw new SwitchChainError(error)
-          }
-        }
-
         throw new SwitchChainError(error)
       }
-
-      async function waitForChainIdToSync() {
-        // On mobile, there is a race condition between the result of `'wallet_addEthereumChain'` and `'eth_chainId'`.
-        // To avoid this, we wait for `'eth_chainId'` to return the expected chain ID with a retry loop.
-        await withRetry(
-          async () => {
-            const value = hexToNumber(
-              // `'eth_chainId'` is cached by the MetaMask SDK side to avoid unnecessary deeplinks
-              (await provider.request({ method: 'eth_chainId' })) as Hex,
-            )
-            // `value` doesn't match expected `chainId`, throw to trigger retry
-            if (value !== chainId)
-              throw new Error('User rejected switch after adding network.')
-            return value
-          },
-          {
-            delay: 50,
-            retryCount: 20, // android device encryption is slower
-          },
-        )
-      }
-
-      async function sendAndWaitForChangeEvent(chainId: number) {
-        await new Promise<void>((resolve) => {
-          const listener = ((data) => {
-            if ('chainId' in data && data.chainId === chainId) {
-              config.emitter.off('change', listener)
-              resolve()
-            }
-          }) satisfies Parameters<typeof config.emitter.on>[1]
-          config.emitter.on('change', listener)
-          config.emitter.emit('change', { chainId })
-        })
-      }
     },
     async onAccountsChanged(accounts) {
-      // Disconnect if there are no accounts
-      if (accounts.length === 0) {
-        // ... and using browser extension
-        if (sdk.isExtensionActive()) this.onDisconnect()
-        // FIXME(upstream): Mobile app sometimes emits invalid `accountsChanged` event with empty accounts array
-        else return
-      }
-      // Connect if emitter is listening for connect event (e.g. is disconnected and connects through wallet interface)
-      else if (config.emitter.listenerCount('connect')) {
-        const chainId = (await this.getChainId()).toString()
-        this.onConnect({ chainId })
-      }
-      // Regular change event
-      else
-        config.emitter.emit('change', {
-          accounts: accounts.map((x) => getAddress(x)),
-        })
+      config.emitter.emit('change', {
+        accounts: accounts.map((x) => getAddress(x)),
+      })
     },
     onChainChanged(chain) {
       const chainId = Number(chain)
@@ -458,52 +238,72 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
 
       const chainId = Number(connectInfo.chainId)
       config.emitter.emit('connect', { accounts, chainId })
-
-      const provider = await this.getProvider()
-      if (connect) {
-        provider.removeListener('connect', connect)
-        connect = undefined
-      }
-      if (!accountsChanged) {
-        accountsChanged = this.onAccountsChanged.bind(this)
-        provider.on('accountsChanged', accountsChanged as Listener)
-      }
-      if (!chainChanged) {
-        chainChanged = this.onChainChanged.bind(this)
-        provider.on('chainChanged', chainChanged as Listener)
-      }
-      if (!disconnect) {
-        disconnect = this.onDisconnect.bind(this)
-        provider.on('disconnect', disconnect as Listener)
-      }
     },
     async onDisconnect(error) {
-      const provider = await this.getProvider()
-
       // If MetaMask emits a `code: 1013` error, wait for reconnection before disconnecting
       // https://github.com/MetaMask/providers/pull/120
       if (error && (error as RpcError<1013>).code === 1013) {
-        if (provider && !!(await this.getAccounts()).length) return
+        const provider = await this.getProvider()
+        if (provider && Boolean((await this.getAccounts()).length)) return
       }
 
       config.emitter.emit('disconnect')
-
-      // Manage EIP-1193 event listeners
-      if (chainChanged) {
-        provider.removeListener('chainChanged', chainChanged)
-        chainChanged = undefined
-      }
-      if (disconnect) {
-        provider.removeListener('disconnect', disconnect)
-        disconnect = undefined
-      }
-      if (!connect) {
-        connect = this.onConnect.bind(this)
-        provider.on('connect', connect as Listener)
-      }
     },
     onDisplayUri(uri) {
       config.emitter.emit('message', { type: 'display_uri', data: uri })
     },
+    async getInstance() {
+      if (!metamask) {
+        if (!metamaskPromise) {
+          const { createEVMClient } = await (async () => {
+            try {
+              return import('@metamask/connect-evm')
+            } catch {
+              throw new Error('dependency "@metamask/connect-evm" not found')
+            }
+          })()
+          const defaultDappParams =
+            typeof window === 'undefined'
+              ? { name: 'wagmi' }
+              : { name: window.location.hostname, url: window.location.href }
+
+          metamaskPromise = createEVMClient({
+            ...parameters,
+            api: {
+              supportedNetworks: Object.fromEntries(
+                config.chains.map((chain) => [
+                  numberToHex(chain.id),
+                  chain.rpcUrls.default?.http[0] ?? '',
+                ]),
+              ),
+            },
+            dapp: parameters.dapp ?? {
+              ...defaultDappParams,
+              ...parameters.dappMetadata,
+            },
+            debug: parameters.debug ?? parameters.logging?.sdk,
+            eventHandlers: {
+              accountsChanged: this.onAccountsChanged.bind(this),
+              chainChanged: this.onChainChanged.bind(this),
+              connect: this.onConnect.bind(this),
+              disconnect: this.onDisconnect.bind(this),
+              displayUri: this.onDisplayUri.bind(this),
+            },
+            analytics: {
+              integrationType: 'wagmi',
+            },
+            ui: {
+              ...parameters.ui,
+              ...(parameters.headless != null && {
+                headless: parameters.headless,
+              }),
+            },
+            ...(parameters.mobile && { mobile: parameters.mobile }),
+          })
+        }
+        metamask = await metamaskPromise
+      }
+      return metamask
+    },
   }))
 }

package/src/version.ts

@@ -1 +1 @@
-export const version = '7.2.0'
+export const version = '8.0.0'