refactor: wui-list-wallet component reskin

apps/gallery/stories/composites/appkit-wui-list-wallet.stories.ts

@@ -3,6 +3,7 @@ import type { Meta } from '@storybook/web-components'
 import { html } from 'lit'
 import { ifDefined } from 'lit/directives/if-defined.js'
 
+import '@reown/appkit-ui/wui-list-wallet'
 import type { WuiListWallet } from '@reown/appkit-ui/wui-list-wallet'
 
 import '../../components/gallery-container'
@@ -20,7 +21,8 @@ export default {
     disabled: false,
     loading: false,
     showAllWallets: false,
-    size: 'md'
+    size: 'md',
+    namespaces: ['eip155', 'solana', 'bip122']
   },
   argTypes: {
     tagVariant: {
@@ -52,16 +54,21 @@ export default {
 
 export const Default: Component = {
   render: args =>
-    html` <gallery-container width="336">
-      <w3m-list-wallet
-        name=${args.name}
-        imageSrc=${ifDefined(args.imageSrc)}
-        tagLabel=${ifDefined(args.tagLabel)}
-        tagVariant=${ifDefined(args.tagVariant)}
-        size=${ifDefined(args.size)}
-        ?disabled=${args.disabled}
-        ?loading=${args.loading}
-        ?showAllWallets=${args.showAllWallets}
-      ></w3m-list-wallet>
+    html` <gallery-container width="360">
+      <div style="background-color: var(--apkt-tokens-theme-backgroundPrimary); width: 100%;">
+        <wui-flex flexDirection="column" gap="4" padding="4">
+          <wui-list-wallet
+            name=${args.name}
+            imageSrc=${ifDefined(args.imageSrc)}
+            tagLabel=${ifDefined(args.tagLabel)}
+            tagVariant=${ifDefined(args.tagVariant)}
+            size=${ifDefined(args.size)}
+            ?disabled=${args.disabled}
+            ?loading=${args.loading}
+            ?showAllWallets=${args.showAllWallets}
+            .namespaces=${args.namespaces}
+          ></wui-list-wallet>
+        </wui-flex>
+      </div>
     </gallery-container>`
 }

packages/scaffold-ui/src/partials/w3m-connector-list/index.ts

@@ -2,7 +2,7 @@ import { LitElement, html } from 'lit'
 import { property, state } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 
-import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common'
+import { type ChainNamespace, ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common'
 import {
   ApiController,
   AssetController,
@@ -253,6 +253,18 @@ export class W3mConnectorList extends LitElement {
     })
   }
 
+  private getConnectorNamespaces(item: ConnectorItem) {
+    if (item.subtype === 'walletConnect') {
+      return []
+    }
+
+    if (item.subtype === 'multiChain') {
+      return (item.connector.connectors?.map(c => c.chain) as ChainNamespace[]) || []
+    }
+
+    return [item.connector.chain] as ChainNamespace[]
+  }
+
   private renderConnector(item: ConnectorItem, index: number) {
     const connector = item.connector
     const imageSrc =
@@ -265,10 +277,7 @@ export class W3mConnectorList extends LitElement {
     let tagLabel: string | undefined = undefined
     let tagVariant: 'info' | 'success' | 'accent' | undefined = undefined
 
-    if (item.subtype === 'multiChain') {
-      tagLabel = 'multichain'
-      tagVariant = 'info'
-    } else if (item.subtype === 'walletConnect') {
+    if (item.subtype === 'walletConnect') {
       tagLabel = 'qr code'
       tagVariant = 'accent'
     } else if (item.subtype === 'injected' || item.subtype === 'announced') {
@@ -300,6 +309,7 @@ export class W3mConnectorList extends LitElement {
         ?disabled=${disabled}
         rdnsId=${ifDefined(connector.explorerWallet?.rdns || undefined)}
         walletRank=${ifDefined(connector.explorerWallet?.order)}
+        .namespaces=${this.getConnectorNamespaces(item)}
       >
       </w3m-list-wallet>
     `

packages/scaffold-ui/src/partials/w3m-list-wallet/index.ts

@@ -2,7 +2,8 @@ import { LitElement, type PropertyValues, html } from 'lit'
 import { property } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 
-import { EventsController, RouterController } from '@reown/appkit-controllers'
+import type { ChainNamespace } from '@reown/appkit-common'
+import { AdapterController, EventsController, RouterController } from '@reown/appkit-controllers'
 import { customElement } from '@reown/appkit-ui'
 import type { IWalletImage, IconType, TagType } from '@reown/appkit-ui'
 import '@reown/appkit-ui/wui-list-wallet'
@@ -49,6 +50,8 @@ export class W3mListWallet extends LitElement {
 
   @property() public walletRank?: number = undefined
 
+  @property({ type: Array }) public namespaces?: ChainNamespace[] = []
+
   // -- Lifecycle ------------------------------------------- //
   public override connectedCallback() {
     super.connectedCallback()
@@ -119,6 +122,16 @@ export class W3mListWallet extends LitElement {
     }
   }
 
+  private handleGetWalletNamespaces() {
+    const isMultiChain = Object.keys(AdapterController.state.adapters).length > 1
+
+    if (isMultiChain) {
+      return this.namespaces
+    }
+
+    return []
+  }
+
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
@@ -135,6 +148,7 @@ export class W3mListWallet extends LitElement {
         .showAllWallets=${this.showAllWallets}
         .loading=${this.loading}
         loadingSpinnerColor=${this.loadingSpinnerColor}
+        .namespaces=${this.handleGetWalletNamespaces()}
       ></wui-list-wallet>
     `
   }

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

@@ -2,6 +2,8 @@ import { LitElement, html } from 'lit'
 import { property } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 
+import type { ChainNamespace } from '@reown/appkit-common'
+
 import '../../components/wui-icon/index.js'
 import '../../components/wui-text/index.js'
 import '../../composites/wui-icon-box/index.js'
@@ -13,6 +15,16 @@ import '../wui-tag/index.js'
 import '../wui-wallet-image/index.js'
 import styles from './styles.js'
 
+const NAMESPACE_ICONS = {
+  eip155: 'ethereum',
+  solana: 'solana',
+  bip122: 'bitcoin',
+  polkadot: undefined,
+  cosmos: undefined,
+  sui: undefined,
+  stacks: undefined
+} as const satisfies Record<ChainNamespace, IconType | undefined>
+
 @customElement('wui-list-wallet')
 export class WuiListWallet extends LitElement {
   public static override styles = [resetStyles, elementStyles, styles]
@@ -34,6 +46,8 @@ export class WuiListWallet extends LitElement {
 
   @property() public tabIdx?: number = undefined
 
+  @property({ type: Array }) public namespaces?: ChainNamespace[] = []
+
   @property({ type: Boolean }) public disabled = false
 
   @property({ type: Boolean }) public showAllWallets = false
@@ -53,13 +67,41 @@ export class WuiListWallet extends LitElement {
         tabindex=${ifDefined(this.tabIdx)}
       >
         ${this.templateAllWallets()} ${this.templateWalletImage()}
-        <wui-text variant="lg-regular" color="inherit">${this.name}</wui-text>
+        <wui-flex flexDirection="column" justifyContent="center" alignItems="flex-start" gap="1">
+          <wui-text variant="lg-regular" color="inherit">${this.name}</wui-text>
+          ${this.templateNamespaces()}
+        </wui-flex>
         ${this.templateStatus()}
+        <wui-icon name="chevronRight" size="lg" color="default"></wui-icon>
       </button>
     `
   }
 
   // -- Private ------------------------------------------- //
+  private templateNamespaces() {
+    if (this.namespaces?.length) {
+      return html`<wui-flex alignItems="center" gap="0">
+        ${this.namespaces.map(
+          (namespace, index) =>
+            html`<wui-flex
+              alignItems="center"
+              justifyContent="center"
+              zIndex=${(this.namespaces?.length ?? 0) * 2 - index}
+              class="namespace-icon"
+            >
+              <wui-icon
+                name=${ifDefined(NAMESPACE_ICONS[namespace])}
+                size="sm"
+                color="default"
+              ></wui-icon>
+            </wui-flex>`
+        )}
+      </wui-flex>`
+    }
+
+    return null
+  }
+
   private templateAllWallets() {
     if (this.showAllWallets && this.imageSrc) {
       return html` <wui-all-wallets-image .imageeSrc=${this.imageSrc}> </wui-all-wallets-image> `

packages/ui/src/composites/wui-list-wallet/styles.ts

@@ -50,4 +50,26 @@ export default css`
     background-color: ${({ tokens }) => tokens.core.glass010};
     color: ${({ tokens }) => tokens.theme.foregroundTertiary};
   }
+
+  wui-flex.namespace-icon {
+    width: 16px;
+    height: 16px;
+    border-radius: ${({ borderRadius }) => borderRadius.round};
+    background-color: ${({ tokens }) => tokens.theme.foregroundSecondary};
+    box-shadow: 0 0 0 2px ${({ tokens }) => tokens.theme.backgroundPrimary};
+    transition: box-shadow var(--apkt-durations-lg) var(--apkt-easings-ease-out-power-2);
+  }
+
+  button:hover:enabled wui-flex.namespace-icon {
+    box-shadow: 0 0 0 2px ${({ tokens }) => tokens.theme.foregroundPrimary};
+  }
+
+  wui-flex.namespace-icon > wui-icon {
+    width: 10px;
+    height: 10px;
+  }
+
+  wui-flex.namespace-icon:not(:first-child) {
+    margin-left: -4px;
+  }
 `

packages/ui/src/composites/wui-tag/styles.ts

@@ -7,6 +7,7 @@ export default css`
     align-items: center;
     gap: ${({ spacing }) => spacing[1]};
     text-transform: uppercase;
+    white-space: nowrap;
   }
 
   :host([data-variant='accent']) {