From 81edbe785862cd860eddded95fb6370f5f88abb5 Mon Sep 17 00:00:00 2001 From: tomiir Date: Thu, 14 Dec 2023 07:21:37 -0600 Subject: [PATCH] feat: installed icon box (#1550) Co-authored-by: Haze Co-authored-by: Sven <38101365+svenvoskamp@users.noreply.github.com> --- .../partials/w3m-all-wallets-list/index.ts | 5 ++- .../partials/w3m-all-wallets-search/index.ts | 5 ++- .../src/utils/markWalletsAsInstalled.ts | 27 ++++++++++++ .../src/views/w3m-connect-view/index.ts | 6 +-- .../composites/wui-all-wallets-image/index.ts | 41 ++++++++++++------- .../wui-all-wallets-image/styles.ts | 12 ++++++ .../src/composites/wui-card-select/index.ts | 10 ++++- .../ui/src/composites/wui-icon-box/index.ts | 4 +- .../src/composites/wui-list-wallet/index.ts | 4 ++ .../src/composites/wui-wallet-image/index.ts | 26 +++++++++++- .../src/composites/wui-wallet-image/styles.ts | 19 ++++++++- 11 files changed, 133 insertions(+), 26 deletions(-) create mode 100644 packages/scaffold/src/utils/markWalletsAsInstalled.ts diff --git a/packages/scaffold/src/partials/w3m-all-wallets-list/index.ts b/packages/scaffold/src/partials/w3m-all-wallets-list/index.ts index 180e2d30c4..75f1e4a7e9 100644 --- a/packages/scaffold/src/partials/w3m-all-wallets-list/index.ts +++ b/packages/scaffold/src/partials/w3m-all-wallets-list/index.ts @@ -5,6 +5,7 @@ import { LitElement, html } from 'lit' import { state } from 'lit/decorators.js' import { ifDefined } from 'lit/directives/if-defined.js' import styles from './styles.js' +import { markWalletsAsInstalled } from '../../utils/markWalletsAsInstalled.js' // -- Helpers --------------------------------------------- // const PAGINATOR_ID = 'local-paginator' @@ -93,14 +94,16 @@ export class W3mAllWalletsList extends LitElement { private walletsTemplate() { const wallets = [...this.featured, ...this.recommended, ...this.wallets] + const walletsWithInstalled = markWalletsAsInstalled(wallets) - return wallets.map( + return walletsWithInstalled.map( wallet => html` this.onConnectWallet(wallet)} + .installed=${wallet.installed} > ` ) diff --git a/packages/scaffold/src/partials/w3m-all-wallets-search/index.ts b/packages/scaffold/src/partials/w3m-all-wallets-search/index.ts index 393dc86ab9..a4e5ed4153 100644 --- a/packages/scaffold/src/partials/w3m-all-wallets-search/index.ts +++ b/packages/scaffold/src/partials/w3m-all-wallets-search/index.ts @@ -5,6 +5,7 @@ import { LitElement, html } from 'lit' import { property, state } from 'lit/decorators.js' import { ifDefined } from 'lit/directives/if-defined.js' import styles from './styles.js' +import { markWalletsAsInstalled } from '../../utils/markWalletsAsInstalled.js' @customElement('w3m-all-wallets-search') export class W3mAllWalletsSearch extends LitElement { @@ -39,6 +40,7 @@ export class W3mAllWalletsSearch extends LitElement { private walletsTemplate() { const { search } = ApiController.state + const wallets = markWalletsAsInstalled(search) if (!search.length) { return html` @@ -62,13 +64,14 @@ export class W3mAllWalletsSearch extends LitElement { rowGap="l" columnGap="xs" > - ${search.map( + ${wallets.map( wallet => html` this.onConnectWallet(wallet)} + .installed=${wallet.installed} > ` )} diff --git a/packages/scaffold/src/utils/markWalletsAsInstalled.ts b/packages/scaffold/src/utils/markWalletsAsInstalled.ts new file mode 100644 index 0000000000..8420f035f1 --- /dev/null +++ b/packages/scaffold/src/utils/markWalletsAsInstalled.ts @@ -0,0 +1,27 @@ +import type { WcWallet } from '@web3modal/core' +import { ConnectorController } from '@web3modal/core' + +export function markWalletsAsInstalled(wallets: WcWallet[]) { + const { connectors } = ConnectorController.state + const installedConnectors = connectors + .filter(c => c.type === 'ANNOUNCED') + .reduce>((acum, val) => { + if (!val.info?.rdns) { + return acum + } + acum[val.info.rdns] = true + + return acum + }, {}) + + const walletsWithInstalled: (WcWallet & { installed: boolean })[] = wallets.map(wallet => ({ + ...wallet, + installed: Boolean(wallet.rdns) && Boolean(installedConnectors[wallet.rdns ?? '']) + })) + + const sortedWallets = walletsWithInstalled.sort( + (a, b) => Number(b.installed) - Number(a.installed) + ) + + return sortedWallets +} diff --git a/packages/scaffold/src/views/w3m-connect-view/index.ts b/packages/scaffold/src/views/w3m-connect-view/index.ts index 1762fc925c..93fa361800 100644 --- a/packages/scaffold/src/views/w3m-connect-view/index.ts +++ b/packages/scaffold/src/views/w3m-connect-view/index.ts @@ -145,8 +145,8 @@ export class W3mConnectView extends LitElement { imageSrc=${ifDefined(AssetUtil.getConnectorImage(connector))} name=${connector.name ?? 'Unknown'} @click=${() => this.onConnector(connector)} - tagLabel="installed" tagVariant="success" + installed=${true} > ` @@ -160,6 +160,7 @@ export class W3mConnectView extends LitElement { if (connector.type !== 'INJECTED') { return null } + if (!ConnectionController.checkInstalled()) { return null } @@ -167,10 +168,9 @@ export class W3mConnectView extends LitElement { return html` this.onConnector(connector)} - tagLabel=${ifDefined(announced ? undefined : 'installed')} - tagVariant=${ifDefined(announced ? undefined : 'success')} > ` diff --git a/packages/ui/src/composites/wui-all-wallets-image/index.ts b/packages/ui/src/composites/wui-all-wallets-image/index.ts index 705d9e911f..68411eda5d 100644 --- a/packages/ui/src/composites/wui-all-wallets-image/index.ts +++ b/packages/ui/src/composites/wui-all-wallets-image/index.ts @@ -5,6 +5,7 @@ import { resetStyles } from '../../utils/ThemeUtil.js' import type { IWalletImage } from '../../utils/TypeUtil.js' import { customElement } from '../../utils/WebComponentsUtil.js' import '../wui-wallet-image/index.js' +import '../wui-icon-box/index.js' import styles from './styles.js' const TOTAL_IMAGES = 4 @@ -21,21 +22,31 @@ export class WuiAllWalletsImage extends LitElement { const isPlaceholders = this.walletImages.length < TOTAL_IMAGES return html`${this.walletImages - .slice(0, TOTAL_IMAGES) - .map( - ({ src, walletName }) => html` - - ` - )} - ${isPlaceholders - ? [...Array(TOTAL_IMAGES - this.walletImages.length)].map( - () => html` ` - ) - : null}` + .slice(0, TOTAL_IMAGES) + .map( + ({ src, walletName }) => html` + + ` + )} + ${isPlaceholders + ? [...Array(TOTAL_IMAGES - this.walletImages.length)].map( + () => html` ` + ) + : null} + + + ` } } diff --git a/packages/ui/src/composites/wui-all-wallets-image/styles.ts b/packages/ui/src/composites/wui-all-wallets-image/styles.ts index 3170b97632..6750b1d610 100644 --- a/packages/ui/src/composites/wui-all-wallets-image/styles.ts +++ b/packages/ui/src/composites/wui-all-wallets-image/styles.ts @@ -33,4 +33,16 @@ export default css` height: 14px; border-radius: var(--wui-border-radius-5xs); } + + :host > wui-flex { + padding: 2px; + position: fixed; + overflow: hidden; + left: 34px; + bottom: 8px; + background: var(--dark-background-150, #1e1f1f); + border-radius: 50%; + z-index: 2; + display: flex; + } ` diff --git a/packages/ui/src/composites/wui-card-select/index.ts b/packages/ui/src/composites/wui-card-select/index.ts index fcdf4231bd..c90a69d402 100644 --- a/packages/ui/src/composites/wui-card-select/index.ts +++ b/packages/ui/src/composites/wui-card-select/index.ts @@ -25,6 +25,8 @@ export class WuiCardSelect extends LitElement { @property({ type: Boolean }) public selected?: boolean = false + @property({ type: Boolean }) public installed?: boolean = false + // -- Render -------------------------------------------- // public override render() { return html` @@ -50,7 +52,13 @@ export class WuiCardSelect extends LitElement { } return html` - + ` } diff --git a/packages/ui/src/composites/wui-icon-box/index.ts b/packages/ui/src/composites/wui-icon-box/index.ts index cab1665be1..d3c62eb52a 100644 --- a/packages/ui/src/composites/wui-icon-box/index.ts +++ b/packages/ui/src/composites/wui-icon-box/index.ts @@ -18,13 +18,13 @@ export class WuiIconBox extends LitElement { public static override styles = [resetStyles, elementStyles, styles] // -- State & Properties -------------------------------- // - @property() public size: Exclude = 'md' + @property() public size: SizeType = 'md' @property() public backgroundColor: ColorType = 'accent-100' @property() public iconColor: ColorType = 'accent-100' - @property() public iconSize?: Exclude + @property() public iconSize?: Exclude @property() public background: BackgroundType = 'transparent' diff --git a/packages/ui/src/composites/wui-list-wallet/index.ts b/packages/ui/src/composites/wui-list-wallet/index.ts index cd83cd1893..648d81d16b 100644 --- a/packages/ui/src/composites/wui-list-wallet/index.ts +++ b/packages/ui/src/composites/wui-list-wallet/index.ts @@ -1,6 +1,7 @@ import { html, LitElement } from 'lit' import { property } from 'lit/decorators.js' import '../../components/wui-icon/index.js' +import '../../composites/wui-icon-box/index.js' import '../../components/wui-text/index.js' import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js' import type { IconType, IWalletImage, TagType } from '../../utils/TypeUtil.js' @@ -29,6 +30,8 @@ export class WuiListWallet extends LitElement { @property() public walletIcon?: IconType + @property({ type: Boolean }) public installed = false + @property({ type: Boolean }) public disabled = false @property({ type: Boolean }) public showAllWallets = false @@ -61,6 +64,7 @@ export class WuiListWallet extends LitElement { size="sm" imageSrc=${this.imageSrc} name=${this.name} + .installed=${this.installed} >` } else if (!this.showAllWallets && !this.imageSrc) { return html`` diff --git a/packages/ui/src/composites/wui-wallet-image/index.ts b/packages/ui/src/composites/wui-wallet-image/index.ts index ac8ab6fa42..cf024a9d22 100644 --- a/packages/ui/src/composites/wui-wallet-image/index.ts +++ b/packages/ui/src/composites/wui-wallet-image/index.ts @@ -5,6 +5,7 @@ import '../../components/wui-image/index.js' import { resetStyles } from '../../utils/ThemeUtil.js' import type { BorderRadiusType, IconType, SizeType } from '../../utils/TypeUtil.js' import { customElement } from '../../utils/WebComponentsUtil.js' +import '../wui-icon-box/index.js' import styles from './styles.js' @customElement('wui-wallet-image') @@ -20,6 +21,10 @@ export class WuiWalletImage extends LitElement { @property() public walletIcon?: IconType + @property({ type: Boolean }) public installed = false + + @property() public badgeSize: SizeType = 'xs' + // -- Render -------------------------------------------- // public override render() { let borderRadius: BorderRadiusType = 'xxs' @@ -39,7 +44,10 @@ export class WuiWalletImage extends LitElement { this.dataset['walletIcon'] = this.walletIcon } - return html` ${this.templateVisual()}` + return html` + ${this.templateVisual()} + ${this.templateInstalledBadge()} + ` } // -- Private ------------------------------------------- // @@ -62,6 +70,22 @@ export class WuiWalletImage extends LitElement { name="walletPlaceholder" >` } + private templateInstalledBadge() { + if (this.installed) { + return html` + + ` + } + + return null + } } declare global { diff --git a/packages/ui/src/composites/wui-wallet-image/styles.ts b/packages/ui/src/composites/wui-wallet-image/styles.ts index b57640da46..e91f198d42 100644 --- a/packages/ui/src/composites/wui-wallet-image/styles.ts +++ b/packages/ui/src/composites/wui-wallet-image/styles.ts @@ -3,14 +3,19 @@ import { css } from 'lit' export default css` :host { position: relative; - border-radius: inherit; - overflow: hidden; background-color: var(--wui-gray-glass-002); display: flex; justify-content: center; align-items: center; width: var(--local-size); height: var(--local-size); + border-radius: inherit; + border-radius: var(--local-border-radius); + } + + :host > wui-flex { + overflow: hidden; + border-radius: inherit; border-radius: var(--local-border-radius); } @@ -63,4 +68,14 @@ export default css` width: 100%; height: 100%; } + + :host > wui-icon-box { + position: absolute; + overflow: hidden; + right: -1px; + bottom: -2px; + z-index: 1; + border: 2px solid var(--wui-color-bg-base-150, #1e1f1f); + padding: 1px; + } `