fix: only show browser tab option for browser wallets (#3491)

Co-authored-by: tomiir <rocchitomas@gmail.com>

.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

apps/laboratory/tests/wallet-features.spec.ts

@@ -9,7 +9,7 @@ let validator: ModalWalletValidator
 let context: BrowserContext
 /* eslint-enable init-declarations */
 
-const ABSOLUTE_WALLET_ID = 'bfa6967fd05add7bb2b19a442ac37cedb6a6b854483729194f5d7185272c5594'
+const MATH_WALLET_ID = '7674bb4e353bf52886768a3ddc2a4562ce2f4191c80831291218ebd90f5f5e26'
 const METAMASK_WALLET_ID = 'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96'
 
 // -- Setup --------------------------------------------------------------------
@@ -95,8 +95,8 @@ walletFeaturesTest('it should open web app wallet', async () => {
   await validator.expectAllWallets()
   await page.openAllWallets()
   await page.page.waitForTimeout(500)
-  await page.search('absolute wallet')
-  await page.clickAllWalletsListSearchItem(ABSOLUTE_WALLET_ID)
+  await page.search('MathWallet')
+  await page.clickAllWalletsListSearchItem(MATH_WALLET_ID)
   await page.page.waitForTimeout(500)
   await page.clickTabWebApp()
   const copiedLink = await page.clickCopyLink()

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

@@ -121,9 +121,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' }
+    ])
+  })
+})