refactor: migrate AccountDetails leaf components to design system (#29765)

<!--
Please submit this PR as a draft initially.

Do not mark it as "Ready for review" until this PR meets the canonical
Definition of Ready For Review in `docs/readme/ready-for-review.md`.

In short: the template must be materially complete (not just section
titles
present), all status checks must be currently passing, and the only
expected
follow-up commits must be reviewer-driven.
-->

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

Part **1 of 2** for
[MUL-1689](https://consensyssoftware.atlassian.net/browse/MUL-1689).

Migrates Account Details **leaf** UI from deprecated
`app/component-library` to `@metamask/design-system-react-native`:

- `AccountInfo.tsx` — `AvatarAccount`, `Text`, semantic colors and
typography.
- `ExportCredentials.tsx` — `Text`, `Icon`, `TextVariant` / `TextColor`
/ `FontWeight` from the design system.
- `SmartAccount.tsx` — `Text`, `Icon`.
- `SmartAccountNetworkList.tsx` — `Skeleton` from the design system
(alongside existing `Box`).
- `SmartAccount.test.tsx` — `Icon` import from the design system for
`UNSAFE_getByType`.

No changes to `BaseAccountDetails` or `SmartAccountModal` in this PR;
those land in part 2.

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

## **Related issues**

Refs: https://consensyssoftware.atlassian.net/browse/MUL-1689

## **Manual testing steps**

```gherkin
Feature: Multichain Account Details (leaf components, part 1)

  Scenario: Account info and export rows render after migration
    Given the user has opened Multichain Account Details for an HD account
    When the screen loads
    Then the account avatar, name, and address copy area render without error
    And export credential rows (when applicable) still show labels and chevrons

  Scenario: Smart account entry row
    Given the user views Account Details for an EVM account
    When the Smart Account row is visible
    Then the row label matches copy and the row remains tappable
```

Note: There is a bug where the SCA toggles are not being displayed, this
is not caused by this PR

## **Screenshots/Recordings**
<img width="250" alt="Simulator Screenshot - iPhone 16 - 2026-05-13 at
16 25 34"
src="https://github.com/user-attachments/assets/796f094b-263b-4643-9c64-b33efad67d87"
/> <img width="250" alt="Simulator Screenshot - iPhone 16 - 2026-05-13
at 16 25 37"
src="https://github.com/user-attachments/assets/8d7e371b-4b1c-46ae-b382-687cc27dc318"
/>


## **Pre-merge author checklist**

<!--
Every checklist item must be consciously assessed before marking this PR
as
"Ready for review". A checked box means you deliberately considered that
responsibility, not that you literally performed every action listed.

Unchecked boxes are ambiguous: they are not an implicit "N/A" and they
are not
a silent "skip". See `docs/readme/ready-for-review.md` for the full
checklist
semantics.
-->

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.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-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

#### Performance checks (if applicable)

- [x] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [x] I've tested with a power user scenario
- Use these [power-user
SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [x] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **Pre-merge reviewer checklist**

<!--
Reviewer checklist items follow the same semantics as the author
checklist: an
unchecked box is ambiguous, a checked box means the reviewer consciously
assessed that responsibility. See `docs/readme/ready-for-review.md`.
-->

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


[MUL-1689]:
https://consensyssoftware.atlassian.net/browse/MUL-1689?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ



<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Primarily a UI refactor swapping deprecated component-library
primitives for design-system equivalents, with minor test adjustments;
functional behavior should remain the same.
> 
> **Overview**
> Migrates Multichain Account Details *leaf* UI components
(`AccountInfo`, `ExportCredentials`, `SmartAccount`) from deprecated
`app/component-library` primitives to
`@metamask/design-system-react-native` components, updating typography,
icon usage, and semantic colors.
> 
> Updates related tests to match the new design-system components (e.g.,
`Icon` type lookup) and stabilizes `MultichainAccountSelectorList`
search tests by mocking `Maskicon`, extracting a shared `performSearch`
helper, and increasing the debounce wait timeout for CI reliability.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
dddbc74. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: gantunesr

app/component-library/components-temp/MultichainAccounts/MultichainAccountSelectorList/MultichainAccountSelectorList.test.tsx

@@ -15,6 +15,18 @@ jest.mock('react-native-gesture-handler', () => {
     ScrollView: RN.ScrollView,
   };
 });
+
+jest.mock('@metamask/design-system-react-native', () => {
+  const actual = jest.requireActual('@metamask/design-system-react-native');
+  const ReactActual = jest.requireActual('react');
+  const { View } = jest.requireActual('react-native');
+
+  return {
+    ...actual,
+    Maskicon: ({ testID }: { testID?: string }) =>
+      ReactActual.createElement(View, { testID }),
+  };
+});
 import {
   AccountGroupObject,
   AccountWalletObject,
@@ -85,6 +97,7 @@ jest.mock('../../../../util/analytics/analytics', () => ({
 
 describe('MultichainAccountSelectorList', () => {
   const mockOnSelectAccount = jest.fn();
+  const SEARCH_WAIT_TIMEOUT_MS = 2000;
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -106,7 +119,7 @@ describe('MultichainAccountSelectorList', () => {
       fireEvent.changeText(searchInput, searchTerm);
     });
 
-    // Wait for debounce (1s) to complete and filtering to occur. Use a
+    // Wait for debounce to complete and filtering to occur. Use a
     // generous timeout so CI has time for debounce + re-render + list update.
     await waitFor(
       () => {
@@ -117,7 +130,7 @@ describe('MultichainAccountSelectorList', () => {
           expect(queryByText(text)).not.toBeOnTheScreen();
         });
       },
-      { timeout: 1000 },
+      { timeout: SEARCH_WAIT_TIMEOUT_MS },
     );
   };
 
@@ -633,33 +646,20 @@ describe('MultichainAccountSelectorList', () => {
         [account1],
       );
 
-      // Search with different cases
-      const searchInput = getByTestId(
-        MULTICHAIN_ACCOUNT_SELECTOR_SEARCH_INPUT_TESTID,
-      );
-
-      // Test uppercase search
-      await act(async () => {
-        fireEvent.changeText(searchInput, 'MY ACCOUNT');
-      });
-      await waitFor(
-        () => {
-          expect(queryByText('My Account')).toBeTruthy();
-          expect(queryByText('Test Account')).toBeFalsy();
-        },
-        { timeout: 1000 }, // Increased timeout for debounced search
+      await performSearch(
+        getByTestId,
+        queryByText,
+        'MY ACCOUNT',
+        ['My Account'],
+        ['Test Account'],
       );
 
-      // Test mixed case search
-      await act(async () => {
-        fireEvent.changeText(searchInput, 'tEsT aCcOuNt');
-      });
-      await waitFor(
-        () => {
-          expect(queryByText('My Account')).toBeFalsy();
-          expect(queryByText('Test Account')).toBeTruthy();
-        },
-        { timeout: 1000 }, // Increased timeout for debounced search
+      await performSearch(
+        getByTestId,
+        queryByText,
+        'tEsT aCcOuNt',
+        ['Test Account'],
+        ['My Account'],
       );
     });
 

app/components/Views/MultichainAccounts/AccountDetails/components/AccountInfo/AccountInfo.tsx

@@ -5,17 +5,19 @@ import {
   FlexDirection,
 } from '../../../../../UI/Box/box.types';
 import { Box } from '../../../../../UI/Box/Box';
-import Avatar, {
-  AvatarVariant,
-} from '../../../../../../component-library/components/Avatars/Avatar';
+import {
+  AvatarAccount,
+  AvatarAccountSize,
+  FontWeight,
+  IconColor,
+  Text,
+  TextColor,
+  TextVariant,
+} from '@metamask/design-system-react-native';
 import { InternalAccount } from '@metamask/keyring-internal-api';
 import { useStyles } from '../../../../../hooks/useStyles';
 import styleSheet from './AccountInfo.styles';
-import Text, {
-  TextVariant,
-} from '../../../../../../component-library/components/Texts/Text';
 import AddressCopy from '../../../../../UI/AddressCopy';
-import { IconColor } from '@metamask/design-system-react-native';
 import { formatAddress } from '../../../../../../util/address';
 import { getFormattedAddressFromInternalAccount } from '../../../../../../core/Multichain/utils';
 
@@ -24,19 +26,22 @@ interface AccountInfoProps {
 }
 
 export const AccountInfo = ({ account }: AccountInfoProps) => {
-  const { styles, theme } = useStyles(styleSheet, {});
-  const { colors } = theme;
+  const { styles } = useStyles(styleSheet, {});
 
   const formattedAddress = getFormattedAddressFromInternalAccount(account);
 
   return (
     <Box flexDirection={FlexDirection.Column} alignItems={AlignItems.center}>
-      <Avatar
+      <AvatarAccount
         style={styles.avatar}
-        variant={AvatarVariant.Account}
-        accountAddress={formattedAddress}
+        address={formattedAddress}
+        size={AvatarAccountSize.Md}
       />
-      <Text variant={TextVariant.BodyLGMedium} style={styles.address}>
+      <Text
+        variant={TextVariant.BodyLg}
+        fontWeight={FontWeight.Medium}
+        style={styles.address}
+      >
         {account.metadata.name}
       </Text>
       <Box
@@ -45,7 +50,11 @@ export const AccountInfo = ({ account }: AccountInfoProps) => {
         alignItems={AlignItems.center}
         justifyContent={JustifyContent.center}
       >
-        <Text variant={TextVariant.BodyLGMedium} color={colors.primary.default}>
+        <Text
+          variant={TextVariant.BodyLg}
+          fontWeight={FontWeight.Medium}
+          color={TextColor.PrimaryDefault}
+        >
           {formatAddress(formattedAddress, 'short')}
         </Text>
         <AddressCopy iconColor={IconColor.PrimaryDefault} />

app/components/Views/MultichainAccounts/AccountDetails/components/ExportCredentials/ExportCredentials.tsx

@@ -8,16 +8,17 @@ import {
   areAddressesEqual,
 } from '../../../../../../util/address';
 import styleSheet from './ExportCredentials.styles';
-import Text, {
+import {
+  FontWeight,
+  Icon,
+  IconName,
+  IconSize,
+  Text,
   TextColor,
   TextVariant,
-} from '../../../../../../component-library/components/Texts/Text';
+} from '@metamask/design-system-react-native';
 import { strings } from '../../../../../../../locales/i18n';
 import { TouchableOpacity } from 'react-native';
-import Icon, {
-  IconName,
-  IconSize,
-} from '../../../../../../component-library/components/Icons/Icon';
 import { useHdKeyringsWithSnapAccounts } from '../../../../../hooks/useHdKeyringsWithSnapAccounts';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../../../../../constants/navigation/Routes';
@@ -109,7 +110,8 @@ export const ExportCredentials = ({ account }: ExportCredentialsProps) => {
             alignItems={AlignItems.center}
           >
             <Text
-              variant={TextVariant.BodyMDMedium}
+              variant={TextVariant.BodyMd}
+              fontWeight={FontWeight.Medium}
               data-testid={ExportCredentialsIds.SRP_NAME}
             >
               {srpName}
@@ -122,8 +124,9 @@ export const ExportCredentials = ({ account }: ExportCredentialsProps) => {
             >
               {showSeedphraseBackReminder && (
                 <Text
-                  variant={TextVariant.BodyMDMedium}
-                  color={TextColor.Error}
+                  variant={TextVariant.BodyMd}
+                  fontWeight={FontWeight.Medium}
+                  color={TextColor.ErrorDefault}
                 >
                   {strings('multichain_accounts.export_credentials.backup')}
                 </Text>
@@ -145,7 +148,8 @@ export const ExportCredentials = ({ account }: ExportCredentialsProps) => {
             alignItems={AlignItems.center}
           >
             <Text
-              variant={TextVariant.BodyMDMedium}
+              variant={TextVariant.BodyMd}
+              fontWeight={FontWeight.Medium}
               data-testid={ExportCredentialsIds.PRIVATE_KEY_LINK}
             >
               {strings('multichain_accounts.account_details.private_key')}

app/components/Views/MultichainAccounts/AccountDetails/components/SmartAccount/SmartAccount.test.tsx

@@ -10,7 +10,7 @@ import { KeyringTypes } from '@metamask/keyring-controller';
 import renderWithProvider from '../../../../../../util/test/renderWithProvider';
 import { InternalAccount } from '@metamask/keyring-internal-api';
 import { strings } from '../../../../../../../locales/i18n';
-import Icon from '../../../../../../component-library/components/Icons/Icon';
+import { Icon } from '@metamask/design-system-react-native';
 
 const mockNavigate = jest.fn();
 jest.mock('@react-navigation/native', () => ({

app/components/Views/MultichainAccounts/AccountDetails/components/SmartAccount/SmartAccount.tsx

@@ -1,9 +1,14 @@
 import React, { useCallback } from 'react';
 
 import { SwitchAccountModalSelectorIDs } from '../../../../../../components/Views/confirmations/components/modals/switch-account-type-modal/SwitchAccountModal.testIds';
-import Text, {
+import {
+  FontWeight,
+  Icon,
+  IconName,
+  IconSize,
+  Text,
   TextVariant,
-} from '../../../../../../component-library/components/Texts/Text';
+} from '@metamask/design-system-react-native';
 import { Box } from '../../../../../UI/Box/Box';
 import { strings } from '../../../../../../../locales/i18n';
 import { InternalAccount } from '@metamask/keyring-internal-api';
@@ -17,10 +22,6 @@ import styleSheet from './SmartAccount.styles';
 import { useStyles } from '../../../../../hooks/useStyles';
 import { useNavigation } from '@react-navigation/native';
 import { TouchableOpacity } from 'react-native';
-import Icon, {
-  IconName,
-  IconSize,
-} from '../../../../../../component-library/components/Icons/Icon';
 
 interface SmartAccountDetailsProps {
   account: InternalAccount;
@@ -49,7 +50,7 @@ export const SmartAccountDetails = ({ account }: SmartAccountDetailsProps) => {
         justifyContent={JustifyContent.spaceBetween}
         alignItems={AlignItems.center}
       >
-        <Text variant={TextVariant.BodyMDMedium}>
+        <Text variant={TextVariant.BodyMd} fontWeight={FontWeight.Medium}>
           {strings('multichain_accounts.account_details.smart_account')}
         </Text>
         <Box

app/components/Views/MultichainAccounts/AccountDetails/components/SmartAccountNetworkList/SmartAccountNetworkList.tsx

@@ -2,12 +2,12 @@ import React, { useMemo, useEffect } from 'react';
 import { BackHandler } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { Box } from '@metamask/design-system-react-native';
+import { Skeleton } from '../../../../../../component-library/components-temp/Skeleton';
 import { useEIP7702Networks } from '../../../../confirmations/hooks/7702/useEIP7702Networks';
 import AccountNetworkRow from '../../../../confirmations/components/modals/switch-account-type-modal/account-network-row';
 import { Hex } from '@metamask/utils';
 import { useStyles } from '../../../../../hooks/useStyles';
 import styleSheet from './SmartAccountNetworkList.styles';
-import { Skeleton } from '../../../../../../component-library/components-temp/Skeleton';
 import { SMART_ACCOUNT_NETWORK_LIST_TEST_IDS } from './SmartAccountNetworkList.testIds';
 
 interface SmartAccountNetworkListProps {