fix: load transactions only when needed

.changeset/empty-mangos-push.md

@@ -0,0 +1,18 @@
+---
+'@reown/appkit-coinbase-ethers-react-native': patch
+'@reown/appkit-coinbase-wagmi-react-native': patch
+'@reown/appkit-scaffold-utils-react-native': patch
+'@reown/appkit-auth-ethers-react-native': patch
+'@reown/appkit-auth-wagmi-react-native': patch
+'@reown/appkit-scaffold-react-native': patch
+'@reown/appkit-ethers5-react-native': patch
+'@reown/appkit-common-react-native': patch
+'@reown/appkit-ethers-react-native': patch
+'@reown/appkit-wagmi-react-native': patch
+'@reown/appkit-core-react-native': patch
+'@reown/appkit-siwe-react-native': patch
+'@reown/appkit-ui-react-native': patch
+'@reown/appkit-wallet-react-native': patch
+---
+
+fix: load transactions when needed

.maestro/w3m-connect-flow.yaml

@@ -57,7 +57,7 @@ appId: com.walletconnect.web3modal.rnclisdk
     id: 'account-button'
 
 - tapOn:
-    id: 'w3m-account-select-network'
+    id: 'button-network'
 
 - tapOn:
     text: 'Polygon'
@@ -68,7 +68,7 @@ appId: com.walletconnect.web3modal.rnclisdk
     text: 'Polygon'
 
 - tapOn:
-    id: 'disconnect-button'
+    id: 'button-disconnect'
 
 - assertVisible:
     id: 'connect-button'

apps/native/tests/shared/constants/index.ts

@@ -8,4 +8,20 @@ export const DEFAULT_SESSION_PARAMS: SessionParams = {
   optAccounts: ['1', '2'],
   accept: true
 };
-export const DEFAULT_CHAIN_NAME = process.env.DEFAULT_CHAIN_NAME || 'Ethereum';
+
+export const TEST_CHAINS = {
+  POLYGON: 'Polygon',
+  ETHEREUM: 'Ethereum',
+  GNOSIS: 'Gnosis'
+} as const;
+
+export type SupportedChain = (typeof TEST_CHAINS)[keyof typeof TEST_CHAINS];
+
+export const TIMEOUTS = {
+  ANIMATION: 300,
+  NETWORK_SWITCH: 500,
+  CONNECTION: 5000,
+  SESSION_PROPOSAL: 30000
+} as const;
+
+export const DEFAULT_CHAIN_NAME = process.env.DEFAULT_CHAIN_NAME || TEST_CHAINS.ETHEREUM;

apps/native/tests/shared/pages/ModalPage.ts

@@ -1,9 +1,9 @@
 import type { Locator, Page } from '@playwright/test';
 import { expect } from '@playwright/test';
-import { BASE_URL, DEFAULT_SESSION_PARAMS } from '../constants';
+import { BASE_URL, DEFAULT_SESSION_PARAMS, TIMEOUTS } from '../constants';
 import { WalletValidator } from '../validators/WalletValidator';
 import { WalletPage } from './WalletPage';
-import { TimingRecords } from '../types';
+import { SupportedChain, TimingRecords } from '../types';
 import { ModalValidator } from '../validators/ModalValidator';
 
 export class ModalPage {
@@ -92,7 +92,7 @@ export class ModalPage {
     await expect(accountBtn, 'Account button should be visible').toBeVisible();
     await expect(accountBtn, 'Account button should be enabled').toBeEnabled();
     await accountBtn.click();
-    const disconnectBtn = this.page.getByTestId('disconnect-button');
+    const disconnectBtn = this.page.getByTestId('button-disconnect');
     await expect(disconnectBtn, 'Disconnect button should be visible').toBeVisible();
     await expect(disconnectBtn, 'Disconnect button should be enabled').toBeEnabled();
     await disconnectBtn.click();
@@ -125,20 +125,12 @@ export class ModalPage {
   //   await this.page.getByTestId('w3m-connecting-siwe-cancel').click();
   // }
 
-  async switchNetwork(network: string) {
-    await this.openAccountModal();
-    await this.page.getByTestId('w3m-account-select-network').click();
+  async switchNetwork(network: SupportedChain) {
     await this.page.getByTestId(`w3m-network-switch-${network}`).click();
-    // The state is chaing too fast and test runner doesn't wait the loading page. It's fastly checking the network selection button and detect that it's switched already.
-    await this.page.waitForTimeout(300);
+    // The state is changing too fast and test runner doesn't wait for the loading page
+    await this.page.waitForTimeout(TIMEOUTS.NETWORK_SWITCH);
   }
 
-  // async clickWalletDeeplink() {
-  //   await this.connectButton.click();
-  //   await this.page.getByTestId('wallet-selector-react-wallet-v2').click();
-  //   await this.page.getByTestId('tab-desktop').click();
-  // }
-
   async openAccountModal() {
     await this.page.getByTestId('account-button').click();
   }
@@ -154,17 +146,9 @@ export class ModalPage {
   async closeModal() {
     await this.page.getByTestId('header-close')?.click?.();
     // Wait for the modal fade out animation
-    await this.page.waitForTimeout(300);
+    await this.page.waitForTimeout(TIMEOUTS.ANIMATION);
   }
 
-  // async switchNetworkWithNetworkButton(networkName: string) {
-  //   const networkButton = this.page.getByTestId('wui-network-button');
-  //   await networkButton.click();
-
-  //   const networkToSwitchButton = this.page.getByTestId(`w3m-network-switch-${networkName}`);
-  //   await networkToSwitchButton.click();
-  // }
-
   async openAllWallets() {
     const allWallets = this.page.getByTestId('all-wallets');
     await expect(allWallets, 'All wallets should be visible').toBeVisible();
@@ -177,18 +161,6 @@ export class ModalPage {
     await qrCodeButton.click();
   }
 
-  // async clickAllWalletsListSearchItem(id: string) {
-  //   const allWalletsListSearchItem = this.page.getByTestId(`wallet-search-item-${id}`);
-  //   await expect(allWalletsListSearchItem).toBeVisible();
-  //   await allWalletsListSearchItem.click();
-  // }
-
-  // async clickTabWebApp() {
-  //   const tabWebApp = this.page.getByTestId('tab-webapp');
-  //   await expect(tabWebApp).toBeVisible();
-  //   await tabWebApp.click();
-  // }
-
   async clickHookDisconnectButton() {
     const disconnectHookButton = this.page.getByTestId('disconnect-hook-button');
     await expect(disconnectHookButton).toBeVisible();
@@ -216,64 +188,37 @@ export class ModalPage {
     return this.page.evaluate(() => navigator.clipboard.readText());
   }
 
-  // async clickOpenWebApp() {
-  //   let url = '';
-
-  //   const openButton = this.page.getByTestId('w3m-connecting-widget-secondary-button');
-  //   await expect(openButton).toBeVisible();
-  //   await expect(openButton).toHaveText('Open');
-
-  //   while (!url) {
-  //     await openButton.click();
-  //     await this.page.waitForTimeout(500);
-
-  //     const pages = this.page.context().pages();
-
-  //     // Check if more than 1 tab is open
-  //     if (pages.length > 1) {
-  //       const lastTab = pages[pages.length - 1];
-
-  //       if (lastTab) {
-  //         url = lastTab.url();
-  //         break;
-  //       }
-  //     }
-  //   }
-
-  //   return url;
-  // }
-
   async search(value: string) {
     const searchInput = this.page.getByTestId('wui-input-text');
     await expect(searchInput, 'Search input should be visible').toBeVisible();
     await searchInput.click();
     await searchInput.fill(value);
   }
 
-  async openNetworks() {
-    await this.page.getByTestId('w3m-account-select-network').click();
+  async goToNetworks() {
+    await this.page.getByTestId('button-network').click();
     await expect(this.page.getByText('Select network')).toBeVisible();
   }
 
-  // async openProfileView() {
-  //   await this.page.getByTestId('wui-profile-button').click();
-  // }
-
-  // async getAddress(): Promise<`0x${string}`> {
-  //   const address = await this.page.getByTestId('w3m-address').textContent();
-  //   expect(address, 'Address should be present').toBeTruthy();
-
-  //   return address as `0x${string}`;
-  // }
+  async goToActivity() {
+    await this.page.getByTestId('button-activity').click();
+  }
 
-  // async getChainId(): Promise<number> {
-  //   const chainId = await this.page.getByTestId('w3m-chain-id').textContent();
-  //   expect(chainId, 'Chain ID should be present').toBeTruthy();
+  async goBack() {
+    await this.page.getByTestId('button-back').click();
+  }
 
-  //   return Number(chainId);
-  // }
+  async expectLoaderVisible() {
+    await expect(
+      this.page.getByTestId('loading-spinner'),
+      'Loading spinner should be visible'
+    ).toBeVisible();
+  }
 
-  // async switchNetworkWithHook() {
-  //   await this.page.getByTestId('switch-network-hook-button').click();
-  // }
+  async expectLoaderHidden() {
+    await expect(
+      this.page.getByTestId('loading-spinner'),
+      'Loading spinner should be hidden'
+    ).toBeHidden();
+  }
 }

apps/native/tests/shared/pages/WalletPage.ts

@@ -117,9 +117,23 @@ export class WalletPage {
     await this.page.waitForLoadState();
     const sessionsButton = this.page.getByTestId('sessions');
     await sessionsButton.click();
-    const sessionCard = this.page.getByTestId(`session-card`);
-    await sessionCard.click();
-    const disconnectButton = this.page.getByText('Delete');
-    await disconnectButton.click();
+
+    // Try to disconnect all visible session cards
+    while (true) {
+      const sessionCards = this.page.getByTestId('session-card');
+      const count = await sessionCards.count();
+
+      if (count === 0) {
+        break;
+      }
+
+      // Click the first card and disconnect it
+      await sessionCards.first().click();
+      const disconnectButton = this.page.getByText('Delete');
+      await disconnectButton.click();
+
+      // Wait a bit for the disconnection to complete
+      await this.page.waitForTimeout(500);
+    }
   }
 }

apps/native/tests/shared/types/index.ts

@@ -1,3 +1,5 @@
+import { TEST_CHAINS } from '../constants';
+
 export interface SessionParams {
   reqAccounts: string[];
   optAccounts: string[];
@@ -7,3 +9,5 @@ export interface SessionParams {
 export type TimingRecords = { item: string; timeMs: number }[];
 
 export type CaipNetworkId = `${string}:${string}`;
+
+export type SupportedChain = (typeof TEST_CHAINS)[keyof typeof TEST_CHAINS];

apps/native/tests/shared/utils/timeouts.ts

@@ -1,9 +1,9 @@
-import { MAXIMUM_WAIT_CONNECTIONS } from '../constants/timeouts';
+import { TIMEOUTS } from '../constants';
 
 export function getMaximumWaitConnections(): number {
   if (process.env.CI) {
-    return MAXIMUM_WAIT_CONNECTIONS;
+    return TIMEOUTS.SESSION_PROPOSAL;
   }
 
-  return MAXIMUM_WAIT_CONNECTIONS * 2;
+  return TIMEOUTS.SESSION_PROPOSAL * 2;
 }

apps/native/tests/shared/validators/ModalValidator.ts

@@ -82,16 +82,6 @@ export class ModalValidator {
     await expect(address, 'Correct address should be present').toHaveText(expectedAddress);
   }
 
-  // async expectNetwork(network: string) {
-  //   const networkButton = this.page.getByTestId('w3m-account-select-network');
-  //   await expect(networkButton, `Network button should contain text ${network}`).toHaveText(
-  //     network,
-  //     {
-  //       timeout: 5000
-  //     }
-  //   );
-  // }
-
   async expectAcceptedSign() {
     await expect(this.page.getByText('Signature successful')).toBeVisible({
       timeout: 30 * 1000
@@ -103,7 +93,7 @@ export class ModalValidator {
   }
 
   async expectSwitchedNetwork(network: string) {
-    const switchNetworkButton = this.page.getByTestId(`w3m-account-select-network-text`);
+    const switchNetworkButton = this.page.getByTestId(`account-select-network-text`);
     await expect(switchNetworkButton).toContainText(network);
   }
 
@@ -132,11 +122,6 @@ export class ModalValidator {
     await expect(getAWalletView).toBeVisible();
   }
 
-  // async expectHeaderText(text: string) {
-  //   const headerText = this.page.getByTestId('header-text');
-  //   await expect(headerText).toHaveText(text);
-  // }
-
   async expectNetworksDisabled(name: string) {
     const disabledNetworkButton = this.page.getByTestId(`w3m-network-switch-${name}`);
     disabledNetworkButton.click();