fix: ethers5 CB Id (#2445)

packages/core/src/controllers/OptionsController.ts

@@ -21,6 +21,7 @@ export interface OptionsControllerState {
   metadata?: Metadata
   enableOnramp?: boolean
   disableAppend?: boolean
+  enableEIP6963?: boolean
 }
 
 type StateKey = keyof OptionsControllerState
@@ -103,6 +104,10 @@ export const OptionsController = {
     state.disableAppend = disableAppend
   },
 
+  setEIP6963Enabled(enableEIP6963: OptionsControllerState['enableEIP6963']) {
+    state.enableEIP6963 = enableEIP6963
+  },
+
   getSnapshot() {
     return snapshot(state)
   }

packages/ethers/src/client.ts

@@ -502,13 +502,14 @@ export class Web3Modal extends Web3ModalScaffold {
     this.syncRequestedNetworks(chains, chainImages)
     this.syncConnectors(ethersConfig)
 
-    if (ethersConfig.EIP6963) {
-      if (typeof window !== 'undefined') {
-        this.listenConnectors(ethersConfig.EIP6963)
-        this.checkActive6963Provider()
-      }
+    // Setup EIP6963 providers
+    if (typeof window !== 'undefined') {
+      this.listenConnectors(true)
+      this.checkActive6963Provider()
     }
 
+    this.setEIP6963Enabled(ethersConfig.EIP6963 !== false)
+
     if (ethersConfig.injected) {
       this.checkActiveInjectedProvider(ethersConfig)
     }
@@ -1441,7 +1442,7 @@ export class Web3Modal extends Web3ModalScaffold {
       const isCoinbaseDuplicated =
         coinbaseConnector &&
         event.detail.info.rdns ===
-          ConstantsUtil.CONNECTOR_RDNS_MAP[ConstantsUtil.COINBASE_CONNECTOR_ID]
+          ConstantsUtil.CONNECTOR_RDNS_MAP[ConstantsUtil.COINBASE_SDK_CONNECTOR_ID]
 
       if (!existingConnector && !isCoinbaseDuplicated) {
         const type = PresetsUtil.ConnectorTypesMap[ConstantsUtil.EIP6963_CONNECTOR_ID]

packages/ethers/src/utils/defaultConfig.ts

@@ -30,9 +30,7 @@ export function defaultConfig(options: ConfigOptions) {
       showWallets: true,
       walletFeatures: true
     },
-    metadata,
-    rpcUrl,
-    defaultChainId
+    metadata
   } = options
 
   let injectedProvider: Provider | undefined = undefined
@@ -95,7 +93,7 @@ export function defaultConfig(options: ConfigOptions) {
     providers.injected = getInjectedProvider()
   }
 
-  if (enableCoinbase && rpcUrl && defaultChainId) {
+  if (enableCoinbase) {
     providers.coinbase = getCoinbaseProvider()
   }
 

packages/ethers5/src/client.ts

@@ -250,7 +250,7 @@ export class Web3Modal extends Web3ModalScaffold {
             EthersStoreUtil.setError(error)
           }
           this.setEIP6963Provider(provider, info.name)
-        } else if (id === ConstantsUtil.COINBASE_CONNECTOR_ID) {
+        } else if (id === ConstantsUtil.COINBASE_SDK_CONNECTOR_ID) {
           const CoinbaseProvider = ethersConfig.coinbase
           if (!CoinbaseProvider) {
             throw new Error('connectionControllerClient:connectCoinbase - connector is undefined')
@@ -384,16 +384,17 @@ export class Web3Modal extends Web3ModalScaffold {
       this.checkActiveInjectedProvider(ethersConfig)
     }
 
-    if (ethersConfig.EIP6963) {
-      if (typeof window !== 'undefined') {
-        this.listenConnectors(ethersConfig.EIP6963)
-        this.checkActive6963Provider()
-      }
-    }
-
     if (ethersConfig.coinbase) {
       this.checkActiveCoinbaseProvider(ethersConfig)
     }
+
+    // Setup EIP6963 providers
+    if (typeof window !== 'undefined') {
+      this.listenConnectors(true)
+      this.checkActive6963Provider()
+    }
+
+    this.setEIP6963Enabled(ethersConfig.EIP6963 !== false)
   }
 
   // -- Public ------------------------------------------------------------------
@@ -563,7 +564,7 @@ export class Web3Modal extends Web3ModalScaffold {
     const walletId = localStorage.getItem(EthersConstantsUtil.WALLET_ID)
 
     if (CoinbaseProvider) {
-      if (walletId === ConstantsUtil.COINBASE_CONNECTOR_ID) {
+      if (walletId === ConstantsUtil.COINBASE_SDK_CONNECTOR_ID) {
         if (CoinbaseProvider._addresses && CoinbaseProvider._addresses?.length > 0) {
           this.setCoinbaseProvider(config)
           this.watchCoinbase(config)
@@ -640,14 +641,17 @@ export class Web3Modal extends Web3ModalScaffold {
   }
 
   private async setCoinbaseProvider(config: ProviderType) {
-    window?.localStorage.setItem(EthersConstantsUtil.WALLET_ID, ConstantsUtil.COINBASE_CONNECTOR_ID)
+    window?.localStorage.setItem(
+      EthersConstantsUtil.WALLET_ID,
+      ConstantsUtil.COINBASE_SDK_CONNECTOR_ID
+    )
     const CoinbaseProvider = config.coinbase
 
     if (CoinbaseProvider) {
       const { address, chainId } = await EthersHelpersUtil.getUserInfo(CoinbaseProvider)
       if (address && chainId) {
         EthersStoreUtil.setChainId(chainId)
-        EthersStoreUtil.setProviderType('coinbaseWallet')
+        EthersStoreUtil.setProviderType('coinbaseWalletSDK')
         EthersStoreUtil.setProvider(config.coinbase)
         EthersStoreUtil.setStatus('connected')
         EthersStoreUtil.setIsConnected(true)
@@ -786,7 +790,7 @@ export class Web3Modal extends Web3ModalScaffold {
     }
 
     function chainChangedHandler(chainId: string) {
-      if (chainId && walletId === ConstantsUtil.COINBASE_CONNECTOR_ID) {
+      if (chainId && walletId === ConstantsUtil.COINBASE_SDK_CONNECTOR_ID) {
         const chain = Number(chainId)
         EthersStoreUtil.setChainId(chain)
       }
@@ -1002,7 +1006,7 @@ export class Web3Modal extends Web3ModalScaffold {
             }
           }
         }
-      } else if (providerType === ConstantsUtil.COINBASE_CONNECTOR_ID && chain) {
+      } else if (providerType === ConstantsUtil.COINBASE_SDK_CONNECTOR_ID && chain) {
         const CoinbaseProvider = provider
         if (CoinbaseProvider) {
           try {
@@ -1059,11 +1063,11 @@ export class Web3Modal extends Web3ModalScaffold {
 
     if (config.coinbase) {
       w3mConnectors.push({
-        id: ConstantsUtil.COINBASE_CONNECTOR_ID,
-        explorerId: PresetsUtil.ConnectorExplorerIds[ConstantsUtil.COINBASE_CONNECTOR_ID],
-        imageId: PresetsUtil.ConnectorImageIds[ConstantsUtil.COINBASE_CONNECTOR_ID],
-        imageUrl: this.options?.connectorImages?.[ConstantsUtil.COINBASE_CONNECTOR_ID],
-        name: PresetsUtil.ConnectorNamesMap[ConstantsUtil.COINBASE_CONNECTOR_ID],
+        id: ConstantsUtil.COINBASE_SDK_CONNECTOR_ID,
+        explorerId: PresetsUtil.ConnectorExplorerIds[ConstantsUtil.COINBASE_SDK_CONNECTOR_ID],
+        imageId: PresetsUtil.ConnectorImageIds[ConstantsUtil.COINBASE_SDK_CONNECTOR_ID],
+        imageUrl: this.options?.connectorImages?.[ConstantsUtil.COINBASE_SDK_CONNECTOR_ID],
+        name: PresetsUtil.ConnectorNamesMap[ConstantsUtil.COINBASE_SDK_CONNECTOR_ID],
         type: 'EXTERNAL'
       })
     }
@@ -1076,7 +1080,15 @@ export class Web3Modal extends Web3ModalScaffold {
       const { info, provider } = event.detail
       const connectors = this.getConnectors()
       const existingConnector = connectors.find(c => c.name === info.name)
-      if (!existingConnector) {
+      const coinbaseConnector = connectors.find(
+        c => c.id === ConstantsUtil.COINBASE_SDK_CONNECTOR_ID
+      )
+      const isCoinbaseDuplicated =
+        coinbaseConnector &&
+        event.detail.info.rdns ===
+          ConstantsUtil.CONNECTOR_RDNS_MAP[ConstantsUtil.COINBASE_SDK_CONNECTOR_ID]
+
+      if (!existingConnector && !isCoinbaseDuplicated) {
         const type = PresetsUtil.ConnectorTypesMap[ConstantsUtil.EIP6963_CONNECTOR_ID]
         if (type) {
           this.addConnector({
@@ -1090,8 +1102,8 @@ export class Web3Modal extends Web3ModalScaffold {
           })
 
           const eip6963ProviderObj = {
-            info,
-            provider
+            provider,
+            info
           }
 
           this.EIP6963Providers.push(eip6963ProviderObj)

packages/ethers5/src/utils/defaultConfig.ts

@@ -14,14 +14,7 @@ export interface ConfigOptions {
 }
 
 export function defaultConfig(options: ConfigOptions) {
-  const {
-    enableEIP6963 = true,
-    enableInjected = true,
-    enableCoinbase = true,
-    metadata,
-    rpcUrl,
-    defaultChainId
-  } = options
+  const { enableEIP6963 = true, enableInjected = true, enableCoinbase = true, metadata } = options
 
   let injectedProvider: Provider | undefined = undefined
   // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
@@ -78,7 +71,7 @@ export function defaultConfig(options: ConfigOptions) {
     return coinbaseProvider
   }
 
-  if (enableCoinbase && rpcUrl && defaultChainId) {
+  if (enableCoinbase) {
     providers.coinbase = getCoinbaseProvider()
   }
 

packages/scaffold-ui/exports/index.ts

@@ -104,5 +104,6 @@ export * from '../src/partials/w3m-connect-external-widget/index.js'
 export * from '../src/partials/w3m-connect-recent-widget/index.js'
 export * from '../src/partials/w3m-connect-recommended-widget/index.js'
 export * from '../src/partials/w3m-connect-walletconnect-widget/index.js'
+export * from '../src/partials/w3m-connector-list/index.js'
 export * from '../src/partials/w3m-all-wallets-widget/index.js'
 export * from '../src/partials/w3m-account-auth-button/index.js'

packages/scaffold-ui/src/partials/w3m-connect-featured-widget/index.ts

@@ -1,32 +1,15 @@
 import type { WcWallet } from '@web3modal/core'
-import {
-  ApiController,
-  AssetUtil,
-  ConnectorController,
-  CoreHelperUtil,
-  RouterController,
-  StorageUtil
-} from '@web3modal/core'
+import { ApiController, AssetUtil, ConnectorController, RouterController } from '@web3modal/core'
 import { customElement } from '@web3modal/ui'
 import { LitElement, html } from 'lit'
-import { state } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
+import { WalletUtil } from '../../utils/WalletUtil.js'
 
 @customElement('w3m-connect-featured-widget')
 export class W3mConnectFeaturedWidget extends LitElement {
   // -- Members ------------------------------------------- //
   private unsubscribe: (() => void)[] = []
 
-  // -- State & Properties -------------------------------- //
-  @state() private connectors = ConnectorController.state.connectors
-
-  public constructor() {
-    super()
-    this.unsubscribe.push(
-      ConnectorController.subscribeKey('connectors', val => (this.connectors = val))
-    )
-  }
-
   public override disconnectedCallback() {
     this.unsubscribe.forEach(unsubscribe => unsubscribe())
   }
@@ -40,7 +23,7 @@ export class W3mConnectFeaturedWidget extends LitElement {
       return null
     }
 
-    const wallets = this.filterOutDuplicateWallets(featured)
+    const wallets = WalletUtil.filterOutDuplicateWallets(featured)
 
     return html`
       <wui-flex flexDirection="column" gap="xs">
@@ -59,26 +42,13 @@ export class W3mConnectFeaturedWidget extends LitElement {
   }
 
   // -- Private Methods ----------------------------------- //
-  private filterOutDuplicateWallets(wallets: WcWallet[]) {
-    const recent = StorageUtil.getRecentWallets()
-
-    const connectorRDNSs = this.connectors
-      .map(connector => connector.info?.rdns)
-      .filter(Boolean) as string[]
-
-    const recentRDNSs = recent.map(wallet => wallet.rdns).filter(Boolean) as string[]
-    const allRDNSs = connectorRDNSs.concat(recentRDNSs)
-    if (allRDNSs.includes('io.metamask.mobile') && CoreHelperUtil.isMobile()) {
-      const index = allRDNSs.indexOf('io.metamask.mobile')
-      allRDNSs[index] = 'io.metamask'
-    }
-    const filtered = wallets.filter(wallet => !allRDNSs.includes(String(wallet?.rdns)))
-
-    return filtered
-  }
-
   private onConnectWallet(wallet: WcWallet) {
-    RouterController.push('ConnectingWalletConnect', { wallet })
+    const connector = ConnectorController.getConnector(wallet.id, wallet.rdns)
+    if (connector) {
+      RouterController.push('ConnectingExternal', { connector })
+    } else {
+      RouterController.push('ConnectingWalletConnect', { wallet })
+    }
   }
 }
 

packages/scaffold-ui/src/partials/w3m-connect-recommended-widget/index.ts

@@ -3,7 +3,6 @@ import {
   ApiController,
   AssetUtil,
   ConnectorController,
-  CoreHelperUtil,
   OptionsController,
   RouterController,
   StorageUtil
@@ -12,6 +11,7 @@ import { customElement } from '@web3modal/ui'
 import { LitElement, html } from 'lit'
 import { state } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
+import { WalletUtil } from '../../utils/WalletUtil.js'
 
 @customElement('w3m-connect-recommended-widget')
 export class W3mConnectRecommendedWidget extends LitElement {
@@ -55,9 +55,7 @@ export class W3mConnectRecommendedWidget extends LitElement {
     const overrideLength = injectedWallets.length + recent.length
 
     const maxRecommended = Math.max(0, 2 - overrideLength)
-
-    const wallets = this.filterOutDuplicateWallets(recommended).slice(0, maxRecommended)
-
+    const wallets = WalletUtil.filterOutDuplicateWallets(recommended).slice(0, maxRecommended)
     if (!wallets.length) {
       this.style.cssText = `display: none`
 
@@ -81,26 +79,13 @@ export class W3mConnectRecommendedWidget extends LitElement {
   }
 
   // -- Private Methods ----------------------------------- //
-  private filterOutDuplicateWallets(wallets: WcWallet[]) {
-    const recent = StorageUtil.getRecentWallets()
-
-    const connectorRDNSs = this.connectors
-      .map(connector => connector.info?.rdns)
-      .filter(Boolean) as string[]
-
-    const recentRDNSs = recent.map(wallet => wallet.rdns).filter(Boolean) as string[]
-    const allRDNSs = connectorRDNSs.concat(recentRDNSs)
-    if (allRDNSs.includes('io.metamask.mobile') && CoreHelperUtil.isMobile()) {
-      const index = allRDNSs.indexOf('io.metamask.mobile')
-      allRDNSs[index] = 'io.metamask'
-    }
-    const filtered = wallets.filter(wallet => !allRDNSs.includes(String(wallet?.rdns)))
-
-    return filtered
-  }
-
   private onConnectWallet(wallet: WcWallet) {
-    RouterController.push('ConnectingWalletConnect', { wallet })
+    const connector = ConnectorController.getConnector(wallet.id, wallet.rdns)
+    if (connector) {
+      RouterController.push('ConnectingExternal', { connector })
+    } else {
+      RouterController.push('ConnectingWalletConnect', { wallet })
+    }
   }
 }