fix: missing network not supported modal on wallet network switch (#2565

)
reown-com · Jul 18, 2024 · daa678c · daa678c
1 parent 4a242fa
commit daa678c
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 4 deletions.
diff --git a/apps/laboratory/tests/shared/pages/WalletPage.ts b/apps/laboratory/tests/shared/pages/WalletPage.ts
@@ -74,4 +74,29 @@ export class WalletPage {
     await btn.focus()
     await this.page.keyboard.press('Space')
   }
+
+  /**
+   * Enables testnets in the wallet settings
+   */
+  async enableTestnets() {
+    await this.page.waitForLoadState()
+    const settingsButton = this.page.getByTestId('settings')
+    await settingsButton.click()
+    const testnetSwitch = this.page.getByTestId('settings-toggle-testnets')
+    await testnetSwitch.click()
+    expect(testnetSwitch).toHaveAttribute('data-state', 'checked')
+  }
+
+  /**
+   * Switches the network in the wallet
+   * @param network the network id to switch (e.g. eip155:1 for Ethereum Mainnet)
+   */
+  async switchNetwork(network: string) {
+    await this.page.waitForLoadState()
+    const networkButton = this.page.getByTestId('accounts')
+    await networkButton.click()
+    const switchNetworkButton = this.page.getByTestId(`chain-switch-button${network}`)
+    await switchNetworkButton.click()
+    await expect(switchNetworkButton).toHaveText('✅')
+  }
 }
diff --git a/apps/laboratory/tests/shared/validators/ModalValidator.ts b/apps/laboratory/tests/shared/validators/ModalValidator.ts
@@ -116,4 +116,14 @@ export class ModalValidator {
 
     expect(accounts.length).toBeGreaterThan(1)
   }
+
+  async expectNetworkNotSupportedVisible() {
+    const networkNotSupportedMessage = this.page.getByText(
+      'This app doesn’t support your current network. Switch to an available option to continue.'
+    )
+    await expect(
+      networkNotSupportedMessage,
+      'Network not supported message should be visible'
+    ).toBeVisible()
+  }
 }
diff --git a/apps/laboratory/tests/wallet.spec.ts b/apps/laboratory/tests/wallet.spec.ts
@@ -78,3 +78,16 @@ testConnectedMW('it should show multiple accounts', async ({ modalPage, modalVal
   await modalValidator.expectMultipleAccounts()
   await modalPage.closeModal()
 })
+
+testConnectedMW(
+  'it should show Switch Network modal if network is not supported',
+  async ({ modalPage, modalValidator, walletPage }) => {
+    if (modalPage.library === 'solana') {
+      return
+    }
+    await walletPage.enableTestnets()
+    await walletPage.switchNetwork('eip155:5')
+    await modalValidator.expectNetworkNotSupportedVisible()
+    await modalPage.closeModal()
+  }
+)
diff --git a/packages/core/src/controllers/NetworkController.ts b/packages/core/src/controllers/NetworkController.ts
@@ -91,7 +91,11 @@ export const NetworkController = {
     PublicStateController.set({ activeChain: chain, selectedNetworkId: caipNetwork?.id })
 
     if (!ChainController.state.chains.get(chain)?.networkState?.allowUnsupportedChain) {
-      this.checkIfSupportedNetwork()
+      const isSupported = this.checkIfSupportedNetwork()
+
+      if (!isSupported) {
+        this.showUnsupportedChainUI()
+      }
     }
   },
 
@@ -258,9 +262,7 @@ export const NetworkController = {
   },
 
   checkIfSupportedNetwork() {
-    const chain = ChainController.state.multiChainEnabled
-      ? ChainController.state.activeChain
-      : ChainController.state.activeChain
+    const chain = ChainController.state.activeChain
 
     if (!chain) {
       return false