Updated swap/trade page (#3856)

osmosis-labs · Sep 26, 2024 · 3949972 · 3949972
1 parent e9e896a
commit 3949972
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 44 deletions.
diff --git a/packages/web/e2e/pages/swap-page.ts b/packages/web/e2e/pages/swap-page.ts
@@ -1,5 +1,10 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { BrowserContext, expect, Locator, Page } from "@playwright/test";
+import {
+  type BrowserContext,
+  expect,
+  type Locator,
+  type Page,
+} from "@playwright/test";
 
 import { BasePage } from "~/e2e/pages/base-page";
 
@@ -37,7 +42,7 @@ export class SwapPage extends BasePage {
     // we expect that after 2 seconds tokens are loaded and any failure after this point should be considered a bug.
     await this.page.waitForTimeout(2000);
     const currentUrl = this.page.url();
-    console.log("FE opened at: " + currentUrl);
+    console.log(`FE opened at: ${currentUrl}`);
   }
 
   async flipTokenPair() {
@@ -52,7 +57,7 @@ export class SwapPage extends BasePage {
     await this.page.waitForTimeout(2000);
     await expect(this.swapInput).toHaveValue(amount, { timeout: 3000 });
     const exchangeRate = await this.getExchangeRate();
-    console.log("Swap " + amount + " with rate: " + exchangeRate);
+    console.log(`Swap ${amount} with rate: ${exchangeRate}`);
   }
 
   async swapAndGetWalletMsg(context: BrowserContext) {
@@ -68,15 +73,15 @@ export class SwapPage extends BasePage {
     const approvePage = await pageApprove;
     await approvePage.waitForLoadState();
     const approvePageTitle = approvePage.url();
-    console.log("Approve page is opened at: " + approvePageTitle);
+    console.log(`Approve page is opened at: ${approvePageTitle}`);
     const approveBtn = approvePage.getByRole("button", {
       name: "Approve",
     });
     await expect(approveBtn).toBeEnabled();
     const msgContentAmount = await approvePage
       .getByText("type: osmosis/poolmanager/")
       .textContent();
-    console.log("Wallet is approving this msg: \n" + msgContentAmount);
+    console.log(`Wallet is approving this msg: \n${msgContentAmount}`);
     // Approve trx
     await approveBtn.click();
     // wait for trx confirmation
@@ -88,53 +93,51 @@ export class SwapPage extends BasePage {
 
   async selectPair(from: string, to: string) {
     // Filter does not show already selected tokens
-    console.log("Select pair " + from + " to " + to);
+    console.log(`Select pair ${from} to ${to}`);
     const tokenLocator =
       '//img[@alt="token icon"]/../..//h5 | //img[@alt="token icon"]/../..//span[@class="subtitle1"]';
     const fromToken = this.page.locator(tokenLocator).nth(0);
     const toToken = this.page.locator(tokenLocator).nth(1);
 
-    let fromTokenText = await fromToken.innerText();
-    let toTokenText = await toToken.innerText();
-    console.log("Current pair: " + fromTokenText + " / " + toTokenText);
+    const fromTokenText = await fromToken.innerText();
+    const toTokenText = await toToken.innerText();
+    console.log(`Current pair: ${fromTokenText} / ${toTokenText}`);
 
-    if (fromTokenText == from && toTokenText == to) {
+    if (fromTokenText === from && toTokenText === to) {
       console.log(
-        "Current pair: " + fromTokenText + toTokenText + " is already matching."
+        `Current pair: ${fromTokenText}${toTokenText} is already matching.`
       );
       return;
     }
 
-    if (fromTokenText == to && toTokenText == from) {
+    if (fromTokenText === to && toTokenText === from) {
       await this.flipTokenPair();
-      console.log(
-        "Current pair: " + fromTokenText + toTokenText + " is fliped."
-      );
+      console.log(`Current pair: ${fromTokenText}${toTokenText} is fliped.`);
       return;
     }
 
-    if (from == toTokenText || to == fromTokenText) {
+    if (from === toTokenText || to === fromTokenText) {
       await this.flipTokenPair();
     }
 
-    if (fromTokenText != from && toTokenText != from) {
+    if (fromTokenText !== from && toTokenText !== from) {
       await fromToken.click();
       // we expect that after 1 second token filter is displayed.
       await this.page.waitForTimeout(1000);
       await this.page.getByPlaceholder("Search").fill(from);
       const fromLocator = this.page.locator(
-        "//div/button[@data-testid]//h6[.='" + from + "']"
+        `//div/button[@data-testid]//h6[.='${from}']`
       );
       await fromLocator.click();
     }
 
-    if (toTokenText != to && fromTokenText != to) {
+    if (toTokenText !== to && fromTokenText !== to) {
       await toToken.click();
       // we expect that after 1 second token filter is displayed.
       await this.page.waitForTimeout(1000);
       await this.page.getByPlaceholder("Search").fill(to);
       const toLocator = this.page.locator(
-        "//div/button[@data-testid]//h6[.='" + to + "']"
+        `//div/button[@data-testid]//h6[.='${to}']`
       );
       await toLocator.click();
     }
@@ -157,7 +160,7 @@ export class SwapPage extends BasePage {
 
   async getTransactionUrl() {
     const trxUrl = await this.trxLink.getAttribute("href");
-    console.log("Trx url: " + trxUrl);
+    console.log(`Trx url: ${trxUrl}`);
     return trxUrl;
   }
 
@@ -181,7 +184,7 @@ export class SwapPage extends BasePage {
   async showSwapInfo() {
     const swapInfo = this.page.locator("//button//span[.='Show details']");
     await swapInfo.click();
-    console.log("Price Impact: " + (await this.getPriceInpact()));
+    console.log(`Price Impact: ${await this.getPriceInpact()}`);
   }
 
   async getPriceInpact() {
@@ -204,9 +207,9 @@ export class SwapPage extends BasePage {
     const fromToken = this.page.locator(tokenLocator).nth(0);
     const toToken = this.page.locator(tokenLocator).nth(1);
 
-    let fromTokenText = await fromToken.innerText();
-    let toTokenText = await toToken.innerText();
-    console.log("Current pair: " + `${fromTokenText}/${toTokenText}`);
+    const fromTokenText = await fromToken.innerText();
+    const toTokenText = await toToken.innerText();
+    console.log(`Current pair: ${fromTokenText}/${toTokenText}`);
     return `${fromTokenText}/${toTokenText}`;
   }
 }
diff --git a/packages/web/e2e/pages/trade-page.ts b/packages/web/e2e/pages/trade-page.ts
@@ -1,5 +1,10 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { BrowserContext, expect, Locator, Page } from "@playwright/test";
+import {
+  type BrowserContext,
+  expect,
+  type Locator,
+  type Page,
+} from "@playwright/test";
 
 import { BasePage } from "~/e2e/pages/base-page";
 
@@ -59,7 +64,7 @@ export class TradePage extends BasePage {
     // we expect that after 2 seconds tokens are loaded and any failure after this point should be considered a bug.
     await this.page.waitForTimeout(2000);
     const currentUrl = this.page.url();
-    console.log("FE opened at: " + currentUrl);
+    console.log(`FE opened at: ${currentUrl}`);
   }
 
   async gotoOrdersHistory(timeout: number = 1) {
@@ -68,7 +73,7 @@ export class TradePage extends BasePage {
     await this.page.waitForTimeout(1000);
     await new Promise((f) => setTimeout(f, timeout * 1000));
     const currentUrl = this.page.url();
-    console.log("FE opened at: " + currentUrl);
+    console.log(`FE opened at: ${currentUrl}`);
   }
 
   async openBuyTab() {
@@ -86,7 +91,7 @@ export class TradePage extends BasePage {
 
   async getLimitPrice() {
     const lp = await this.limitPrice.inputValue();
-    console.log("Current limit price is: " + lp);
+    console.log(`Current limit price is: ${lp}`);
     return lp;
   }
 
@@ -119,7 +124,7 @@ export class TradePage extends BasePage {
     await this.page.waitForTimeout(2000);
     await expect(this.inputAmount).toHaveValue(amount, { timeout: 3000 });
     const exchangeRate = await this.getExchangeRate();
-    console.log("Swap " + amount + " with rate: " + exchangeRate);
+    console.log(`Swap ${amount} with rate: ${exchangeRate}`);
   }
 
   async swapAndGetWalletMsg(context: BrowserContext) {
@@ -136,15 +141,15 @@ export class TradePage extends BasePage {
     const approvePage = await pageApprove;
     await approvePage.waitForLoadState();
     const approvePageTitle = approvePage.url();
-    console.log("Approve page is opened at: " + approvePageTitle);
+    console.log(`Approve page is opened at: ${approvePageTitle}`);
     const approveBtn = approvePage.getByRole("button", {
       name: "Approve",
     });
     await expect(approveBtn).toBeEnabled();
     const msgContentAmount = await approvePage
       .getByText("type: osmosis/poolmanager/")
       .textContent();
-    console.log("Wallet is approving this msg: \n" + msgContentAmount);
+    console.log(`Wallet is approving this msg: \n${msgContentAmount}`);
     // Approve trx
     await approveBtn.click();
     // wait for trx confirmation
@@ -162,14 +167,14 @@ export class TradePage extends BasePage {
     await this.page.waitForTimeout(1000);
     await this.page.getByPlaceholder("Search").fill(token);
     const fromLocator = this.page.locator(
-      "//div/button[@data-testid='token-select-asset']//span[.='" + token + "']"
+      `//div/button[@data-testid='token-select-asset']//span[.='${token}']`
     );
     await fromLocator.click();
   }
 
   async selectPair(from: string, to: string) {
     // Filter does not show already selected tokens
-    console.log("Select pair " + from + " to " + to);
+    console.log(`Select pair ${from} to ${to}`);
     const fromToken = this.page.locator(
       "//div//button[@data-testid='token-in']//img[@alt]"
     );
@@ -218,7 +223,7 @@ export class TradePage extends BasePage {
 
   async getTransactionUrl() {
     const trxUrl = await this.trxLink.getAttribute("href");
-    console.log("Trx url: " + trxUrl);
+    console.log(`Trx url: ${trxUrl}`);
     return trxUrl;
   }
 
@@ -249,7 +254,7 @@ export class TradePage extends BasePage {
   async showSwapInfo() {
     const swapInfo = this.page.locator("//button//span[.='Show details']");
     await swapInfo.click();
-    console.log("Price Impact: " + (await this.getPriceInpact()));
+    console.log(`Price Impact: ${await this.getPriceInpact()}`);
   }
 
   async getPriceInpact() {
@@ -271,9 +276,9 @@ export class TradePage extends BasePage {
     const fromToken = this.page.locator(tokenLocator).nth(0);
     const toToken = this.page.locator(tokenLocator).nth(1);
     await expect(fromToken).toBeVisible({ timeout: 2000 });
-    let fromTokenText = await fromToken.innerText();
-    let toTokenText = await toToken.innerText();
-    console.log("Current pair: " + `${fromTokenText}/${toTokenText}`);
+    const fromTokenText = await fromToken.innerText();
+    const toTokenText = await toToken.innerText();
+    console.log(`Current pair: ${fromTokenText}/${toTokenText}`);
     return `${fromTokenText}/${toTokenText}`;
   }
 
@@ -304,7 +309,7 @@ export class TradePage extends BasePage {
     const msgContentAmount = await approvePage
       .getByText(msgTextLocator)
       .textContent();
-    console.log("Wallet is approving this msg: \n" + msgContentAmount);
+    console.log(`Wallet is approving this msg: \n${msgContentAmount}`);
     // Approve trx
     await approveBtn.click();
     // wait for trx confirmation
@@ -340,7 +345,7 @@ export class TradePage extends BasePage {
     const msgContentAmount = await approvePage
       .getByText(msgTextLocator)
       .textContent();
-    console.log("Wallet is approving this msg: \n" + msgContentAmount);
+    console.log(`Wallet is approving this msg: \n${msgContentAmount}`);
     // Approve trx
     await approveBtn.click();
     // wait for trx confirmation

diff --git a/packages/web/e2e/tests/monitoring.wallet.spec.ts b/packages/web/e2e/tests/monitoring.wallet.spec.ts
@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { BrowserContext, chromium, expect, test } from "@playwright/test";
+import { type BrowserContext, chromium, expect, test } from "@playwright/test";
 import process from "process";
 
 import { TransactionsPage } from "~/e2e/pages/transactions-page";
@@ -13,6 +13,7 @@ test.describe("Test Filled Limit Order feature", () => {
   let context: BrowserContext;
   const privateKey = process.env.PRIVATE_KEY ?? "private_key";
   let tradePage: TradePage;
+  const TRX_SUCCESS_TIMEOUT = 10000;
 
   test.beforeAll(async () => {
     const pathToExtension = new UnzipExtension().getPathToExtension();
@@ -88,6 +89,7 @@ test.describe("Test Filled Limit Order feature", () => {
     await trxPage.isFilledByLimitPrice(highLimitPrice);
   });
 
+  // biome-ignore lint/complexity/noForEach: <explanation>
   [{ name: "WBTC" }, { name: "OSMO" }].forEach(({ name }) => {
     test(`User should be able to Market Buy ${name}`, async () => {
       await tradePage.goto();
@@ -97,12 +99,13 @@ test.describe("Test Filled Limit Order feature", () => {
       const { msgContentAmount } = await tradePage.buyAndGetWalletMsg(context);
       expect(msgContentAmount).toBeTruthy();
       expect(msgContentAmount).toContain("type: osmosis/poolmanager/");
-      await tradePage.isTransactionSuccesful();
+      await tradePage.isTransactionSuccesful(TRX_SUCCESS_TIMEOUT);
       await tradePage.getTransactionUrl();
     });
   });
 
   // does not work for WBTC.eth.axl https://linear.app/osmosis/issue/FE-1058
+  // biome-ignore lint/complexity/noForEach: <explanation>
   [{ name: "WBTC" }, { name: "OSMO" }].forEach(({ name }) => {
     test(`User should be able to Market Sell ${name}`, async () => {
       await tradePage.goto();
@@ -112,7 +115,7 @@ test.describe("Test Filled Limit Order feature", () => {
       const { msgContentAmount } = await tradePage.sellAndGetWalletMsg(context);
       expect(msgContentAmount).toBeTruthy();
       expect(msgContentAmount).toContain("type: osmosis/poolmanager/");
-      await tradePage.isTransactionSuccesful();
+      await tradePage.isTransactionSuccesful(TRX_SUCCESS_TIMEOUT);
       await tradePage.getTransactionUrl();
     });
   });