quote-page.ts

import { strict as assert } from 'assert';
import { Hex } from '@metamask/utils';
import { Key } from 'selenium-webdriver';
import { toAssetId } from '../../../../../shared/lib/asset-utils';
import { ASSET_ROUTE } from '../../../../../shared/lib/deep-links/routes/route';
import { toChecksumHexAddress } from '../../../../../shared/lib/hexstring-utils';
import { Driver } from '../../../webdriver/driver';
import TokenOverviewPage from '../token-overview-page';

export type BridgeQuote = {
  amount: string;
  tokenFrom?: string;
  tokenTo?: string;
  fromChain?: string;
  toChain?: string;
  unapproved?: boolean;
};

class BridgeQuotePage {
  protected driver: Driver;

  public sourceAssetPickerButton = '[data-testid="bridge-source-button"]';

  public destinationAssetPickerButton =
    '[data-testid="bridge-destination-button"]';

  private mutlichainAssetPicker =
    '[data-testid="multichain-asset-picker__network"]';

  public assetPrickerSearchInput =
    '[data-testid="bridge-asset-picker-search-input"]';

  private sourceAmount = '[data-testid="from-amount"]';

  private destinationAmount = '[data-testid="to-amount"]';

  private lineaNetwork = '[data-testid="Linea"]';

  public tokenButton = '[data-testid^="bridge-asset--"]';

  private submitButton = '[data-testid="bridge-cta-button"]';

  private insufficientFundsButton = {
    text: 'Insufficient funds',
    css: '[data-testid="bridge-cta-button"]',
  };

  private backButton = '[aria-label="Back"]';

  private gasIncludedIndicator = '[data-testid="network-fees-included"]';

  private gasSponsoredIndicator = '[data-testid="network-fees-sponsored"]';

  private maxButton = { text: 'Max' };

  private networkSelector = '[data-testid="multichain-asset-picker__network"]';

  private networkFees = '[data-testid="network-fees"]';

  private applyButton = { text: 'Apply', tag: 'button' };

  private confirmButton =
    '[data-testid="confirm-sign-and-send-transaction-confirm-snap-footer-button"]';

  private noOptionAvailable = '[data-testid="bridge-no-options-available"]';

  private moreETHneededForGas =
    '[data-testid="bridge-insufficient-gas-for-quote"]';

  private switchTokensButton = '[data-testid="switch-tokens"]';

  private slippageEditButton = '[data-testid="slippage-edit-button"]';

  private slippageCustomButton =
    '[data-testid="bridge__tx-settings-modal-custom-button"]';

  private slippageCustomInput =
    'input[data-testid="bridge__tx-settings-modal-custom-input"]';

  private networkNameSelector = (network: string) =>
    `[data-testid="${network}"]`;

  constructor(driver: Driver) {
    this.driver = driver;
  }

  /**
   * Checks that the bridge quote page is loaded.
   *
   * @param timeout - Optional timeout in milliseconds. Defaults to 10000.
   */
  async checkPageIsLoaded(timeout: number = 10000): Promise<void> {
    try {
      await this.driver.waitForSelector(this.sourceAssetPickerButton, {
        timeout,
      });
    } catch (e) {
      console.log(
        'Timeout while waiting for bridge quote page to be loaded',
        e,
      );
      throw e;
    }
    console.log('Bridge quote page is loaded');
  }

  enterBridgeQuote = async (quote: BridgeQuote) => {
    // Source
    if (quote.tokenFrom || quote.fromChain) {
      await this.driver.clickElement(this.sourceAssetPickerButton);
      if (quote.fromChain) {
        await this.driver.clickElement(this.networkSelector);
        await this.driver.clickElement(`[data-testid="${quote.fromChain}"]`);
      }
      if (quote.tokenFrom) {
        await this.driver.fill(this.assetPrickerSearchInput, quote.tokenFrom);
        await this.driver.clickElement({
          text: quote.tokenFrom,
          css: this.tokenButton,
        });
      }
    }

    // Destination
    if (quote.tokenTo || quote.toChain) {
      await this.driver.waitForSelector(this.destinationAssetPickerButton);
      await this.driver.clickElement(this.destinationAssetPickerButton);

      // After clicking destination, we might see either:
      // 1. Network selection modal (if destination is pre-populated and different from desired network)
      // 2. Token picker with network badge (if destination is empty or on the correct network)

      if (quote.toChain) {
        // We're in token picker, need to click network badge first
        await this.driver.waitForSelector(this.networkSelector);
        await this.driver.clickElement(this.networkSelector);

        // Now select the destination network
        await this.driver.clickElementAndWaitToDisappear({
          text: quote.toChain,
        });
      }
      if (quote.tokenTo) {
        await this.driver.fill(this.assetPrickerSearchInput, quote.tokenTo);
        await this.driver.clickElementAndWaitToDisappear({
          text: quote.tokenTo,
          css: this.tokenButton,
        });
      }
    }

    // QTY
    await this.driver.fill(this.sourceAmount, quote.amount);
    await this.driver.assertElementNotPresent(
      {
        tag: 'p',
        text: 'Fetching quotes...',
      },
      { waitAtLeastGuard: 500 },
    );
  };

  searchForAsset = async (
    token: string,
    assetPicker = this.sourceAssetPickerButton,
  ) => {
    console.log(`Opening asset picker`);
    await this.driver.clickElement(assetPicker);
    await this.driver.fill(this.assetPrickerSearchInput, token);
    console.log(`Filled search input with ${token}`);
    const assetElement = await this.driver.findElement({
      css: this.tokenButton,
      text: token,
    });
    return assetElement;
  };

  goToAssetPage = async (
    token: string,
    chainId: Hex,
    address: string,
    assetPicker = this.sourceAssetPickerButton,
  ) => {
    const expectedAssetId = toAssetId(address, chainId)?.toLowerCase();
    const expectedUrl = `${ASSET_ROUTE}/${chainId}/${encodeURIComponent(toChecksumHexAddress(address))}`;

    console.log(`Opening asset picker`);
    await this.driver.clickElement(assetPicker);
    await this.driver.fill(this.assetPrickerSearchInput, token);
    console.log(`Filled search input with ${token}`);
    const assetElement = await this.driver.findElement({
      tag: 'button',
      testId: `bridge-asset-info-icon-${expectedAssetId}`,
    });
    console.log(`Clicked link to the asset page`);
    await assetElement.click();
    await this.driver.waitForUrlContaining({
      url: expectedUrl,
    });
    const assetPage = new TokenOverviewPage(this.driver);
    await assetPage.checkPageIsLoaded();
  };

  checkAssetsAreSelected = async (sourceToken: string, destToken: string) => {
    await this.driver.waitForSelector({
      css: this.sourceAssetPickerButton,
      text: sourceToken,
    });
    console.log(`Expected source asset ${sourceToken} is selected`);
    await this.driver.waitForSelector({
      css: this.destinationAssetPickerButton,
      text: destToken,
    });
    console.log(`Expected dest asset ${destToken} is selected`);
  };

  checkAssetPickerModalIsReopened = async () => {
    await this.driver.waitForSelector({
      testId: 'bridge-asset-picker-modal',
    });
    console.log('Asset picker modal is visible');
    await this.driver.clickElementAndWaitToDisappear('[aria-label="Close"]');
    console.log('Asset picker modal closed');
  };

  waitForQuote = async () => {
    await this.driver.waitForSelector(this.submitButton, { timeout: 30000 });
  };

  submitQuote = async () => {
    await this.driver.clickElement(this.submitButton);
  };

  confirmBridgeTransaction = async () => {
    await this.driver.clickElement(this.confirmButton);
  };

  goBack = async () => {
    await this.driver.waitForSelector(this.backButton);
    await this.driver.clickElement(this.backButton);
  };

  async searchAssetAndVerifyCount(
    searchInput: string,
    count: number,
  ): Promise<void> {
    console.log(`Fill search input with ${searchInput}`);
    await this.driver.pasteIntoField(this.assetPrickerSearchInput, searchInput);
    await this.driver.elementCountBecomesN(this.tokenButton, count);
  }

  async checkTokenIsDisabled() {
    const [tkn] = await this.driver.findElements(this.tokenButton);

    await tkn.click();
    const isSelected = await tkn.isSelected();
    assert.equal(isSelected, false);
  }

  async checkNoTradeRouteMessageIsDisplayed(): Promise<void> {
    try {
      await this.driver.waitForSelector(this.noOptionAvailable);
    } catch (e) {
      console.log(
        `Expected message that "no trade route is available" is not present`,
      );
      throw e;
    }
    console.log('The message "no trade route is available" is displayed');
  }

  async checkInsufficientFundsButtonIsDisplayed(): Promise<void> {
    try {
      await this.driver.waitForSelector(this.insufficientFundsButton);
    } catch (e) {
      console.log(`Expected button "Insufficient funds" is not present`);
      throw e;
    }
    console.log('The button "Insufficient funds" is displayed');
  }

  async checkMoreETHneededIsDisplayed(): Promise<void> {
    try {
      await this.driver.waitForSelector(this.moreETHneededForGas);
    } catch (e) {
      console.log(
        `Expected message that "More ETH needed for gas" is not present`,
      );
      throw e;
    }
    console.log('The message "More ETH needed for gas" is displayed');
  }

  async checkExpectedNetworkFeeIsDisplayed(): Promise<void> {
    try {
      const balance = await this.driver.waitForSelector(this.networkFees);
      const currentBalanceText = await balance.getText();
      // Verify that the text matches the pattern $XXX.XX
      const pricePattern = /^\$\d+\.\d{2}$/u;
      if (!pricePattern.test(currentBalanceText)) {
        throw new Error(`Price format is not valid: ${currentBalanceText}`);
      }
    } catch (e: unknown) {
      console.log(
        `Error checking price format: ${
          e instanceof Error ? e.message : String(e)
        }`,
      );
      throw e;
    }
    console.log('Price matches expected format');
  }

  async checkGasIncludedIsDisplayed(): Promise<void> {
    try {
      await this.driver.waitForSelector(this.gasIncludedIndicator, {
        timeout: 30000,
      });
    } catch (e) {
      console.log('Expected "Gas fees included" indicator is not present');
      throw e;
    }
    console.log('Gas fees included indicator is displayed');
  }

  async checkGasSponsoredIsDisplayed(): Promise<void> {
    try {
      await this.driver.waitForSelector(this.gasSponsoredIndicator, {
        timeout: 30000,
      });
    } catch (e) {
      console.log('Expected "Gas fees sponsored" indicator is not present');
      throw e;
    }
    console.log('Gas fees sponsored indicator is displayed');
  }

  async clickMaxButton(): Promise<void> {
    await this.driver.waitForSelector(this.maxButton, { timeout: 30000 });
    await this.driver.clickElement(this.maxButton);
    console.log('Clicked Max button');
  }

  checkDestAmount = async (amount: string) => {
    const destAmount = await this.driver.findElement(this.destinationAmount);
    assert.equal(await destAmount.getAttribute('value'), amount);
  };

  async switchTokens(): Promise<void> {
    await this.driver.clickElement(this.switchTokensButton);
  }

  async checkTokenRiskWarningIsDisplayed(
    title: string,
    description: string,
  ): Promise<void> {
    await this.driver.waitForSelector({ text: title }, { timeout: 30000 });
    await this.driver.waitForSelector({ text: description });
  }

  async setCustomSlippage(value: string): Promise<void> {
    await this.driver.clickElement(this.slippageEditButton);
    await this.driver.clickElement(this.slippageCustomButton);
    const input = await this.driver.waitForSelector(this.slippageCustomInput, {
      timeout: 1000,
    });
    await input.sendKeys(Key.BACK_SPACE);
    await this.driver.fill(this.slippageCustomInput, value);
    await this.driver.executeScript(`
      const input = document.querySelector('${this.slippageCustomInput}');
      if (input) { input.blur(); }
    `);
  }

  async selectSrcToken(token: string): Promise<void> {
    await this.driver.waitForSelector(this.sourceAssetPickerButton);
    await this.driver.clickElement(this.sourceAssetPickerButton);
    await this.driver.fill(this.assetPrickerSearchInput, token);
    await this.driver.clickElementAndWaitToDisappear({
      text: token,
      css: this.tokenButton,
    });
  }

  async selectDestToken(token: string): Promise<void> {
    await this.driver.waitForSelector(this.destinationAssetPickerButton);
    await this.driver.clickElement(this.destinationAssetPickerButton);
    await this.driver.fill(this.assetPrickerSearchInput, token);
    await this.driver.clickElementAndWaitToDisappear({
      text: token,
      css: this.tokenButton,
    });
  }

  async selectNetwork(network: string): Promise<void> {
    await this.driver.clickElement(this.networkSelector);
    await this.driver.clickElement(this.networkNameSelector(network));
  }
}

export default BridgeQuotePage;