✨ feat(metamask): Add support for adding new accounts (#1023)

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)
   }

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()
+}

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'

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)
   }

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
 }
 

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'
+  )
+})