refactor: make the wallet image listen state updates for embedded use…

… case (#3466)

.changeset/slimy-berries-doubt.md

@@ -0,0 +1,22 @@
+---
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit-core': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-cli': patch
+'@reown/appkit-common': 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
+---
+
+refactor: make the wallet image listen state updates for embedded use case

packages/core/src/controllers/AssetController.ts

@@ -52,7 +52,7 @@ export const AssetController = {
   },
 
   setConnectorImage(key: string, value: string) {
-    state.connectorImages[key] = value
+    state.connectorImages = { ...state.connectorImages, [key]: value }
   },
 
   setTokenImage(key: string, value: string) {

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

@@ -1,6 +1,6 @@
 import type { Connector } from '@reown/appkit-core'
 import {
-  AssetUtil,
+  AssetController,
   ChainController,
   ConnectorController,
   CoreHelperUtil,
@@ -21,10 +21,13 @@ export class W3mConnectWalletConnectWidget extends LitElement {
 
   @state() private connectors = ConnectorController.state.connectors
 
+  @state() private connectorImages = AssetController.state.connectorImages
+
   public constructor() {
     super()
     this.unsubscribe.push(
-      ConnectorController.subscribeKey('connectors', val => (this.connectors = val))
+      ConnectorController.subscribeKey('connectors', val => (this.connectors = val)),
+      AssetController.subscribeKey('connectorImages', val => (this.connectorImages = val))
     )
   }
 
@@ -41,16 +44,17 @@ export class W3mConnectWalletConnectWidget extends LitElement {
     }
 
     const connector = this.connectors.find(c => c.id === 'walletConnect')
-
     if (!connector) {
       this.style.cssText = `display: none`
 
       return null
     }
 
+    const connectorImage = connector.imageUrl || this.connectorImages[connector?.imageId ?? '']
+
     return html`
       <wui-list-wallet
-        imageSrc=${ifDefined(AssetUtil.getConnectorImage(connector))}
+        imageSrc=${ifDefined(connectorImage)}
         name=${connector.name ?? 'Unknown'}
         @click=${() => this.onConnector(connector)}
         tagLabel="qr code"