feat: added edit accounts modal (#26413)

This PR is to add an edit accounts modal

## **Related issues**

Fixes:
[https://github.com/MetaMask/MetaMask-planning/issues/2686](https://github.com/MetaMask/MetaMask-planning/issues/2686)

## **Manual testing steps**

1. Go to EditAccountsModal in storybook
2. Note: Two AvatarAccounts in This modal is not a bug related to this
PR

## **Screenshots/Recordings**


### **Before**

NA
### **After**

![Screenshot 2024-08-27 at 2 10
44 PM](https://github.com/user-attachments/assets/50d4325d-d69f-4188-9935-4190ba3583a6)

## **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/develop/.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/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/edit-accounts-modal/__snapshots__/edit-accounts-modal.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EditAccountsModal should render correctly 1`] = `<div />`;

ui/components/multichain/edit-accounts-modal/edit-accounts-modal.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { EditAccountsModal } from '.';
+
+export default {
+  title: 'Components/Multichain/EditAccountsModal',
+  argTypes: {
+    onClose: { action: 'onClose' },
+  },
+  args: {
+    onClose: () => undefined,
+  },
+};
+
+export const DefaultStory = (args) => <EditAccountsModal {...args} />;
+
+DefaultStory.storyName = 'Default';

ui/components/multichain/edit-accounts-modal/edit-accounts-modal.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { EthAccountType, KeyringAccountType } from '@metamask/keyring-api';
+import { renderWithProvider } from '../../../../test/jest/rendering';
+import mockState from '../../../../test/data/mock-state.json';
+import configureStore from '../../../store/store';
+import { EditAccountsModal } from '.';
+
+const render = (
+  props: {
+    onClose: () => void;
+    allowedAccountTypes: KeyringAccountType[];
+  } = {
+    onClose: () => jest.fn(),
+    allowedAccountTypes: [EthAccountType.Eoa, EthAccountType.Erc4337],
+  },
+  state = {},
+) => {
+  const store = configureStore({
+    ...mockState,
+    metamask: {
+      ...mockState.metamask,
+      ...state,
+      permissionHistory: {
+        'https://test.dapp': {
+          eth_accounts: {
+            accounts: {
+              '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': 1709225290848,
+            },
+          },
+        },
+      },
+    },
+    activeTab: {
+      origin: 'https://test.dapp',
+    },
+  });
+  return renderWithProvider(<EditAccountsModal {...props} />, store);
+};
+describe('EditAccountsModal', () => {
+  it('should render correctly', () => {
+    const { container } = render();
+    expect(container).toMatchSnapshot();
+  });
+
+  it('shows select all button', async () => {
+    const { getByLabelText } = render();
+    expect(getByLabelText('Select all')).toBeInTheDocument();
+  });
+});

ui/components/multichain/edit-accounts-modal/edit-accounts-modal.tsx

@@ -0,0 +1,82 @@
+import React, { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import {
+  EthAccountType,
+  InternalAccount,
+  KeyringAccountType,
+} from '@metamask/keyring-api';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import {
+  getInternalAccounts,
+  getUpdatedAndSortedAccounts,
+} from '../../../selectors';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  Checkbox,
+  Box,
+} from '../../component-library';
+import { AccountListItem } from '..';
+import { MergedInternalAccount } from '../../../selectors/selectors.types';
+import { mergeAccounts } from '../account-list-menu/account-list-menu';
+
+type EditAccountsModalProps = {
+  onClose: () => void;
+  allowedAccountTypes?: KeyringAccountType[];
+};
+
+const defaultAllowedAccountTypes: KeyringAccountType[] = [
+  EthAccountType.Eoa,
+  EthAccountType.Erc4337,
+];
+
+export const EditAccountsModal = ({
+  onClose,
+  allowedAccountTypes = defaultAllowedAccountTypes,
+}: EditAccountsModalProps) => {
+  const t = useI18nContext();
+  const accounts = useSelector(getUpdatedAndSortedAccounts);
+  const internalAccounts = useSelector(getInternalAccounts);
+
+  const mergedAccounts: MergedInternalAccount[] = useMemo(() => {
+    return mergeAccounts(accounts, internalAccounts).filter(
+      (account: InternalAccount) => allowedAccountTypes.includes(account.type),
+    );
+  }, [accounts, internalAccounts, allowedAccountTypes]); // Add allowedAccountTypes to dependency array
+
+  return (
+    <Modal
+      isOpen
+      onClose={onClose} // Simplified inline function
+      data-testid="edit-accounts-modal"
+      className="edit-accounts-modal"
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader onClose={onClose}>{t('editAccounts')}</ModalHeader>
+        <Box padding={4}>
+          <Checkbox
+            label={t('selectAll')}
+            isChecked
+            gap={4}
+            // Uncomment and implement these if needed:
+            // onClick={() => (allAreSelected() ? deselectAll() : selectAll())}
+            // isIndeterminate={isIndeterminate}
+          />
+        </Box>
+        {mergedAccounts.map((account) => (
+          <AccountListItem
+            account={account}
+            key={account.address}
+            isPinned={Boolean(account.pinned)}
+            startAccessory={<Checkbox isChecked />}
+            onClick={() => console.log(null)}
+            selected={false}
+          />
+        ))}
+      </ModalContent>
+    </Modal>
+  );
+};

ui/components/multichain/edit-accounts-modal/index.ts

@@ -0,0 +1 @@
+export { EditAccountsModal } from './edit-accounts-modal';

ui/components/multichain/index.js

@@ -49,3 +49,4 @@ export { NotificationsTagCounter } from './notifications-tag-counter';
 export { Toast, ToastContainer } from './toast';
 export { PermissionDetailsModal } from './permission-details-modal';
 export { EditNetworksModal } from './edit-networks-modal';
+export { EditAccountsModal } from './edit-accounts-modal';