Sync repo

.env.test

@@ -0,0 +1,9 @@
+NEXT_PUBLIC_API_URL=/
+NEXT_PUBLIC_NETWORK=mainnet
+NEXT_PUBLIC_DISPLAY_TESTING_MESSAGES=false
+NEXT_PUBLIC_FIXED_STAKING_TERM=true
+NEXT_BUILD_E2E=true
+NEXT_PUBLIC_BBN_GAS_PRICE=0.007
+NEXT_PUBLIC_DEFAULT_FP_FILTER=inactive
+NEXT_PUBLIC_BABY_RPC_URL=/
+NEXT_PUBLIC_BABY_LCD_URL=/

docker/Dockerfile

@@ -42,6 +42,9 @@ ENV NEXT_PUBLIC_FIXED_STAKING_TERM=${NEXT_PUBLIC_FIXED_STAKING_TERM}
 ARG NEXT_PUBLIC_BBN_GAS_PRICE
 ENV NEXT_PUBLIC_BBN_GAS_PRICE=${NEXT_PUBLIC_BBN_GAS_PRICE}
 
+ARG NEXT_PUBLIC_DISABLED_WALLETS
+ENV NEXT_PUBLIC_DISABLED_WALLETS=${NEXT_PUBLIC_DISABLED_WALLETS}
+
 ARG NEXT_PUBLIC_SIDECAR_API_URL
 ENV NEXT_PUBLIC_SIDECAR_API_URL=${NEXT_PUBLIC_SIDECAR_API_URL}
 

e2e/fixtures/index.ts

@@ -0,0 +1,3 @@
+export * from "./page_navigation";
+export * from "./wallet_balance";
+export * from "./wallet_connect";

e2e/fixtures/page_navigation.ts

@@ -0,0 +1,18 @@
+import { Page } from "@playwright/test";
+
+import { injectBBNQueries } from "../mocks/blockchain";
+
+export class PageNavigationActions {
+  constructor(private page: Page) {}
+
+  async navigateToHomePage(page: Page) {
+    await injectBBNQueries(page);
+    await this.page.goto("/");
+    await this.waitForPageLoad();
+  }
+
+  async waitForPageLoad() {
+    await this.page.waitForLoadState("domcontentloaded");
+    await this.page.waitForLoadState("networkidle");
+  }
+}

e2e/fixtures/wallet_balance.selectors.ts

@@ -0,0 +1,14 @@
+// Note: These should be replaced by data-testid selectors
+
+export const SPINNER_SELECTOR =
+  '[data-testid="staked-balance"] .bbn-loader, [data-testid="stakable-balance"] .bbn-loader, [data-testid="baby-balance"] .bbn-loader, [data-testid="baby-rewards"] .bbn-loader';
+export const STAKED_BALANCE_ITEM_SELECTOR =
+  '.bbn-list-item:has-text("Staked Balance")';
+export const STAKED_BALANCE_VALUE_SELECTOR =
+  '.bbn-list-item:has-text("Staked Balance") .bbn-list-value';
+export const STAKABLE_BALANCE_VALUE_SELECTOR =
+  '.bbn-list-item:has-text("Stakable Balance") .bbn-list-value';
+export const BABY_BALANCE_VALUE_SELECTOR =
+  '.bbn-list-item:has-text("BABY Balance") .bbn-list-value';
+export const BABY_REWARDS_VALUE_SELECTOR =
+  '.bbn-list-item:has-text("BABY Rewards") .bbn-list-value';

e2e/fixtures/wallet_balance.ts

@@ -0,0 +1,50 @@
+import { Page } from "@playwright/test";
+
+import {
+  BABY_BALANCE_VALUE_SELECTOR,
+  BABY_REWARDS_VALUE_SELECTOR,
+  SPINNER_SELECTOR,
+  STAKABLE_BALANCE_VALUE_SELECTOR,
+  STAKED_BALANCE_ITEM_SELECTOR,
+  STAKED_BALANCE_VALUE_SELECTOR,
+} from "./wallet_balance.selectors";
+
+export class WalletBalanceActions {
+  constructor(private page: Page) {}
+
+  async waitForBalanceLoadingComplete() {
+    await this.page.waitForFunction(
+      (sel) => document.querySelectorAll(sel).length === 0,
+      SPINNER_SELECTOR,
+      { timeout: 30_000 },
+    );
+
+    try {
+      await this.page.waitForSelector(STAKED_BALANCE_ITEM_SELECTOR, {
+        timeout: 30000,
+        state: "attached",
+      });
+    } catch (error: unknown) {
+      await this.page.reload({ waitUntil: "domcontentloaded" });
+      await this.page.waitForLoadState("networkidle");
+      await this.page.waitForTimeout(10000);
+    }
+  }
+
+  async getStakedBalance(): Promise<string | null> {
+    const stakedBalance = this.page.locator(STAKED_BALANCE_VALUE_SELECTOR);
+    return stakedBalance.textContent();
+  }
+
+  async getStakableBalance(): Promise<string | null> {
+    return this.page.locator(STAKABLE_BALANCE_VALUE_SELECTOR).textContent();
+  }
+
+  async getBabyBalance(): Promise<string | null> {
+    return this.page.locator(BABY_BALANCE_VALUE_SELECTOR).textContent();
+  }
+
+  async getBabyRewards(): Promise<string | null> {
+    return this.page.locator(BABY_REWARDS_VALUE_SELECTOR).textContent();
+  }
+}

e2e/fixtures/wallet_connect.selectors.ts

@@ -0,0 +1,40 @@
+// Note: These should be replaced by data-testid selectors
+
+export const CONNECT_BUTTON_SELECTOR = 'button:has-text("Connect")';
+
+export const DIALOG_SELECTORS = {
+  TERMS_DIALOG_HEADER: '[class*="bbn-dialog-header"]',
+  ANY_DIALOG: 'dialog, [role="dialog"]',
+  ERROR_DIALOG: '[role="dialog"]:has-text("The wallet cannot be connected")',
+  ERROR_DIALOG_DONE_BUTTON:
+    '[role="dialog"]:has-text("The wallet cannot be connected") button:has-text("Done")',
+};
+
+export const BUTTON_SELECTORS = {
+  NEXT: 'button:has-text("Next")',
+  ACCEPT: 'button:has-text("Accept")',
+  CONTINUE: 'button:has-text("Continue")',
+  OK: 'button:has-text("OK")',
+  SAVE: '.bbn-dialog-footer button:has-text("Save")',
+  DONE: '.bbn-dialog-footer button:has-text("Done")',
+};
+
+export const CHECKBOX_SELECTOR = '.bbn-switcher-input[type="checkbox"]';
+
+export const WALLET_SELECTORS = {
+  BITCOIN: 'button:has-text("Select Bitcoin Wallet")',
+  OKX: [
+    'button:has-text("OKX")',
+    'div[role="button"]:has-text("OKX")',
+    '[data-testid="wallet-option-okx"]',
+    'button:has-img[alt="OKX"]',
+  ],
+  BABYLON: [
+    'button:has-text("Select Babylon Chain Wallet")',
+    'button:has-img[alt="Babylon Chain"]',
+    "button:has(.bbn-avatar)",
+  ],
+};
+
+export const createGenericWalletSelector = (walletType: string) =>
+  `button:has(.h-10.w-10.object-contain):has-text("${walletType}")`;

e2e/fixtures/wallet_connect.ts

@@ -0,0 +1,210 @@
+import { Page } from "@playwright/test";
+
+import { injectBBNWallet, injectBTCWallet } from "../mocks/blockchain";
+import { mockVerifyBTCAddress } from "../mocks/handlers";
+
+import {
+  BUTTON_SELECTORS,
+  CHECKBOX_SELECTOR,
+  CONNECT_BUTTON_SELECTOR,
+  DIALOG_SELECTORS,
+  WALLET_SELECTORS,
+  createGenericWalletSelector,
+} from "./wallet_connect.selectors";
+
+export class WalletConnectActions {
+  constructor(private page: Page) {}
+
+  async clickConnectButton() {
+    await this.page.waitForSelector(CONNECT_BUTTON_SELECTOR, {
+      state: "visible",
+      timeout: 3000,
+    });
+
+    const connectButtons = await this.page
+      .locator(CONNECT_BUTTON_SELECTOR)
+      .all();
+
+    for (const button of connectButtons) {
+      const isDisabled = await button.isDisabled();
+      if (!isDisabled) {
+        await button.click({ force: true });
+        return;
+      }
+    }
+
+    if (connectButtons.length > 0) {
+      await connectButtons[0].click({ force: true });
+    }
+  }
+
+  async acceptTermsAndConditions() {
+    await Promise.race([
+      this.page
+        .locator(DIALOG_SELECTORS.TERMS_DIALOG_HEADER)
+        .waitFor({ state: "visible", timeout: 3000 })
+        .catch(() => {}),
+      this.page
+        .locator(DIALOG_SELECTORS.ANY_DIALOG)
+        .first()
+        .waitFor({ state: "visible", timeout: 3000 })
+        .catch(() => {}),
+    ]);
+
+    const termsDialogVisible = await this.page
+      .locator(DIALOG_SELECTORS.TERMS_DIALOG_HEADER)
+      .isVisible()
+      .catch(() => false);
+
+    if (!termsDialogVisible) {
+      await this.handleAlternativeDialog();
+      return;
+    }
+
+    const checkboxes = this.page.locator(CHECKBOX_SELECTOR);
+    const count = await checkboxes.count();
+
+    for (let i = 0; i < count; i++) {
+      await checkboxes.nth(i).click();
+    }
+
+    await this.page.locator(BUTTON_SELECTORS.NEXT).click();
+  }
+
+  private async handleAlternativeDialog() {
+    const anyDialog = await this.page
+      .locator(DIALOG_SELECTORS.ANY_DIALOG)
+      .first()
+      .isVisible()
+      .catch(() => false);
+
+    if (!anyDialog) return;
+
+    const buttonSelectorsList = [
+      BUTTON_SELECTORS.NEXT,
+      BUTTON_SELECTORS.ACCEPT,
+      BUTTON_SELECTORS.CONTINUE,
+      BUTTON_SELECTORS.OK,
+    ];
+
+    for (const selector of buttonSelectorsList) {
+      const button = this.page.locator(selector).first();
+      if (await button.isVisible().catch(() => false)) {
+        await button
+          .click()
+          .catch((e) => console.error(`Error clicking ${selector}:`, e));
+        return;
+      }
+    }
+
+    const anyButton = this.page
+      .locator(`${DIALOG_SELECTORS.ANY_DIALOG} button`)
+      .first();
+    if (await anyButton.isVisible().catch(() => false)) {
+      await anyButton
+        .click()
+        .catch((e) => console.error("Error clicking dialog button:", e));
+    }
+  }
+
+  async clickInjectableWalletButton() {
+    const bitcoinWalletButton = this.page
+      .locator(WALLET_SELECTORS.BITCOIN)
+      .first();
+
+    await bitcoinWalletButton.waitFor({ state: "visible", timeout: 10_000 });
+    await bitcoinWalletButton.click();
+  }
+
+  async clickConnectWalletButton() {
+    const saveButton = this.page.locator(BUTTON_SELECTORS.SAVE);
+    await saveButton.waitFor({ state: "visible", timeout: 3000 });
+    await saveButton.click();
+  }
+
+  async clickOKXWalletButton() {
+    for (const selector of WALLET_SELECTORS.OKX) {
+      const okxButton = this.page.locator(selector).first();
+      if (await okxButton.isVisible().catch(() => false)) {
+        await okxButton.click();
+        break;
+      }
+    }
+
+    await this.clickConnectWalletButton();
+  }
+
+  async clickBabylonChainWalletButton() {
+    for (const selector of WALLET_SELECTORS.BABYLON) {
+      const babylonButton = this.page.locator(selector).first();
+      if (await babylonButton.isVisible().catch(() => false)) {
+        await babylonButton.click();
+        break;
+      }
+    }
+  }
+
+  async clickGenericWalletButton(walletType: string = "Leap") {
+    const walletSelector = createGenericWalletSelector(walletType);
+    const walletButton = this.page.locator(walletSelector);
+    await walletButton.waitFor({ state: "visible", timeout: 3000 });
+    await walletButton.click();
+  }
+
+  async clickDoneButton() {
+    const doneButton = this.page.locator(BUTTON_SELECTORS.DONE);
+    await doneButton.waitFor({ state: "visible", timeout: 3000 });
+    await doneButton.click();
+  }
+
+  async setupMocks() {
+    await mockVerifyBTCAddress(this.page);
+  }
+
+  async handleVerificationErrorIfPresent() {
+    await this.page
+      .locator(DIALOG_SELECTORS.ERROR_DIALOG)
+      .waitFor({
+        state: "visible",
+        timeout: 1000,
+      })
+      .catch(() => {});
+
+    const isErrorVisible = await this.page
+      .locator(DIALOG_SELECTORS.ERROR_DIALOG)
+      .isVisible()
+      .catch(() => false);
+
+    if (isErrorVisible) {
+      const doneButton = this.page.locator(
+        DIALOG_SELECTORS.ERROR_DIALOG_DONE_BUTTON,
+      );
+
+      if (await doneButton.isVisible().catch(() => false)) {
+        await doneButton.click();
+
+        await this.page
+          .locator(DIALOG_SELECTORS.ERROR_DIALOG)
+          .waitFor({
+            state: "hidden",
+            timeout: 1000,
+          })
+          .catch(() => {});
+      }
+    }
+  }
+
+  async setupWalletConnection() {
+    await this.setupMocks();
+    await injectBTCWallet(this.page);
+    await injectBBNWallet(this.page);
+    await this.clickConnectButton();
+    await this.acceptTermsAndConditions();
+    await this.clickInjectableWalletButton();
+    await this.clickOKXWalletButton();
+    await this.handleVerificationErrorIfPresent();
+    await this.clickBabylonChainWalletButton();
+    await this.clickGenericWalletButton();
+    await this.clickDoneButton();
+  }
+}