feat: account and network selector (#37434)

<!--
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**
**Add account selector** - Instead of asking user for the _impacted
wallet address_, we added an account selector which shows all accounts
which the user has in the app. Selecting accounts adds the address to
claims payload

**Add network selector** - Instead of asking user for the _chainID_, we
added an network selector which shows all networks which is covered by
shield. Selecting network adds the chainID to claims payload

Minor update on the Form UI - add more information and grouping of
fields


https://www.figma.com/design/HTAO1SrmixV4ppv7qIvLoa/Metamask-Transaction-Shield?node-id=13912-101739&t=9QXWgot1B69O2eJy-4


https://consensyssoftware.atlassian.net/browse/SUBS-657?atlOrigin=eyJpIjoiYWQ3YTk2MjMwMjY5NDRlZDgyMzVkNTZmY2ZlMWMyNDUiLCJwIjoiaiJ9

<!--
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?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/37434?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 network and account selector to claims form

## **Related issues**

Fixes:

## **Manual testing steps**

1. Login/Create account with shield subscription
2. Go to Menu > Settings > Transaction shield
3. Click on **Submit a claim**
4. Explore the claims form field - more details on the video attached

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**
**Form UI Update**
<img width="650" height="820" alt="Screenshot 2025-11-01 at 3 41 19 AM"
src="https://github.com/user-attachments/assets/e2a4bfa5-844e-4f08-9b7d-66454a56bacd"
/>


**Demo account selector**
<video
src="https://github.com/user-attachments/assets/49fd3619-d17f-4ab2-bd3c-120983d5c85c"
/>


**Demo network selector**
<video
src="https://github.com/user-attachments/assets/70c228ea-ffe5-4a71-adb2-aa37dce84ecb"
/>


**Demo claims form**
<video
src="https://github.com/user-attachments/assets/ab2174b3-cef3-4961-8539-912f29efbe1a"
/>


**Payload when using new account and network selector**
<img width="623" height="302" alt="Screenshot 2025-11-01 at 3 48 34 AM"
src="https://github.com/user-attachments/assets/68c24953-8ceb-47fa-b638-87a0db4cb6d1"
/>


<!-- [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/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] 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.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Replaces manual inputs with account and network selectors in the
Transaction Shield claim form, updates validation/copy, and adjusts
styles and tests.
> 
> - **Transaction Shield – Claim Form**:
> - Replace `chainId` numeric input with `NetworkSelector` and impacted
wallet text input with `AccountSelector` in `submit-claim-form.tsx`.
> - Refactor validation/error handling to use message keys and field
maps; update toast/field error mapping and translations usage.
> - Submit payload now derives `chainId` from selector and normalizes to
string; adds sectioned UI (“Personal details”, “Incident details”).
> - **New Components**:
> - `ui/pages/settings/transaction-shield-tab/account-selector/` –
account picker grouped by wallet, with modal and selected-state styling.
> - `ui/pages/settings/transaction-shield-tab/network-selector/` –
filtered network picker (supported chain IDs) with modal.
>   - SCSS: modal hover/selected styles for account selector.
> - **i18n**:
> - Remove `shieldClaimChainId` copy; add strings for selectors and new
section headings/descriptions in `en` and `en_GB` locales.
> - **Types/Tests**:
>   - Add account selector types in `types.ts`.
> - Update claim form tests to mock new selectors; remove
impacted-address validation case; keep reimbursement address/error and
disabled submit checks.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
154af47. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: lionellbriones

app/_locales/en/messages.json

@@ -0,0 +1,215 @@
+import React, { useMemo, useState } from 'react';
+import {
+  AvatarAccountSize,
+  Box,
+  BoxBorderColor,
+  FontWeight,
+  Icon,
+  IconColor,
+  IconName,
+  IconSize,
+  Text,
+  TextColor,
+  TextVariant,
+} from '@metamask/design-system-react';
+import { useSelector } from 'react-redux';
+import classnames from 'classnames';
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalContentSize,
+  ModalHeader,
+  ModalOverlay,
+} from '../../../../components/component-library';
+import { PreferredAvatar } from '../../../../components/app/preferred-avatar';
+import { AccountSelectorWallet } from '../types';
+import { getWalletsWithAccounts } from '../../../../selectors/multichain-accounts/account-tree';
+import { shortenAddress } from '../../../../helpers/utils/util';
+
+const AccountSelector = ({
+  label,
+  modalTitle,
+  onAccountSelect,
+  impactedWalletAddress,
+}: {
+  label: string;
+  modalTitle: string;
+  onAccountSelect: (address: string) => void;
+  impactedWalletAddress: string;
+}) => {
+  const [showAccountListMenu, setShowAccountListMenu] = useState(false);
+
+  // Account list
+  const wallets = useSelector(getWalletsWithAccounts);
+
+  // Group recipients by wallet name
+  const accountsGroupedByWallet: Record<string, AccountSelectorWallet> =
+    useMemo(() => {
+      return Object.values(wallets).reduce(
+        (acc, wallet) => {
+          const walletName = wallet.metadata.name;
+          if (!acc[walletName]) {
+            acc[walletName] = {
+              id: wallet.id,
+              name: wallet.metadata.name,
+              accounts: [],
+            };
+          }
+          Object.values(wallet.groups).forEach((group) => {
+            // get evm account from group
+            const evmAccount = group.accounts.find((account) =>
+              account.type.startsWith('eip155:'),
+            );
+            if (evmAccount) {
+              acc[walletName].accounts.push({
+                id: group.id,
+                name: group.metadata.name,
+                address: evmAccount.address,
+                type: evmAccount.type,
+              });
+            }
+          });
+          return acc;
+        },
+        {} as Record<string, AccountSelectorWallet>,
+      );
+    }, [wallets]);
+
+  const selectedAccountInfo = useMemo(() => {
+    const selectedWallet = Object.values(accountsGroupedByWallet).find(
+      (wallet) =>
+        wallet.accounts.some(
+          (account) =>
+            account.address.toLowerCase() ===
+            impactedWalletAddress.toLowerCase(),
+        ),
+    );
+
+    if (selectedWallet) {
+      return (
+        selectedWallet.accounts.find(
+          (account) =>
+            account.address.toLowerCase() ===
+            impactedWalletAddress.toLowerCase(),
+        ) ?? null
+      );
+    }
+    return null;
+  }, [accountsGroupedByWallet, impactedWalletAddress]);
+
+  return (
+    <Box>
+      <Text
+        variant={TextVariant.BodyMd}
+        fontWeight={FontWeight.Medium}
+        className="mb-2"
+      >
+        {label}
+      </Text>
+      <Box
+        asChild
+        borderColor={BoxBorderColor.BorderDefault}
+        className="w-full flex items-center gap-2 px-4 h-12 border rounded-lg"
+        onClick={() => setShowAccountListMenu(true)}
+        aria-label={modalTitle}
+      >
+        <button>
+          {selectedAccountInfo ? (
+            <>
+              <PreferredAvatar
+                address={selectedAccountInfo?.address ?? ''}
+                size={AvatarAccountSize.Sm}
+              />
+              <Text>{selectedAccountInfo?.name}</Text>
+            </>
+          ) : (
+            <Text color={TextColor.TextAlternative}>{modalTitle}</Text>
+          )}
+
+          <Icon
+            className="ml-auto"
+            size={IconSize.Sm}
+            color={IconColor.IconDefault}
+            name={IconName.ArrowDown}
+          />
+        </button>
+      </Box>
+
+      <Modal
+        isOpen={showAccountListMenu}
+        isClosedOnEscapeKey={true}
+        isClosedOnOutsideClick={true}
+        onClose={() => setShowAccountListMenu(false)}
+        className="account-selector-modal"
+        data-testid="account-selector-modal"
+      >
+        <ModalOverlay />
+        <ModalContent size={ModalContentSize.Sm}>
+          <ModalHeader onClose={() => setShowAccountListMenu(false)}>
+            {modalTitle}
+          </ModalHeader>
+          <ModalBody paddingRight={0} paddingLeft={0}>
+            {Object.entries(accountsGroupedByWallet).map(
+              ([walletName, wallet]) => (
+                <Box key={walletName}>
+                  <Text
+                    variant={TextVariant.BodyMd}
+                    fontWeight={FontWeight.Medium}
+                    color={TextColor.TextAlternative}
+                    className="px-4 py-2"
+                  >
+                    {walletName}
+                  </Text>
+
+                  {wallet.accounts.map((account) => (
+                    <Box
+                      asChild
+                      key={account.id}
+                      className={classnames(
+                        'account-selector-modal__account w-full flex items-center gap-4 px-4 py-3',
+                        {
+                          'account-selector-modal__account--selected':
+                            account.address.toLowerCase() ===
+                            selectedAccountInfo?.address.toLowerCase(),
+                        },
+                      )}
+                      onClick={() => {
+                        onAccountSelect(account.address);
+                        setShowAccountListMenu(false);
+                      }}
+                    >
+                      <button>
+                        <PreferredAvatar
+                          address={account.address ?? ''}
+                          size={AvatarAccountSize.Lg}
+                        />
+                        <Box className="text-left">
+                          <Text
+                            variant={TextVariant.BodyMd}
+                            fontWeight={FontWeight.Medium}
+                          >
+                            {account.name}
+                          </Text>
+                          <Text
+                            variant={TextVariant.BodySm}
+                            fontWeight={FontWeight.Medium}
+                            color={TextColor.TextAlternative}
+                          >
+                            {shortenAddress(account.address)}
+                          </Text>
+                        </Box>
+                      </button>
+                    </Box>
+                  ))}
+                </Box>
+              ),
+            )}
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </Box>
+  );
+};
+
+export default AccountSelector;

app/_locales/en_GB/messages.json

@@ -0,0 +1 @@
+export { default } from './account-selector';

ui/pages/settings/transaction-shield-tab/account-selector/account-selector.tsx

@@ -54,3 +54,15 @@
     }
   }
 }
+
+.account-selector-modal {
+  .account-selector-modal__account {
+    &:hover {
+      background-color: var(--color-background-hover);
+    }
+  }
+
+  &__account--selected {
+    background-color: var(--color-primary-muted);
+  }
+}

ui/pages/settings/transaction-shield-tab/account-selector/index.ts

@@ -0,0 +1 @@
+export { default } from './network-selector';