fix: only show browser tab option for browser wallets

.changeset/little-ghosts-remember.md

@@ -0,0 +1,22 @@
+---
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-cli': patch
+'@reown/appkit-common': patch
+'@reown/appkit-core': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-wallet': patch
+'@reown/appkit-wallet-button': patch
+---
+
+Fixed an issue where browser tab option was showing for all wallets

packages/scaffold-ui/src/views/w3m-connecting-wc-view/index.ts

@@ -125,9 +125,9 @@ export class W3mConnectingWcView extends LitElement {
       return
     }
 
-    const { mobile_link, desktop_link, webapp_link, injected, rdns, name } = this.wallet
+    const { mobile_link, desktop_link, webapp_link, injected, rdns } = this.wallet
     const injectedIds = injected?.map(({ injected_id }) => injected_id).filter(Boolean) as string[]
-    const browserIds = [...(rdns ? [rdns] : injectedIds ?? []), name]
+    const browserIds = [...(rdns ? [rdns] : injectedIds ?? [])]
     const isBrowser = OptionsController.state.isUniversalProvider ? false : browserIds.length
     const isMobileWc = mobile_link
     const isWebWc = webapp_link

packages/scaffold-ui/test/views/w3m-connecting-wc-view.test.ts

@@ -0,0 +1,93 @@
+import { describe, expect, vi, test } from 'vitest'
+import { CoreHelperUtil, RouterController } from '@reown/appkit-core'
+import type { W3mConnectingWcView } from '../../exports'
+import { fixture } from '@open-wc/testing'
+import { html } from 'lit'
+import type { WcWallet } from '@reown/appkit-core'
+import { HelpersUtil } from '../utils/HelpersUtil'
+import type { WuiTabs } from '@reown/appkit-ui'
+
+// --- Constants ---------------------------------------------------- //
+
+const WALLET = {
+  id: 'metamask',
+  name: 'MetaMask'
+} as WcWallet
+
+describe('W3mConnectingWcView - Render', () => {
+  test('should render walletConnect widget if no wallet is given', async () => {
+    const element: W3mConnectingWcView = await fixture(
+      html`<w3m-connecting-wc-view></w3m-connecting-wc-view>`
+    )
+
+    expect(HelpersUtil.querySelect(element, 'w3m-connecting-wc-qrcode')).not.toBeNull()
+  })
+
+  test('should render web and browser platforms', async () => {
+    vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(false)
+
+    vi.spyOn(RouterController, 'state', 'get').mockReturnValue({
+      ...RouterController.state,
+      data: {
+        wallet: {
+          ...WALLET,
+          rdns: 'metamask.io',
+          webapp_link: 'https://metamask.io'
+        }
+      }
+    })
+
+    const element: W3mConnectingWcView = await fixture(
+      html`<w3m-connecting-wc-view></w3m-connecting-wc-view>`
+    )
+
+    const w3mConnectingHeader = HelpersUtil.querySelect(element, 'w3m-connecting-header')
+
+    expect(w3mConnectingHeader).not.toBeNull()
+
+    const wuiTabs = HelpersUtil.querySelect(w3mConnectingHeader, 'wui-tabs') as WuiTabs
+
+    expect(wuiTabs).not.toBeNull()
+
+    const tabsProperty = wuiTabs.tabs
+
+    expect(tabsProperty).toStrictEqual([
+      { label: 'Webapp', icon: 'browser', platform: 'web' },
+      { label: 'Browser', icon: 'extension', platform: 'unsupported' }
+    ])
+  })
+
+  test('should render mobile and browser platforms', async () => {
+    vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(true)
+
+    vi.spyOn(RouterController, 'state', 'get').mockReturnValue({
+      ...RouterController.state,
+      data: {
+        wallet: {
+          ...WALLET,
+          webapp_link: 'https://metamask.io',
+          mobile_link: 'https://metamask.io'
+        }
+      }
+    })
+
+    const element: W3mConnectingWcView = await fixture(
+      html`<w3m-connecting-wc-view></w3m-connecting-wc-view>`
+    )
+
+    const w3mConnectingHeader = HelpersUtil.querySelect(element, 'w3m-connecting-header')
+
+    expect(w3mConnectingHeader).not.toBeNull()
+
+    const wuiTabs = HelpersUtil.querySelect(w3mConnectingHeader, 'wui-tabs') as WuiTabs
+
+    expect(wuiTabs).not.toBeNull()
+
+    const tabsProperty = wuiTabs.tabs
+
+    expect(tabsProperty).toStrictEqual([
+      { label: 'Mobile', icon: 'mobile', platform: 'mobile' },
+      { label: 'Webapp', icon: 'browser', platform: 'web' }
+    ])
+  })
+})