feat: Add search functionality to the Multichain Account List page (#35616)

## **Description**
This PR adds search functionality implementation for the Multichain
Account List.

Notes:
- Improvement for hiding wallet header for singular wallet is added (it
was initial requirement for the list).
- Create new account button is removed in search mode, as it doesn't
make much sense to create account which name will be filtered already
(not visible).

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/35616?quickstart=1)

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Added search functionality to the Multichain Account
List

## **Related issues**
Fixes: https://consensyssoftware.atlassian.net/browse/MUL-370

## **Manual testing steps**
1. Go to multichain account list page while multichain state 2 feature
flag is enabled.
2. Test search by typing account names in the search bar.

## **Screenshots/Recordings**
### **Before**
Search was not available before. Nothing to show here.

### **After**
<img width="398" height="602" alt="Screenshot 2025-09-04 at 12 25 22"
src="https://github.com/user-attachments/assets/ed2d682d-2a31-488d-8ab6-0a8edf703570"
/>
<img width="398" height="602" alt="Screenshot 2025-09-04 at 12 25 40"
src="https://github.com/user-attachments/assets/1c0faaf4-51b6-473d-ace8-02a07df9e12a"
/>
<img width="398" height="602" alt="Screenshot 2025-09-04 at 12 26 43"
src="https://github.com/user-attachments/assets/3ade76ca-304a-4b13-9962-a2745c66f50d"
/>
<img width="398" height="602" alt="Screenshot 2025-09-04 at 12 25 02"
src="https://github.com/user-attachments/assets/70e1ab83-6a12-4293-b8d0-f5190bac9930"
/>
<img width="398" height="602" alt="Screenshot 2025-09-04 at 12 26 02"
src="https://github.com/user-attachments/assets/3b782a0e-3722-40ae-8724-b3e251f6b8ef"
/>
<img width="398" height="602" alt="Screenshot 2025-09-04 at 12 26 34"
src="https://github.com/user-attachments/assets/01d5dcd1-6c0a-4fc6-841e-780c817756e0"
/>



https://github.com/user-attachments/assets/84ad68a1-4445-4d2a-bc5e-99bacdb63741


## **Pre-merge author checklist**
- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.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.

Author: david0xd

app/_locales/en/messages.json

@@ -153,6 +153,22 @@ describe('MultichainAccountList', () => {
     expect(screen.getByText('Account 1 from wallet 2')).toBeInTheDocument();
   });
 
+  it('does not render wallet headers based on prop', () => {
+    renderComponent({ displayWalletHeader: false });
+
+    expect(screen.queryByText('Wallet 1')).not.toBeInTheDocument();
+    expect(screen.queryByText('Wallet 2')).not.toBeInTheDocument();
+    expect(
+      screen.getByTestId(`multichain-account-cell-${walletOneGroupId}`),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId(`multichain-account-cell-${walletTwoGroupId}`),
+    ).toBeInTheDocument();
+
+    expect(screen.getByText('Account 1 from wallet 1')).toBeInTheDocument();
+    expect(screen.getByText('Account 1 from wallet 2')).toBeInTheDocument();
+  });
+
   it('marks only the selected account with a check icon and dispatches action on click', () => {
     renderComponent();
 
@@ -237,7 +253,7 @@ describe('MultichainAccountList', () => {
     renderComponent({ wallets: multiGroupWallets });
 
     expect(
-      screen.getAllByTestId('multichain-account-tree-wallet-header'),
+      screen.queryAllByTestId('multichain-account-tree-wallet-header'),
     ).toHaveLength(1);
     expect(
       screen.getByTestId(`multichain-account-cell-${walletOneGroupId}`),

app/_locales/en_GB/messages.json

@@ -41,12 +41,16 @@ export type MultichainAccountListProps = {
   wallets: AccountTreeWallets;
   selectedAccountGroups: AccountGroupId[];
   handleAccountClick?: (accountGroupId: AccountGroupId) => void;
+  isInSearchMode?: boolean;
+  displayWalletHeader?: boolean;
 };
 
 export const MultichainAccountList = ({
   wallets,
   selectedAccountGroups,
   handleAccountClick,
+  isInSearchMode = false,
+  displayWalletHeader = true,
 }: MultichainAccountListProps) => {
   const dispatch = useDispatch();
   const history = useHistory();
@@ -144,7 +148,7 @@ export const MultichainAccountList = ({
           },
         );
 
-        if (walletData.type === AccountWalletType.Entropy) {
+        if (!isInSearchMode && walletData.type === AccountWalletType.Entropy) {
           groupsItems.push(
             <AddMultichainAccount
               walletId={walletId as AccountWalletId}
@@ -153,7 +157,11 @@ export const MultichainAccountList = ({
           );
         }
 
-        return [...walletsAccumulator, walletHeader, ...groupsItems];
+        return [
+          ...walletsAccumulator,
+          displayWalletHeader ? walletHeader : null,
+          ...groupsItems,
+        ];
       },
       [] as React.ReactNode[],
     );
@@ -165,6 +173,8 @@ export const MultichainAccountList = ({
     defaultHomeActiveTabName,
     dispatch,
     history,
+    isInSearchMode,
+    displayWalletHeader,
     selectedAccountGroupsSet,
   ]);
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { screen, fireEvent } from '@testing-library/react';
+import { screen, fireEvent, within } from '@testing-library/react';
 
 import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import mockState from '../../../../test/data/mock-state.json';
@@ -17,6 +17,10 @@ jest.mock('react-router-dom', () => ({
   }),
 }));
 
+const searchContainerTestId = 'multichain-account-list-search';
+const searchClearButtonTestId = 'text-field-search-clear-button';
+const walletHeaderTestId = 'multichain-account-tree-wallet-header';
+
 describe('AccountList', () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -26,44 +30,6 @@ describe('AccountList', () => {
     const store = configureStore({
       metamask: {
         ...mockState.metamask,
-        accountTree: {
-          selectedAccountGroup: '01JKAF3DSGM3AB87EM9N0K41AJ:default',
-          wallets: {
-            '01JKAF3DSGM3AB87EM9N0K41AJ': {
-              id: '01JKAF3DSGM3AB87EM9N0K41AJ',
-              metadata: {
-                name: 'Wallet 1',
-              },
-              groups: {
-                '01JKAF3DSGM3AB87EM9N0K41AJ:default': {
-                  id: '01JKAF3DSGM3AB87EM9N0K41AJ:default',
-                  metadata: {
-                    name: 'Account 1 from wallet 1',
-                  },
-                  accounts: [
-                    'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3',
-                    '07c2cfec-36c9-46c4-8115-3836d3ac9047',
-                  ],
-                },
-              },
-            },
-            '01JKAF3PJ247KAM6C03G5Q0NP8': {
-              id: '01JKAF3PJ247KAM6C03G5Q0NP8',
-              metadata: {
-                name: 'Wallet 2',
-              },
-              groups: {
-                '01JKAF3PJ247KAM6C03G5Q0NP8:default': {
-                  id: '01JKAF3PJ247KAM6C03G5Q0NP8:default',
-                  metadata: {
-                    name: 'Account 1 from wallet 2',
-                  },
-                  accounts: ['784225f4-d30b-4e77-a900-c8bbce735b88'],
-                },
-              },
-            },
-          },
-        },
       },
     });
 
@@ -76,15 +42,13 @@ describe('AccountList', () => {
     expect(screen.getByText('Accounts')).toBeInTheDocument();
     expect(screen.getByLabelText('Back')).toBeInTheDocument();
 
-    const walletHeaders = screen.getAllByTestId(
-      'multichain-account-tree-wallet-header',
-    );
+    const walletHeaders = screen.getAllByTestId(walletHeaderTestId);
 
-    expect(walletHeaders.length).toBe(2);
+    expect(walletHeaders.length).toBe(5);
     expect(screen.getByText('Wallet 1')).toBeInTheDocument();
     expect(screen.getByText('Wallet 2')).toBeInTheDocument();
-    expect(screen.getByText('Account 1 from wallet 1')).toBeInTheDocument();
-    expect(screen.getByText('Account 1 from wallet 2')).toBeInTheDocument();
+    expect(screen.getByText('Account 1')).toBeInTheDocument();
+    expect(screen.getByText('Account 2')).toBeInTheDocument();
   });
 
   it('calls history.goBack when back button is clicked', () => {
@@ -110,4 +74,85 @@ describe('AccountList', () => {
     expect(screen.getByText('Import an account')).toBeInTheDocument();
     expect(screen.getByText('Add a hardware wallet')).toBeInTheDocument();
   });
+
+  it('displays the search field with correct placeholder', () => {
+    renderComponent();
+
+    const searchContainer = screen.getByTestId(searchContainerTestId);
+
+    expect(searchContainer).toBeInTheDocument();
+
+    const searchInput = within(searchContainer).getByPlaceholderText(
+      'Search your accounts',
+    );
+
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  it('updates search value when typing in the search field', () => {
+    renderComponent();
+
+    const searchContainer = screen.getByTestId(searchContainerTestId);
+    const searchInput = within(searchContainer).getByRole('searchbox');
+    fireEvent.change(searchInput, { target: { value: 'Account 2' } });
+
+    // @ts-expect-error Values does exist on the search input
+    expect(searchInput?.value).toBe('Account 2');
+  });
+
+  it('filters accounts when search text is entered', () => {
+    renderComponent();
+
+    // Verify all accounts are shown initially
+    const walletHeaders = screen.getAllByTestId(walletHeaderTestId);
+    expect(walletHeaders.length).toBe(5);
+    expect(screen.getByText('Account 1')).toBeInTheDocument();
+    expect(screen.getByText('Account 2')).toBeInTheDocument();
+
+    const searchContainer = screen.getByTestId(searchContainerTestId);
+    const searchInput = within(searchContainer).getByRole('searchbox');
+    fireEvent.change(searchInput, { target: { value: 'Account 2' } });
+
+    expect(screen.queryByText('Account 1')).not.toBeInTheDocument();
+    expect(screen.getByText('Account 2')).toBeInTheDocument();
+  });
+
+  it('shows "No accounts found" message when no accounts match search criteria', () => {
+    renderComponent();
+
+    const searchContainer = screen.getByTestId(searchContainerTestId);
+    const searchInput = within(searchContainer).getByRole('searchbox');
+    fireEvent.change(searchInput, { target: { value: 'nonexistent account' } });
+
+    expect(
+      screen.getByText('No accounts found for the given search query'),
+    ).toBeInTheDocument();
+  });
+
+  it('clears search when clear button is clicked', () => {
+    renderComponent();
+
+    const searchContainer = screen.getByTestId(searchContainerTestId);
+    const searchInput = within(searchContainer).getByRole('searchbox');
+    fireEvent.change(searchInput, { target: { value: 'Account 2' } });
+
+    const clearButton = screen.getByTestId(searchClearButtonTestId);
+    fireEvent.click(clearButton);
+
+    // @ts-expect-error Value does exist on search input
+    expect(searchInput?.value).toBe('');
+    expect(screen.getByText('Account 1')).toBeInTheDocument();
+    expect(screen.getByText('Account 2')).toBeInTheDocument();
+  });
+
+  it('performs case-insensitive search', () => {
+    renderComponent();
+
+    const searchContainer = screen.getByTestId(searchContainerTestId);
+    const searchInput = within(searchContainer).getByRole('searchbox');
+    fireEvent.change(searchInput, { target: { value: 'account 2' } });
+
+    expect(screen.queryByText('Account 1')).not.toBeInTheDocument();
+    expect(screen.getByText('Account 2')).toBeInTheDocument();
+  });
 });