@wagmi/connectors 5.0.0 → 5.0.1

package/src/walletConnect.ts

@@ -1,21 +1,32 @@
 import {
   ChainNotConfiguredError,
+  type Connector,
   ProviderNotFoundError,
   createConnector,
-  normalizeChainId,
 } from '@wagmi/core'
-import type { Evaluate, ExactPartial, Omit } from '@wagmi/core/internal'
-import { EthereumProvider } from '@walletconnect/ethereum-provider'
 import {
+  type Evaluate,
+  type ExactPartial,
+  type Omit,
+} from '@wagmi/core/internal'
+import { type EthereumProvider } from '@walletconnect/ethereum-provider'
+import {
+  type AddEthereumChainParameter,
   type Address,
   type ProviderConnectInfo,
   type ProviderRpcError,
+  type RpcError,
   SwitchChainError,
   UserRejectedRequestError,
   getAddress,
   numberToHex,
 } from 'viem'
 
+type WalletConnectConnector = Connector & {
+  onDisplayUri(uri: string): void
+  onSessionDelete(data: { topic: string }): void
+}
+
 type EthereumProviderOptions = Parameters<typeof EthereumProvider['init']>[0]
 
 export type WalletConnectParameters = Evaluate<
@@ -26,10 +37,6 @@ export type WalletConnectParameters = Evaluate<
      * WalletConnect has yet to establish a relationship with (e.g. the user has not approved or
      * rejected the chain).
      *
-     * Preface: Whereas WalletConnect v1 supported dynamic chain switching, WalletConnect v2 requires
-     * the user to pre-approve a set of chains up-front. This comes with consequent UX nuances (see below) when
-     * a user tries to switch to a chain that they have not approved.
-     *
      * This flag mainly affects the behavior when a wallet does not support dynamic chain authorization
      * with WalletConnect v2.
      *
@@ -41,10 +48,11 @@ export type WalletConnectParameters = Evaluate<
      * be a confusing user experience (e.g. the user will not know they have to reconnect
      * unless the dapp handles these types of errors).
      *
-     * If `false`, the new chain will be treated as a validated chain. This means that if the user
+     * If `false`, the new chain will be treated as a potentially valid chain. This means that if the user
      * has yet to establish a relationship with the chain in their WalletConnect session, wagmi will successfully
      * auto-connect the user. This comes with the trade-off that the connector will throw an error
-     * when attempting to switch to the unapproved chain. This may be useful in cases where a dapp constantly
+     * when attempting to switch to the unapproved chain if the wallet does not support dynamic session updates.
+     * This may be useful in cases where a dapp constantly
      * modifies their configured chains, and they do not want to disconnect the user upon
      * auto-connecting. If the user decides to switch to the unapproved chain, it is important that the
      * dapp handles this error and prompts the user to reconnect to the dapp in order to approve
@@ -72,16 +80,12 @@ export function walletConnect(parameters: WalletConnectParameters) {
   const isNewChainsStale = parameters.isNewChainsStale ?? true
 
   type Provider = Awaited<ReturnType<typeof EthereumProvider['init']>>
-  type NamespaceMethods =
-    | 'wallet_addEthereumChain'
-    | 'wallet_switchEthereumChain'
   type Properties = {
     connect(parameters?: { chainId?: number; pairingTopic?: string }): Promise<{
       accounts: readonly Address[]
       chainId: number
     }>
     getNamespaceChainsIds(): number[]
-    getNamespaceMethods(): NamespaceMethods[]
     getRequestedChainsIds(): Promise<number[]>
     isChainsStale(): Promise<boolean>
     onConnect(connectInfo: ProviderConnectInfo): void
@@ -98,6 +102,13 @@ export function walletConnect(parameters: WalletConnectParameters) {
   let providerPromise: Promise<typeof provider_>
   const NAMESPACE = 'eip155'
 
+  let accountsChanged: WalletConnectConnector['onAccountsChanged'] | undefined
+  let chainChanged: WalletConnectConnector['onChainChanged'] | undefined
+  let connect: WalletConnectConnector['onConnect'] | undefined
+  let displayUri: WalletConnectConnector['onDisplayUri'] | undefined
+  let sessionDelete: WalletConnectConnector['onSessionDelete'] | undefined
+  let disconnect: WalletConnectConnector['onDisconnect'] | undefined
+
   return createConnector<Provider, Properties, StorageItem>((config) => ({
     id: 'walletConnect',
     name: 'WalletConnect',
@@ -105,14 +116,23 @@ export function walletConnect(parameters: WalletConnectParameters) {
     async setup() {
       const provider = await this.getProvider().catch(() => null)
       if (!provider) return
-      provider.on('connect', this.onConnect.bind(this))
-      provider.on('session_delete', this.onSessionDelete.bind(this))
+      if (!connect) {
+        connect = this.onConnect.bind(this)
+        provider.on('connect', connect)
+      }
+      if (!sessionDelete) {
+        sessionDelete = this.onSessionDelete.bind(this)
+        provider.on('session_delete', sessionDelete)
+      }
     },
     async connect({ chainId, ...rest } = {}) {
       try {
         const provider = await this.getProvider()
         if (!provider) throw new ProviderNotFoundError()
-        provider.on('display_uri', this.onDisplayUri)
+        if (!displayUri) {
+          displayUri = this.onDisplayUri
+          provider.on('display_uri', displayUri)
+        }
 
         let targetChainId = chainId
         if (!targetChainId) {
@@ -145,15 +165,33 @@ export function walletConnect(parameters: WalletConnectParameters) {
         }
 
         // If session exists and chains are authorized, enable provider for required chain
-        const accounts = (await provider.enable()).map(getAddress)
+        const accounts = (await provider.enable()).map((x) => getAddress(x))
         const currentChainId = await this.getChainId()
 
-        provider.removeListener('display_uri', this.onDisplayUri)
-        provider.removeListener('connect', this.onConnect.bind(this))
-        provider.on('accountsChanged', this.onAccountsChanged.bind(this))
-        provider.on('chainChanged', this.onChainChanged)
-        provider.on('disconnect', this.onDisconnect.bind(this))
-        provider.on('session_delete', this.onSessionDelete.bind(this))
+        if (displayUri) {
+          provider.removeListener('display_uri', displayUri)
+          displayUri = undefined
+        }
+        if (connect) {
+          provider.removeListener('connect', connect)
+          connect = undefined
+        }
+        if (!accountsChanged) {
+          accountsChanged = this.onAccountsChanged.bind(this)
+          provider.on('accountsChanged', accountsChanged)
+        }
+        if (!chainChanged) {
+          chainChanged = this.onChainChanged.bind(this)
+          provider.on('chainChanged', chainChanged)
+        }
+        if (!disconnect) {
+          disconnect = this.onDisconnect.bind(this)
+          provider.on('disconnect', disconnect)
+        }
+        if (!sessionDelete) {
+          sessionDelete = this.onSessionDelete.bind(this)
+          provider.on('session_delete', sessionDelete)
+        }
 
         return { accounts, chainId: currentChainId }
       } catch (error) {
@@ -174,29 +212,41 @@ export function walletConnect(parameters: WalletConnectParameters) {
       } catch (error) {
         if (!/No matching key/i.test((error as Error).message)) throw error
       } finally {
-        provider?.removeListener(
-          'accountsChanged',
-          this.onAccountsChanged.bind(this),
-        )
-        provider?.removeListener('chainChanged', this.onChainChanged)
-        provider?.removeListener('disconnect', this.onDisconnect.bind(this))
-        provider?.removeListener(
-          'session_delete',
-          this.onSessionDelete.bind(this),
-        )
-        provider?.on('connect', this.onConnect.bind(this))
+        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)
+        }
+        if (accountsChanged) {
+          provider?.removeListener('accountsChanged', accountsChanged)
+          accountsChanged = undefined
+        }
+        if (sessionDelete) {
+          provider?.removeListener('session_delete', sessionDelete)
+          sessionDelete = undefined
+        }
 
         this.setRequestedChainsIds([])
       }
     },
     async getAccounts() {
       const provider = await this.getProvider()
-      return provider.accounts.map(getAddress)
+      return provider.accounts.map((x) => getAddress(x))
     },
     async getProvider({ chainId } = {}) {
       async function initProvider() {
         const optionalChains = config.chains.map((x) => x.id) as [number]
         if (!optionalChains.length) return
+        const { EthereumProvider } = await import(
+          '@walletconnect/ethereum-provider'
+        )
         return await EthereumProvider.init({
           ...parameters,
           disableProviderPing: true,
@@ -245,62 +295,93 @@ export function walletConnect(parameters: WalletConnectParameters) {
         return false
       }
     },
-    async switchChain({ chainId }) {
-      const chain = config.chains.find((chain) => chain.id === chainId)
+    async switchChain({ addEthereumChainParameter, chainId }) {
+      const provider = await this.getProvider()
+      if (!provider) throw new ProviderNotFoundError()
+
+      const chain = config.chains.find((x) => x.id === chainId)
       if (!chain) throw new SwitchChainError(new ChainNotConfiguredError())
 
       try {
-        const provider = await this.getProvider()
-        const namespaceChains = this.getNamespaceChainsIds()
-        const namespaceMethods = this.getNamespaceMethods()
-        const isChainApproved = namespaceChains.includes(chainId)
+        await Promise.all([
+          new Promise<void>((resolve) => {
+            const listener = ({
+              chainId: currentChainId,
+            }: { chainId?: number }) => {
+              if (currentChainId === chainId) {
+                config.emitter.off('change', listener)
+                resolve()
+              }
+            }
+            config.emitter.on('change', listener)
+          }),
+          provider.request({
+            method: 'wallet_switchEthereumChain',
+            params: [{ chainId: numberToHex(chainId) }],
+          }),
+        ])
+
+        const requestedChains = await this.getRequestedChainsIds()
+        this.setRequestedChainsIds([...requestedChains, chainId])
+
+        return chain
+      } catch (err) {
+        const error = err as RpcError
+
+        if (/(user rejected)/i.test(error.message))
+          throw new UserRejectedRequestError(error)
+
+        // Indicates chain is not added to provider
+        try {
+          let blockExplorerUrls
+          if (addEthereumChainParameter?.blockExplorerUrls)
+            blockExplorerUrls = addEthereumChainParameter.blockExplorerUrls
+          else
+            blockExplorerUrls = chain.blockExplorers?.default.url
+              ? [chain.blockExplorers?.default.url]
+              : []
+
+          let rpcUrls
+          if (addEthereumChainParameter?.rpcUrls?.length)
+            rpcUrls = addEthereumChainParameter.rpcUrls
+          else rpcUrls = [...chain.rpcUrls.default.http]
+
+          const addEthereumChain = {
+            blockExplorerUrls,
+            chainId: numberToHex(chainId),
+            chainName: addEthereumChainParameter?.chainName ?? chain.name,
+            iconUrls: addEthereumChainParameter?.iconUrls,
+            nativeCurrency:
+              addEthereumChainParameter?.nativeCurrency ?? chain.nativeCurrency,
+            rpcUrls,
+          } satisfies AddEthereumChainParameter
 
-        if (
-          !isChainApproved &&
-          namespaceMethods.includes('wallet_addEthereumChain')
-        ) {
           await provider.request({
             method: 'wallet_addEthereumChain',
-            params: [
-              {
-                chainId: numberToHex(chain.id),
-                blockExplorerUrls: [chain.blockExplorers?.default.url],
-                chainName: chain.name,
-                nativeCurrency: chain.nativeCurrency,
-                rpcUrls: [...chain.rpcUrls.default.http],
-              },
-            ],
+            params: [addEthereumChain],
           })
+
           const requestedChains = await this.getRequestedChainsIds()
           this.setRequestedChainsIds([...requestedChains, chainId])
-        }
-
-        await provider.request({
-          method: 'wallet_switchEthereumChain',
-          params: [{ chainId: numberToHex(chainId) }],
-        })
-        return chain
-      } catch (error) {
-        console.log({ error })
-        const message =
-          typeof error === 'string'
-            ? error
-            : (error as ProviderRpcError)?.message
-        if (/user rejected request/i.test(message))
+          return chain
+        } catch (error) {
           throw new UserRejectedRequestError(error as Error)
-        throw new SwitchChainError(error as Error)
+        }
       }
     },
     onAccountsChanged(accounts) {
       if (accounts.length === 0) this.onDisconnect()
-      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 chainId = normalizeChainId(connectInfo.chainId)
+      const chainId = Number(connectInfo.chainId)
       const accounts = await this.getAccounts()
       config.emitter.emit('connect', { accounts, chainId })
     },
@@ -309,14 +390,26 @@ export function walletConnect(parameters: WalletConnectParameters) {
       config.emitter.emit('disconnect')
 
       const provider = await this.getProvider()
-      provider.removeListener(
-        'accountsChanged',
-        this.onAccountsChanged.bind(this),
-      )
-      provider.removeListener('chainChanged', this.onChainChanged)
-      provider.removeListener('disconnect', this.onDisconnect.bind(this))
-      provider.removeListener('session_delete', this.onSessionDelete.bind(this))
-      provider.on('connect', this.onConnect.bind(this))
+      if (accountsChanged) {
+        provider.removeListener('accountsChanged', accountsChanged)
+        accountsChanged = undefined
+      }
+      if (chainChanged) {
+        provider.removeListener('chainChanged', chainChanged)
+        chainChanged = undefined
+      }
+      if (disconnect) {
+        provider.removeListener('disconnect', disconnect)
+        disconnect = undefined
+      }
+      if (sessionDelete) {
+        provider.removeListener('session_delete', sessionDelete)
+        sessionDelete = undefined
+      }
+      if (!connect) {
+        connect = this.onConnect.bind(this)
+        provider.on('connect', connect)
+      }
     },
     onDisplayUri(uri) {
       config.emitter.emit('message', { type: 'display_uri', data: uri })
@@ -331,12 +424,6 @@ export function walletConnect(parameters: WalletConnectParameters) {
       )
       return chainIds ?? []
     },
-    getNamespaceMethods() {
-      if (!provider_) return []
-      const methods = provider_.session?.namespaces[NAMESPACE]
-        ?.methods as NamespaceMethods[]
-      return methods ?? []
-    },
     async getRequestedChainsIds() {
       return (
         (await config.storage?.getItem(this.requestedChainsStorageKey)) ?? []
@@ -352,21 +439,8 @@ export function walletConnect(parameters: WalletConnectParameters) {
      * There may be a scenario where a dapp adds a chain to the
      * connector later on, however, this chain will not have been approved or rejected
      * by the wallet. In this case, the chain is considered stale.
-     *
-     * There are exceptions however:
-     * -  If the wallet supports dynamic chain addition via `eth_addEthereumChain`,
-     *    then the chain is not considered stale.
-     * -  If the `isNewChainsStale` flag is falsy on the connector, then the chain is
-     *    not considered stale.
-     *
-     * For the above cases, chain validation occurs dynamically when the user
-     * attempts to switch chain.
-     *
-     * Also check that dapp supports at least 1 chain from previously approved session.
      */
     async isChainsStale() {
-      const namespaceMethods = this.getNamespaceMethods()
-      if (namespaceMethods.includes('wallet_addEthereumChain')) return false
       if (!isNewChainsStale) return false
 
       const connectorChains = config.chains.map((x) => x.id)

package/dist/esm/exports/index.test-d.js

@@ -1,4 +0,0 @@
-import { expectTypeOf } from 'vitest';
-// noop test because vitest typecheck fails unless each workspace project has type test
-expectTypeOf(1).toEqualTypeOf();
-//# sourceMappingURL=index.test-d.js.map

package/dist/esm/exports/index.test-d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.test-d.js","sourceRoot":"","sources":["../../../src/exports/index.test-d.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAA;AAErC,uFAAuF;AACvF,YAAY,CAAC,CAAC,CAAC,CAAC,aAAa,EAAU,CAAA"}

package/dist/types/exports/index.test-d.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=index.test-d.d.ts.map

package/dist/types/exports/index.test-d.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.test-d.d.ts","sourceRoot":"","sources":["../../../src/exports/index.test-d.ts"],"names":[],"mappings":""}