refactor: migrate BaseAccountDetails and SmartAccountModal

[gantunesr]

Description

Part 2 of 2 for MUL-1689. Base branch: gar/refactor/mul-1689/part-1 (merge part 1 first, or rebase this branch onto main after part 1 lands and retarget to main).

Migrates the Account Details shell and related tests from app/component-library to @metamask/design-system-react-native:

• BaseAccountDetails/index.tsx — design-system HeaderBase (titleTestID for title queries), startButtonIconProps for back, AvatarAccount with mapping from settings AvatarAccountType to AvatarAccountVariant, Text / Icon with semantic tokens.
• BaseAccountDetails/styles.ts — remove obsolete text color style now covered by TextColor.
• SmartAccountModal.tsx — design-system HeaderBase, Text, nested learn-more Text with TextColor.InfoDefault.
• Tests — narrower AvatarAccountType import path; HardwareAccountDetails header title assertion uses the same header-title test id as design-system HeaderBase.

Depends on part 1 for a consistent Account Details tree.

Changelog

CHANGELOG entry: null

Related issues

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

Manual testing steps

Feature: Multichain Account Details (shell and modal, part 2)

  Scenario: Account details header and back navigation
    Given the user opened Multichain Account Details from the accounts flow
    When the header shows the account name
    Then the back control returns to the previous screen without layout regressions

  Scenario: Smart Account modal from account details
    Given an EVM account with Smart Account entry available
    When the user opens the Smart Account modal
    Then the modal title and description render and Learn more opens the webview flow as before

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
UI-only component swap with preserved navigation, test IDs, and avatar mapping; no auth or credential logic changes in this diff.

Overview
Migrates the multichain Account Details shell (BaseAccountDetails) and Smart Account modal from app/component-library to @metamask/design-system-react-native, keeping behavior and test IDs aligned with the previous UI.

BaseAccountDetails now uses design-system HeaderBase with titleTestID header-title and startButtonIconProps for back (replacing ButtonLink + Icon), AvatarAccount with a toAvatarAccountVariant bridge from settings AvatarAccountType, and Text / Icon with TextVariant, FontWeight, TextColor, and IconColor instead of theme-driven styles. Row styling drops the local text color rule in favor of tokens.

SmartAccountModal follows the same header pattern and updates body copy to design-system Text, including learn-more styling via TextColor.InfoDefault.

Related unit tests import AvatarAccountType from the narrower path and assert the header title via header-title where the legacy HEADERBASE_TITLE_TEST_ID constant was removed.

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

[ccharly]

LGTM (not tested)

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeAccounts, SmokeWalletPlatform
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 82%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are UI component refactoring in the MultichainAccounts/AccountDetails area, migrating from internal component library to @metamask/design-system-react-native. Key changes include:

1. BaseAccountDetails/index.tsx: Replaced internal Text, Icon, Avatar, HeaderBase, ButtonLink with design system equivalents. The HeaderBase API changed from startAccessory (with ButtonLink) to startButtonIconProps - this affects how the back button is rendered. The BACK_BUTTON testID (AccountDetailsIds.BACK_BUTTON) is preserved, so E2E tests should still find it.

2. SmartAccountModal.tsx: Similar refactoring with HeaderBase API change.

3. styles.ts: Removed 'text' style (now using TextColor.TextAlternative directly).

SmokeAccounts is selected because:

• tests/smoke/accounts/wallet-details.spec.ts directly uses AccountDetails page object (tapEditWalletName, tapBackButton) which interacts with the modified BaseAccountDetails component
• tests/smoke/accounts/reveal-secret-recovery-phrase.spec.ts also uses SmokeAccounts tag
• The AccountDetails back button behavior is tested via AccountDetails.tapBackButton()

SmokeWalletPlatform is selected because:

• It covers multi-SRP wallet architecture and account management flows that navigate through AccountDetails
• SmokeAccounts description says 'When changes touch multi-SRP architecture, account list, or SRP export flows, also select SmokeWalletPlatform'

The changes are purely cosmetic/refactoring with no business logic changes, but the HeaderBase API change could affect how the back button renders and is interacted with in E2E tests. Risk is medium because the testIDs are preserved but the underlying component structure changed.

Performance Test Selection:
These are purely UI component refactoring changes (migrating from internal component library to design system components). No performance-sensitive code paths are affected - no list rendering changes, no data loading changes, no state management changes, no app startup changes. Performance tests are not warranted.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud