fix: display btc account creation while in settings (#28379)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR resolves the issue where the account creation is now displayed
if the user tries to create a BTC account while in the settings page.

## **Related issues**

Fixes: MetaMask/accounts-planning#642

## **Manual testing steps**

1. Go to settings and check `Enable "Add a new Bitcoin account (Beta)"`
in the experimental settings.
2. Open the account menu
3. Create a btc account

## **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**

- [ ] 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.

ui/components/multichain/account-list-menu/account-list-menu.test.tsx

@@ -7,27 +7,32 @@ import {
   KeyringAccountType,
 } from '@metamask/keyring-api';
 import { merge } from 'lodash';
-import { fireEvent, renderWithProvider, waitFor } from '../../../../test/jest';
+import { fireEvent, waitFor } from '../../../../test/jest';
 import configureStore from '../../../store/store';
 import mockState from '../../../../test/data/mock-state.json';
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
 // TODO: Remove restricted import
 // eslint-disable-next-line import/no-restricted-paths
 import messages from '../../../../app/_locales/en/messages.json';
-import { CONNECT_HARDWARE_ROUTE } from '../../../helpers/constants/routes';
+import {
+  CONFIRMATION_V_NEXT_ROUTE,
+  CONNECT_HARDWARE_ROUTE,
+} from '../../../helpers/constants/routes';
 ///: END:ONLY_INCLUDE_IF
 import { ETH_EOA_METHODS } from '../../../../shared/constants/eth-methods';
 import { createMockInternalAccount } from '../../../../test/jest/mocks';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import { AccountListMenu } from '.';
 
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
 const mockOnClose = jest.fn();
 const mockGetEnvironmentType = jest.fn();
 const mockNextAccountName = jest.fn().mockReturnValue('Test Account 2');
+const mockBitcoinClientCreateAccount = jest.fn();
 
 jest.mock('../../../../app/scripts/lib/util', () => ({
   ...jest.requireActual('../../../../app/scripts/lib/util'),
-  getEnvironmentType: () => mockGetEnvironmentType,
+  getEnvironmentType: () => () => mockGetEnvironmentType(),
 }));
 ///: END:ONLY_INCLUDE_IF
 
@@ -43,6 +48,15 @@ jest.mock('react-router-dom', () => ({
   useHistory: jest.fn(() => []),
 }));
 
+jest.mock('../../../hooks/accounts/useMultichainWalletSnapClient', () => ({
+  ...jest.requireActual(
+    '../../../hooks/accounts/useMultichainWalletSnapClient',
+  ),
+  useMultichainWalletSnapClient: () => ({
+    createAccount: mockBitcoinClientCreateAccount,
+  }),
+}));
+
 const render = (
   state = {},
   props: {
@@ -52,6 +66,7 @@ const render = (
     onClose: () => jest.fn(),
     allowedAccountTypes: [EthAccountType.Eoa, EthAccountType.Erc4337],
   },
+  location: string = '/',
 ) => {
   const defaultState = {
     ...mockState,
@@ -82,6 +97,7 @@ const render = (
           },
         },
       },
+      bitcoinSupportEnabled: true,
     },
     activeTab: {
       id: 113,
@@ -95,7 +111,7 @@ const render = (
     },
   };
   const store = configureStore(merge(defaultState, state));
-  return renderWithProvider(<AccountListMenu {...props} />, store);
+  return renderWithProvider(<AccountListMenu {...props} />, store, location);
 };
 
 describe('AccountListMenu', () => {
@@ -512,6 +528,51 @@ describe('AccountListMenu', () => {
   });
   ///: END:ONLY_INCLUDE_IF
 
+  describe('BTC account creation', () => {
+    afterEach(() => {
+      jest.resetAllMocks();
+    });
+
+    it('calls the bitcoin client to create an account', async () => {
+      const { getByText, getByTestId } = render();
+
+      const button = getByTestId(
+        'multichain-account-menu-popover-action-button',
+      );
+      button.click();
+
+      const createBtcAccountButton = getByText(
+        messages.addNewBitcoinAccount.message,
+      );
+
+      createBtcAccountButton.click();
+
+      expect(mockBitcoinClientCreateAccount).toHaveBeenCalled();
+    });
+
+    it('redirects the user to the approval after clicking create account in the settings page', async () => {
+      const { getByText, getByTestId } = render(
+        undefined,
+        undefined,
+        '/settings',
+      );
+
+      const button = getByTestId(
+        'multichain-account-menu-popover-action-button',
+      );
+      button.click();
+
+      const createBtcAccountButton = getByText(
+        messages.addNewBitcoinAccount.message,
+      );
+
+      createBtcAccountButton.click();
+
+      expect(historyPushMock).toHaveBeenCalledWith(CONFIRMATION_V_NEXT_ROUTE);
+      expect(mockBitcoinClientCreateAccount).toHaveBeenCalled();
+    });
+  });
+
   describe('prop `allowedAccountTypes`', () => {
     const mockAccount = createMockInternalAccount();
     const mockBtcAccount = createMockInternalAccount({

ui/components/multichain/account-list-menu/account-list-menu.tsx

@@ -6,7 +6,12 @@ import React, {
   useEffect,
 } from 'react';
 import PropTypes from 'prop-types';
-import { useHistory } from 'react-router-dom';
+import {
+  useHistory,
+  ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
+  useLocation,
+  ///: END:ONLY_INCLUDE_IF
+} from 'react-router-dom';
 import Fuse from 'fuse.js';
 import { useDispatch, useSelector } from 'react-redux';
 import {
@@ -81,6 +86,10 @@ import {
 } from '../../../../shared/constants/metametrics';
 import {
   CONNECT_HARDWARE_ROUTE,
+  ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
+  CONFIRMATION_V_NEXT_ROUTE,
+  SETTINGS_ROUTE,
+  ///: END:ONLY_INCLUDE_IF
   ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
   CUSTODY_ACCOUNT_ROUTE,
   ///: END:ONLY_INCLUDE_IF
@@ -247,6 +256,9 @@ export const AccountListMenu = ({
   const currentTabOrigin = useSelector(getOriginOfCurrentTab);
   const history = useHistory();
   const dispatch = useDispatch();
+  ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
+  const { pathname } = useLocation();
+  ///: END:ONLY_INCLUDE_IF
   const hiddenAddresses = useSelector(getHiddenAccountsList);
   const updatedAccountsList = useSelector(getUpdatedAndSortedAccounts);
   const filteredUpdatedAccountList = useMemo(
@@ -295,13 +307,25 @@ export const AccountListMenu = ({
   const bitcoinWalletSnapClient = useMultichainWalletSnapClient(
     WalletClientType.Bitcoin,
   );
+  const handleAccountCreation = async (network: MultichainNetworks) => {
+    // The account creation + renaming is handled by the Snap account bridge, so
+    // we need to close the current modal
+    onClose();
+    if (pathname.includes(SETTINGS_ROUTE)) {
+      // The settings route does not redirect pending confirmations. We need to redirect manually here.
+      history.push(CONFIRMATION_V_NEXT_ROUTE);
+    }
+
+    await bitcoinWalletSnapClient.createAccount(network);
+  };
   ///: END:ONLY_INCLUDE_IF
 
   ///: BEGIN:ONLY_INCLUDE_IF(solana)
   const solanaSupportEnabled = useSelector(getIsSolanaSupportEnabled);
   const solanaWalletSnapClient = useMultichainWalletSnapClient(
     WalletClientType.Solana,
   );
+
   ///: END:ONLY_INCLUDE_IF
 
   const [searchQuery, setSearchQuery] = useState('');
@@ -453,14 +477,7 @@ export const AccountListMenu = ({
                         },
                       });
 
-                      // The account creation + renaming is handled by the
-                      // Snap account bridge, so we need to close the current
-                      // modal
-                      onClose();
-
-                      await bitcoinWalletSnapClient.createAccount(
-                        MultichainNetworks.BITCOIN,
-                      );
+                      await handleAccountCreation(MultichainNetworks.BITCOIN);
                     }}
                     data-testid="multichain-account-menu-popover-add-btc-account"
                   >
@@ -479,11 +496,7 @@ export const AccountListMenu = ({
                     size={ButtonLinkSize.Sm}
                     startIconName={IconName.Add}
                     onClick={async () => {
-                      // The account creation + renaming is handled by the Snap account bridge, so
-                      // we need to close the current modal
-                      onClose();
-
-                      await bitcoinWalletSnapClient.createAccount(
+                      await handleAccountCreation(
                         MultichainNetworks.BITCOIN_TESTNET,
                       );
                     }}