@wagmi/connectors 5.0.0 → 5.0.2

package/src/coinbaseWallet.ts

@@ -1,14 +1,16 @@
-import {
-  type CoinbaseWalletProvider,
-  CoinbaseWalletSDK,
-} from '@coinbase/wallet-sdk'
+import type { CoinbaseWalletSDK, ProviderInterface } from '@coinbase/wallet-sdk'
 import {
   ChainNotConfiguredError,
+  type Connector,
   createConnector,
-  normalizeChainId,
 } from '@wagmi/core'
 import type { Evaluate, Mutable, Omit } from '@wagmi/core/internal'
+import type {
+  CoinbaseWalletProvider as CBW_Provider,
+  CoinbaseWalletSDK as CBW_SDK,
+} from 'cbw-sdk'
 import {
+  type AddEthereumChainParameter,
   type ProviderRpcError,
   SwitchChainError,
   UserRejectedRequestError,
@@ -16,44 +18,75 @@ import {
   numberToHex,
 } from 'viem'
 
-export type CoinbaseWalletParameters = Evaluate<
-  Mutable<
-    Omit<
-      ConstructorParameters<typeof CoinbaseWalletSDK>[0],
-      'reloadOnDisconnect' // remove property since TSDoc says default is `true`
-    >
+type Version = '3' | '4'
+
+export type CoinbaseWalletParameters<version extends Version = '3'> =
+  version extends '4'
+    ? Evaluate<
+        {
+          headlessMode?: false | undefined
+          /** Coinbase Wallet SDK version */
+          version?: version | '3' | undefined
+        } & Version4Parameters
+      >
+    : Evaluate<
+        {
+          /**
+           * @deprecated `headlessMode` will be removed in the next major version. Upgrade to `version: '4'`.
+           */
+          headlessMode?: true | undefined
+          /**
+           * Coinbase Wallet SDK version
+           * @deprecated Version 3 will be removed in the next major version. Upgrade to `version: '4'`.
+           * @default '4'
+           */
+          version?: version | '4' | undefined
+        } & Version3Parameters
+      >
+
+coinbaseWallet.type = 'coinbaseWallet' as const
+export function coinbaseWallet<version extends Version>(
+  parameters: CoinbaseWalletParameters<version> = {} as any,
+): version extends '4'
+  ? ReturnType<typeof version4>
+  : ReturnType<typeof version3> {
+  if (parameters.version === '3' || parameters.headlessMode)
+    return version3(parameters as Version3Parameters) as any
+  return version4(parameters as Version4Parameters) as any
+}
+
+type Version4Parameters = Mutable<
+  Omit<
+    ConstructorParameters<typeof CoinbaseWalletSDK>[0],
+    'appChainIds' // set via wagmi config
   > & {
     /**
-     * Fallback Ethereum JSON RPC URL
-     * @default ""
+     * Preference for the type of wallet to display.
+     * @default 'all'
      */
-    jsonRpcUrl?: string | undefined
-    /**
-     * Fallback Ethereum Chain ID
-     * @default 1
-     */
-    chainId?: number | undefined
-    /**
-     * Whether or not to reload dapp automatically after disconnect.
-     * @default false
-     */
-    reloadOnDisconnect?: boolean | undefined
+    preference?: 'all' | 'smartWalletOnly' | 'eoaOnly' | undefined
+    keysUrl?: string | undefined
   }
 >
 
-coinbaseWallet.type = 'coinbaseWallet' as const
-export function coinbaseWallet(parameters: CoinbaseWalletParameters) {
-  const reloadOnDisconnect = false
-
-  type Provider = CoinbaseWalletProvider
+function version4(parameters: Version4Parameters) {
+  type Provider = ProviderInterface & {
+    // for backwards compatibility
+    close?(): void
+  }
   type Properties = {}
 
   let sdk: CoinbaseWalletSDK | undefined
   let walletProvider: Provider | undefined
 
+  let accountsChanged: Connector['onAccountsChanged'] | undefined
+  let chainChanged: Connector['onChainChanged'] | undefined
+  let disconnect: Connector['onDisconnect'] | undefined
+
   return createConnector<Provider, Properties>((config) => ({
     id: 'coinbaseWalletSDK',
     name: 'Coinbase Wallet',
+    supportsSimulation: true,
     type: coinbaseWallet.type,
     async connect({ chainId } = {}) {
       try {
@@ -62,11 +95,20 @@ export function coinbaseWallet(parameters: CoinbaseWalletParameters) {
           (await provider.request({
             method: 'eth_requestAccounts',
           })) as string[]
-        ).map(getAddress)
+        ).map((x) => getAddress(x))
 
-        provider.on('accountsChanged', this.onAccountsChanged)
-        provider.on('chainChanged', this.onChainChanged)
-        provider.on('disconnect', this.onDisconnect.bind(this))
+        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)
+        }
 
         // Switch to chain if provided
         let currentChainId = await this.getChainId()
@@ -92,12 +134,21 @@ export function coinbaseWallet(parameters: CoinbaseWalletParameters) {
     async disconnect() {
       const provider = await this.getProvider()
 
-      provider.removeListener('accountsChanged', this.onAccountsChanged)
-      provider.removeListener('chainChanged', this.onChainChanged)
-      provider.removeListener('disconnect', this.onDisconnect.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
+      }
 
       provider.disconnect()
-      provider.close()
+      provider.close?.()
     },
     async getAccounts() {
       const provider = await this.getProvider()
@@ -105,27 +156,265 @@ export function coinbaseWallet(parameters: CoinbaseWalletParameters) {
         await provider.request<string[]>({
           method: 'eth_accounts',
         })
-      ).map(getAddress)
+      ).map((x) => getAddress(x))
     },
     async getChainId() {
       const provider = await this.getProvider()
-      return normalizeChainId(provider.chainId)
+      const chainId = await provider.request<number>({
+        method: 'eth_chainId',
+      })
+      return Number(chainId)
     },
     async getProvider() {
       if (!walletProvider) {
-        sdk = new CoinbaseWalletSDK({ reloadOnDisconnect, ...parameters })
+        // Unwrapping import for Vite compatibility.
+        // See: https://github.com/vitejs/vite/issues/9703
+        const { default: CoinbaseSDK_ } = await import('@coinbase/wallet-sdk')
+        const CoinbaseSDK = (() => {
+          if (
+            typeof CoinbaseSDK_ !== 'function' &&
+            typeof CoinbaseSDK_.default === 'function'
+          )
+            return CoinbaseSDK_.default
+          return CoinbaseSDK_ as unknown as typeof CoinbaseSDK_.default
+        })()
+
+        sdk = new CoinbaseSDK({
+          ...parameters,
+          appChainIds: config.chains.map((x) => x.id),
+        })
+
+        walletProvider = sdk.makeWeb3Provider({
+          ...parameters,
+          options: parameters.preference ?? 'all',
+        })
+      }
+
+      return walletProvider
+    },
+    async isAuthorized() {
+      try {
+        const accounts = await this.getAccounts()
+        return !!accounts.length
+      } catch {
+        return false
+      }
+    },
+    async switchChain({ addEthereumChainParameter, chainId }) {
+      const chain = config.chains.find((chain) => chain.id === chainId)
+      if (!chain) throw new SwitchChainError(new ChainNotConfiguredError())
+
+      const provider = await this.getProvider()
+
+      try {
+        await provider.request({
+          method: 'wallet_switchEthereumChain',
+          params: [{ chainId: numberToHex(chain.id) }],
+        })
+        return chain
+      } catch (error) {
+        // Indicates chain is not added to provider
+        if ((error as ProviderRpcError).code === 4902) {
+          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[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: [addEthereumChain],
+            })
+
+            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((x) => getAddress(x)),
+        })
+    },
+    onChainChanged(chain) {
+      const chainId = Number(chain)
+      config.emitter.emit('change', { chainId })
+    },
+    async onDisconnect(_error) {
+      config.emitter.emit('disconnect')
+
+      const provider = await this.getProvider()
+      if (accountsChanged) {
+        provider.removeListener('accountsChanged', accountsChanged)
+        accountsChanged = undefined
+      }
+      if (chainChanged) {
+        provider.removeListener('chainChanged', chainChanged)
+        chainChanged = undefined
+      }
+      if (disconnect) {
+        provider.removeListener('disconnect', disconnect)
+        disconnect = undefined
+      }
+    },
+  }))
+}
+
+type Version3Parameters = Mutable<
+  Omit<
+    ConstructorParameters<typeof CBW_SDK>[0],
+    'reloadOnDisconnect' // remove property since TSDoc says default is `true`
+  >
+> & {
+  /**
+   * Fallback Ethereum JSON RPC URL
+   * @default ""
+   */
+  jsonRpcUrl?: string | undefined
+  /**
+   * Fallback Ethereum Chain ID
+   * @default 1
+   */
+  chainId?: number | undefined
+  /**
+   * Whether or not to reload dapp automatically after disconnect.
+   * @default false
+   */
+  reloadOnDisconnect?: boolean | undefined
+}
 
-        // Mock implementations to retrieve private `walletExtension` method from the Coinbase Wallet SDK.
-        abstract class WalletProvider {
-          // https://github.com/coinbase/coinbase-wallet-sdk/blob/b4cca90022ffeb46b7bbaaab9389a33133fe0844/packages/wallet-sdk/src/provider/CoinbaseWalletProvider.ts#L927-L936
-          abstract getChainId(): number
+function version3(parameters: Version3Parameters) {
+  const reloadOnDisconnect = false
+
+  type Provider = CBW_Provider
+  type Properties = {}
+
+  let sdk: CBW_SDK | undefined
+  let walletProvider: Provider | undefined
+
+  let accountsChanged: Connector['onAccountsChanged'] | undefined
+  let chainChanged: Connector['onChainChanged'] | undefined
+  let disconnect: Connector['onDisconnect'] | undefined
+
+  return createConnector<Provider, Properties>((config) => ({
+    id: 'coinbaseWalletSDK',
+    name: 'Coinbase Wallet',
+    supportsSimulation: true,
+    type: coinbaseWallet.type,
+    async connect({ chainId } = {}) {
+      try {
+        const provider = await this.getProvider()
+        const accounts = (
+          (await provider.request({
+            method: 'eth_requestAccounts',
+          })) as string[]
+        ).map((x) => getAddress(x))
+
+        if (!accountsChanged) {
+          accountsChanged = this.onAccountsChanged.bind(this)
+          provider.on('accountsChanged', accountsChanged)
+        }
+        if (!chainChanged) {
+          chainChanged = this.onChainChanged.bind(this)
+          provider.on('chainChanged', chainChanged)
         }
-        abstract class SDK {
-          // https://github.com/coinbase/coinbase-wallet-sdk/blob/b4cca90022ffeb46b7bbaaab9389a33133fe0844/packages/wallet-sdk/src/CoinbaseWalletSDK.ts#L233-L235
-          abstract get walletExtension(): WalletProvider | undefined
+        if (!disconnect) {
+          disconnect = this.onDisconnect.bind(this)
+          provider.on('disconnect', disconnect)
+        }
+
+        // Switch to chain if provided
+        let currentChainId = await this.getChainId()
+        if (chainId && currentChainId !== chainId) {
+          const chain = await this.switchChain!({ chainId }).catch((error) => {
+            if (error.code === UserRejectedRequestError.code) throw error
+            return { id: currentChainId }
+          })
+          currentChainId = chain?.id ?? currentChainId
         }
+
+        return { accounts, chainId: currentChainId }
+      } catch (error) {
+        if (
+          /(user closed modal|accounts received is empty|user denied account)/i.test(
+            (error as Error).message,
+          )
+        )
+          throw new UserRejectedRequestError(error as Error)
+        throw error
+      }
+    },
+    async disconnect() {
+      const provider = await this.getProvider()
+
+      if (accountsChanged) {
+        provider.removeListener('accountsChanged', accountsChanged)
+        accountsChanged = undefined
+      }
+      if (chainChanged) {
+        provider.removeListener('chainChanged', chainChanged)
+        chainChanged = undefined
+      }
+      if (disconnect) {
+        provider.removeListener('disconnect', disconnect)
+        disconnect = undefined
+      }
+
+      provider.disconnect()
+      provider.close()
+    },
+    async getAccounts() {
+      const provider = await this.getProvider()
+      return (
+        await provider.request<string[]>({
+          method: 'eth_accounts',
+        })
+      ).map((x) => getAddress(x))
+    },
+    async getChainId() {
+      const provider = await this.getProvider()
+      const chainId = await provider.request<number>({ method: 'eth_chainId' })
+      return Number(chainId)
+    },
+    async getProvider() {
+      if (!walletProvider) {
+        const { default: SDK_ } = await import('cbw-sdk')
+        let SDK: typeof SDK_.default
+        if (typeof SDK_ !== 'function' && typeof SDK_.default === 'function')
+          SDK = SDK_.default
+        else SDK = SDK_ as unknown as typeof SDK_.default
+        sdk = new SDK({ reloadOnDisconnect, ...parameters })
+
+        // Force types to retrieve private `walletExtension` method from the Coinbase Wallet SDK.
         const walletExtensionChainId = (
-          sdk as unknown as SDK
+          sdk as unknown as {
+            get walletExtension(): { getChainId(): number } | undefined
+          }
         ).walletExtension?.getChainId()
 
         const chain =
@@ -140,6 +429,7 @@ export function coinbaseWallet(parameters: CoinbaseWalletParameters) {
 
         walletProvider = sdk.makeWeb3Provider(jsonRpcUrl, chainId)
       }
+
       return walletProvider
     },
     async isAuthorized() {
@@ -150,35 +440,51 @@ export function coinbaseWallet(parameters: CoinbaseWalletParameters) {
         return false
       }
     },
-    async switchChain({ chainId }) {
+    async switchChain({ addEthereumChainParameter, chainId }) {
       const chain = config.chains.find((chain) => chain.id === chainId)
       if (!chain) throw new SwitchChainError(new ChainNotConfiguredError())
 
       const provider = await this.getProvider()
-      const chainId_ = numberToHex(chain.id)
 
       try {
         await provider.request({
           method: 'wallet_switchEthereumChain',
-          params: [{ chainId: chainId_ }],
+          params: [{ chainId: numberToHex(chain.id) }],
         })
         return chain
       } catch (error) {
         // Indicates chain is not added to provider
         if ((error as ProviderRpcError).code === 4902) {
           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[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: chainId_,
-                  chainName: chain.name,
-                  nativeCurrency: chain.nativeCurrency,
-                  rpcUrls: [chain.rpcUrls.default?.http[0] ?? ''],
-                  blockExplorerUrls: [chain.blockExplorers?.default.url],
-                },
-              ],
+              params: [addEthereumChain],
             })
+
             return chain
           } catch (error) {
             throw new UserRejectedRequestError(error as Error)
@@ -189,20 +495,32 @@ export function coinbaseWallet(parameters: CoinbaseWalletParameters) {
       }
     },
     onAccountsChanged(accounts) {
-      if (accounts.length === 0) config.emitter.emit('disconnect')
-      else config.emitter.emit('change', { accounts: accounts.map(getAddress) })
+      if (accounts.length === 0) this.onDisconnect()
+      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 onDisconnect(_error) {
       config.emitter.emit('disconnect')
 
       const provider = await this.getProvider()
-      provider.removeListener('accountsChanged', this.onAccountsChanged)
-      provider.removeListener('chainChanged', this.onChainChanged)
-      provider.removeListener('disconnect', this.onDisconnect.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
+      }
     },
   }))
 }