test: [POM] Migrate watch account tests (#29314)

## **Description**

- Created a new page class `AccountDetailsModal`. Previously, it was a
part of `AccountList`. I think it's better to separate it and make it an
independent class.
- I also took the chance to improve the function `addAccount` and remove
the origin `addNewAccount`. So now for creating ethereum, bitcoin,
solana accounts, we use the same `addAccount` function with the account
type as a parameter.
- Migrate watch account e2e tests to Page Object Model
- Created `watchEoaAddress` flow that can be reusable.


[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27155?quickstart=1)

## **Related issues**


## **Manual testing steps**
Check code readability, make sure tests pass.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

test/e2e/constants.ts

@@ -76,3 +76,10 @@ export const DEFAULT_SOLANA_BALANCE = 1; // SOL
 
 /* Title of the mocked E2E test empty HTML page */
 export const EMPTY_E2E_TEST_PAGE_TITLE = 'E2E Test Page';
+
+/* Account types */
+export enum ACCOUNT_TYPE {
+  Ethereum,
+  Bitcoin,
+  Solana,
+}

test/e2e/flask/btc/common-btc.ts

@@ -2,6 +2,7 @@ import { Mockttp } from 'mockttp';
 import FixtureBuilder from '../../fixture-builder';
 import { withFixtures } from '../../helpers';
 import {
+  ACCOUNT_TYPE,
   DEFAULT_BTC_ACCOUNT,
   DEFAULT_BTC_BALANCE,
   DEFAULT_BTC_FEES_RATE,
@@ -14,7 +15,6 @@ import { Driver } from '../../webdriver/driver';
 import { loginWithBalanceValidation } from '../../page-objects/flows/login.flow';
 import AccountListPage from '../../page-objects/pages/account-list-page';
 import HeaderNavbar from '../../page-objects/pages/header-navbar';
-import { ACCOUNT_TYPE } from '../../page-objects/common';
 
 const QUICKNODE_URL_REGEX = /^https:\/\/.*\.btc.*\.quiknode\.pro(\/|$)/u;
 
@@ -218,7 +218,7 @@ export async function withBtcAccountSnap(
       await new HeaderNavbar(driver).openAccountMenu();
       const accountListPage = new AccountListPage(driver);
       await accountListPage.check_pageIsLoaded();
-      await accountListPage.addAccount(ACCOUNT_TYPE.Bitcoin, '');
+      await accountListPage.addAccount({ accountType: ACCOUNT_TYPE.Bitcoin });
       await test(driver, mockServer);
     },
   );

test/e2e/flask/btc/create-btc-account.spec.ts

@@ -1,13 +1,14 @@
 import { strict as assert } from 'assert';
 import { Suite } from 'mocha';
 import { WALLET_PASSWORD } from '../../helpers';
+import AccountDetailsModal from '../../page-objects/pages/dialog/account-details-modal';
 import AccountListPage from '../../page-objects/pages/account-list-page';
 import HeaderNavbar from '../../page-objects/pages/header-navbar';
 import LoginPage from '../../page-objects/pages/login-page';
 import PrivacySettings from '../../page-objects/pages/settings/privacy-settings';
 import ResetPasswordPage from '../../page-objects/pages/reset-password-page';
 import SettingsPage from '../../page-objects/pages/settings/settings-page';
-import { ACCOUNT_TYPE } from '../../page-objects/common';
+import { ACCOUNT_TYPE } from '../../constants';
 import { withBtcAccountSnap } from './common-btc';
 
 describe('Create BTC Account', function (this: Suite) {
@@ -82,9 +83,11 @@ describe('Create BTC Account', function (this: Suite) {
         await headerNavbar.openAccountMenu();
         const accountListPage = new AccountListPage(driver);
         await accountListPage.check_pageIsLoaded();
-        const accountAddress = await accountListPage.getAccountAddress(
-          'Bitcoin Account',
-        );
+        await accountListPage.openAccountDetailsModal('Bitcoin Account');
+
+        const accountDetailsModal = new AccountDetailsModal(driver);
+        await accountDetailsModal.check_pageIsLoaded();
+        const accountAddress = await accountDetailsModal.getAccountAddress();
         await headerNavbar.openAccountMenu();
         await accountListPage.removeAccount('Bitcoin Account');
 
@@ -97,14 +100,15 @@ describe('Create BTC Account', function (this: Suite) {
         );
         await accountListPage.closeAccountModal();
         await headerNavbar.openAccountMenu();
-        await accountListPage.addAccount(ACCOUNT_TYPE.Bitcoin, '');
+        await accountListPage.addAccount({ accountType: ACCOUNT_TYPE.Bitcoin });
         await headerNavbar.check_accountLabel('Bitcoin Account');
 
         await headerNavbar.openAccountMenu();
         await accountListPage.check_pageIsLoaded();
-        const recreatedAccountAddress = await accountListPage.getAccountAddress(
-          'Bitcoin Account',
-        );
+        await accountListPage.openAccountDetailsModal('Bitcoin Account');
+        await accountDetailsModal.check_pageIsLoaded();
+        const recreatedAccountAddress =
+          await accountDetailsModal.getAccountAddress();
 
         assert(accountAddress === recreatedAccountAddress);
       },
@@ -123,9 +127,10 @@ describe('Create BTC Account', function (this: Suite) {
         await headerNavbar.openAccountMenu();
         const accountListPage = new AccountListPage(driver);
         await accountListPage.check_pageIsLoaded();
-        const accountAddress = await accountListPage.getAccountAddress(
-          'Bitcoin Account',
-        );
+        await accountListPage.openAccountDetailsModal('Bitcoin Account');
+        const accountDetailsModal = new AccountDetailsModal(driver);
+        await accountDetailsModal.check_pageIsLoaded();
+        const accountAddress = await accountDetailsModal.getAccountAddress();
 
         // go to privacy settings page and get the SRP
         await headerNavbar.openSettingsPage();
@@ -151,14 +156,16 @@ describe('Create BTC Account', function (this: Suite) {
         await headerNavbar.check_pageIsLoaded();
         await headerNavbar.openAccountMenu();
         await accountListPage.check_pageIsLoaded();
-        await accountListPage.addAccount(ACCOUNT_TYPE.Bitcoin, '');
+        await accountListPage.addAccount({ accountType: ACCOUNT_TYPE.Bitcoin });
         await headerNavbar.check_accountLabel('Bitcoin Account');
 
         await headerNavbar.openAccountMenu();
         await accountListPage.check_pageIsLoaded();
-        const recreatedAccountAddress = await accountListPage.getAccountAddress(
-          'Bitcoin Account',
-        );
+        await accountListPage.openAccountDetailsModal('Bitcoin Account');
+        await accountDetailsModal.check_pageIsLoaded();
+        const recreatedAccountAddress =
+          await accountDetailsModal.getAccountAddress();
+
         assert(accountAddress === recreatedAccountAddress);
       },
     );