fix: RPC requests causing modal to close (#2799)

reown-com · Sep 6, 2024 · 854a8a4 · 854a8a4
1 parent 40ff6ef
commit 854a8a4
Show file tree

Hide file tree

Showing 19 changed files with 367 additions and 395 deletions.
diff --git a/apps/laboratory/tests/email.spec.ts b/apps/laboratory/tests/email.spec.ts
@@ -63,14 +63,10 @@ emailTest('it should reject sign', async () => {
   await validator.expectRejectedSign()
 })
 
-emailTest('it should switch network and sign', async ({ library }) => {
+emailTest('it should switch network and sign', async () => {
   let targetChain = 'Polygon'
   await page.goToSettings()
   await page.switchNetwork(targetChain)
-  if (library === 'wagmi') {
-    // In wagmi, after switching network, it closes the modal
-    await page.goToSettings()
-  }
   await validator.expectSwitchedNetwork(targetChain)
   await page.closeModal()
   await page.sign()
@@ -80,9 +76,6 @@ emailTest('it should switch network and sign', async ({ library }) => {
   targetChain = 'Ethereum'
   await page.goToSettings()
   await page.switchNetwork(targetChain)
-  // After switching network, it closes the modal
-  await page.goToSettings()
-
   await validator.expectSwitchedNetwork(targetChain)
   await page.closeModal()
   await page.sign()

diff --git a/apps/laboratory/tests/shared/pages/ModalWalletPage.ts b/apps/laboratory/tests/shared/pages/ModalWalletPage.ts
@@ -36,7 +36,8 @@ export class ModalWalletPage extends ModalPage {
 
   override async switchNetwork(network: string) {
     await this.page.getByTestId('account-switch-network-button').click()
-    await this.page.getByTestId(`w3m-network-switch-${network}`).click()
+    const networkToSwitchButton = this.page.getByTestId(`w3m-network-switch-${network}`)
+    await networkToSwitchButton.click()
   }
 
   async togglePreferredAccountType() {

diff --git a/apps/laboratory/tests/shared/utils/project.ts b/apps/laboratory/tests/shared/utils/project.ts
@@ -44,25 +44,21 @@ const SOLANA_DISABLED_TESTS = [
   'wallet-features.spec.ts',
   'metamask.spec.ts'
 ]
-const WAGMI_DISABLED_TESTS = ['metamask.spec.ts', 'smart-account.spec.ts']
+const WAGMI_DISABLED_TESTS = ['metamask.spec.ts']
 const ETHERS_DISABLED_TESTS = ['metamask.spec.ts']
 const ETHERS5_DISABLED_TESTS = [
   'metamask.spec.ts',
-  'smart-account.spec.ts',
   'email.spec.ts',
-  'smart-account.spec.ts',
   'wallet-features.spec.ts',
+  'smart-account.spec.ts',
   'siwe-email.spec.ts',
   'siwe-sa.spec.ts'
 ]
 
 const ETHERS_EMAIL_BASED_REGEX = new RegExp(ETHERS_DISABLED_TESTS.join('|'), 'u')
 const ETHERS5_EMAIL_BASED_REGEX = new RegExp(ETHERS5_DISABLED_TESTS.join('|'), 'u')
 const WAGMI_DISABLED_TESTS_REGEX = new RegExp(WAGMI_DISABLED_TESTS.join('|'), 'u')
-const WAGMI_DISABLED_TESTS_REGEX_FF = new RegExp(
-  [...WAGMI_DISABLED_TESTS, 'metamask.spec.ts'].join('|'),
-  'u'
-)
+const WAGMI_DISABLED_TESTS_REGEX_FF = new RegExp([...WAGMI_DISABLED_TESTS].join('|'), 'u')
 const SOLANA_DISABLED_TESTS_REGEX = new RegExp(SOLANA_DISABLED_TESTS.join('|'), 'u')
 
 const customProjectProperties: CustomProjectProperties = {

diff --git a/apps/laboratory/tests/shared/validators/ModalValidator.ts b/apps/laboratory/tests/shared/validators/ModalValidator.ts
@@ -102,14 +102,14 @@ export class ModalValidator {
     expect(secureSiteIframe).toBeNull()
   }
 
-  expectNoSocials() {
+  async expectNoSocials() {
     const socialList = this.page.getByTestId('wui-list-social')
-    expect(socialList).toBeHidden()
+    await expect(socialList).toBeHidden()
   }
 
-  expectEmailLogin() {
+  async expectEmailLogin() {
     const emailInput = this.page.getByTestId('wui-email-input')
-    expect(emailInput).toBeVisible()
+    await expect(emailInput).toBeVisible()
   }
 
   async expectValidSignature(signature: `0x${string}`, address: `0x${string}`, chainId: number) {

diff --git a/apps/laboratory/tests/siwe-email.spec.ts b/apps/laboratory/tests/siwe-email.spec.ts
@@ -65,15 +65,12 @@ emailSiweTest('it should reject sign', async () => {
   await validator.expectRejectedSign()
 })
 
-emailSiweTest('it should switch network and sign', async ({ library }) => {
+emailSiweTest('it should switch network and sign', async () => {
   let targetChain = 'Polygon'
   await page.goToSettings()
   await page.switchNetwork(targetChain)
   await page.promptSiwe()
   await page.approveSign()
-  if (library === 'wagmi') {
-    await page.goToSettings()
-  }
   await validator.expectSwitchedNetwork(targetChain)
   await page.closeModal()
   await page.sign()
@@ -85,9 +82,6 @@ emailSiweTest('it should switch network and sign', async ({ library }) => {
   await page.switchNetwork(targetChain)
   await page.promptSiwe()
   await page.approveSign()
-  if (library === 'wagmi') {
-    await page.goToSettings()
-  }
   await validator.expectSwitchedNetwork(targetChain)
   await page.closeModal()
   await page.sign()

diff --git a/apps/laboratory/tests/siwe-sa.spec.ts b/apps/laboratory/tests/siwe-sa.spec.ts
@@ -64,24 +64,18 @@ smartAccountSiweTest('it should upgrade wallet', async () => {
   await page.closeModal()
 })
 
-smartAccountSiweTest(
-  'it should switch to a smart account enabled network and sign',
-  async ({ library }) => {
-    const targetChain = 'Sepolia'
-    await page.goToSettings()
-    await page.switchNetwork(targetChain)
-    await page.promptSiwe()
-    await page.approveSign()
-    if (library === 'wagmi') {
-      await page.goToSettings()
-    }
-    await validator.expectSwitchedNetwork(targetChain)
-    await page.closeModal()
-    await page.sign()
-    await page.approveSign()
-    await validator.expectAcceptedSign()
-  }
-)
+smartAccountSiweTest('it should switch to a smart account enabled network and sign', async () => {
+  const targetChain = 'Sepolia'
+  await page.goToSettings()
+  await page.switchNetwork(targetChain)
+  await page.promptSiwe()
+  await page.approveSign()
+  await validator.expectSwitchedNetwork(targetChain)
+  await page.closeModal()
+  await page.sign()
+  await page.approveSign()
+  await validator.expectAcceptedSign()
+})
 
 /**
  * After switching to Etherum, the signing the SIWE throws the following Magic error:

diff --git a/apps/laboratory/tests/smart-account.spec.ts b/apps/laboratory/tests/smart-account.spec.ts
@@ -72,9 +72,7 @@ smartAccountTest('it should switch to a not enabled network and sign with EOA',
   const targetChain = 'Ethereum'
   await page.goToSettings()
   await page.switchNetwork(targetChain)
-
-  await page.page.waitForTimeout(2000)
-  await page.goToSettings()
+  await validator.expectSwitchedNetwork(targetChain)
   await validator.expectTogglePreferredTypeVisible(false)
   await page.closeModal()
 
@@ -88,12 +86,13 @@ smartAccountTest('it should switch to smart account and sign', async () => {
   await page.goToSettings()
   await page.switchNetwork(targetChain)
   await validator.expectSwitchedNetwork(targetChain)
-
   await page.togglePreferredAccountType()
-  await page.goToSettings()
   await validator.expectChangePreferredAccountToShow(EOA)
   await page.closeModal()
 
+  // Need some time for Lab UI to refresh state
+  await page.page.waitForTimeout(1000)
+
   await page.sign()
   await page.approveSign()
   await validator.expectAcceptedSign()
@@ -108,10 +107,12 @@ smartAccountTest('it should switch to smart account and sign', async () => {
 smartAccountTest('it should switch to eoa and sign', async () => {
   await page.goToSettings()
   await page.togglePreferredAccountType()
-  await page.goToSettings()
   await validator.expectChangePreferredAccountToShow(SMART_ACCOUNT)
   await page.closeModal()
 
+  // Need some time for Lab UI to refresh state
+  await page.page.waitForTimeout(1000)
+
   await page.sign()
   await page.approveSign()
   await validator.expectAcceptedSign()

diff --git a/apps/laboratory/tests/wallet-features.spec.ts b/apps/laboratory/tests/wallet-features.spec.ts
@@ -65,12 +65,9 @@ walletFeaturesTest('it should initialize onramp as expected', async () => {
   await page.closeModal()
 })
 
-walletFeaturesTest('it should find account name as expected', async ({ library }) => {
+walletFeaturesTest('it should find account name as expected', async () => {
   await page.goToSettings()
   await page.switchNetwork('Polygon')
-  if (library === 'wagmi') {
-    await page.goToSettings()
-  }
   await validator.expectSwitchedNetwork('Polygon')
 
   await page.openChooseNameIntro()

diff --git a/packages/base/adapters/evm/ethers/client.ts b/packages/base/adapters/evm/ethers/client.ts
@@ -1093,19 +1093,8 @@ export class EVMEthersClient implements ChainAdapter<EthersStoreUtilState, numbe
     if (this.authProvider) {
       this.authProvider.onRpcRequest(request => {
         if (W3mFrameHelpers.checkIfRequestExists(request)) {
-          if (!W3mFrameHelpers.checkIfRequestIsAllowed(request)) {
-            if (this.appKit?.isOpen()) {
-              if (this.appKit?.isTransactionStackEmpty()) {
-                return
-              }
-              if (this.appKit?.isTransactionShouldReplaceView()) {
-                this.appKit?.replace('ApproveTransaction')
-              } else {
-                this.appKit?.redirect('ApproveTransaction')
-              }
-            } else {
-              this.appKit?.open({ view: 'ApproveTransaction' })
-            }
+          if (!W3mFrameHelpers.checkIfRequestIsSafe(request)) {
+            this.appKit?.handleUnsafeRPCRequest()
           }
         } else {
           this.appKit?.open()
@@ -1131,7 +1120,12 @@ export class EVMEthersClient implements ChainAdapter<EthersStoreUtilState, numbe
         }
       })
 
-      this.authProvider.onRpcSuccess(() => {
+      this.authProvider.onRpcSuccess((_, request) => {
+        const isSafeRequest = W3mFrameHelpers.checkIfRequestIsSafe(request)
+        if (isSafeRequest) {
+          return
+        }
+
         if (this.appKit?.isTransactionStackEmpty()) {
           this.appKit?.close()
         } else {
@@ -1312,7 +1306,7 @@ export class EVMEthersClient implements ChainAdapter<EthersStoreUtilState, numbe
           chainId,
           name: chain.name
         })
-        if (jsonRpcProvider) {
+        if (jsonRpcProvider && jsonRpcProvider.ready) {
           const balance = await jsonRpcProvider.getBalance(address)
           const formattedBalance = formatEther(balance)
 

diff --git a/packages/base/adapters/evm/ethers5/client.ts b/packages/base/adapters/evm/ethers5/client.ts
@@ -935,19 +935,9 @@ export class EVMEthers5Client implements ChainAdapter<EthersStoreUtilState, numb
     if (this.authProvider) {
       this.authProvider.onRpcRequest(request => {
         if (W3mFrameHelpers.checkIfRequestExists(request)) {
-          if (!W3mFrameHelpers.checkIfRequestIsAllowed(request)) {
-            if (this.appKit?.isOpen()) {
-              if (this.appKit?.isTransactionStackEmpty()) {
-                return
-              }
-              if (this.appKit?.isTransactionShouldReplaceView()) {
-                this.appKit?.replace('ApproveTransaction')
-              } else {
-                this.appKit?.redirect('ApproveTransaction')
-              }
-            } else {
-              this.appKit?.open({ view: 'ApproveTransaction' })
-            }
+          // If it's not a safe request, show the approve transaction modal
+          if (!W3mFrameHelpers.checkIfRequestIsSafe(request)) {
+            this.appKit?.handleUnsafeRPCRequest()
           }
         } else {
           this.appKit?.open()
@@ -973,7 +963,13 @@ export class EVMEthers5Client implements ChainAdapter<EthersStoreUtilState, numb
         }
       })
 
-      this.authProvider.onRpcSuccess(() => {
+      this.authProvider.onRpcSuccess((_, request) => {
+        const isSafeRequest = W3mFrameHelpers.checkIfRequestIsSafe(request)
+
+        if (isSafeRequest) {
+          return
+        }
+
         if (this.appKit?.isTransactionStackEmpty()) {
           this.appKit?.close()
         } else {

diff --git a/packages/base/adapters/evm/wagmi/client.ts b/packages/base/adapters/evm/wagmi/client.ts
@@ -13,11 +13,11 @@ import {
   writeContract as wagmiWriteContract,
   getAccount,
   getEnsAddress as wagmiGetEnsAddress,
-  reconnect,
   switchChain,
   waitForTransactionReceipt,
   getConnections,
-  switchAccount
+  switchAccount,
+  reconnect
 } from '@wagmi/core'
 import type { ChainAdapter, OptionsControllerState } from '@web3modal/core'
 import { mainnet } from 'viem/chains'
@@ -242,16 +242,6 @@ export class EVMWagmiClient implements ChainAdapter {
         await connect(this.wagmiConfig, { connector, chainId })
       },
 
-      reconnectExternal: async ({ id }) => {
-        const connector = this.wagmiConfig.connectors.find(c => c.id === id)
-
-        if (!connector) {
-          throw new Error('connectionControllerClient:connectExternal - connector is undefined')
-        }
-
-        await reconnect(this.wagmiConfig, { connectors: [connector] })
-      },
-
       checkInstalled: ids => {
         const injectedConnector = this.appKit
           ?.getConnectors()
@@ -470,10 +460,10 @@ export class EVMWagmiClient implements ChainAdapter {
     >
   >) {
     const caipAddress: CaipAddress = `${ConstantsUtil.EIP155}:${chainId}:${address}`
-
     if (this.appKit?.getCaipAddress() === caipAddress) {
       return
     }
+
     if (status === 'connected' && address && chainId) {
       this.syncNetwork(address, chainId, true)
       this.appKit?.setIsConnected(true, this.chain)
@@ -718,19 +708,8 @@ export class EVMWagmiClient implements ChainAdapter {
 
       provider.onRpcRequest((request: W3mFrameTypes.RPCRequest) => {
         if (W3mFrameHelpers.checkIfRequestExists(request)) {
-          if (!W3mFrameHelpers.checkIfRequestIsAllowed(request)) {
-            if (this.appKit?.isOpen()) {
-              if (this.appKit?.isTransactionStackEmpty()) {
-                return
-              }
-              if (this.appKit?.isTransactionShouldReplaceView()) {
-                this.appKit?.replace('ApproveTransaction')
-              } else {
-                this.appKit?.redirect('ApproveTransaction')
-              }
-            } else {
-              this.appKit?.open({ view: 'ApproveTransaction' })
-            }
+          if (!W3mFrameHelpers.checkIfRequestIsSafe(request)) {
+            this.appKit?.handleUnsafeRPCRequest()
           }
         } else {
           this.appKit?.open()
@@ -757,7 +736,12 @@ export class EVMWagmiClient implements ChainAdapter {
         }
       })
 
-      provider.onRpcSuccess(() => {
+      provider.onRpcSuccess((_, request) => {
+        const isSafeRequest = W3mFrameHelpers.checkIfRequestIsSafe(request)
+        if (isSafeRequest) {
+          return
+        }
+
         if (this.appKit?.isTransactionStackEmpty()) {
           this.appKit?.close()
         } else {
@@ -801,12 +785,7 @@ export class EVMWagmiClient implements ChainAdapter {
           return
         }
         this.appKit?.setPreferredAccountType(type as W3mFrameTypes.AccountType, this.chain)
-        this.syncAccount({
-          address: address as `0x${string}`,
-          isConnected: true,
-          chainId: NetworkUtil.caipNetworkIdToNumber(this.appKit?.getCaipNetwork()?.id),
-          connector
-        })
+        reconnect(this.wagmiConfig, { connectors: [connector] })
       })
     }
   }