Fix image for broken image urls in token list (#5747)

Author: santgr11

.changeset/big-shrimps-speak.md

@@ -0,0 +1,31 @@
+---
+'@reown/appkit': patch
+'@reown/appkit-ui': patch
+'pay-test-exchange': patch
+'@reown/appkit-adapter-bitcoin': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-ton': patch
+'@reown/appkit-adapter-tron': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-cli': patch
+'@reown/appkit-codemod': patch
+'@reown/appkit-common': patch
+'@reown/appkit-controllers': patch
+'@reown/appkit-core': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-pay': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-testing': patch
+'@reown/appkit-universal-connector': patch
+'@reown/appkit-wallet': patch
+'@reown/appkit-wallet-button': patch
+---
+
+Fix broken image in tokens with broken image url

packages/ui/src/composites/wui-list-token/index.ts

@@ -1,5 +1,5 @@
 import { LitElement, html } from 'lit'
-import { property } from 'lit/decorators.js'
+import { property, state } from 'lit/decorators.js'
 
 import { NumberUtil } from '@reown/appkit-common'
 
@@ -28,6 +28,8 @@ export class WuiListToken extends LitElement {
 
   @property({ type: Boolean }) public clickable = false
 
+  @state() private imageError = false
+
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
@@ -67,13 +69,27 @@ export class WuiListToken extends LitElement {
   }
 
   // -- Private ------------------------------------------- //
+  public override updated(changedProperties: Map<string | number | symbol, unknown>) {
+    if (changedProperties.has('tokenImageUrl')) {
+      this.imageError = false
+    }
+  }
+
   public visualTemplate() {
-    if (this.tokenName && this.tokenImageUrl) {
-      return html`<wui-image alt=${this.tokenName} src=${this.tokenImageUrl}></wui-image>`
+    if (this.tokenName && this.tokenImageUrl && !this.imageError) {
+      return html`<wui-image
+        alt=${this.tokenName}
+        src=${this.tokenImageUrl}
+        @onLoadError=${this.handleImageError}
+      ></wui-image>`
     }
 
     return html`<wui-icon name="coinPlaceholder" color="default"></wui-icon>`
   }
+
+  private handleImageError() {
+    this.imageError = true
+  }
 }
 
 declare global {