Feat/mgx 843 non blocking tx UI (#392)

test/microapps-ui-xcm/microapps-ui-main.accounts.test.ts

@@ -41,6 +41,10 @@ import {
   KSM_FULL_NAME,
   MGX_ASSET_NAME,
 } from "../../utils/frontend/microapps-pages/UiConstant";
+import {
+  NotificationToast,
+  ToastType,
+} from "../../utils/frontend/microapps-pages/NotificationToast";
 
 jest.spyOn(console, "log").mockImplementation(jest.fn());
 jest.setTimeout(1500000);
@@ -150,7 +154,7 @@ describe.each`
       await sidebar.clickNavLiqPools();
 
       const poolsList = new LiqPools(driver);
-      const isPoolsListDisplayed = await poolsList.isDisplayed();
+      let isPoolsListDisplayed = await poolsList.isDisplayed();
       expect(isPoolsListDisplayed).toBeTruthy();
 
       const isMgxKsmPoolVisible = await poolsList.isPoolItemDisplayed(
@@ -198,8 +202,21 @@ describe.each`
         2,
       );
 
-      const poolShareAfter = await poolDetails.getMyPositionAmount();
-      expect(poolShareAfter).toBeGreaterThan(poolShareBefore);
+      await poolDetails.waitForContinueState(false, 5000);
+      const toast = new NotificationToast(driver);
+      await toast.waitForToastDisappear(
+        ToastType.Success,
+        TransactionType.AddLiquidity,
+      );
+      await poolDetails.clickBackButton();
+      isPoolsListDisplayed = await poolsList.isDisplayed();
+      expect(isPoolsListDisplayed).toBeTruthy();
+      await poolsList.clickPoolItem(
+        "-" + MGX_ASSET_NAME + "-" + KSM_ASSET_NAME,
+      );
+
+      const my_new_pool_share = await poolDetails.getMyPositionAmount();
+      expect(my_new_pool_share).toBeGreaterThan(poolShareBefore);
     });
 
     test("Deposit tokens by account type " + accType, async () => {

test/microapps-ui-xcm/microapps-ui-main.liq.pools.test.ts

@@ -33,6 +33,10 @@ import { LiqPools } from "../../utils/frontend/microapps-pages/LiqPools";
 import { Sidebar } from "../../utils/frontend/microapps-pages/Sidebar";
 import { LiqPoolDetils } from "../../utils/frontend/microapps-pages/LiqPoolDetails";
 import { TransactionType } from "../../utils/frontend/microapps-pages/NotificationModal";
+import {
+  NotificationToast,
+  ToastType,
+} from "../../utils/frontend/microapps-pages/NotificationToast";
 
 jest.setTimeout(FIVE_MIN);
 jest.spyOn(console, "log").mockImplementation(jest.fn());
@@ -234,7 +238,7 @@ describe("Miocroapps UI liq pools tests", () => {
     await sidebar.clickNavLiqPools();
 
     const poolsList = new LiqPools(driver);
-    const isPoolsListDisplayed = await poolsList.isDisplayed();
+    let isPoolsListDisplayed = await poolsList.isDisplayed();
     expect(isPoolsListDisplayed).toBeTruthy();
 
     const isMgxKsmPoolVisible = await poolsList.isPoolItemDisplayed(
@@ -279,6 +283,16 @@ describe("Miocroapps UI liq pools tests", () => {
       TransactionType.AddLiquidity,
       2,
     );
+    await poolDetails.waitForContinueState(false, 5000);
+    const toast = new NotificationToast(driver);
+    await toast.waitForToastDisappear(
+      ToastType.Success,
+      TransactionType.AddLiquidity,
+    );
+    await poolDetails.clickBackButton();
+    isPoolsListDisplayed = await poolsList.isDisplayed();
+    expect(isPoolsListDisplayed).toBeTruthy();
+    await poolsList.clickPoolItem("-" + MGX_ASSET_NAME + "-" + KSM_ASSET_NAME);
 
     const my_new_pool_share = await poolDetails.getMyPositionAmount();
     expect(my_new_pool_share).toBeGreaterThan(my_pool_share);
@@ -290,7 +304,7 @@ describe("Miocroapps UI liq pools tests", () => {
     await sidebar.clickNavLiqPools();
 
     const poolsList = new LiqPools(driver);
-    const isPoolsListDisplayed = await poolsList.isDisplayed();
+    let isPoolsListDisplayed = await poolsList.isDisplayed();
     expect(isPoolsListDisplayed).toBeTruthy();
     await poolsList.clickAllPoolsTab();
     await poolsList.clickCreateLiquidity();
@@ -305,6 +319,7 @@ describe("Miocroapps UI liq pools tests", () => {
     const isFeeDisplayed = await poolsList.isFeeDisplayed();
     expect(isFeeDisplayed).toBeTruthy();
 
+    await poolsList.waitForContinueState(true, 5000);
     await poolsList.createLiqPoolsubmit();
     await waitForMicroappsActionNotification(
       driver,
@@ -313,12 +328,19 @@ describe("Miocroapps UI liq pools tests", () => {
       TransactionType.CreatePool,
       2,
     );
+    await poolsList.clickCancelButton();
+    isPoolsListDisplayed = await poolsList.isDisplayed();
+    expect(isPoolsListDisplayed).toBeTruthy();
+    await poolsList.clickPoolItem("-" + ZLK_ASSET_NAME + "-" + TUR_ASSET_NAME);
 
     const poolDetails = new LiqPoolDetils(driver);
     const isPoolDetailsVisible = await poolDetails.isDisplayed(
-      TUR_ASSET_NAME + " / " + ZLK_ASSET_NAME,
+      ZLK_ASSET_NAME + " / " + TUR_ASSET_NAME,
     );
     expect(isPoolDetailsVisible).toBeTruthy();
+    const isMyPositionAmountDisplayed =
+      await poolDetails.isMyPositionAmountDisplayed();
+    expect(isMyPositionAmountDisplayed).toBeTruthy();
     const my_pool_share = await poolDetails.getMyPositionAmount();
     expect(my_pool_share).toBeGreaterThan(0);
   });

test/microapps-ui-xcm/microapps-ui-main.swap.test.ts

@@ -20,6 +20,7 @@ import {
   connectWallet,
   setupPage,
   setupPageWithState,
+  waitForMicroappsActionNotification,
 } from "../../utils/frontend/microapps-utils/Handlers";
 import { Swap } from "../../utils/frontend/microapps-pages/Swap";
 import { ApiContext } from "../../utils/Framework/XcmHelper";
@@ -29,6 +30,7 @@ import { AssetId } from "../../utils/ChainSpecs";
 import XcmNetworks from "../../utils/Framework/XcmNetworks";
 import { devTestingPairs } from "../../utils/setup";
 import StashServiceMockSingleton from "../../utils/stashServiceMockSingleton";
+import { TransactionType } from "../../utils/frontend/microapps-pages/NotificationToast";
 
 jest.setTimeout(FIVE_MIN);
 jest.spyOn(console, "log").mockImplementation(jest.fn());
@@ -259,6 +261,31 @@ describe("Miocroapps UI swap tests", () => {
     expect(payTokeAmountAfterSwitch).toEqual(getTokenAmount);
   });
 
+  it("Swap is possible with enough tokens", async () => {
+    await setupPageWithState(driver, acc_name);
+    const swap = new Swap(driver);
+    const isSwapFrameDisplayed = await swap.isDisplayed();
+    expect(isSwapFrameDisplayed).toBeTruthy();
+    await swap.pickPayToken(MGX_ASSET_NAME);
+    await swap.pickGetToken(KSM_FULL_NAME);
+    await swap.setPayTokenAmount("500");
+    const getTokenAmount = await swap.fetchGetAssetAmount();
+    expect(parseFloat(getTokenAmount)).toBeGreaterThan(0);
+
+    await swap.waitForSwapButtonEnabled();
+    const isSwapEnabled = await swap.isSwapButtonEnabled();
+    expect(isSwapEnabled).toBeTruthy();
+
+    await swap.clickSwapButton();
+    await waitForMicroappsActionNotification(
+      driver,
+      mangata,
+      kusama,
+      TransactionType.Swap,
+      2,
+    );
+  });
+
   afterEach(async () => {
     const session = await driver.getSession();
     await addExtraLogs(

test/microapps-ui-xcm/microapps-ui-main.withdraw.test.ts

@@ -31,12 +31,8 @@ import { devTestingPairs } from "../../utils/setup";
 import { AssetId } from "../../utils/ChainSpecs";
 import { BN_THOUSAND } from "@mangata-finance/sdk";
 import StashServiceMockSingleton from "../../utils/stashServiceMockSingleton";
-import {
-  ModalType,
-  NotificationModal,
-  TransactionType,
-} from "../../utils/frontend/microapps-pages/NotificationModal";
 import { WithdrawModal } from "../../utils/frontend/microapps-pages/WithdrawModal";
+import { TransactionType } from "../../utils/frontend/microapps-pages/NotificationToast";
 
 jest.spyOn(console, "log").mockImplementation(jest.fn());
 
@@ -157,23 +153,12 @@ describe("Microapps UI withdraw modal tests", () => {
 
     await withdrawModal.clickContinue();
 
-    const modal = new NotificationModal(driver);
-    await modal.waitForModalState(
-      ModalType.Confirm,
-      TransactionType.Withdraw,
-      3000,
-    );
-    const isModalWaitingForSignVisible = await modal.isModalVisible(
-      ModalType.Confirm,
-      TransactionType.Withdraw,
-    );
-    expect(isModalWaitingForSignVisible).toBeTruthy();
     await waitForMicroappsActionNotification(
       driver,
       mangata,
       kusama,
       TransactionType.Withdraw,
-      4,
+      3,
     );
   });
 

utils/frontend/microapps-pages/LiqPoolDetails.ts

@@ -24,6 +24,7 @@ const DIV_POOL_VOLUME = "volume";
 const DIV_POOL_REWARDS = "monthly-rewards";
 const BUTTON_ADD_LIQ = "add-liquidity";
 const BUTTON_SUBMIT_LIQ = "submit-button";
+const BUTTON_BACK = "back-button";
 const MY_POOL_POSTION_AMNT = "my-pool-position-amount";
 const ADD_LIQ_POOL_WIDGET = "provide-liquidity-widget";
 const DIV_FIRST_TOKEN_CONTAINER = "firstToken-container";
@@ -54,6 +55,11 @@ export class LiqPoolDetils {
     await clickElement(this.driver, itemXpath);
   }
 
+  async clickBackButton() {
+    const itemXpath = buildDataTestIdXpath(BUTTON_BACK);
+    await clickElement(this.driver, itemXpath);
+  }
+
   async clickSubmitLiquidity() {
     const itemXpath = buildDataTestIdXpath(BUTTON_SUBMIT_LIQ);
     await clickElement(this.driver, itemXpath);
@@ -205,6 +211,12 @@ export class LiqPoolDetils {
     return displayed;
   }
 
+  async isMyPositionAmountDisplayed() {
+    const itemXpath = buildDataTestIdXpath(MY_POOL_POSTION_AMNT);
+    const displayed = await isDisplayed(this.driver, itemXpath);
+    return displayed;
+  }
+
   async getMyPositionAmount() {
     const itemXpath = buildDataTestIdXpath(MY_POOL_POSTION_AMNT);
     const text = await getText(this.driver, itemXpath);

utils/frontend/microapps-pages/LiqPools.ts

@@ -32,6 +32,7 @@ const POOL_SHARE = "poolShare";
 const EST_REWARDS = "est-rewards";
 const FEE = "fee";
 const BTN_SUBMIT = "submit-button";
+const BTN_CANCEL = "cancel-button";
 
 export class LiqPools {
   driver: WebDriver;
@@ -204,6 +205,11 @@ export class LiqPools {
     );
   }
 
+  async clickCancelButton() {
+    const itemXpath = buildDataTestIdXpath(BTN_CANCEL);
+    await clickElement(this.driver, itemXpath);
+  }
+
   async getPoolsList() {
     const classNameXpath = await buildClassXpath("focus:outline-0 group");
     await waitForElementVisible(this.driver, classNameXpath, 5000);