From 165e666381e98eac181f37636da60be3b347d579 Mon Sep 17 00:00:00 2001
From: Daniel Izdebski <spidiritsu@gmail.com>
Date: Fri, 1 Dec 2023 01:17:55 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(metamask):=20Add=20support=20f?=
 =?UTF-8?q?or=20adding=20new=20accounts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 wallets/metamask/src/metamask.ts              |  4 +++
 .../pages/HomePage/actions/addNewAccount.ts   | 18 +++++++++++++
 .../src/pages/HomePage/actions/index.ts       |  1 +
 wallets/metamask/src/pages/HomePage/page.ts   |  5 ++++
 .../src/pages/HomePage/selectors/index.ts     |  6 +++++
 .../test/e2e/metamask/addNewAccount.spec.ts   | 25 +++++++++++++++++++
 6 files changed, 59 insertions(+)
 create mode 100644 wallets/metamask/src/pages/HomePage/actions/addNewAccount.ts
 create mode 100644 wallets/metamask/test/e2e/metamask/addNewAccount.spec.ts

diff --git a/wallets/metamask/src/metamask.ts b/wallets/metamask/src/metamask.ts
index 746c9f0a9..cf42733ec 100644
--- a/wallets/metamask/src/metamask.ts
+++ b/wallets/metamask/src/metamask.ts
@@ -30,6 +30,10 @@ export class MetaMask {
     await this.onboardingPage.importWallet(seedPhrase, this.password)
   }
 
+  async addNewAccount(accountName: string) {
+    await this.homePage.addNewAccount(accountName)
+  }
+
   async importWalletFromPrivateKey(privateKey: string) {
     await this.homePage.importWalletFromPrivateKey(privateKey)
   }
diff --git a/wallets/metamask/src/pages/HomePage/actions/addNewAccount.ts b/wallets/metamask/src/pages/HomePage/actions/addNewAccount.ts
new file mode 100644
index 000000000..15d48d8e6
--- /dev/null
+++ b/wallets/metamask/src/pages/HomePage/actions/addNewAccount.ts
@@ -0,0 +1,18 @@
+import type { Page } from '@playwright/test'
+import Selectors from '../selectors'
+
+export async function addNewAccount(page: Page, accountName: string) {
+  // TODO: Use zod to validate this.
+  if (accountName.length === 0) {
+    throw new Error('[AddNewAccount] Account name cannot be an empty string')
+  }
+
+  await page.locator(Selectors.accountMenu.accountButton).click()
+
+  await page.locator(Selectors.accountMenu.addAccountMenu.addAccountButton).click()
+  await page.locator(Selectors.accountMenu.addAccountMenu.addNewAccountButton).click()
+
+  await page.locator(Selectors.accountMenu.addAccountMenu.addNewAccountMenu.accountNameInput).fill(accountName)
+
+  await page.locator(Selectors.accountMenu.addAccountMenu.addNewAccountMenu.createButton).click()
+}
diff --git a/wallets/metamask/src/pages/HomePage/actions/index.ts b/wallets/metamask/src/pages/HomePage/actions/index.ts
index 83c7eab63..4fe2a250f 100644
--- a/wallets/metamask/src/pages/HomePage/actions/index.ts
+++ b/wallets/metamask/src/pages/HomePage/actions/index.ts
@@ -6,3 +6,4 @@ export * from './settings'
 export * from './switchNetwork'
 export * from './addNetwork'
 export * from './toggleShowTestNetworks'
+export * from './addNewAccount'
diff --git a/wallets/metamask/src/pages/HomePage/page.ts b/wallets/metamask/src/pages/HomePage/page.ts
index 9ff49e30d..74cd8ddea 100644
--- a/wallets/metamask/src/pages/HomePage/page.ts
+++ b/wallets/metamask/src/pages/HomePage/page.ts
@@ -1,6 +1,7 @@
 import type { Page } from '@playwright/test'
 import {
   addNetwork,
+  addNewAccount,
   importWalletFromPrivateKey,
   lock,
   settings,
@@ -30,6 +31,10 @@ export class HomePage {
     await lock(this.page)
   }
 
+  async addNewAccount(accountName: string) {
+    await addNewAccount(this.page, accountName)
+  }
+
   async importWalletFromPrivateKey(privateKey: string) {
     await importWalletFromPrivateKey(this.page, privateKey)
   }
diff --git a/wallets/metamask/src/pages/HomePage/selectors/index.ts b/wallets/metamask/src/pages/HomePage/selectors/index.ts
index 083b9abde..dfc23adcb 100644
--- a/wallets/metamask/src/pages/HomePage/selectors/index.ts
+++ b/wallets/metamask/src/pages/HomePage/selectors/index.ts
@@ -3,6 +3,11 @@ import settings from './settings'
 
 const accountMenuContainer = '.multichain-account-menu-popover'
 
+const addNewAccountMenu = {
+  accountNameInput: `${accountMenuContainer} input`,
+  createButton: `${accountMenuContainer} button.mm-button-primary`
+}
+
 const importAccountMenu = {
   privateKeyInput: `${accountMenuContainer} input#private-key-box`,
   importButton: `${accountMenuContainer} ${createDataTestSelector('import-account-confirm-button')}`,
@@ -17,6 +22,7 @@ const addAccountMenu = {
     'multichain-account-menu-popover-add-account'
   )}`,
   importAccountButton: `${accountMenuContainer} div.mm-box.mm-box--padding-4:nth-child(2) > div.mm-box:nth-child(2) > button`,
+  addNewAccountMenu,
   importAccountMenu
 }
 
diff --git a/wallets/metamask/test/e2e/metamask/addNewAccount.spec.ts b/wallets/metamask/test/e2e/metamask/addNewAccount.spec.ts
new file mode 100644
index 000000000..010a40390
--- /dev/null
+++ b/wallets/metamask/test/e2e/metamask/addNewAccount.spec.ts
@@ -0,0 +1,25 @@
+import { testWithSynpress } from 'fixtures'
+import { MetaMask, unlockForFixture } from '../../../src'
+
+import basicSetup from '../wallet-setup/basic.setup'
+
+const test = testWithSynpress(basicSetup, unlockForFixture)
+
+const { expect } = test
+
+test('should add a new account with specified name', async ({ context, metamaskPage }) => {
+  const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword)
+
+  const accountName = 'Test Account'
+  await metamask.addNewAccount(accountName)
+
+  await expect(metamaskPage.locator(metamask.homePage.selectors.accountMenu.accountButton)).toHaveText(accountName)
+})
+
+test('should throw an error if an empty account name is passed', async ({ context, metamaskPage }) => {
+  const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword)
+
+  await expect(metamask.addNewAccount('')).rejects.toThrowError(
+    '[AddNewAccount] Account name cannot be an empty string'
+  )
+})