✨ feat: Add renameAccount method

wallets/metamask/src/MetaMask.ts

@@ -98,6 +98,15 @@ export class MetaMask {
     await this.homePage.addNewAccount(accountName)
   }
 
+  /**
+   * Renames the currently selected account.
+   *
+   * @param newAccountName - The new name for the account.
+   */
+  async renameAccount(newAccountName: string) {
+    await this.homePage.renameAccount(newAccountName)
+  }
+
   /**
    * Imports a wallet using the given private key.
    *

wallets/metamask/src/pages/HomePage/actions/index.ts

@@ -8,4 +8,5 @@ export * from './addNetwork'
 export * from './toggleShowTestNetworks'
 export * from './addNewAccount'
 export * from './transactionDetails'
+export * from './renameAccount'
 export { default as getAccountAddress } from './getAccountAddress'

wallets/metamask/src/pages/HomePage/actions/renameAccount.ts

@@ -0,0 +1,24 @@
+import type { Page } from '@playwright/test'
+import { z } from 'zod'
+import Selectors from '../selectors'
+
+// @todo, look into validation schema that's language agnostic for Metamask reserved words (""Account 1", "Account 2", etc.)
+const Account = z.object({
+  name: z.string().refine((value) => {
+    return value.trim().length > 0
+  }, 'Invalid account name')
+})
+
+export type Account = z.infer<typeof Account>
+
+export async function renameAccount(page: Page, newAccountName: Account['name']) {
+  Account.parse({ name: newAccountName }) // Validate newAccountName against Account schema
+
+  await page.locator(Selectors.accountMenu.accountButton).click()
+
+  await page.locator(Selectors.accountMenu.renameAccountMenu.listItemButton).nth(0).click()
+  await page.locator(Selectors.accountMenu.renameAccountMenu.listItemDetailButton).click()
+  await page.locator(Selectors.accountMenu.renameAccountMenu.renameButton).click()
+  await page.locator(Selectors.accountMenu.renameAccountMenu.renameInput).fill(newAccountName)
+  await page.locator(Selectors.accountMenu.renameAccountMenu.confirmRenameButton).click()
+}

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

@@ -5,6 +5,7 @@ import {
   getAccountAddress,
   importWalletFromPrivateKey,
   lock,
+  renameAccount,
   settings,
   switchAccount,
   switchNetwork,
@@ -37,6 +38,10 @@ export class HomePage {
     await addNewAccount(this.page, accountName)
   }
 
+  async renameAccount(newAccountName: string) {
+    await renameAccount(this.page, newAccountName)
+  }
+
   async getAccountAddress() {
     return await getAccountAddress(this.page)
   }

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

@@ -8,6 +8,14 @@ const addNewAccountMenu = {
   createButton: `${accountMenuContainer} button.mm-button-primary`
 }
 
+const renameAccountMenu = {
+  listItemButton: `${accountMenuContainer} ${createDataTestSelector('account-list-item-menu-button')}`,
+  listItemDetailButton: `${createDataTestSelector('account-list-menu-details')}`,
+  renameButton: `${createDataTestSelector('editable-label-button')}`,
+  confirmRenameButton: 'div.editable-label button.mm-button-icon',
+  renameInput: '.mm-text-field .mm-box--padding-right-4'
+}
+
 const importAccountMenu = {
   privateKeyInput: `${accountMenuContainer} input#private-key-box`,
   importButton: `${accountMenuContainer} ${createDataTestSelector('import-account-confirm-button')}`,
@@ -29,7 +37,8 @@ const addAccountMenu = {
 const accountMenu = {
   accountButton: createDataTestSelector('account-menu-icon'),
   accountNames: `${accountMenuContainer} .multichain-account-menu-popover__list .multichain-account-list-item__account-name__button`,
-  addAccountMenu
+  addAccountMenu,
+  renameAccountMenu
 }
 
 const threeDotsMenu = {

wallets/metamask/test/e2e/renameAccount.spec.ts

@@ -0,0 +1,23 @@
+import { testWithSynpress } from '@synthetixio/synpress-core'
+import { MetaMask, metaMaskFixtures } from '../../src'
+
+import basicSetup from '../wallet-setup/basic.setup'
+
+const test = testWithSynpress(metaMaskFixtures(basicSetup))
+
+const { expect } = test
+
+test('should rename current account with specified name', async ({ context, metamaskPage }) => {
+  const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword)
+
+  const accountName = 'Test Account'
+  await metamask.renameAccount(accountName)
+
+  await expect(metamaskPage.locator(metamask.homePage.selectors.accountMenu.accountButton)).toHaveText(accountName)
+})
+
+test('should throw Zod error if an empty account name is passed', async ({ context, metamaskPage }) => {
+  const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword)
+
+  await expect(metamask.renameAccount('')).rejects.toThrowError('Invalid account name')
+})