refactor: migrate AccountDetails leaf components to design system by gantunesr · Pull Request #29765 · MetaMask/metamask-mobile

gantunesr · 2026-05-05T22:23:02Z

Description

Part 1 of 2 for 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

CHANGELOG entry: null

Related issues

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

Manual testing steps

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

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

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.

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

…n system (MUL-1689) Migrate AccountInfo, ExportCredentials, SmartAccount, and SmartAccountNetworkList from component-library to @metamask/design-system-react-native. Update SmartAccount unit test Icon import. Part 1 of 2 for MUL-1689. Co-authored-by: Cursor <cursoragent@cursor.com>

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit c638753. Configure here.}

Import Skeleton from components-temp so Jest/E2E disable animations per PR #29765 review (Cursor Bugbot). Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-05-14T02:15:14Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokeAccounts, SmokeWalletPlatform, SmokeIdentity
Selected Performance tags: None (no tests recommended)
Risk Level: low
AI Confidence: 88%

click to see 🤖 AI reasoning details

E2E Test Selection:
All 6 changed files are UI-only refactors in the MultichainAccounts AccountDetails area:

AccountInfo.tsx: Migrates Avatar and Text components from internal component library to @metamask/design-system-react-native. No logic changes - only prop name updates (AvatarVariant.Account → AvatarAccountSize.Md, TextVariant.BodyLGMedium → TextVariant.BodyLg + FontWeight.Medium, colors.primary.default → TextColor.PrimaryDefault).
ExportCredentials.tsx: Migrates Text and Icon imports to design system. Minor color token rename (TextColor.Error → TextColor.ErrorDefault). No logic changes. This component is used in HdAccountDetails, PrivateKeyAccountDetails, SnapAccountDetails, and RevealSRP - all SRP/private key export flows.
SmartAccount.tsx: Same pattern - migrates Text and Icon to design system. No logic changes.
SmartAccountNetworkList.tsx: Trivial import reordering only.
SmartAccount.test.tsx: Updates Icon import to match new design system source.
MultichainAccountSelectorList.test.tsx: Adds design system mock, increases debounce timeout from 1000ms to 2000ms, refactors duplicate test code.

Tag Selection Rationale:

SmokeAccounts: The ExportCredentials component is directly used in SRP export and private key export flows. AccountInfo is shown in account details. These are core account management UI components. The design system migration could introduce visual regressions in these flows.
SmokeWalletPlatform: Required per SmokeAccounts description when changes touch SRP export flows (multi-SRP architecture).
SmokeIdentity: Required per SmokeAccounts description when changes touch SRP export flows.

No other tags are warranted - these changes don't affect confirmations, browser, swaps, staking, network management, snaps, or other areas.

Performance Test Selection:
No performance-impacting changes. These are pure UI component library migrations (swapping import sources for Text, Icon, Avatar components) with no changes to rendering logic, data fetching, state management, list virtualization, or any other performance-sensitive code paths. The timeout increase in the test file is a test infrastructure fix, not an indication of actual performance regression.

View GitHub Actions results

sonarqubecloud · 2026-05-14T02:31:42Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

gantunesr self-assigned this May 5, 2026

metamaskbotv2 Bot added the team-accounts-framework Accounts team label May 5, 2026

github-actions Bot added the size-S label May 5, 2026

gantunesr marked this pull request as ready for review May 6, 2026 01:58

gantunesr requested a review from a team as a code owner May 6, 2026 01:58

gantunesr changed the title ~~refactor(multichain): migrate AccountDetails leaf components to design system (MUL-1689)~~ refactor: migrate AccountDetails leaf components to design system May 6, 2026

cursor Bot reviewed May 6, 2026

View reviewed changes

Comment thread ...ichainAccounts/AccountDetails/components/SmartAccountNetworkList/SmartAccountNetworkList.tsx Outdated

gantunesr and others added 4 commits May 6, 2026 09:09

fix(multichain): use Skeleton wrapper for test-safe autoPlay

373ae1c

Import Skeleton from components-temp so Jest/E2E disable animations per PR #29765 review (Cursor Bugbot). Co-authored-by: Cursor <cursoragent@cursor.com>

Merge branch 'main' into gar/refactor/mul-1689/part-1

8268f2f

Merge branch 'main' into gar/refactor/mul-1689/part-1

f84f9c9

test(multichain): stabilize account selector search test

dddbc74

github-actions Bot added size-M and removed size-S labels May 14, 2026

david0xd approved these changes May 14, 2026

View reviewed changes

gantunesr added this pull request to the merge queue May 14, 2026

Merged via the queue into main with commit f3ba475 May 14, 2026
171 of 173 checks passed

gantunesr deleted the gar/refactor/mul-1689/part-1 branch May 14, 2026 12:40

github-actions Bot locked and limited conversation to collaborators May 14, 2026

metamaskbotv2 Bot added the release-7.78.0 Issue or pull request that will be included in release 7.78.0 label May 14, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor: migrate AccountDetails leaf components to design system#29765

refactor: migrate AccountDetails leaf components to design system#29765
gantunesr merged 5 commits into
mainfrom
gar/refactor/mul-1689/part-1

gantunesr commented May 5, 2026 •

edited by cursor Bot

Loading

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

github-actions Bot commented May 14, 2026

Uh oh!

sonarqubecloud Bot commented May 14, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

gantunesr commented May 5, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Pre-merge author checklist

Performance checks (if applicable)

Pre-merge reviewer checklist

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented May 14, 2026

🔍 Smart E2E Test Selection

Uh oh!

sonarqubecloud Bot commented May 14, 2026

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

gantunesr commented May 5, 2026 •

edited by cursor Bot

Loading