diff --git a/apps/gallery/stories/composites/appkit-wui-list-wallet.stories.ts b/apps/gallery/stories/composites/appkit-wui-list-wallet.stories.ts index 392c440ee7..1efa12adcb 100644 --- a/apps/gallery/stories/composites/appkit-wui-list-wallet.stories.ts +++ b/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` - + html` +
+ + + +
` } diff --git a/packages/scaffold-ui/src/partials/w3m-connector-list/index.ts b/packages/scaffold-ui/src/partials/w3m-connector-list/index.ts index 6a37ee05eb..b5dbde925d 100644 --- a/packages/scaffold-ui/src/partials/w3m-connector-list/index.ts +++ b/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)} > ` diff --git a/packages/scaffold-ui/src/partials/w3m-list-wallet/index.ts b/packages/scaffold-ui/src/partials/w3m-list-wallet/index.ts index b4801e182d..a036af2e76 100644 --- a/packages/scaffold-ui/src/partials/w3m-list-wallet/index.ts +++ b/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()} > ` } diff --git a/packages/ui/src/composites/wui-list-wallet/index.ts b/packages/ui/src/composites/wui-list-wallet/index.ts index 296852e384..fa9bf42899 100644 --- a/packages/ui/src/composites/wui-list-wallet/index.ts +++ b/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 + @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()} - ${this.name} + + ${this.name} + ${this.templateNamespaces()} + ${this.templateStatus()} + ` } // -- Private ------------------------------------------- // + private templateNamespaces() { + if (this.namespaces?.length) { + return html` + ${this.namespaces.map( + (namespace, index) => + html` + + ` + )} + ` + } + + return null + } + private templateAllWallets() { if (this.showAllWallets && this.imageSrc) { return html` ` diff --git a/packages/ui/src/composites/wui-list-wallet/styles.ts b/packages/ui/src/composites/wui-list-wallet/styles.ts index df3b01440a..ee4d333280 100644 --- a/packages/ui/src/composites/wui-list-wallet/styles.ts +++ b/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; + } ` diff --git a/packages/ui/src/composites/wui-tag/styles.ts b/packages/ui/src/composites/wui-tag/styles.ts index e7e5885f85..d8acdbabb9 100644 --- a/packages/ui/src/composites/wui-tag/styles.ts +++ b/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']) {