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 {
+
+