chore: add scaffold-ui tests

packages/appkit/package.json

@@ -14,7 +14,7 @@
     "watch": "tsc --watch",
     "typecheck": "tsc --noEmit",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
-    "test": "vitest run --coverage.enabled=true --coverage.reporter=json --coverage.reporter=json-summary --coverage.reportOnFailure=true"
+    "test": "vitest run --coverage.enabled=true -- coverage.reporter=json --coverage.reporter=json-summary --coverage.reportOnFailure=true"
   },
   "exports": {
     ".": {

packages/scaffold-ui/package.json

@@ -25,16 +25,17 @@
     "build": "tsc --build",
     "watch": "tsc --watch",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "test": "vitest run --coverage.enabled=true -- coverage.reporter=json --coverage.reporter=json-summary --coverage.reportOnFailure=true"
   },
   "dependencies": {
     "@reown/appkit-common": "workspace:*",
-    "@reown/appkit-utils": "workspace:*",
     "@reown/appkit-core": "workspace:*",
-    "@reown/appkit-ui": "workspace:*",
-    "lit": "3.1.0",
     "@reown/appkit-siwe": "workspace:*",
-    "@reown/appkit-wallet": "workspace:*"
+    "@reown/appkit-ui": "workspace:*",
+    "@reown/appkit-utils": "workspace:*",
+    "@reown/appkit-wallet": "workspace:*",
+    "lit": "3.1.0"
   },
   "author": "Reown <[email protected]> (https://reown.com)",
   "license": "Apache-2.0",
@@ -45,5 +46,8 @@
   },
   "bugs": {
     "url": "https://github.com/WalletConnect/web3modal/issues"
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "2"
   }
 }

packages/scaffold-ui/src/partials/w3m-all-wallets-list/index.ts

@@ -5,7 +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'
+import { WalletUtil } from '../../utils/WalletUtil.js'
 
 // -- Helpers --------------------------------------------- //
 const PAGINATOR_ID = 'local-paginator'
@@ -94,7 +94,7 @@ export class W3mAllWalletsList extends LitElement {
 
   private walletsTemplate() {
     const wallets = [...this.featured, ...this.recommended, ...this.wallets]
-    const walletsWithInstalled = markWalletsAsInstalled(wallets)
+    const walletsWithInstalled = WalletUtil.markWalletsAsInstalled(wallets)
 
     return walletsWithInstalled.map(
       wallet => html`

packages/scaffold-ui/src/partials/w3m-all-wallets-search/index.ts

@@ -4,7 +4,7 @@ import { customElement } from '@reown/appkit-ui'
 import { LitElement, html } from 'lit'
 import { property, state } from 'lit/decorators.js'
 import styles from './styles.js'
-import { markWalletsAsInstalled } from '../../utils/markWalletsAsInstalled.js'
+import { WalletUtil } from '../../utils/WalletUtil.js'
 
 @customElement('w3m-all-wallets-search')
 export class W3mAllWalletsSearch extends LitElement {
@@ -39,7 +39,7 @@ export class W3mAllWalletsSearch extends LitElement {
 
   private walletsTemplate() {
     const { search } = ApiController.state
-    const wallets = markWalletsAsInstalled(search)
+    const wallets = WalletUtil.markWalletsAsInstalled(search)
 
     if (!search.length) {
       return html`

packages/scaffold-ui/src/utils/WalletUtil.ts

@@ -2,9 +2,13 @@ import {
   ConnectorController,
   CoreHelperUtil,
   OptionsController,
-  StorageUtil,
-  type WcWallet
+  StorageUtil
 } from '@reown/appkit-core'
+import type { WcWallet } from '@reown/appkit-core'
+
+interface AppKitWallet extends WcWallet {
+  installed: boolean
+}
 
 export const WalletUtil = {
   filterOutDuplicatesByRDNS(wallets: WcWallet[]) {
@@ -50,5 +54,30 @@ export const WalletUtil = {
     const uniqueWallets = this.filterOutDuplicatesByIds(uniqueByRDNS)
 
     return uniqueWallets
+  },
+
+  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: AppKitWallet[] = 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-ui/test/WalletUtil.test.ts

@@ -0,0 +1,237 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { WalletUtil } from '../src/utils/WalletUtil'
+import {
+  ConnectorController,
+  CoreHelperUtil,
+  OptionsController,
+  StorageUtil
+} from '@reown/appkit-core'
+import type { WcWallet } from '@reown/appkit-core'
+
+// Connectors
+const mockMetamaskConnector = {
+  info: { rdns: 'io.metamask' },
+  id: '1',
+  explorerId: '1',
+  chain: 'eip155' as const,
+  type: 'ANNOUNCED' as const
+}
+
+const mockRainbowConnector = {
+  info: { rdns: 'io.rainbow' },
+  id: '2',
+  explorerId: '2',
+  chain: 'eip155' as const,
+  type: 'ANNOUNCED' as const
+}
+const mockMetamaskMobileConnector = {
+  info: { rdns: 'io.metamask.mobile' },
+  id: '4',
+  explorerId: '4',
+  chain: 'eip155' as const,
+  type: 'ANNOUNCED' as const
+}
+const mockCoinbaseconnector = {
+  info: { rdns: 'io.coinbase' },
+  id: '5',
+  explorerId: '5',
+  chain: 'eip155' as const,
+  type: 'EXTERNAL' as const
+}
+
+// Wallets
+const mockMetamaskWallet: WcWallet = { id: '1', name: 'Wallet 1', rdns: 'io.metamask' }
+const mockRainbowWallet: WcWallet = { id: '2', name: 'Wallet 2', rdns: 'io.rainbow' }
+const mockTrustWallet: WcWallet = { id: '3', name: 'Wallet 3', rdns: 'io.trustwallet' }
+const mockCoinbaseWallet: WcWallet = { id: '5', name: 'Wallet 5', rdns: 'io.coinbase' }
+
+describe('WalletUtil', () => {
+  const mockWallets: WcWallet[] = [mockMetamaskWallet, mockRainbowWallet, mockTrustWallet]
+
+  beforeEach(() => {
+    // Reset all mocks before each test
+    vi.restoreAllMocks()
+    OptionsController.state.enableEIP6963 = true
+  })
+
+  describe('filterOutDuplicatesByRDNS', () => {
+    it('should filter out wallets with RDNS from connectors and recent wallets', () => {
+      const mockConnectors = [mockMetamaskConnector, mockRainbowConnector, mockCoinbaseconnector]
+      const mockRecentWallets = [mockTrustWallet]
+
+      vi.spyOn(ConnectorController.state, 'connectors', 'get').mockReturnValue(mockConnectors)
+      vi.spyOn(StorageUtil, 'getRecentWallets').mockReturnValue(mockRecentWallets)
+      vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(false)
+
+      const filteredWallets = WalletUtil.filterOutDuplicatesByRDNS(mockWallets)
+
+      expect(filteredWallets).toEqual([]) // All RDNS wallets should be filtered out
+    })
+
+    it('should replace "io.metamask.mobile" with "io.metamask" on mobile', () => {
+      const mockConnectors = [mockMetamaskMobileConnector]
+      const mockRecentWallets = []
+
+      vi.spyOn(ConnectorController.state, 'connectors', 'get').mockReturnValue(mockConnectors)
+      vi.spyOn(StorageUtil, 'getRecentWallets').mockReturnValue(mockRecentWallets)
+      vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(true)
+
+      const filteredWallets = WalletUtil.filterOutDuplicatesByRDNS(mockWallets)
+
+      expect(filteredWallets).toEqual(mockWallets.filter(wallet => wallet.rdns !== 'io.metamask'))
+    })
+
+    it('should return all wallets if no connectors or recent wallets have RDNS', () => {
+      vi.spyOn(ConnectorController.state, 'connectors', 'get').mockReturnValue([])
+      vi.spyOn(StorageUtil, 'getRecentWallets').mockReturnValue([])
+
+      const filteredWallets = WalletUtil.filterOutDuplicatesByRDNS(mockWallets)
+
+      expect(filteredWallets).toEqual(mockWallets)
+    })
+  })
+
+  describe('filterOutDuplicatesByIds', () => {
+    it('should filter out wallets with IDs from connectors and recent wallets', () => {
+      const mockConnectors = [mockMetamaskConnector, mockRainbowConnector]
+      const mockRecentWallets = [mockTrustWallet]
+
+      vi.spyOn(ConnectorController.state, 'connectors', 'get').mockReturnValue(mockConnectors)
+      vi.spyOn(StorageUtil, 'getRecentWallets').mockReturnValue(mockRecentWallets)
+
+      const filteredWallets = WalletUtil.filterOutDuplicatesByIds(mockWallets)
+
+      expect(filteredWallets).toEqual([]) // All IDs are filtered out. MM and Rainbow from connectors, TW from recent
+    })
+
+    it('should not filter if connector is not Injected or Announced', () => {
+      const mockConnectors = [mockMetamaskConnector, mockRainbowConnector]
+      const mockRecentWallets = [mockTrustWallet]
+
+      vi.spyOn(ConnectorController.state, 'connectors', 'get').mockReturnValue(mockConnectors)
+      vi.spyOn(StorageUtil, 'getRecentWallets').mockReturnValue(mockRecentWallets)
+
+      const filteredWallets = WalletUtil.filterOutDuplicatesByIds([
+        ...mockWallets,
+        mockCoinbaseWallet
+      ])
+
+      expect(filteredWallets).toEqual([mockCoinbaseWallet])
+    })
+
+    it('should return all wallets if no connectors or recent wallets have IDs', () => {
+      vi.spyOn(ConnectorController.state, 'connectors', 'get').mockReturnValue([])
+      vi.spyOn(StorageUtil, 'getRecentWallets').mockReturnValue([])
+
+      const filteredWallets = WalletUtil.filterOutDuplicatesByIds(mockWallets)
+
+      expect(filteredWallets).toEqual(mockWallets)
+    })
+  })
+
+  describe('filterOutDuplicateWallets', () => {
+    it('should filter out wallets with duplicate RDNS and IDs', () => {
+      const mockConnectors = [mockMetamaskConnector]
+      const mockRecentWallets = [mockTrustWallet]
+
+      vi.spyOn(ConnectorController.state, 'connectors', 'get').mockReturnValue(mockConnectors)
+      vi.spyOn(StorageUtil, 'getRecentWallets').mockReturnValue(mockRecentWallets)
+
+      const filteredWallets = WalletUtil.filterOutDuplicateWallets(mockWallets)
+
+      expect(filteredWallets).toEqual([mockRainbowWallet])
+    })
+
+    it('should return all wallets if no duplicates exist by RDNS or IDs', () => {
+      const mockConnectors = []
+      const mockRecentWallets = []
+
+      vi.spyOn(ConnectorController.state, 'connectors', 'get').mockReturnValue(mockConnectors)
+      vi.spyOn(StorageUtil, 'getRecentWallets').mockReturnValue(mockRecentWallets)
+
+      const filteredWallets = WalletUtil.filterOutDuplicateWallets(mockWallets)
+
+      expect(filteredWallets).toEqual(mockWallets)
+    })
+  })
+
+  describe('markWalletsAsInstalled', () => {
+    const mockWallets: WcWallet[] = [
+      { id: '1', name: 'Wallet 1', rdns: 'io.metamask' },
+      { id: '2', name: 'Wallet 2', rdns: 'io.rainbow' },
+      { id: '3', name: 'Wallet 3', rdns: 'io.trustwallet' }
+    ]
+
+    beforeEach(() => {
+      // Reset all mocks before each test
+      vi.restoreAllMocks()
+    })
+
+    it('should mark wallets as installed based on connectors', () => {
+      const mockConnectors = [mockMetamaskConnector, mockRainbowConnector]
+
+      vi.spyOn(ConnectorController.state, 'connectors', 'get').mockReturnValue(mockConnectors)
+
+      const result = WalletUtil.markWalletsAsInstalled(mockWallets)
+
+      expect(result).toEqual([
+        { ...mockMetamaskWallet, installed: true },
+        { ...mockRainbowWallet, installed: true },
+        { ...mockTrustWallet, installed: false }
+      ])
+    })
+
+    it('should return wallets sorted by installed status', () => {
+      const mockConnectors = [mockRainbowConnector]
+
+      vi.spyOn(ConnectorController.state, 'connectors', 'get').mockReturnValue(mockConnectors)
+
+      const result = WalletUtil.markWalletsAsInstalled(mockWallets)
+
+      expect(result).toEqual([
+        { ...mockRainbowWallet, installed: true },
+        { ...mockMetamaskWallet, installed: false },
+        { ...mockTrustWallet, installed: false }
+      ])
+    })
+
+    it('should return wallets with installed false if no matching connectors are found', () => {
+      const mockConnectors = [
+        {
+          type: 'ANNOUNCED' as const,
+          info: { rdns: 'io.someotherwallet' },
+          id: '1233',
+          chain: 'eip155' as const
+        }
+      ]
+
+      vi.spyOn(ConnectorController.state, 'connectors', 'get').mockReturnValue(mockConnectors)
+
+      const result = WalletUtil.markWalletsAsInstalled(mockWallets)
+
+      expect(result).toEqual([
+        { ...mockMetamaskWallet, installed: false },
+        { ...mockRainbowWallet, installed: false },
+        { ...mockTrustWallet, installed: false }
+      ])
+    })
+
+    it('should handle wallets without RDNS', () => {
+      const walletsWithoutRDNS: WcWallet[] = [
+        { id: '1', name: 'Wallet 1' },
+        { id: '2', name: 'Wallet 2', rdns: 'io.rainbow' }
+      ]
+
+      const mockConnectors = [mockRainbowConnector]
+
+      vi.spyOn(ConnectorController.state, 'connectors', 'get').mockReturnValue(mockConnectors)
+
+      const result = WalletUtil.markWalletsAsInstalled(walletsWithoutRDNS)
+
+      expect(result).toEqual([
+        { id: '2', name: 'Wallet 2', rdns: 'io.rainbow', installed: true },
+        { id: '1', name: 'Wallet 1', installed: false }
+      ])
+    })
+  })
+})