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