Fix: Cross-Namespace Wallet Switching (#5228)

Author: svenvoskamp

.changeset/cool-comics-buy.md

@@ -0,0 +1,6 @@
+---
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit-ui': patch
+---
+
+Fixes an issue where the UI would show incorrect possibility to switch wallet in profile wallets view

apps/laboratory/tests/multichain-extension.spec.ts

@@ -152,6 +152,48 @@ extensionTest(
   }
 )
 
+extensionTest(
+  'it should connect with email on Ethereum, switch to a different chain and be able to switch account type on Ethereum',
+  async () => {
+    const mailsacApiKey = process.env['MAILSAC_API_KEY']
+    if (!mailsacApiKey) {
+      throw new Error('MAILSAC_API_KEY is not set')
+    }
+
+    const email = new Email(mailsacApiKey)
+    await modalPage.emailFlow({
+      emailAddress: await email.getEmailAddressToUse(),
+      context: modalPage.page.context(),
+      mailsacApiKey,
+      clickConnectButton: true
+    })
+    await modalValidator.expectConnected()
+
+    const emailEthAddress = (await modalPage.page
+      .getByTestId('w3m-address')
+      .textContent()) as string
+
+    await modalPage.switchNetwork('Solana', true)
+    await modalPage.closeModal()
+    await modalValidator.expectConnected()
+    await modalValidator.expectNetworkButton('Solana')
+    await modalPage.openProfileWalletsView()
+    await modalPage.clickTab('evm')
+    await modalPage.switchAccount()
+    await modalPage.closeModal()
+    await modalValidator.expectConnected()
+    await modalValidator.expectNetworkButton('Ethereum')
+    await modalPage.openProfileWalletsView()
+    await modalPage.clickTab('evm')
+    await modalPage.switchAccount()
+    await modalPage.closeModal()
+    await modalValidator.expectAccountButtonAddress(emailEthAddress)
+    await modalPage.openProfileWalletsView()
+    await modalPage.clickProfileWalletsMoreButton()
+    await modalPage.disconnect(false)
+  }
+)
+
 extensionTest('it should be disconnected after page refresh', async () => {
   await modalPage.page.reload()
   await modalValidator.expectDisconnected()

packages/scaffold-ui/src/views/w3m-profile-wallets-view/index.ts

@@ -513,6 +513,13 @@ export class W3mProfileWalletsView extends LitElement {
       this.lastSelectedConnectorId = connection.connectorId
       this.lastSelectedAddress = address
 
+      const isDifferentNamespace = this.caipNetwork?.chainNamespace !== namespace
+
+      if (isDifferentNamespace && connection?.caipNetwork) {
+        ConnectorController.setFilterByNamespace(namespace)
+        await ChainController.switchActiveNetwork(connection?.caipNetwork)
+      }
+
       await ConnectionController.switchConnection({
         connection,
         address,

packages/scaffold-ui/test/views/w3m-profile-wallets-view.test.ts

@@ -37,6 +37,7 @@ const mockEthereumNetwork = {
   id: 1,
   name: 'Ethereum',
   namespace: ConstantsUtil.CHAIN.EVM,
+  chainNamespace: ConstantsUtil.CHAIN.EVM,
   blockExplorers: {
     default: { url: 'https://etherscan.io' }
   }
@@ -45,13 +46,15 @@ const mockEthereumNetwork = {
 const mockSolanaNetwork = {
   id: 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
   name: 'Solana',
-  namespace: ConstantsUtil.CHAIN.SOLANA
+  namespace: ConstantsUtil.CHAIN.SOLANA,
+  chainNamespace: ConstantsUtil.CHAIN.SOLANA
 } as unknown as CaipNetwork
 
 const mockBitcoinNetwork = {
   id: 'bitcoin:000000000019d6689c085ae165831e93',
   name: 'Bitcoin',
-  namespace: ConstantsUtil.CHAIN.BITCOIN
+  namespace: ConstantsUtil.CHAIN.BITCOIN,
+  chainNamespace: ConstantsUtil.CHAIN.BITCOIN
 } as unknown as CaipNetwork
 
 const mockMetaMaskConnector = {