From 14af422e7eee14a13601e903dee61655485babd9 Mon Sep 17 00:00:00 2001
From: Enes <enesozturk.d@gmail.com>
Date: Mon, 16 Dec 2024 23:25:04 +0300
Subject: [PATCH] refactor: make the wallet image listen state updates for
 embedded use case (#3466)

---
 .changeset/slimy-berries-doubt.md             | 22 +++++++++++++++++++
 .../core/src/controllers/AssetController.ts   |  2 +-
 .../w3m-connect-walletconnect-widget/index.ts | 12 ++++++----
 3 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/slimy-berries-doubt.md

diff --git a/.changeset/slimy-berries-doubt.md b/.changeset/slimy-berries-doubt.md
new file mode 100644
index 0000000000..04504bdda5
--- /dev/null
+++ b/.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
diff --git a/packages/core/src/controllers/AssetController.ts b/packages/core/src/controllers/AssetController.ts
index 59b689a032..8a6178640b 100644
--- a/packages/core/src/controllers/AssetController.ts
+++ b/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) {
diff --git a/packages/scaffold-ui/src/partials/w3m-connect-walletconnect-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-connect-walletconnect-widget/index.ts
index 21243eb069..22e5fe2204 100644
--- a/packages/scaffold-ui/src/partials/w3m-connect-walletconnect-widget/index.ts
+++ b/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"