OKX Wallet

packages/wallets/src/metamask/helper.ts

@@ -0,0 +1,13 @@
+const MMPopularNetworks = [
+  'zkSync Era Mainnet',
+  'OP Mainnet',
+  'Arbitrum One',
+  'Polygon Mainnet',
+  'Base Mainnet',
+  'Binance Smart Chain',
+  'Linea',
+];
+
+export async function isPopularNetwork(networkName: string) {
+  return MMPopularNetworks.includes(networkName);
+}

packages/wallets/src/metamask/metamask.page.ts

@@ -12,12 +12,12 @@ import {
   AccountMenu,
 } from './pages/elements';
 import { getAddress } from 'viem';
+import { isPopularNetwork } from './helper';
 
 export class MetamaskPage implements WalletPage {
   page: Page | undefined;
   header: Header;
   homePage: HomePage;
-  settingsPage: SettingsPage;
   loginPage: LoginPage;
   walletOperation: WalletOperationPage;
   onboardingPage: OnboardingPage;
@@ -35,11 +35,6 @@ export class MetamaskPage implements WalletPage {
     this.page = await this.browserContext.newPage();
     this.header = new Header(this.page);
     this.homePage = new HomePage(this.page, this.extensionUrl, this.config);
-    this.settingsPage = new SettingsPage(
-      this.page,
-      this.extensionUrl,
-      this.config,
-    );
     this.loginPage = new LoginPage(this.page, this.config);
     this.walletOperation = new WalletOperationPage(this.page);
     this.onboardingPage = new OnboardingPage(this.page, this.config);
@@ -70,7 +65,11 @@ export class MetamaskPage implements WalletPage {
         await this.popoverElements.closePopover();
         await this.walletOperation.cancelAllTxInQueue(); // reject all tx in queue if exist
       }
-      await this.settingsPage.setupNetworkChangingSetting(); // need to make it possible to change the wallet network
+      await new SettingsPage(
+        await this.browserContext.newPage(),
+        this.extensionUrl,
+        this.config,
+      ).setupNetworkChangingSetting(); // need to make it possible to change the wallet network
     });
   }
 
@@ -79,21 +78,13 @@ export class MetamaskPage implements WalletPage {
       await this.navigate();
       await this.header.networkListButton.click();
       await this.header.networkList.clickToNetwork(networkName);
-      if (networkName === 'Linea Mainnet') {
+      if (networkName === 'Linea') {
         await this.popoverElements.closePopover(); //Linea network require additional confirmation
       }
       await this.page.close();
     });
   }
 
-  async switchNetwork(networkName = 'Linea Mainnet') {
-    await test.step(`Switch network to "${networkName}"`, async () => {
-      await this.navigate();
-      await this.header.networkList.switchNetwork(networkName);
-      await this.page.close();
-    });
-  }
-
   async setupNetwork(standConfig: Record<string, any>) {
     await test.step(`Setup "${standConfig.chainName}" Network`, async () => {
       await this.header.networkListButton.click();
@@ -130,32 +121,21 @@ export class MetamaskPage implements WalletPage {
   ) {
     await test.step(`Add new network "${networkName}"`, async () => {
       await this.navigate();
-      await this.header.networkList.addNetworkManually(
-        networkName,
-        networkUrl,
-        chainId,
-        tokenSymbol,
-        blockExplorer,
-      );
+      if (await isPopularNetwork(networkName)) {
+        await this.header.networkList.addPopularNetwork(networkName);
+      } else {
+        await this.header.networkList.addNetworkManually(
+          networkName,
+          networkUrl,
+          chainId,
+          tokenSymbol,
+          blockExplorer,
+        );
+      }
       if (isClosePage) await this.page.close();
     });
   }
 
-  async addPopularNetwork(networkName: string) {
-    await this.navigate();
-    await this.header.networkListButton.click();
-    const networkListText = await this.header.networkList.getNetworkListText();
-    if (networkListText.includes(networkName)) {
-      await this.header.networkList.clickToNetworkItemButton(networkName);
-    } else {
-      await test.step(`Add popular network "${networkName}"`, async () => {
-        await this.header.networkList.networkDisplayCloseBtn.click();
-        await this.header.networkList.addPopularNetwork(networkName);
-      });
-    }
-    await this.page.close();
-  }
-
   async importKey(key: string) {
     await test.step('Import key', async () => {
       await this.navigate();
@@ -217,10 +197,14 @@ export class MetamaskPage implements WalletPage {
           .toString()
           .trim();
         if (tokenNameFromValue === tokenName) {
-          tokenBalance = parseFloat(await value.textContent());
+          await value.click();
+          tokenBalance = parseFloat(
+            await this.homePage.tokensListItemValues.textContent(),
+          );
           break;
         }
       }
+      await this.page.close();
       return tokenBalance;
     });
   }

packages/wallets/src/metamask/pages/elements/networkList.element.ts

@@ -119,28 +119,40 @@ export class NetworkList {
   }
 
   async addPopularNetwork(networkName: string) {
-    await test.step(`Open the form to add the popular network (${networkName})`, async () => {
-      await this.networkListButton.click();
-    });
-    await test.step(`Add the "${networkName}" network`, async () => {
-      await this.dialogSection
-        .getByText(networkName)
-        .locator('../../..')
-        .locator('button:has-text("Add")')
-        .click();
-      // Without awaiting the button is not clickable
-      await this.page.waitForTimeout(500);
-      await this.approveAddNetworkButton.click();
-      await this.dialogSection.waitFor({ state: 'hidden' });
-      // Need to wait while the network to be added to the wallet
-      try {
-        await this.page
-          .getByText('Connecting to')
-          .waitFor({ state: 'visible', timeout: 5000 });
-        await this.page.getByText('Connecting to').waitFor({ state: 'hidden' });
-      } catch {
-        console.error('Connecting network was without loader');
-      }
-    });
+    await this.networkListButton.click();
+    const networkListText = await this.getNetworkListText();
+    if (networkListText.includes(networkName)) {
+      await this.clickToNetworkItemButton(networkName);
+    } else {
+      await test.step(`Add popular network "${networkName}"`, async () => {
+        await this.networkDisplayCloseBtn.click();
+        await test.step(`Open the form to add the popular network (${networkName})`, async () => {
+          await this.networkListButton.click();
+        });
+        await test.step(`Add the "${networkName}" network`, async () => {
+          await this.dialogSection
+            .getByText(networkName)
+            .locator('../../..')
+            .locator('button:has-text("Add")')
+            .click();
+          // Without awaiting the button is not clickable
+          await this.page.waitForTimeout(500);
+          await this.approveAddNetworkButton.click();
+          await this.dialogSection.waitFor({ state: 'hidden' });
+          // Need to wait while the network to be added to the wallet
+          try {
+            await this.page
+              .getByText('Connecting to')
+              .waitFor({ state: 'visible', timeout: 5000 });
+            await this.page
+              .getByText('Connecting to')
+              .waitFor({ state: 'hidden' });
+          } catch {
+            console.error('Connecting network was without loader');
+          }
+        });
+      });
+    }
+    await this.page.close();
   }
 }

packages/wallets/src/metamask/pages/walletOperations.page.ts

@@ -90,6 +90,7 @@ export class WalletOperationPage {
       await this.page.mouse.move(1, 1);
       await this.setHighGasFeeButton.click();
     }
+    await this.confirmButton.waitFor({ state: 'visible', timeout: 30000 });
     await this.confirmButton.click();
   }
 

packages/wallets/src/okx/helper.ts

@@ -0,0 +1,47 @@
+import { BrowserContext } from '@playwright/test';
+
+const incorrectNetworkNames = new Map<string, string>([
+  ['zkSync Era Mainnet', 'zkSync Era'],
+  ['OP Mainnet', 'Optimism'],
+  ['Polygon Mainnet', 'Polygon'],
+  ['Base Mainnet', 'Base'],
+  ['Binance Smart Chain', 'BNB Chain'],
+  ['Mantle Mainnet', 'Mantle'],
+  ['Scroll Mainnet', 'Scroll'],
+  ['Mode', 'Mode Network'],
+]);
+
+const OkxIncludedNetwork = [
+  'Linea',
+  'zkSync Era',
+  'Polygon',
+  'Base',
+  'BNB Chain',
+  'Mantle',
+  'Scroll',
+  'Mode Network',
+  'Zircuit',
+];
+
+/** Check network name and return correct name suited for OKX Wallet*/
+export function getCorrectNetworkName(networkName: string) {
+  for (const [incorrectName, correctName] of incorrectNetworkNames.entries()) {
+    if (networkName === incorrectName) {
+      return correctName;
+    }
+  }
+  return networkName;
+}
+
+export async function closeUnnecessaryPages(browserContext: BrowserContext) {
+  const pages = browserContext.pages().slice(1);
+  for (const page of pages) {
+    await page.close();
+  }
+}
+
+/** Before AddNetwork() we check the network is included in wallet or not*/
+export async function isNeedAddNetwork(network: string) {
+  const networkName = await getCorrectNetworkName(network);
+  return !OkxIncludedNetwork.includes(networkName);
+}