refactor: lazy load coinbase package (#3752)

Co-authored-by: tomiir <[email protected]>
reown-com · Jan 30, 2025 · 9ce44fe · 9ce44fe
1 parent bc278cb
commit 9ce44fe
Show file tree

Hide file tree

Showing 15 changed files with 153 additions and 85 deletions.
diff --git a/.changeset/spicy-ducks-search.md b/.changeset/spicy-ducks-search.md
@@ -0,0 +1,23 @@
+---
+'@reown/appkit-adapter-bitcoin': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-cli': patch
+'@reown/appkit-common': patch
+'@reown/appkit-core': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-wallet': patch
+'@reown/appkit-wallet-button': patch
+---
+
+Refactors syncConnectors to dynamically import Coinbase Wallet SDK
diff --git a/apps/laboratory/package.json b/apps/laboratory/package.json
@@ -87,6 +87,7 @@
     "@bitcoinerlab/secp256k1": "1.1.1",
     "@chakra-ui/icons": "2.1.1",
     "@chakra-ui/react": "2.8.2",
+    "@coinbase/wallet-sdk": "4.2.4",
     "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
     "@reown/appkit": "workspace:*",

diff --git a/packages/adapters/bitcoin/src/adapter.ts b/packages/adapters/bitcoin/src/adapter.ts
@@ -82,7 +82,7 @@ export class BitcoinAdapter extends AdapterBlueprint<BitcoinConnector> {
     }
   }
 
-  override syncConnectors(_options?: AppKitOptions, appKit?: AppKit): void {
+  override syncConnectors(_options?: AppKitOptions, appKit?: AppKit) {
     function getActiveNetwork() {
       return appKit?.getCaipNetwork()
     }

diff --git a/packages/adapters/ethers/package.json b/packages/adapters/ethers/package.json
@@ -29,9 +29,11 @@
     "@walletconnect/universal-provider": "2.18.0",
     "valtio": "1.11.2"
   },
+  "optionalDependencies": {
+    "@coinbase/wallet-sdk": "4.2.4"
+  },
   "peerDependencies": {
     "@ethersproject/sha2": "5.7.0",
-    "@coinbase/wallet-sdk": "4.2.4",
     "ethers": ">=6"
   },
   "devDependencies": {

diff --git a/packages/adapters/ethers/src/client.ts b/packages/adapters/ethers/src/client.ts
@@ -1,4 +1,3 @@
-import { CoinbaseWalletSDK, type ProviderInterface } from '@coinbase/wallet-sdk'
 import UniversalProvider from '@walletconnect/universal-provider'
 import { InfuraProvider, JsonRpcProvider, formatEther } from 'ethers'
 
@@ -36,15 +35,12 @@ export class EthersAdapter extends AdapterBlueprint {
     this.namespace = CommonConstantsUtil.CHAIN.EVM
   }
 
-  private createEthersConfig(options: AppKitOptions) {
+  private async createEthersConfig(options: AppKitOptions) {
     if (!options.metadata) {
       return undefined
     }
     let injectedProvider: Provider | undefined = undefined
 
-    // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
-    let coinbaseProvider: ProviderInterface | undefined = undefined
-
     function getInjectedProvider() {
       if (injectedProvider) {
         return injectedProvider
@@ -64,26 +60,30 @@ export class EthersAdapter extends AdapterBlueprint {
       return injectedProvider
     }
 
-    function getCoinbaseProvider() {
-      if (coinbaseProvider) {
-        return coinbaseProvider
-      }
+    async function getCoinbaseProvider() {
+      try {
+        const { createCoinbaseWalletSDK } = await import('@coinbase/wallet-sdk')
 
-      if (typeof window === 'undefined') {
-        return undefined
-      }
+        if (typeof window === 'undefined') {
+          return undefined
+        }
 
-      const coinbaseWallet = new CoinbaseWalletSDK({
-        appName: options?.metadata?.name,
-        appLogoUrl: options?.metadata?.icons[0],
-        appChainIds: options.networks?.map(caipNetwork => caipNetwork.id as number) || [1, 84532]
-      })
+        const coinbaseSdk = createCoinbaseWalletSDK({
+          appName: options?.metadata?.name,
+          appLogoUrl: options?.metadata?.icons[0],
+          appChainIds: options.networks?.map(caipNetwork => caipNetwork.id as number) || [1, 84532],
+          preference: {
+            options: options.coinbasePreference ?? 'all'
+          }
+        })
 
-      coinbaseProvider = coinbaseWallet.makeWeb3Provider({
-        options: options.coinbasePreference ?? 'all'
-      })
+        return coinbaseSdk.getProvider()
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to import Coinbase Wallet SDK:', error)
 
-      return coinbaseProvider
+        return undefined
+      }
     }
 
     const providers: ProviderType = { metadata: options.metadata }
@@ -93,7 +93,11 @@ export class EthersAdapter extends AdapterBlueprint {
     }
 
     if (options.enableCoinbase !== false) {
-      providers.coinbase = getCoinbaseProvider()
+      const coinbaseProvider = await getCoinbaseProvider()
+
+      if (coinbaseProvider) {
+        providers.coinbase = coinbaseProvider
+      }
     }
 
     providers.EIP6963 = options.enableEIP6963 !== false
@@ -248,8 +252,9 @@ export class EthersAdapter extends AdapterBlueprint {
     }
   }
 
-  public syncConnectors(options: AppKitOptions) {
-    this.ethersConfig = this.createEthersConfig(options)
+  override async syncConnectors(options: AppKitOptions): Promise<void> {
+    this.ethersConfig = await this.createEthersConfig(options)
+
     if (this.ethersConfig?.EIP6963) {
       this.listenInjectedConnector(true)
     }

diff --git a/packages/adapters/ethers5/package.json b/packages/adapters/ethers5/package.json
@@ -29,9 +29,11 @@
     "@walletconnect/universal-provider": "2.18.0",
     "valtio": "1.11.2"
   },
+  "optionalDependencies": {
+    "@coinbase/wallet-sdk": "4.2.4"
+  },
   "peerDependencies": {
     "@ethersproject/sha2": "5.7.0",
-    "@coinbase/wallet-sdk": "4.2.4",
     "ethers": ">=4.1 <6.0.0"
   },
   "devDependencies": {

diff --git a/packages/adapters/ethers5/src/client.ts b/packages/adapters/ethers5/src/client.ts
@@ -1,4 +1,3 @@
-import { CoinbaseWalletSDK, type ProviderInterface } from '@coinbase/wallet-sdk'
 import UniversalProvider from '@walletconnect/universal-provider'
 import * as ethers from 'ethers'
 import { formatEther } from 'ethers/lib/utils.js'
@@ -37,15 +36,12 @@ export class Ethers5Adapter extends AdapterBlueprint {
     this.namespace = CommonConstantsUtil.CHAIN.EVM
   }
 
-  private createEthersConfig(options: AppKitOptions) {
+  private async createEthersConfig(options: AppKitOptions) {
     if (!options.metadata) {
       return undefined
     }
     let injectedProvider: Provider | undefined = undefined
 
-    // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
-    let coinbaseProvider: ProviderInterface | undefined = undefined
-
     function getInjectedProvider() {
       if (injectedProvider) {
         return injectedProvider
@@ -65,26 +61,30 @@ export class Ethers5Adapter extends AdapterBlueprint {
       return injectedProvider
     }
 
-    function getCoinbaseProvider() {
-      if (coinbaseProvider) {
-        return coinbaseProvider
-      }
+    async function getCoinbaseProvider() {
+      try {
+        const { createCoinbaseWalletSDK } = await import('@coinbase/wallet-sdk')
 
-      if (typeof window === 'undefined') {
-        return undefined
-      }
+        if (typeof window === 'undefined') {
+          return undefined
+        }
 
-      const coinbaseWallet = new CoinbaseWalletSDK({
-        appName: options?.metadata?.name,
-        appLogoUrl: options?.metadata?.icons[0],
-        appChainIds: options.networks?.map(caipNetwork => caipNetwork.id as number) || [1, 84532]
-      })
+        const coinbaseSdk = createCoinbaseWalletSDK({
+          appName: options?.metadata?.name,
+          appLogoUrl: options?.metadata?.icons[0],
+          appChainIds: options.networks?.map(caipNetwork => caipNetwork.id as number) || [1, 84532],
+          preference: {
+            options: options.coinbasePreference ?? 'all'
+          }
+        })
 
-      coinbaseProvider = coinbaseWallet.makeWeb3Provider({
-        options: options.coinbasePreference ?? 'all'
-      })
+        return coinbaseSdk.getProvider()
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to import Coinbase Wallet SDK:', error)
 
-      return coinbaseProvider
+        return undefined
+      }
     }
 
     const providers: ProviderType = { metadata: options.metadata }
@@ -94,7 +94,11 @@ export class Ethers5Adapter extends AdapterBlueprint {
     }
 
     if (options.enableCoinbase !== false) {
-      providers.coinbase = getCoinbaseProvider()
+      const coinbaseProvider = await getCoinbaseProvider()
+
+      if (coinbaseProvider) {
+        providers.coinbase = coinbaseProvider
+      }
     }
 
     providers.EIP6963 = options.enableEIP6963 !== false
@@ -248,8 +252,9 @@ export class Ethers5Adapter extends AdapterBlueprint {
     }
   }
 
-  public syncConnectors(options: AppKitOptions) {
-    this.ethersConfig = this.createEthersConfig(options)
+  override async syncConnectors(options: AppKitOptions): Promise<void> {
+    this.ethersConfig = await this.createEthersConfig(options)
+
     if (this.ethersConfig?.EIP6963) {
       this.listenInjectedConnector(true)
     }

diff --git a/packages/adapters/solana/src/client.ts b/packages/adapters/solana/src/client.ts
@@ -68,12 +68,11 @@ export class SolanaAdapter extends AdapterBlueprint<SolanaProvider> {
     )
   }
 
-  public syncConnectors(options: AppKitOptions, appKit: AppKit) {
+  override syncConnectors(options: AppKitOptions, appKit: AppKit) {
     if (!options.projectId) {
       AlertController.open(ErrorUtil.ALERT_ERRORS.PROJECT_ID_NOT_CONFIGURED, 'error')
     }
 
-    // eslint-disable-next-line arrow-body-style
     const getActiveChain = () => appKit.getCaipNetwork(this.namespace)
 
     // Add Coinbase Wallet if available

diff --git a/packages/adapters/wagmi/package.json b/packages/adapters/wagmi/package.json
@@ -29,9 +29,10 @@
     "@walletconnect/universal-provider": "2.18.0",
     "valtio": "1.11.2"
   },
+  "optionalDependencies": {
+    "@wagmi/connectors": ">=5.1"
+  },
   "peerDependencies": {
-    "@coinbase/wallet-sdk": "4.2.4",
-    "@wagmi/connectors": ">=5.1",
     "@wagmi/core": ">=2.13",
     "viem": "2.x",
     "wagmi": ">=2.12"

diff --git a/packages/adapters/wagmi/src/client.ts b/packages/adapters/wagmi/src/client.ts
@@ -1,4 +1,3 @@
-import { coinbaseWallet } from '@wagmi/connectors'
 import {
   type Config,
   type Connector,
@@ -250,20 +249,38 @@ export class WagmiAdapter extends AdapterBlueprint {
     })
   }
 
-  private addWagmiConnectors(options: AppKitOptions, appKit: AppKit) {
-    const customConnectors: CreateConnectorFn[] = []
+  private async addThirdPartyConnectors(options: AppKitOptions) {
+    const thirdPartyConnectors: CreateConnectorFn[] = []
 
     if (options.enableCoinbase !== false) {
-      customConnectors.push(
-        coinbaseWallet({
-          version: '4',
-          appName: options.metadata?.name ?? 'Unknown',
-          appLogoUrl: options.metadata?.icons[0] ?? 'Unknown',
-          preference: options.coinbasePreference ?? 'all'
-        })
-      )
+      try {
+        const { coinbaseWallet } = await import('@wagmi/connectors')
+
+        if (coinbaseWallet) {
+          thirdPartyConnectors.push(
+            coinbaseWallet({
+              version: '4',
+              appName: options.metadata?.name ?? 'Unknown',
+              appLogoUrl: options.metadata?.icons[0] ?? 'Unknown',
+              preference: options.coinbasePreference ?? 'all'
+            })
+          )
+        }
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to import Coinbase Wallet SDK:', error)
+      }
     }
 
+    thirdPartyConnectors.forEach(connector => {
+      const cnctr = this.wagmiConfig._internal.connectors.setup(connector)
+      this.wagmiConfig._internal.connectors.setState(prev => [...prev, cnctr])
+    })
+  }
+
+  private addWagmiConnectors(options: AppKitOptions, appKit: AppKit) {
+    const customConnectors: CreateConnectorFn[] = []
+
     if (options.enableWalletConnect !== false) {
       customConnectors.push(
         walletConnect(options, appKit, this.caipNetworks as [CaipNetwork, ...CaipNetwork[]])
@@ -451,13 +468,16 @@ export class WagmiAdapter extends AdapterBlueprint {
         connectors.forEach(connector => this.addWagmiConnector(connector, options))
     })
 
-    // Add wagmi connectors
-    this.addWagmiConnectors(options, appKit)
-
     // Add current wagmi connectors to chain adapter blueprint
     await Promise.all(
       this.wagmiConfig.connectors.map(connector => this.addWagmiConnector(connector, options))
     )
+
+    // Add wagmi connectors
+    this.addWagmiConnectors(options, appKit)
+
+    // Add third party connectors
+    await this.addThirdPartyConnectors(options)
   }
 
   public async syncConnection(

diff --git a/packages/appkit/src/adapters/ChainAdapterBlueprint.ts b/packages/appkit/src/adapters/ChainAdapterBlueprint.ts
@@ -277,7 +277,7 @@ export abstract class AdapterBlueprint<
    * @param {AppKitOptions} [options] - Optional AppKit options
    * @param {AppKit} [appKit] - Optional AppKit instance
    */
-  public abstract syncConnectors(options?: AppKitOptions, appKit?: AppKit): void
+  public abstract syncConnectors(options?: AppKitOptions, appKit?: AppKit): void | Promise<void>
 
   /**
    * Synchronizes the connection with the given parameters.

diff --git a/packages/appkit/src/universal-adapter/client.ts b/packages/appkit/src/universal-adapter/client.ts
@@ -60,7 +60,7 @@ export class UniversalAdapter extends AdapterBlueprint {
     })
   }
 
-  public async syncConnectors() {
+  override async syncConnectors() {
     return Promise.resolve()
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -60,7 +60,7 @@ export class UniversalAdapter extends AdapterBlueprint { @@
         })
       }
-      public async syncConnectors() {
+      override async syncConnectors() {
         return Promise.resolve()
       }
@@ Expand Down @@