fix: Connector image mismatch

packages/base/adapters/evm/ethers/client.ts

@@ -817,6 +817,7 @@ export class EVMEthersClient {
       EthersStoreUtil.setProvider(WalletConnectProvider as unknown as Provider)
       EthersStoreUtil.setStatus('connected')
       EthersStoreUtil.setIsConnected(true)
+
       this.appKit?.setAllAccounts(
         WalletConnectProvider.accounts.map(address => ({ address, type: 'eoa' })),
         this.chain
@@ -1336,7 +1337,6 @@ export class EVMEthersClient {
       }
     } else if (providerType === ConstantsUtil.WALLET_CONNECT_CONNECTOR_ID) {
       const provider = EthersStoreUtil.state.provider as unknown as EthereumProvider
-
       if (provider.session) {
         this.appKit?.setConnectedWalletInfo(
           {
@@ -1347,6 +1347,18 @@ export class EVMEthersClient {
           this.chain
         )
       }
+    } else if (providerType === ConstantsUtil.COINBASE_SDK_CONNECTOR_ID) {
+      const connector = this.appKit
+        ?.getConnectors()
+        .find(c => c.id === ConstantsUtil.COINBASE_SDK_CONNECTOR_ID)
+
+      this.appKit?.setConnectedWalletInfo(
+        {
+          name: 'Coinbase Wallet',
+          icon: this.appKit?.getConnectorImage(connector)
+        },
+        this.chain
+      )
     } else if (currentActiveWallet) {
       this.appKit?.setConnectedWalletInfo({ name: currentActiveWallet }, this.chain)
     }

packages/base/adapters/evm/wagmi/client.ts

@@ -624,8 +624,12 @@ export class EVMWagmiClient {
         )
       }
     } else {
+      const wagmiConnector = this.appKit?.getConnectors().find(c => c.id === connector.id)
       this.appKit?.setConnectedWalletInfo(
-        { name: connector.name, icon: connector.icon },
+        {
+          name: connector.name,
+          icon: connector.icon || this.appKit.getConnectorImage(wagmiConnector)
+        },
         this.chain
       )
     }

packages/base/src/client.ts

@@ -23,7 +23,8 @@ import {
   RouterController,
   EnsController,
   OptionsController,
-  NetworkController
+  NetworkController,
+  AssetUtil
 } from '@web3modal/core'
 import { setColorTheme, setThemeVariables } from '@web3modal/ui'
 import { ConstantsUtil, type Chain } from '@web3modal/common'
@@ -298,6 +299,9 @@ export class AppKit {
     BlockchainApiController.setClientId(clientId)
   }
 
+  public getConnectorImage: (typeof AssetUtil)['getConnectorImage'] = connector =>
+    AssetUtil.getConnectorImage(connector)
+
   // -- Private ------------------------------------------------------------------
   private async initControllers(options: AppKitOptions) {
     OptionsController.setProjectId(options.projectId)

packages/core/src/controllers/ConnectionController.ts

@@ -184,7 +184,6 @@ export const ConnectionController = {
 
     try {
       await client.disconnect()
-      StorageUtil.removeConnectedWalletImageUrl()
       this.resetWcConnection()
     } catch (error) {
       throw new Error('Failed to disconnect')

packages/core/src/utils/StorageUtil.ts

@@ -4,7 +4,6 @@ import type { WcWallet, ConnectorType, SocialProvider } from './TypeUtil.js'
 // -- Helpers -----------------------------------------------------------------
 const WC_DEEPLINK = 'WALLETCONNECT_DEEPLINK_CHOICE'
 const W3M_RECENT = '@w3m/recent'
-const W3M_CONNECTED_WALLET_IMAGE_URL = '@w3m/connected_wallet_image_url'
 const W3M_CONNECTED_CONNECTOR = '@w3m/connected_connector'
 const W3M_CONNECTED_SOCIAL = '@w3m/connected_social'
 const W3M_CONNECTED_SOCIAL_USERNAME = '@w3m-storage/SOCIAL_USERNAME'
@@ -68,32 +67,6 @@ export const StorageUtil = {
     return []
   },
 
-  setConnectedWalletImageUrl(imageUrl: string) {
-    try {
-      localStorage.setItem(W3M_CONNECTED_WALLET_IMAGE_URL, imageUrl)
-    } catch {
-      console.info('Unable to set Connected Wallet Image Url')
-    }
-  },
-
-  removeConnectedWalletImageUrl() {
-    try {
-      localStorage.removeItem(W3M_CONNECTED_WALLET_IMAGE_URL)
-    } catch {
-      console.info('Unable to remove Connected Wallet Image Url')
-    }
-  },
-
-  getConnectedWalletImageUrl() {
-    try {
-      return localStorage.getItem(W3M_CONNECTED_WALLET_IMAGE_URL)
-    } catch {
-      console.info('Unable to set Connected Wallet Image Url')
-    }
-
-    return undefined
-  },
-
   setConnectedConnector(connectorType: ConnectorType) {
     try {
       localStorage.setItem(W3M_CONNECTED_CONNECTOR, connectorType)

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

@@ -6,8 +6,7 @@ import {
   EventsController,
   ModalController,
   OptionsController,
-  RouterController,
-  StorageUtil
+  RouterController
 } from '@web3modal/core'
 import { ConstantsUtil } from '@web3modal/scaffold-utils'
 import { customElement } from '@web3modal/ui'
@@ -68,10 +67,6 @@ export class W3mConnectCoinbaseWidget extends LitElement {
     try {
       ConnectionController.setWcError(false)
 
-      if (connector.imageUrl) {
-        StorageUtil.setConnectedWalletImageUrl(connector.imageUrl)
-      }
-
       await ConnectionController.connectExternal(connector, connector.chain)
 
       if (OptionsController.state.isSiweEnabled) {

packages/scaffold-ui/src/views/w3m-connecting-external-view/index.ts

@@ -4,8 +4,7 @@ import {
   EventsController,
   ModalController,
   OptionsController,
-  RouterController,
-  StorageUtil
+  RouterController
 } from '@web3modal/core'
 import { ConstantsUtil } from '@web3modal/scaffold-utils'
 import { customElement } from '@web3modal/ui'
@@ -37,9 +36,6 @@ export class W3mConnectingExternalView extends W3mConnectingWidget {
     try {
       this.error = false
       if (this.connector) {
-        if (this.connector.imageUrl) {
-          StorageUtil.setConnectedWalletImageUrl(this.connector.imageUrl)
-        }
         /**
          * Coinbase SDK works with popups and popups requires user interaction to be opened since modern browsers block popups which triggered programmatically.
          * Instead of opening a popup in first render for `W3mConnectingWidget`, we need to trigger connection for Coinbase connector specifically when users select it.

packages/scaffold-ui/src/views/w3m-connecting-wc-view/index.ts

@@ -1,8 +1,6 @@
 import type { BaseError, Platform } from '@web3modal/core'
 import {
-  AssetUtil,
   ConnectionController,
-  ConnectorController,
   ConstantsUtil,
   CoreHelperUtil,
   EventsController,
@@ -59,20 +57,6 @@ export class W3mConnectingWcView extends LitElement {
     try {
       const { wcPairingExpiry } = ConnectionController.state
       if (retry || CoreHelperUtil.isPairingExpired(wcPairingExpiry)) {
-        if (this.wallet) {
-          const url = AssetUtil.getWalletImage(this.wallet)
-          if (url) {
-            StorageUtil.setConnectedWalletImageUrl(url)
-          }
-        } else {
-          const connectors = ConnectorController.state.connectors
-          const connector = connectors.find(c => c.type === 'WALLET_CONNECT')
-          const url = AssetUtil.getConnectorImage(connector)
-          if (url) {
-            StorageUtil.setConnectedWalletImageUrl(url)
-          }
-        }
-
         await ConnectionController.connectWalletConnect()
         this.finalizeConnection()
         if (

packages/siwe/scaffold/partials/w3m-connecting-siwe/index.ts

@@ -1,7 +1,7 @@
 import { customElement } from '@web3modal/ui'
 import { LitElement, html } from 'lit'
 import styles from './styles.js'
-import { OptionsController, StorageUtil } from '@web3modal/core'
+import { AccountController, OptionsController } from '@web3modal/core'
 
 @customElement('w3m-connecting-siwe')
 export class W3mConnectingSiwe extends LitElement {
@@ -10,7 +10,7 @@ export class W3mConnectingSiwe extends LitElement {
   // -- Members ------------------------------------------- //
   private readonly dappImageUrl = OptionsController.state.metadata?.icons
 
-  private readonly walletImageUrl = StorageUtil.getConnectedWalletImageUrl()
+  private readonly walletImageUrl = AccountController.state.connectedWalletInfo?.icon
 
   public override firstUpdated() {
     const visuals = this.shadowRoot?.querySelectorAll('wui-visual-thumbnail')