feat: installed icon box (#1550)

Co-authored-by: Haze <[email protected]>
Co-authored-by: Sven <[email protected]>

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`
         <wui-card-select
           imageSrc=${ifDefined(AssetUtil.getWalletImage(wallet))}
           type="wallet"
           name=${wallet.name}
           @click=${() => this.onConnectWallet(wallet)}
+          .installed=${wallet.installed}
         ></wui-card-select>
       `
     )

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`
             <wui-card-select
               imageSrc=${ifDefined(AssetUtil.getWalletImage(wallet))}
               type="wallet"
               name=${wallet.name}
               @click=${() => this.onConnectWallet(wallet)}
+              .installed=${wallet.installed}
             ></wui-card-select>
           `
         )}

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<Record<string, boolean>>((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
+}

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}
         >
         </wui-list-wallet>
       `
@@ -160,17 +160,17 @@ export class W3mConnectView extends LitElement {
       if (connector.type !== 'INJECTED') {
         return null
       }
+
       if (!ConnectionController.checkInstalled()) {
         return null
       }
 
       return html`
         <wui-list-wallet
           imageSrc=${ifDefined(AssetUtil.getConnectorImage(connector))}
+          installed=${Boolean(announced)}
           name=${connector.name ?? 'Unknown'}
           @click=${() => this.onConnector(connector)}
-          tagLabel=${ifDefined(announced ? undefined : 'installed')}
-          tagVariant=${ifDefined(announced ? undefined : 'success')}
         >
         </wui-list-wallet>
       `

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`
-          <wui-wallet-image
-            size="inherit"
-            imageSrc=${src}
-            name=${ifDefined(walletName)}
-          ></wui-wallet-image>
-        `
-      )}
-    ${isPlaceholders
-      ? [...Array(TOTAL_IMAGES - this.walletImages.length)].map(
-          () => html` <wui-wallet-image size="inherit" name=""></wui-wallet-image>`
-        )
-      : null}`
+        .slice(0, TOTAL_IMAGES)
+        .map(
+          ({ src, walletName }) => html`
+            <wui-wallet-image
+              size="inherit"
+              imageSrc=${src}
+              name=${ifDefined(walletName)}
+            ></wui-wallet-image>
+          `
+        )}
+      ${isPlaceholders
+        ? [...Array(TOTAL_IMAGES - this.walletImages.length)].map(
+            () => html` <wui-wallet-image size="inherit" name=""></wui-wallet-image>`
+          )
+        : null}
+      <wui-flex>
+        <wui-icon-box
+          size="xxs"
+          iconSize="xxs"
+          iconcolor="success-100"
+          backgroundcolor="success-100"
+          icon="checkmark"
+          background="opaque"
+        ></wui-icon-box>
+      </wui-flex>`
   }
 }
 

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;
+  }
 `

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`
-      <wui-wallet-image size="md" imageSrc=${ifDefined(this.imageSrc)} name=${this.name}>
+      <wui-wallet-image
+        size="md"
+        imageSrc=${ifDefined(this.imageSrc)}
+        name=${this.name}
+        .installed=${this.installed}
+        badgeSize="sm"
+      >
       </wui-wallet-image>
     `
   }

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<SizeType, 'xxs'> = 'md'
+  @property() public size: SizeType = 'md'
 
   @property() public backgroundColor: ColorType = 'accent-100'
 
   @property() public iconColor: ColorType = 'accent-100'
 
-  @property() public iconSize?: Exclude<SizeType, 'inherit' | 'xxs'>
+  @property() public iconSize?: Exclude<SizeType, 'inherit'>
 
   @property() public background: BackgroundType = 'transparent'
 

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}
       ></wui-wallet-image>`
     } else if (!this.showAllWallets && !this.imageSrc) {
       return html`<wui-wallet-image size="sm" name=${this.name}></wui-wallet-image>`

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`
+      <wui-flex justifyContent="center" alignItems="center"> ${this.templateVisual()} </wui-flex>
+      ${this.templateInstalledBadge()}
+    `
   }
 
   // -- Private ------------------------------------------- //
@@ -62,6 +70,22 @@ export class WuiWalletImage extends LitElement {
       name="walletPlaceholder"
     ></wui-icon>`
   }
+  private templateInstalledBadge() {
+    if (this.installed) {
+      return html`
+        <wui-icon-box
+          size=${this.badgeSize}
+          iconSize=${this.badgeSize}
+          iconcolor="success-100"
+          backgroundcolor="success-100"
+          icon="checkmark"
+          background="opaque"
+        ></wui-icon-box>
+      `
+    }
+
+    return null
+  }
 }
 
 declare global {

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;
+  }
 `