@wagmi/connectors 5.0.0 → 5.0.2

package/src/metaMask.ts

@@ -1,16 +1,12 @@
-import {
-  EventType,
+import type {
   MetaMaskSDK,
-  type MetaMaskSDKOptions,
+  MetaMaskSDKOptions,
   SDKProvider,
 } from '@metamask/sdk'
+import { ChainNotConfiguredError, createConnector } from '@wagmi/core'
+import type { Evaluate, ExactPartial } from '@wagmi/core/internal'
 import {
-  ChainNotConfiguredError,
-  createConnector,
-  normalizeChainId,
-} from '@wagmi/core'
-import type { Evaluate, ExactPartial, Omit } from '@wagmi/core/internal'
-import {
+  type AddEthereumChainParameter,
   type Address,
   type ProviderConnectInfo,
   type ProviderRpcError,
@@ -18,31 +14,15 @@ import {
   RpcError,
   SwitchChainError,
   UserRejectedRequestError,
-  type WalletPermission,
   getAddress,
   numberToHex,
 } from 'viem'
 
 export type MetaMaskParameters = Evaluate<
-  ExactPartial<
-    Omit<
-      MetaMaskSDKOptions,
-      | 'checkInstallationImmediately'
-      | 'checkInstallationOnAllCalls'
-      | 'defaultReadOnlyChainId'
-      | 'readonlyRPCMap'
-    >
-  >
+  ExactPartial<Omit<MetaMaskSDKOptions, '_source' | 'readonlyRPCMap'>>
 >
 
 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 = {
@@ -52,7 +32,8 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
   type Listener = Parameters<Provider['on']>[1]
 
   let sdk: MetaMaskSDK
-  let walletProvider: Provider | undefined
+  let provider: Provider | undefined
+  let providerPromise: Promise<typeof provider>
 
   return createConnector<Provider, Properties, StorageItem>((config) => ({
     id: 'metaMaskSDK',
@@ -66,33 +47,13 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
     async connect({ chainId, isReconnecting } = {}) {
       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?.map(getAddress)
-          } 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
-          }
-      }
+      let accounts: readonly Address[] = []
+      if (isReconnecting) accounts = await this.getAccounts().catch(() => [])
 
       try {
         if (!accounts?.length) {
           const requestedAccounts = (await sdk.connect()) as string[]
-          accounts = requestedAccounts.map(getAddress)
+          accounts = requestedAccounts.map((x) => getAddress(x))
         }
 
         provider.removeListener(
@@ -106,20 +67,8 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
         provider.on('chainChanged', this.onChainChanged as Listener)
         provider.on('disconnect', this.onDisconnect.bind(this) as Listener)
 
-        // Backward compatibility with older wallet (<7.3) version that return accounts before authorization
-        if (!sdk.isExtensionActive() && !sdk._getConnection()?.isAuthorized()) {
-          function waitForAuthorized() {
-            return new Promise((resolve) => {
-              const connection = sdk._getConnection()
-              const connector = connection?.getConnector()
-              connector?.once(EventType.AUTHORIZED, () => resolve(true))
-            })
-          }
-          await waitForAuthorized()
-        }
-
         // Switch to chain if provided
-        let currentChainId = await this.getChainId()
+        let currentChainId = (await this.getChainId()) as number
         if (chainId && currentChainId !== chainId) {
           const chain = await this.switchChain!({ chainId }).catch((error) => {
             if (error.code === UserRejectedRequestError.code) throw error
@@ -161,48 +110,62 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
       const accounts = (await provider.request({
         method: 'eth_accounts',
       })) as string[]
-      return accounts.map(getAddress)
+      return accounts.map((x) => getAddress(x))
     },
     async getChainId() {
       const provider = await this.getProvider()
       const chainId =
-        provider.chainId ?? (await provider?.request({ method: 'eth_chainId' }))
-      return normalizeChainId(chainId)
+        provider.getChainId() ||
+        (await provider?.request({ method: 'eth_chainId' }))
+      return Number(chainId)
     },
     async getProvider() {
-      if (!walletProvider) {
-        if (!sdk || !sdk?.isInitialized()) {
-          sdk = new MetaMaskSDK({
-            enableDebug: false,
-            dappMetadata: { name: 'wagmi' },
-            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
-        }
+      async function initProvider() {
+        // Unwrapping import for Vite compatibility.
+        // See: https://github.com/vitejs/vite/issues/9703
+        const { default: MetaMaskSDK_ } = await import('@metamask/sdk')
+        const MetaMaskSDK = (() => {
+          if (
+            typeof MetaMaskSDK_ !== 'function' &&
+            typeof MetaMaskSDK_.default === 'function'
+          )
+            return MetaMaskSDK_.default
+          return MetaMaskSDK_ as unknown as typeof MetaMaskSDK_.default
+        })()
+
+        sdk = new MetaMaskSDK({
+          dappMetadata: {},
+          ...parameters,
+          _source: 'wagmi',
+          readonlyRPCMap: Object.fromEntries(
+            config.chains.map((chain) => [
+              chain.id,
+              chain.rpcUrls.default.http[0]!,
+            ]),
+          ),
+        })
+        await sdk.init()
+        return sdk.getProvider()!
+      }
+
+      if (!provider) {
+        if (!providerPromise) providerPromise = initProvider()
+        provider = await providerPromise
       }
-      return walletProvider!
+      return provider!
     },
     async isAuthorized() {
       try {
+        const isMobileBrowser =
+          typeof navigator !== 'undefined'
+            ? /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+                navigator.userAgent,
+              )
+            : false
+
+        // MetaMask Mobile doesn't support persisted sessions.
+        if (isMobileBrowser) return false
+
         const isDisconnected =
           // If shim exists in storage, connector is disconnected
           await config.storage?.getItem('metaMaskSDK.disconnected')
@@ -214,7 +177,7 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
         return false
       }
     },
-    async switchChain({ chainId }) {
+    async switchChain({ addEthereumChainParameter, chainId }) {
       const provider = await this.getProvider()
 
       const chain = config.chains.find((x) => x.id === chainId)
@@ -247,24 +210,34 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
           try {
             const { default: blockExplorer, ...blockExplorers } =
               chain.blockExplorers ?? {}
-            let blockExplorerUrls: string[] = []
-            if (blockExplorer)
+            let blockExplorerUrls
+            if (addEthereumChainParameter?.blockExplorerUrls)
+              blockExplorerUrls = addEthereumChainParameter.blockExplorerUrls
+            else if (blockExplorer)
               blockExplorerUrls = [
                 blockExplorer.url,
                 ...Object.values(blockExplorers).map((x) => x.url),
               ]
 
+            let rpcUrls
+            if (addEthereumChainParameter?.rpcUrls?.length)
+              rpcUrls = addEthereumChainParameter.rpcUrls
+            else rpcUrls = [chain.rpcUrls.default?.http[0] ?? '']
+
+            const addEthereumChain = {
+              blockExplorerUrls,
+              chainId: numberToHex(chainId),
+              chainName: addEthereumChainParameter?.chainName ?? chain.name,
+              iconUrls: addEthereumChainParameter?.iconUrls,
+              nativeCurrency:
+                addEthereumChainParameter?.nativeCurrency ??
+                chain.nativeCurrency,
+              rpcUrls,
+            } satisfies AddEthereumChainParameter
+
             await provider.request({
               method: 'wallet_addEthereumChain',
-              params: [
-                {
-                  chainId: numberToHex(chainId),
-                  chainName: chain.name,
-                  nativeCurrency: chain.nativeCurrency,
-                  rpcUrls: [chain.rpcUrls.default?.http[0] ?? ''],
-                  blockExplorerUrls,
-                },
-              ],
+              params: [addEthereumChain],
             })
 
             const currentChainId = await this.getChainId()
@@ -294,17 +267,20 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
         await config.storage?.removeItem('metaMaskSDK.disconnected')
       }
       // Regular change event
-      else config.emitter.emit('change', { accounts: accounts.map(getAddress) })
+      else
+        config.emitter.emit('change', {
+          accounts: accounts.map((x) => getAddress(x)),
+        })
     },
     onChainChanged(chain) {
-      const chainId = normalizeChainId(chain)
+      const chainId = Number(chain)
       config.emitter.emit('change', { chainId })
     },
     async onConnect(connectInfo) {
       const accounts = await this.getAccounts()
       if (accounts.length === 0) return
 
-      const chainId = normalizeChainId(connectInfo.chainId)
+      const chainId = Number(connectInfo.chainId)
       config.emitter.emit('connect', { accounts, chainId })
 
       const provider = await this.getProvider()
@@ -324,6 +300,12 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
         if (provider && !!(await this.getAccounts()).length) return
       }
 
+      // Remove cached SDK properties.
+      if (typeof localStorage !== 'undefined') {
+        localStorage.removeItem('MMSDK_cached_address')
+        localStorage.removeItem('MMSDK_cached_chainId')
+      }
+
       // No need to remove 'metaMaskSDK.disconnected' from storage because `onDisconnect` is typically
       // only called when the wallet is disconnected through the wallet's interface, meaning the wallet
       // actually disconnected and we don't need to simulate it.

package/src/safe.ts

@@ -1,9 +1,9 @@
-import { SafeAppProvider } from '@safe-global/safe-apps-provider'
-import { type Opts, default as SafeAppsSDK } from '@safe-global/safe-apps-sdk'
+import type { SafeAppProvider } from '@safe-global/safe-apps-provider'
+import type { Opts } from '@safe-global/safe-apps-sdk'
 import {
+  type Connector,
   ProviderNotFoundError,
   createConnector,
-  normalizeChainId,
 } from '@wagmi/core'
 import type { Evaluate } from '@wagmi/core/internal'
 import { getAddress } from 'viem'
@@ -31,14 +31,8 @@ export function safe(parameters: SafeParameters = {}) {
   type StorageItem = { 'safe.disconnected': true }
 
   let provider_: Provider | undefined
-  let SDK: typeof SafeAppsSDK.default
-  if (
-    typeof SafeAppsSDK !== 'function' &&
-    typeof SafeAppsSDK.default === 'function'
-  )
-    SDK = SafeAppsSDK.default
-  else SDK = SafeAppsSDK as unknown as typeof SafeAppsSDK.default
-  const sdk = new SDK(parameters)
+
+  let disconnect: Connector['onDisconnect'] | undefined
 
   return createConnector<Provider, Properties, StorageItem>((config) => ({
     id: 'safe',
@@ -51,7 +45,10 @@ export function safe(parameters: SafeParameters = {}) {
       const accounts = await this.getAccounts()
       const chainId = await this.getChainId()
 
-      provider.on('disconnect', this.onDisconnect.bind(this))
+      if (!disconnect) {
+        disconnect = this.onDisconnect.bind(this)
+        provider.on('disconnect', disconnect)
+      }
 
       // Remove disconnected shim if it exists
       if (shimDisconnect) await config.storage?.removeItem('safe.disconnected')
@@ -62,7 +59,10 @@ export function safe(parameters: SafeParameters = {}) {
       const provider = await this.getProvider()
       if (!provider) throw new ProviderNotFoundError()
 
-      provider.removeListener('disconnect', this.onDisconnect.bind(this))
+      if (disconnect) {
+        provider.removeListener('disconnect', disconnect)
+        disconnect = undefined
+      }
 
       // Add shim signalling connector is disconnected
       if (shimDisconnect)
@@ -82,8 +82,23 @@ export function safe(parameters: SafeParameters = {}) {
       if (!isIframe) return
 
       if (!provider_) {
+        const { default: SafeAppsSDK } = await import(
+          '@safe-global/safe-apps-sdk'
+        )
+        let SDK: typeof SafeAppsSDK.default
+        if (
+          typeof SafeAppsSDK !== 'function' &&
+          typeof SafeAppsSDK.default === 'function'
+        )
+          SDK = SafeAppsSDK.default
+        else SDK = SafeAppsSDK as unknown as typeof SafeAppsSDK.default
+        const sdk = new SDK(parameters)
+
         const safe = await sdk.safe.getInfo()
         if (!safe) throw new Error('Could not load Safe information')
+        const { SafeAppProvider } = await import(
+          '@safe-global/safe-apps-provider'
+        )
         provider_ = new SafeAppProvider(safe, sdk)
       }
       return provider_
@@ -91,7 +106,7 @@ export function safe(parameters: SafeParameters = {}) {
     async getChainId() {
       const provider = await this.getProvider()
       if (!provider) throw new ProviderNotFoundError()
-      return normalizeChainId(provider.chainId)
+      return Number(provider.chainId)
     },
     async isAuthorized() {
       try {

package/src/version.ts

@@ -1 +1 @@
-export const version = '5.0.0'
+export const version = '5.0.2'