diff --git a/packages/scaffold/src/partials/w3m-connect-custom-widget/index.ts b/packages/scaffold/src/partials/w3m-connect-custom-widget/index.ts index cd306bce0d..b4dcaf478a 100644 --- a/packages/scaffold/src/partials/w3m-connect-custom-widget/index.ts +++ b/packages/scaffold/src/partials/w3m-connect-custom-widget/index.ts @@ -1,11 +1,32 @@ import type { WcWallet } from '@web3modal/core' -import { AssetUtil, OptionsController, RouterController } from '@web3modal/core' +import { + AssetUtil, + ConnectorController, + CoreHelperUtil, + OptionsController, + RouterController, + StorageUtil +} from '@web3modal/core' import { customElement } from '@web3modal/ui' import { LitElement, html } from 'lit' +import { state } from 'lit/decorators.js' import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-connect-custom-widget') export class W3mConnectCustomWidget extends LitElement { + // -- Members ------------------------------------------- // + private unsubscribe: (() => void)[] = [] + + // -- State & Properties -------------------------------- // + @state() private connectors = ConnectorController.state.connectors + + public constructor() { + super() + this.unsubscribe.push( + ConnectorController.subscribeKey('connectors', val => (this.connectors = val)) + ) + } + // -- Render -------------------------------------------- // public override render() { const { customWallets } = OptionsController.state @@ -34,8 +55,21 @@ export class W3mConnectCustomWidget extends LitElement { // -- Private Methods ----------------------------------- // private filterOutDuplicateWallets(wallets: WcWallet[]) { - // Implement duplicate wallet filtering logic - return wallets + const recent = StorageUtil.getRecentWallets() + + const connectorRDNSs = this.connectors + .map(connector => connector.info?.rdns) + .filter(Boolean) as string[] + + const recentRDNSs = recent.map(wallet => wallet.rdns).filter(Boolean) as string[] + const allRDNSs = connectorRDNSs.concat(recentRDNSs) + if (allRDNSs.includes('io.metamask.mobile') && CoreHelperUtil.isMobile()) { + const index = allRDNSs.indexOf('io.metamask.mobile') + allRDNSs[index] = 'io.metamask' + } + const filtered = wallets.filter(wallet => !allRDNSs.includes(String(wallet?.rdns))) + + return filtered } private onConnectWallet(wallet: WcWallet) { diff --git a/packages/scaffold/src/partials/w3m-connect-featured-widget/index.ts b/packages/scaffold/src/partials/w3m-connect-featured-widget/index.ts index efadd6fb99..35946ee992 100644 --- a/packages/scaffold/src/partials/w3m-connect-featured-widget/index.ts +++ b/packages/scaffold/src/partials/w3m-connect-featured-widget/index.ts @@ -1,11 +1,36 @@ import type { WcWallet } from '@web3modal/core' -import { ApiController, AssetUtil, RouterController } from '@web3modal/core' +import { + ApiController, + AssetUtil, + ConnectorController, + CoreHelperUtil, + RouterController, + StorageUtil +} from '@web3modal/core' import { customElement } from '@web3modal/ui' import { LitElement, html } from 'lit' +import { state } from 'lit/decorators.js' import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-connect-featured-widget') export class W3mConnectFeaturedWidget extends LitElement { + // -- Members ------------------------------------------- // + private unsubscribe: (() => void)[] = [] + + // -- State & Properties -------------------------------- // + @state() private connectors = ConnectorController.state.connectors + + public constructor() { + super() + this.unsubscribe.push( + ConnectorController.subscribeKey('connectors', val => (this.connectors = val)) + ) + } + + public override disconnectedCallback() { + this.unsubscribe.forEach(unsubscribe => unsubscribe()) + } + // -- Render -------------------------------------------- // public override render() { const { featured } = ApiController.state @@ -35,8 +60,21 @@ export class W3mConnectFeaturedWidget extends LitElement { // -- Private Methods ----------------------------------- // private filterOutDuplicateWallets(wallets: WcWallet[]) { - // Implement duplicate wallet filtering logic - return wallets + const recent = StorageUtil.getRecentWallets() + + const connectorRDNSs = this.connectors + .map(connector => connector.info?.rdns) + .filter(Boolean) as string[] + + const recentRDNSs = recent.map(wallet => wallet.rdns).filter(Boolean) as string[] + const allRDNSs = connectorRDNSs.concat(recentRDNSs) + if (allRDNSs.includes('io.metamask.mobile') && CoreHelperUtil.isMobile()) { + const index = allRDNSs.indexOf('io.metamask.mobile') + allRDNSs[index] = 'io.metamask' + } + const filtered = wallets.filter(wallet => !allRDNSs.includes(String(wallet?.rdns))) + + return filtered } private onConnectWallet(wallet: WcWallet) { diff --git a/packages/scaffold/src/views/w3m-connect-view/index.ts b/packages/scaffold/src/views/w3m-connect-view/index.ts index b2e32773b1..97e2eea80a 100644 --- a/packages/scaffold/src/views/w3m-connect-view/index.ts +++ b/packages/scaffold/src/views/w3m-connect-view/index.ts @@ -49,6 +49,8 @@ export class W3mConnectView extends LitElement { + +