UX: Multichain: Add Account or Hardware Wallet button (#21081)

## **Description**
Replaces the "Add / Import / Hardware" links with a single button that
takes the user to another quick modal to add, import, or connect a
hardware wallet.


## **Manual testing steps**

_1.  Open the account menu
_2. Click the "Add account or hardware wallet" button
_3. Click each option, ensure the correct modal displays
_4. Click "back" on each screen, ensure it goes back logically in the
nested cycle

## **Screenshots/Recordings**



https://github.com/MetaMask/metamask-extension/assets/46655/7967d0ce-870c-4ccb-91bc-3f2e9cf55e79


## **Related issues**

_Fixes MetaMask/MetaMask-planning#1374

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've clearly explained:
  - [ ] What problem this PR is solving.
  - [ ] How this problem was solved.
  - [ ] How reviewers can test my changes.
- [ ] I’ve indicated what issue this PR is linked to: Fixes #???
- [ ] I’ve included tests if applicable.
- [ ] I’ve documented any added code.
- [ ] 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)).
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [ ] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] 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/tests/account-details.spec.js

@@ -105,6 +105,9 @@ describe('Show account details', function () {
 
         // Create and focus on different account
         await driver.clickElement('[data-testid="account-menu-icon"]');
+        await driver.clickElement(
+          '[data-testid="multichain-account-menu-popover-action-button"]',
+        );
         await driver.clickElement(
           '[data-testid="multichain-account-menu-popover-add-account"]',
         );
@@ -153,6 +156,9 @@ describe('Show account details', function () {
 
         // Create and focus on different account
         await driver.clickElement('[data-testid="account-menu-icon"]');
+        await driver.clickElement(
+          '[data-testid="multichain-account-menu-popover-action-button"]',
+        );
         await driver.clickElement(
           '[data-testid="multichain-account-menu-popover-add-account"]',
         );

test/e2e/tests/add-account.spec.js

@@ -41,6 +41,9 @@ describe('Add account', function () {
         await unlockWallet(driver);
 
         await driver.clickElement('[data-testid="account-menu-icon"]');
+        await driver.clickElement(
+          '[data-testid="multichain-account-menu-popover-action-button"]',
+        );
         await driver.clickElement(
           '[data-testid="multichain-account-menu-popover-add-account"]',
         );
@@ -82,6 +85,9 @@ describe('Add account', function () {
 
         // Create 2nd account
         await driver.clickElement('[data-testid="account-menu-icon"]');
+        await driver.clickElement(
+          '[data-testid="multichain-account-menu-popover-action-button"]',
+        );
         await driver.clickElement(
           '[data-testid="multichain-account-menu-popover-add-account"]',
         );
@@ -176,7 +182,9 @@ describe('Add account', function () {
         await unlockWallet(driver);
 
         await driver.clickElement('[data-testid="account-menu-icon"]');
-
+        await driver.clickElement(
+          '[data-testid="multichain-account-menu-popover-action-button"]',
+        );
         await driver.clickElement(
           '[data-testid="multichain-account-menu-popover-add-account"]',
         );
@@ -191,7 +199,6 @@ describe('Add account', function () {
         });
 
         await driver.clickElement('[data-testid="account-menu-icon"]');
-
         const menuItems = await driver.findElements(
           '.multichain-account-list-item',
         );
@@ -207,6 +214,9 @@ describe('Add account', function () {
 
         // Create 3rd account with private key
         await driver.clickElement('.mm-text-field');
+        await driver.clickElement(
+          '[data-testid="multichain-account-menu-popover-action-button"]',
+        );
         await driver.clickElement({ text: 'Import account', tag: 'button' });
         await driver.fill('#private-key-box', testPrivateKey);
 

test/e2e/tests/import-flow.spec.js

@@ -83,7 +83,10 @@ describe('Import flow', function () {
 
         // choose Create account from the account menu
         await driver.clickElement('[data-testid="account-menu-icon"]');
-        await driver.clickElement({ text: 'Add account', tag: 'button' });
+        await driver.clickElement(
+          '[data-testid="multichain-account-menu-popover-action-button"]',
+        );
+        await driver.clickElement({ text: 'Add a new account', tag: 'button' });
 
         // set account name
         await driver.fill('[placeholder="Account 2"]', '2nd account');
@@ -196,6 +199,9 @@ describe('Import flow', function () {
         await driver.press('#password', driver.Key.ENTER);
 
         await driver.clickElement('[data-testid="account-menu-icon"]');
+        await driver.clickElement(
+          '[data-testid="multichain-account-menu-popover-action-button"]',
+        );
         await driver.clickElement({ text: 'Import account', tag: 'button' });
 
         // Imports Account 4 with private key
@@ -222,6 +228,9 @@ describe('Import flow', function () {
         });
 
         // Imports Account 5 with private key
+        await driver.clickElement(
+          '[data-testid="multichain-account-menu-popover-action-button"]',
+        );
         await driver.clickElement({ text: 'Import account', tag: 'button' });
         await driver.findClickableElement('#private-key-box');
         await driver.fill('#private-key-box', testPrivateKey2);
@@ -277,6 +286,9 @@ describe('Import flow', function () {
 
         // Imports an account with JSON file
         await driver.clickElement('[data-testid="account-menu-icon"]');
+        await driver.clickElement(
+          '[data-testid="multichain-account-menu-popover-action-button"]',
+        );
         await driver.clickElement({ text: 'Import account', tag: 'button' });
 
         await driver.clickElement('.dropdown__select');
@@ -340,6 +352,9 @@ describe('Import flow', function () {
 
         // choose Import Account from the account menu
         await driver.clickElement('[data-testid="account-menu-icon"]');
+        await driver.clickElement(
+          '[data-testid="multichain-account-menu-popover-action-button"]',
+        );
         await driver.clickElement({ text: 'Import account', tag: 'button' });
 
         // enter private key
@@ -373,6 +388,9 @@ describe('Import flow', function () {
 
           // choose Connect hardware wallet from the account menu
           await driver.clickElement('[data-testid="account-menu-icon"]');
+          await driver.clickElement(
+            '[data-testid="multichain-account-menu-popover-action-button"]',
+          );
           await driver.clickElement({
             text: 'Add hardware wallet',
             tag: 'button',

test/e2e/user-actions-benchmark.js

@@ -34,6 +34,9 @@ async function loadNewAccount() {
       await driver.press('#password', driver.Key.ENTER);
 
       await driver.clickElement('[data-testid="account-menu-icon"]');
+      await driver.clickElement(
+        '[data-testid="multichain-account-menu-popover-action-button"]',
+      );
       const timestampBeforeAction = new Date();
       await driver.clickElement(
         '[data-testid="multichain-account-menu-popover-add-account"]',