chore: lazy load coinbase (#5336)

Author: tomiir

.changeset/lovely-pets-join.md

@@ -0,0 +1,8 @@
+---
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-utils': patch
+'@reown/appkit': patch
+---
+
+Defers Coinbase SDK in ethers adapters to connection step

packages/adapters/ethers/package.json

@@ -29,11 +29,6 @@
     "@walletconnect/universal-provider": "2.23.0",
     "valtio": "2.1.7"
   },
-  "optionalDependencies": {
-    "@base-org/account": "2.4.0",
-    "@safe-global/safe-apps-provider": "0.18.6",
-    "@safe-global/safe-apps-sdk": "9.1.0"
-  },
   "peerDependencies": {
     "@ethersproject/sha2": "5.8.0",
     "ethers": ">=6"

packages/adapters/ethers/src/client.ts

@@ -30,7 +30,14 @@ import {
 } from '@reown/appkit-controllers'
 import { ConnectorUtil } from '@reown/appkit-scaffold-ui/utils'
 import { ConstantsUtil, HelpersUtil, PresetsUtil } from '@reown/appkit-utils'
-import { type Address, EthersHelpersUtil, type ProviderType } from '@reown/appkit-utils/ethers'
+import {
+  type Address,
+  BaseProvider,
+  EthersHelpersUtil,
+  InjectedProvider,
+  type ProviderType,
+  SafeProvider
+} from '@reown/appkit-utils/ethers'
 import type { W3mFrameProvider } from '@reown/appkit-wallet'
 
 import { EthersMethods } from './utils/EthersMethods.js'
@@ -44,6 +51,7 @@ export class EthersAdapter extends AdapterBlueprint {
   private ethersConfig?: ProviderType
   private balancePromises: Record<string, Promise<AdapterBlueprint.GetBalanceResult>> = {}
   private universalProvider?: UniversalProvider
+  private ethersProviders: Omit<ProviderType, 'metadata' | 'EIP6963'> = {}
 
   constructor() {
     super({
@@ -53,99 +61,35 @@ export class EthersAdapter extends AdapterBlueprint {
   }
 
   private async createEthersConfig() {
-    const { metadata, coinbasePreference, enableCoinbase, enableInjected, enableEIP6963 } =
-      OptionsController.state
+    const { metadata, enableCoinbase, enableInjected, enableEIP6963 } = OptionsController.state
 
     if (!metadata) {
       return undefined
     }
 
-    let injectedProvider: Provider | undefined = undefined
-
-    function getInjectedProvider() {
-      if (injectedProvider) {
-        return injectedProvider
-      }
-
-      if (typeof window === 'undefined') {
-        return undefined
-      }
-
-      if (!window.ethereum) {
-        return undefined
-      }
-
-      //  @ts-expect-error window.ethereum satisfies Provider
-      injectedProvider = window.ethereum
-
-      return injectedProvider
-    }
-
-    async function getSafeProvider() {
-      const { SafeProvider } = await import('./utils/SafeProvider.js')
-      const { default: SafeAppsSDK } = await import('@safe-global/safe-apps-sdk')
-      const appsSdk = new SafeAppsSDK()
-      const info = await appsSdk.safe.getInfo()
-
-      const provider = new SafeProvider(info, appsSdk)
-      await provider.connect().catch(error => {
-        // eslint-disable-next-line no-console
-        console.info('Failed to auto-connect to Safe:', error)
-      })
-
-      return provider
-    }
-
-    async function getBaseAccountProvider() {
-      const caipNetworks = ChainController.getCaipNetworks()
-      try {
-        const { createBaseAccountSDK } = await import('@base-org/account')
-        if (typeof window === 'undefined') {
-          return undefined
-        }
-
-        const baseAccountSdk = createBaseAccountSDK({
-          appName: metadata?.name,
-          appLogoUrl: metadata?.icons[0],
-          appChainIds: caipNetworks?.map(caipNetwork => caipNetwork.id as number) || [1, 84532],
-          preference: {
-            options: coinbasePreference ?? 'all'
-          }
-        })
-
-        return baseAccountSdk.getProvider()
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.error('Failed to import Coinbase Wallet SDK:', error)
-
-        return undefined
-      }
-    }
-
-    const providers: ProviderType = { metadata: metadata ?? {} }
-
     if (enableInjected !== false) {
-      providers.injected = getInjectedProvider()
+      const injectedProvider = new InjectedProvider()
+      await injectedProvider.initialize()
+      this.ethersProviders.injected = injectedProvider
     }
 
     if (enableCoinbase !== false) {
-      const baseAccountProvider = await getBaseAccountProvider()
-
-      if (baseAccountProvider) {
-        providers[CommonConstantsUtil.CONNECTOR_ID.BASE_ACCOUNT] = baseAccountProvider
-      }
+      // Do not initialize provider to prevent unnecessary api calls- lazy load
+      this.ethersProviders.baseAccount = new BaseProvider()
     }
 
     if (CoreHelperUtil.isSafeApp()) {
-      const safeProvider = await getSafeProvider()
-      if (safeProvider) {
-        providers.safe = safeProvider
-      }
+      const safeProvider = new SafeProvider()
+      // Initialize the safe provider during intialization
+      await safeProvider.initialize()
+      this.ethersProviders.safe = safeProvider
     }
 
-    providers.EIP6963 = enableEIP6963 !== false
-
-    return providers
+    return {
+      ...this.ethersProviders,
+      EIP6963: enableEIP6963 !== false,
+      metadata
+    }
   }
 
   public async signMessage(
@@ -299,10 +243,12 @@ export class EthersAdapter extends AdapterBlueprint {
       key => key !== 'metadata' && key !== 'EIP6963'
     )
 
-    connectors.forEach(connector => {
+    const connectorPromises = connectors.map(async connector => {
       const isInjectedConnector = connector === CommonConstantsUtil.CONNECTOR_ID.INJECTED
 
       if (this.namespace) {
+        const provider =
+          this.ethersProviders[connector as keyof Omit<ProviderType, 'metadata' | 'EIP6963'>]
         this.addConnector({
           id: connector,
           explorerId: PresetsUtil.ConnectorExplorerIds[connector],
@@ -313,10 +259,12 @@ export class EthersAdapter extends AdapterBlueprint {
           info: isInjectedConnector ? undefined : { rdns: connector },
           chain: this.namespace,
           chains: [],
-          provider: this.ethersConfig?.[connector as keyof ProviderType] as Provider
+          provider: (await provider?.getProvider()) as Provider
         })
       }
     })
+
+    await Promise.all(connectorPromises)
   }
 
   private async disconnectAll() {
@@ -511,12 +459,20 @@ export class EthersAdapter extends AdapterBlueprint {
         }
       }
 
-      const selectedProvider = connector?.provider as Provider
+      let selectedProvider = connector?.provider as Provider | undefined
+      const ethersProvider =
+        this.ethersProviders[connector.id as keyof Omit<ProviderType, 'metadata' | 'EIP6963'>]
+      if (ethersProvider) {
+        await ethersProvider.initialize()
+        selectedProvider = (await ethersProvider.getProvider()) as Provider | undefined
+      }
 
       if (!selectedProvider) {
         throw new Error('Provider not found')
       }
 
+      connector.provider = selectedProvider
+
       let accounts: string[] = []
 
       let requestChainId: string | undefined = undefined

packages/adapters/ethers/src/tests/client.test.ts

@@ -111,33 +111,6 @@ describe('EthersAdapter', () => {
         ancestorOrigins: ['https://app.safe.global']
       }
     })
-    vi.mock('@base-org/account', async () => {
-      const actual = await import('@base-org/account')
-      return {
-        ...actual,
-        createBaseAccountSDK: vi.fn(() => ({
-          getProvider: vi.fn(() => {
-            return {
-              request: vi.fn(),
-              connect: vi.fn()
-            }
-          })
-        }))
-      }
-    })
-    vi.mock('@safe-global/safe-apps-sdk', () => ({
-      default: vi.fn(() => ({
-        safe: {
-          getInfo: vi.fn(),
-          getProvider: vi.fn(() => {
-            return {
-              request: vi.fn(),
-              connect: vi.fn()
-            }
-          })
-        }
-      }))
-    }))
 
     adapter = new EthersAdapter()
     ChainController.initialize([adapter], mockCaipNetworks, {
@@ -1261,7 +1234,28 @@ describe('EthersAdapter', () => {
         ...OptionsController.state,
         metadata: mockEthersConfig.metadata
       })
+
+      vi.mock('@reown/appkit-utils/ethers', async () => {
+        const actual = await import('@reown/appkit-utils/ethers')
+        return {
+          ...actual,
+          SafeProvider: vi.fn(() => ({
+            initialize: vi.fn()
+          })),
+          BaseProvider: vi.fn(() => ({
+            initialize: vi.fn()
+          })),
+          InjectedProvider: vi.fn(() => ({
+            initialize: vi.fn()
+          }))
+        }
+      })
     })
+
+    beforeEach(() => {
+      vi.clearAllMocks()
+    })
+
     it('should create Ethers config with coinbase provider if not disabled', async () => {
       const ethersAdapter = new EthersAdapter()
       const providers = await ethersAdapter['createEthersConfig']()

packages/adapters/ethers/src/utils/SafeProvider.ts

@@ -29,11 +29,6 @@
     "@walletconnect/universal-provider": "2.23.0",
     "valtio": "2.1.7"
   },
-  "optionalDependencies": {
-    "@base-org/account": "2.4.0",
-    "@safe-global/safe-apps-provider": "0.18.6",
-    "@safe-global/safe-apps-sdk": "9.1.0"
-  },
   "peerDependencies": {
     "@ethersproject/sha2": "5.8.0",
     "ethers": ">=4.1 <6.0.0"