refactor: migrate multichain account components to DS

[gantunesr]

Description

Migrates the MultichainAccounts temporary component internals away from deprecated component-library imports and onto @metamask/design-system-react-native equivalents.

This updates account rows, external account rows, account selector list pieces, address rows, checkboxes, search fields, text, icons, sensitive text, and avatar usage. It also adds a small avatar variant compatibility helper so legacy persisted selector values such as Maskicon, JazzIcon, and Blockies continue to map to the DS AvatarAccountVariant API.

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MUL-1693

Manual testing steps

Feature: Multichain account component DS migration

  Scenario: account selector and address rows preserve existing behavior
    Given a wallet with multichain account groups and network addresses

    When the account selector and multichain address list are opened
    Then account rows, external account rows, network avatars, checkboxes, copy actions, and search fields render and behave as before

Screenshots/Recordings

Screen.Recording.2026-05-15.at.4.13.43.PM.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• 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 format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Performance checks (if applicable)

• I've tested on Android
  • Ideally on a mid-range device; emulator is acceptable
• I've tested with a power user scenario
  • Use these power-user SRPs to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

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.

---

Note

Medium Risk
Medium risk because it swaps core UI primitives (avatars, text, search, checkbox, toast) used across multichain account selection/address flows, which could introduce visual or interaction regressions despite largely being API-level refactors.

Overview
Migrates the temporary MultichainAccounts UI components off deprecated component-library primitives and onto @metamask/design-system-react-native equivalents (e.g., AvatarAccount/AvatarNetwork, Text/SensitiveText, Icon, Checkbox, and TextFieldSearch).

Adds avatarAccountVariant compatibility helpers so persisted legacy avatar type strings (Maskicon/JazzIcon/Blockies) map cleanly to DS AvatarAccountVariant, and updates affected components/tests to use the new variant API and updated test IDs.

Refactors MultichainAddressRow to use DS toast/button/icon/network avatar APIs and adjusts tests to properly handle async copy feedback and timers.

^{Reviewed by Cursor Bugbot for commit 168d775. Bugbot is set up for automated code reviews on this repo. Configure here.}

[ccharly]

I see some ButtonIconVariant in the DS package, but none of them matches 'Icon', should we use ButtonIconVariant.Default instead?

[gantunesr]

I don't think so because the interface expects the value Icon and ButtonIconVariant.Default is set to default. @MetaMask/design-system can you double check this?

@ccharly lets wait for the team to chime in and lets not block the PR

[ccharly]

Should this also use LegacyAvatarAccountType?

Suggested change

	avatarAccountType: AccountAvatarVariant,
	avatarAccountType: AccountAvatarVariant | LegacyAvatarAccountType,

[gantunesr]

AccountAvatarVariant already takes into account the legacy type:

export type AccountAvatarVariant =
  | AvatarAccountVariant
  | LegacyAvatarAccountType;

[ccharly]

Do we need this part? Is it to avoid an in-flight promise based on time (maybe animation)?

If yes, we could add a comment explaining that!

[gantunesr]

ok, done in 168d775

[ccharly]

Nit: IDK if we want to align naming here too? Might not really be part of the DS migration initiative (I couldn't find a AvatarAccountType on the DS package, so "variant" seems to be the only term we use for this now)

[gantunesr]

What are you suggesting specifically? Change the type name or the prop name?

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeAccounts, SmokeWalletPlatform, SmokeIdentity, SmokeConfirmations, SmokeNetworkExpansion, SmokeNetworkAbstractions, SmokeSwap
• Selected Performance tags: @PerformanceAccountList
• Risk Level: medium
• AI Confidence: 82%

click to see 🤖 AI reasoning details

E2E Test Selection:

The PR migrates MultichainAccounts component library components from the legacy internal design system to @metamask/design-system-react-native. Key changes include:

1. AccountCell.tsx: Migrates AvatarAccount, Text, SensitiveText, Icon, Avatar components. Updates prop names (type→variant, accountAddress→address, imageSource→src, TextColor.Default→TextColor.TextDefault, etc.)

2. MultichainAccountSelectorList.tsx: Migrates Text, TextFieldSearch. Importantly, the testID for TextFieldSearch search input is now nested inside inputProps object instead of being a direct prop - this could break E2E tests that query by this testID.

3. AccountListCell.tsx: Migrates Checkbox component. Props changed: isChecked→isSelected, onPress→onChange. This could affect E2E tests that interact with checkboxes in multi-account selection flows.

4. ExternalAccountCell.tsx: Migrates AvatarAccount, Avatar, Text components.

5. MultichainAddressRow.tsx: Migrates Avatar to AvatarNetwork, removes deprecated ToastRef dependency.

6. avatarAccountVariant.ts (new): Adapter between legacy AvatarAccountType and new AvatarAccountVariant.

These components are used across critical flows:

• AccountSelector (used in account switching, dApp connections, confirmations) → SmokeAccounts, SmokeWalletPlatform, SmokeIdentity
• MultichainAccountConnect (dApp connection flows) → SmokeNetworkAbstractions, SmokeNetworkExpansion
• Bridge RecipientSelectorModal → SmokeSwap
• Confirmations AccountSelector → SmokeConfirmations
• MultichainAddressRow → WalletDetails, AddressList, PrivateKeyList → SmokeAccounts, SmokeWalletPlatform

The risk is medium because while the changes are UI-only (no business logic changes), the prop API changes could cause rendering failures or break E2E test selectors. The testID placement change in TextFieldSearch is particularly notable.

SmokeSwap is included because Bridge RecipientSelectorModal directly uses MultichainAccountSelectorList.
SmokeConfirmations is included because the confirmations AccountSelector uses MultichainAccountSelectorList.
SmokeNetworkAbstractions and SmokeNetworkExpansion are included because MultichainAccountConnect (dApp connection flows) uses these components.
SmokeIdentity is included per SmokeAccounts tag description (multi-SRP architecture changes).

Performance Test Selection:
The MultichainAccountSelectorList uses FlashList for rendering account lists. The migration to new design system components (AvatarAccount, Text, Checkbox) could affect rendering performance of the account list. The @PerformanceAccountList tag covers account selector and multi-account scenarios which directly exercise these changed components.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
96.8% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud