pages

wallets/phantom/src/PhantomWallet.ts

@@ -0,0 +1,58 @@
+import { type BrowserContext, type Page } from '@playwright/test'
+import { HomePage } from './pages/HomePage/page'
+import { LockPage } from './pages/LockPage/page'
+import { NotificationPage } from './pages/NotificationPage/page'
+
+export class KeplrWallet {
+  readonly lockPage: LockPage
+  readonly homePage: HomePage
+  readonly notificationPage: NotificationPage
+
+  constructor(
+    readonly page: Page,
+    readonly context?: BrowserContext,
+    readonly password?: string,
+    readonly extensionId?: string | undefined
+  ) {
+    this.lockPage = new LockPage(page)
+    this.homePage = new HomePage(page)
+    this.notificationPage = new NotificationPage(page)
+  }
+  /**
+   * Does initial setup for the wallet.
+   *
+   * @param playwrightInstance. The playwright instance to use.
+   * @param secretWordsOrPrivateKey. The secret words or private key to import.
+   * @param password. The password to set.
+   */
+  async setupWallet({ secretWordsOrPrivateKey, password }: { secretWordsOrPrivateKey: string; password: string }) {
+    const wallet = await this.lockPage.importWallet(secretWordsOrPrivateKey, password)
+    return wallet
+  }
+
+  async createWallet(password: string) {
+    const wallet = await this.lockPage.createWallet(password)
+    return wallet
+  }
+
+  async getWalletAddress(wallet: string) {
+    const walletAddress = await this.homePage.getWalletAddress(wallet)
+    return walletAddress
+  }
+
+  async addNewTokensFound() {
+    return await this.homePage.addNewTokensFound()
+  }
+
+  async disconnectWalletFromDapps() {
+    return await this.homePage.disconnectWalletFromDapps()
+  }
+
+  async acceptAccess() {
+    return await this.notificationPage.acceptAccess()
+  }
+
+  async rejectAccess() {
+    return await this.notificationPage.rejectAccess()
+  }
+}

wallets/phantom/src/pages/ConfirmationPage/page.ts

@@ -0,0 +1,13 @@
+import type { Page } from '@playwright/test'
+import { confirmationPageElements } from './selectors'
+
+export class ConfirmationPage {
+  static readonly selectors = confirmationPageElements
+  readonly selectors = confirmationPageElements
+
+  readonly page: Page
+
+  constructor(page: Page) {
+    this.page = page
+  }
+}

wallets/phantom/src/pages/ConfirmationPage/selectors/index.ts

@@ -0,0 +1,12 @@
+const confirmationPage = '.confirmation-page';
+const confirmationPageFooter = `${confirmationPage} .confirmation-footer`;
+const footer = {
+  footer: confirmationPageFooter,
+  cancelButton: `${confirmationPageFooter} .btn-secondary`,
+  approveButton: `${confirmationPageFooter} .btn-primary`,
+};
+
+export const confirmationPageElements = {
+  confirmationPage,
+  footer,
+};

wallets/phantom/src/pages/HomePage/page.ts

@@ -0,0 +1,13 @@
+import type { Page } from '@playwright/test'
+import { homePageElements } from './selectors'
+
+export class HomePage {
+  static readonly selectors = homePageElements
+  readonly selectors = homePageElements
+
+  readonly page: Page
+
+  constructor(page: Page) {
+    this.page = page
+  }
+}

wallets/phantom/src/pages/HomePage/selectors/index.ts

@@ -0,0 +1,165 @@
+const networkSwitcherButtonSelector = '.network-display';
+
+const networkSwitcher = {
+  button: networkSwitcherButtonSelector,
+  networkName: `${networkSwitcherButtonSelector} .typography`,
+  dropdownMenu: '[data-testid="network-droppo"]',
+  dropdownMenuItem: `[data-testid="network-droppo"] .dropdown-menu-item`,
+  mainnetNetworkItem: `[data-testid="network-droppo"] [data-testid="mainnet-network-item"]`,
+  goerliNetworkItem: `[data-testid="network-droppo"] [data-testid="goerli-network-item"]`,
+  sepoliaNetworkItem: `[data-testid="network-droppo"] [data-testid="sepolia-network-item"]`,
+  localhostNetworkItem: `[data-testid="network-droppo"] [data-testid="Localhost 8545-network-item"]`,
+  networkButton: number =>
+    `[data-testid="network-droppo"] .dropdown-menu-item:nth-child(${
+      3 + number
+    })`,
+};
+
+
+const walletOverview = '.wallet-overview';
+
+const tabs = {
+  assetsButton: '[data-testid="home__asset-tab"] button',
+  activityButton: '[data-testid="home__activity-tab"] button',
+};
+
+const transactionList = '.transaction-list__transactions';
+const pendingTransactionsList = `${transactionList} .transaction-list__pending-transactions`;
+const completedTransactionsList = `${transactionList} .transaction-list__completed-transactions`;
+const activityTab = {
+  transactionList,
+  pendingTransactionsList,
+  completedTransactionsList,
+  unconfirmedTransaction: `${pendingTransactionsList} .transaction-list-item--unconfirmed`,
+  confirmedTransaction: `${completedTransactionsList} .transaction-list-item`,
+};
+
+const popupSelector = '.popover-container';
+const sendPopupSelector = `${popupSelector} .transaction-list-item-details`;
+const popup = {
+  container: popupSelector,
+  closeButton: '.popover-header__button',
+  background: '.popover-bg',
+  sendPopup: {
+    container: sendPopupSelector,
+    speedUpButton: `${sendPopupSelector} .btn-primary`,
+    cancelButton: `${sendPopupSelector} .btn-secondary`,
+    transactionStatus: `${sendPopupSelector} .transaction-status`,
+    copyTxIdButton: `${sendPopupSelector} .transaction-list-item-details__tx-hash .transaction-list-item-details__header-button a`,
+  },
+};
+
+const tippyTooltipSelector = '.tippy-popper';
+const tippyTooltip = {
+  container: tippyTooltipSelector,
+  closeButton: `${tippyTooltipSelector} button`,
+};
+
+const actionableMessageSelector = '.actionable-message';
+const actionableMessage = {
+  container: actionableMessageSelector,
+  closeButton: `${actionableMessageSelector} button`,
+};
+
+const accountMenu = {
+  accountButton: number => `[data-testid="account-menu"] [data-testid="tooltip_interactive-wrapper"]:nth-child(${number})`,
+};
+
+const settingsMenu = {
+  settingsMenuButton: '[data-testid="settings-menu-open-button"]',
+  settingsSidebarButton: '[data-testid="sidebar_menu-button-settings"]',
+  settingsSidebarCloseButton: '[data-testid="settings-menu-close-button"]',
+  settingsPreferencesButton: '[data-testid="settings-item-preferences"]',
+  trustedAppsRow: '[data-testid="settings-item-trusted-apps"]',
+  developerSettingsRow: '[data-testid="settings-item-developer-settings"]',
+  defaultAppWalletRow: '[data-testid="settings-item-metamask-override"]',
+};
+const whatsNew = {
+  header: '[data-testid="whats_new-header"]',
+  continueButton: '[data-testid="whats_new-continue_button"]',
+};
+
+const welcome = {
+  takeTheTourButton: '[data-testid="welcome-take_the_tour"]',
+  takeTheTourButtonNext: '[data-testid="primary-button"]',
+  finishSetup: ['data-testid="onboarding-form-submit-button"'],
+};
+
+const accountBar = {
+  title: '[data-testid="tooltip_interactive-wrapper"]',
+  ethRow: '[data-testid="account-header-chain-eip155:1"]',
+  solanaRow: '[data-testid="account-header-chain-solana:101"]',
+};
+
+const defaultWallet = {
+  metamask: '[data-testid="metamask-override--USE_METAMASK"]',
+  phantom: '[data-testid="metamask-override--USE_PHANTOM"]',
+  always_ask: '[data-testid="metamask-override--ALWAYS_ASK"]',
+};
+
+const connectedSites = {
+  trustedAppsRevokeButton: '[data-testid="trusted-apps-revoke-button"]',
+  trustedAppsBackButton: '[data-testid="header--back"]',
+  rowButton: '[data-testid="trusted_apps_row-button"]',
+};
+
+const accountModal = {
+  walletAddressInput: '.account-modal .qr-code__address',
+  closeButton: '.account-modal__close',
+};
+
+const importAccountSelector = '.new-account';
+const importAccount = {
+  page: importAccountSelector,
+  input: `${importAccountSelector} #private-key-box`,
+  cancelButton: `${importAccountSelector} .new-account-create-form__button:nth-child(1)`,
+  importButton: `${importAccountSelector} .new-account-create-form__button:nth-child(2)`,
+};
+
+const createAccount = {
+  page: importAccountSelector,
+  input: `${importAccountSelector} .new-account-create-form__input`,
+  cancelButton: `${importAccountSelector} .new-account-create-form__button:nth-child(1)`,
+  createButton: `${importAccountSelector} .new-account-create-form__button:nth-child(2)`,
+};
+
+const importTokenFormSelector = '.import-token__custom-token-form';
+const importToken = {
+  form: importTokenFormSelector,
+  tokenContractAddressInput: `${importTokenFormSelector} #custom-address`,
+  tokenSymbolInput: `${importTokenFormSelector} #custom-symbol`,
+  tokenEditButton: `${importTokenFormSelector} .import-token__custom-symbol__edit`,
+  tokenDecimalInput: `${importTokenFormSelector} #custom-decimals`,
+  addCustomTokenButton: `[data-testid="page-container-footer-next"]`,
+  confirmImportTokenContent: '.confirm-import-token',
+  importTokensButton: `.btn-primary`,
+};
+
+const assetNavigationSelector = '.asset-navigation';
+const asset = {
+  navigation: assetNavigationSelector,
+  backButton: `${assetNavigationSelector} [data-testid="asset__back"]`,
+};
+
+
+export const homePageElements = {
+  networkSwitcher,
+  importToken,
+  importAccount,
+  createAccount,
+  accountMenu,
+  accountBar,
+  asset,
+  tabs,
+  walletOverview,
+  accountModal,
+  connectedSites,
+  welcome,
+  defaultWallet,
+  whatsNew,
+  popup,
+  activityTab,
+  settingsMenu,
+  actionableMessage,
+  tippyTooltip
+}

wallets/phantom/src/pages/LockPage/page.ts

@@ -0,0 +1,13 @@
+import type { Page } from '@playwright/test'
+import { lockPageElements } from './selectors'
+
+export class LockPage {
+  static readonly selectors = lockPageElements
+  readonly selectors = lockPageElements
+
+  readonly page: Page
+
+  constructor(page: Page) {
+    this.page = page
+  }
+}

wallets/phantom/src/pages/LockPage/selectors/index.ts

@@ -0,0 +1,109 @@
+const app = '#root';
+const welcomePage = '#root';
+const confirmButton = `${welcomePage} .first-time-flow__button`;
+const welcomePageElements = {
+  app,
+  welcomePage,
+  confirmButton,
+};
+
+const metametricsPage = '.metametrics-opt-in';
+const optOutAnalyticsButton = `${metametricsPage} [data-testid="page-container-footer-cancel"]`;
+
+const metametricsPageElements = {
+  metametricsPage,
+  optOutAnalyticsButton,
+};
+
+const firstTimeFlowPage = '.first-time-flow';
+const importWalletButton = `[data-testid="import-wallet-button"]`;
+const importRecoveryPhraseButton = `[data-testid="import-seed-phrase-button"]`;
+const createWalletButton = `${firstTimeFlowPage} [data-testid="create-wallet-button"]`;
+
+const firstTimeFlowPageElements = {
+  firstTimeFlowPage,
+  importWalletButton,
+  importRecoveryPhraseButton,
+  createWalletButton,
+};
+
+const firstTimeFlowImportPage = '.first-time-flow__import';
+const newVaultForm = `${firstTimeFlowImportPage} .create-new-vault__form`;
+const secretWordsInput = number =>
+  `[data-testid="secret-recovery-phrase-word-input-${number}"]`;
+const confirmWordsButton = `[data-testid="onboarding-form-submit-button"]`;
+const passwordInput = `[data-testid="onboarding-form-password-input"]`;
+const confirmPasswordInput = `[data-testid="onboarding-form-confirm-password-input"]`;
+const termsCheckbox = `[data-testid="onboarding-form-terms-of-service-checkbox"]`;
+const continueAfterPasswordButton =
+  '[data-testid="onboarding-form-submit-button"]';
+const getStartedButton = '[data-testid="onboarding-form-submit-button"]';
+const importButton = `${newVaultForm} .create-new-vault__submit-button`;
+
+const firstTimeFlowImportPageElements = {
+  firstTimeFlowImportPage,
+  newVaultForm,
+  secretWordsInput,
+  passwordInput,
+  confirmPasswordInput,
+  termsCheckbox,
+  importButton,
+  confirmWordsButton,
+  continueAfterPasswordButton,
+  getStartedButton,
+};
+
+const firstTimeFlowCreatePage = '.first-time-flow';
+const newPasswordInput = `${firstTimeFlowCreatePage} [data-testid="create-password"]`;
+const confirmNewPasswordInput = `${firstTimeFlowCreatePage} [data-testid="confirm-password"]`;
+const newSignupCheckbox = `${firstTimeFlowCreatePage} .first-time-flow__checkbox`;
+const createButton = `${firstTimeFlowCreatePage} .first-time-flow__button`;
+
+const firstTimeFlowCreatePagePageElements = {
+  firstTimeFlowCreatePage,
+  newPasswordInput,
+  confirmNewPasswordInput,
+  newSignupCheckbox,
+  createButton,
+};
+
+const secureYourWalletPage = '[data-testid="seed-phrase-intro"]';
+const nextButton = `${secureYourWalletPage} button`;
+
+const secureYourWalletPageElements = {
+  secureYourWalletPage,
+  nextButton,
+};
+
+const revealSeedPage = '[data-testid="reveal-seed-phrase"]';
+const remindLaterButton = `${revealSeedPage} .first-time-flow__button`;
+
+const revealSeedPageElements = {
+  revealSeedPage,
+  remindLaterButton,
+};
+
+const endOfFlowPage = '[data-testid="end-of-flow"]';
+const allDoneButton = `${endOfFlowPage} [data-testid="EOF-complete-button"]`;
+
+const endOfFlowPageElements = {
+  endOfFlowPage,
+  allDoneButton,
+};
+
+const unlockPageElements = {
+  passwordInput: '[data-testid="unlock-form-password-input"]',
+  unlockButton: '[data-testid="unlock-form-submit-button"]',
+};
+
+export const lockPageElements = {
+  endOfFlowPageElements,
+  revealSeedPageElements,
+  secureYourWalletPageElements,
+  firstTimeFlowCreatePagePageElements,
+  firstTimeFlowImportPageElements,
+  firstTimeFlowPageElements,
+  metametricsPageElements,
+  welcomePageElements,
+  unlockPageElements,
+}