Skip to content

refactor: migrate WalletDetails to design-system-react-native#30074

Merged
gantunesr merged 1 commit into
mainfrom
gar/refactor/mul-1690
May 14, 2026
Merged

refactor: migrate WalletDetails to design-system-react-native#30074
gantunesr merged 1 commit into
mainfrom
gar/refactor/mul-1690

Conversation

@gantunesr

@gantunesr gantunesr commented May 13, 2026 •
edited by cursor Bot
Loading

Copy link
Copy Markdown
Member

Description

  • Migrates WalletDetails, BaseWalletDetails and AddAccountItem imports from deprecated component-library components to @metamask/design-system-react-native named imports.
  • Replaces the deprecated ButtonLink back button with HeaderBase startButtonIconProps.
  • Updates the BaseWalletDetails test to avoid importing the deprecated AvatarAccountType enum.

Changelog

CHANGELOG entry: null

Related issues

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

Manual testing steps

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

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

Screenshots/Recordings

Simulator Screenshot - iPhone 16 - 2026-05-14 at 00 07 11

Pre-merge author checklist

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

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
Low risk UI refactor that primarily swaps component imports/props and updates tests; main risk is minor visual/accessibility regressions from design-system prop/variant changes.

Overview
Migrates BaseWalletDetails and AddAccountItem from deprecated component-library Text/Icon/HeaderBase/ButtonLink usage to @metamask/design-system-react-native, including updated typography variants, colors, and icon color tokens.

Replaces the custom back ButtonLink with HeaderBase startButtonIconProps (adds accessibilityLabel) and converts AddAccountItem to a named export, updating imports accordingly.

Updates BaseWalletDetails tests to avoid importing deprecated AvatarAccountType by using the 'Maskicon' literal in initial state.

Reviewed by Cursor Bugbot for commit f97a1b2. Bugbot is set up for automated code reviews on this repo. Configure here.

@metamaskbotv2 metamaskbotv2 Bot added the team-accounts-framework Accounts team label May 13, 2026
@gantunesr gantunesr changed the title [codex] Migrate WalletDetails to design-system-react-native refactor: migrate WalletDetails to design-system-react-native May 13, 2026
@github-actions

github-actions Bot commented May 13, 2026

Copy link
Copy Markdown
Contributor

🔍 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 a UI/design system migration in the BaseWalletDetails and AddAccountItem components within the MultichainAccounts/WalletDetails feature area. Key observations:

  1. Nature of changes: Refactoring from local component-library imports to @metamask/design-system-react-native package. This includes Text, Icon, HeaderBase components, and color/variant enum updates.

  2. Functional impact: While mostly cosmetic, the changes include:

    • Replacing ButtonLink with startButtonIconProps on HeaderBase for the back button - this changes the back navigation mechanism
    • AddAccountItem export changed from default to named export (import updated in parent)
    • Icon color and text variant enum value changes

  3. Feature area: The WalletDetails screen is part of the multi-SRP wallet architecture (registered as MultichainWalletDetails route). It displays wallet name, balance, SRP reveal option, and account list.

  4. SmokeAccounts: Directly relevant - this screen contains the SRP reveal flow (handleRevealSRP) and account management (adding accounts via AddAccountItem). The SRP export from account action menus and account management flows are tested here.

  5. SmokeWalletPlatform: Relevant - multi-SRP wallet architecture, importing additional SRPs, managing separate account hierarchies per SRP, and exporting SRP from Settings are all part of this tag's scope.

  6. SmokeIdentity: Not selected - the changes don't touch account sync or profile sync controller flows.

  7. No performance impact: The changes are purely UI refactoring with no changes to data fetching, list rendering algorithms, or state management.

Performance Test Selection:
The changes are purely UI/design system refactoring - migrating component imports and updating enum values. There are no changes to data fetching, list rendering performance, state management, or any performance-critical paths. No performance tests are warranted.

View GitHub Actions results

@sonarqubecloud

sonarqubecloud Bot commented May 13, 2026

Copy link
Copy Markdown

Quality Gate Passed 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 gantunesr marked this pull request as ready for review May 14, 2026 04:08
@gantunesr gantunesr requested a review from a team as a code owner May 14, 2026 04:08
david0xd
david0xd reviewed May 14, 2026
View reviewed changes
Comment thread app/components/Views/MultichainAccounts/WalletDetails/BaseWalletDetails/index.test.tsx
const mockInitialState: Partial<RootState> = {
settings: {
avatarAccountType: AvatarAccountType.Maskicon,
avatarAccountType: 'Maskicon',

@david0xd david0xd May 14, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we have this value as a const somewhere else so we can use it here instead of having string literal? 🤔

@gantunesr gantunesr May 14, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

technically no, the value in the DS is all lowercase meanwhile the value we need is Maskicon cc @MetaMask/design-system

https://github.com/MetaMask/metamask-design-system/blob/c7068cd2f303033e87353de972a40f227af3d5e8/packages/design-system-shared/src/types/AvatarAccount/AvatarAccount.types.ts#L22

@gantunesr gantunesr added this pull request to the merge queue May 14, 2026
@gantunesr gantunesr removed this pull request from the merge queue due to a manual request May 14, 2026
@gantunesr gantunesr added this pull request to the merge queue May 14, 2026
Merged via the queue into main with commit e0c9dce May 14, 2026
122 of 127 checks passed
@gantunesr gantunesr deleted the gar/refactor/mul-1690 branch May 14, 2026 12:56
@github-actions github-actions Bot locked and limited conversation to collaborators May 14, 2026
@metamaskbotv2 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
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@david0xd david0xd david0xd approved these changes

Assignees

No one assigned

Labels

release-7.78.0 Issue or pull request that will be included in release 7.78.0 size-S team-accounts-framework Accounts team

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@gantunesr @david0xd