Skip to content

refactor: migrate AccountGroupDetails to design-system-react-native (MUL-1688)#29698

Merged
gantunesr merged 8 commits into
mainfrom
gar/refactor/mul-1688
Jun 3, 2026
Merged

refactor: migrate AccountGroupDetails to design-system-react-native (MUL-1688)#29698
gantunesr merged 8 commits into
mainfrom
gar/refactor/mul-1688

Conversation

@gantunesr

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

Copy link
Copy Markdown
Member

Description

Implements MUL-1688 by migrating AccountGroupDetails and its child rows away from deprecated app/component-library primitives and onto @metamask/design-system-react-native.

Changelog

CHANGELOG entry: null

Related issues

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

Manual testing steps

Feature: Account group details design-system migration

  Scenario: View account group details
    Given the user is logged in with an account group
    When the user opens Account Group Details
    Then the header, avatar, rows, and row chevrons render as before

  Scenario: Use account group detail actions
    Given Account Group Details is open
    When the user taps account name, networks, private keys, smart account, wallet, secret recovery phrase, or remove account when available
    Then the same navigation targets as before are reached

Screenshots/Recordings

Simulator Screenshot - iPhone 16 - 2026-06-01 at 17 42 42

Validation

  • yarn jest app/components/Views/MultichainAccounts/AccountGroupDetails/AccountGroupDetails.test.tsx
  • yarn exec eslint app/components/Views/MultichainAccounts/AccountGroupDetails/AccountGroupDetails.tsx app/components/Views/MultichainAccounts/AccountGroupDetails/components/SecretRecoveryPhrase.tsx app/components/Views/MultichainAccounts/AccountGroupDetails/components/Wallet.tsx app/components/Views/MultichainAccounts/AccountGroupDetails/components/RemoveAccount.tsx app/components/Views/MultichainAccounts/AccountGroupDetails/AccountGroupDetails.test.tsx
  • git diff --check
  • yarn lint:tsc currently fails on unrelated existing fixture errors in app/components/UI/Card/hooks/useEmailVerificationVerify.test.ts at lines 91 and 307 (canonicalProfileId missing from mocked UserProfile).

Pre-merge author checklist

Performance checks (if applicable)

  • I've tested on Android
  • I've tested with a power user scenario
  • I've instrumented key operations with Sentry traces for production performance metrics

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
Presentation-only refactor on account settings screens; navigation and business logic are unchanged.

Overview
Account Group Details and its row components (Wallet, SecretRecoveryPhrase, RemoveAccount) now import layout, typography, icons, header, and avatars from @metamask/design-system-react-native instead of deprecated component-library / local Box UI.

The screen swaps the legacy account Avatar for AvatarAccount, maps settings avatar type through getAvatarAccountVariant, and uses HeaderBase’s startButtonIconProps for back navigation. Text uses design-system variants (BodyMd + FontWeight.Medium); icons use IconColor instead of theme colors; row Box props use design-system enums with smaller gap values.

Tests mock AvatarAccount and use AvatarAccountVariant in mock state.

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

@gantunesr @cursoragent
refactor: migrate AccountGroupDetails to design-system-react-native
1e7a54d 
MUL-1688: Replace deprecated component-library HeaderBase, ButtonLink,
Text, Icon, Avatar, and app Box with @metamask/design-system-react-native
equivalents in AccountGroupDetails and child components.

Co-authored-by: Cursor <cursoragent@cursor.com>
@gantunesr gantunesr self-assigned this May 5, 2026
@metamaskbotv2 metamaskbotv2 Bot added the team-accounts-framework Accounts team label May 5, 2026
@github-actions github-actions Bot added the size-M label May 5, 2026
@gantunesr gantunesr added the no-changelog no-changelog Indicates no external facing user changes, therefore no changelog documentation needed label May 5, 2026
@sonarqubecloud

sonarqubecloud Bot commented May 27, 2026

Copy link
Copy Markdown

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
85.7% 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 June 1, 2026 21:12
@gantunesr gantunesr requested a review from a team as a code owner June 1, 2026 21:12
@github-actions github-actions Bot added the risk:medium AI analysis: medium risk label Jun 1, 2026
cursor[bot]
cursor Bot reviewed Jun 1, 2026
View reviewed changes
Comment thread app/components/Views/MultichainAccounts/AccountGroupDetails/AccountGroupDetails.tsx Outdated
hmalik88
hmalik88 reviewed Jun 2, 2026
View reviewed changes
Comment thread app/components/Views/MultichainAccounts/AccountGroupDetails/components/RemoveAccount.tsx Outdated
cursor[bot]
cursor Bot reviewed Jun 2, 2026
View reviewed changes
Comment thread app/components/Views/MultichainAccounts/AccountGroupDetails/AccountGroupDetails.tsx
cursor[bot]
cursor Bot reviewed Jun 2, 2026
View reviewed changes

@cursor cursor Bot left a comment

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.

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

There are 2 total unresolved issues (including 1 from previous review).

Fix All in Cursor

❌ 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 7d8c637. Configure here.

Comment thread app/components/Views/MultichainAccounts/AccountGroupDetails/AccountGroupDetails.tsx
@github-actions

github-actions Bot commented Jun 2, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeAccounts, SmokeWalletPlatform, SmokeIdentity
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: medium
  • AI Confidence: 85%
click to see 🤖 AI reasoning details

E2E Test Selection:
All 5 changed files are in the AccountGroupDetails component and its sub-components (RemoveAccount, SecretRecoveryPhrase, Wallet). The changes are a UI-only design system migration from internal component library imports to @metamask/design-system-react-native. No business logic was changed - only component imports, prop names, and styling tokens were updated.

The AccountGroupDetails screen is part of the multi-SRP/multi-account architecture and covers:

  • Account name editing
  • SRP (Secret Recovery Phrase) export flow (SecretRecoveryPhrase.tsx)
  • Private keys export
  • Remove account functionality (RemoveAccount.tsx)
  • Wallet/SRP group navigation (Wallet.tsx)

SmokeAccounts is selected because this screen is central to multi-account management, SRP export flows, and account visibility management.

SmokeWalletPlatform is selected per the SmokeAccounts tag description: "When changes touch multi-SRP architecture, account list, or SRP export flows, also select SmokeWalletPlatform."

SmokeIdentity is selected per the SmokeAccounts tag description: "also select SmokeIdentity" when changes touch multi-SRP architecture and SRP export flows.

The risk is medium because while the changes are purely cosmetic (design system migration), incorrect prop mappings or missing exports from the new design system package could break the UI rendering of these account management screens. The test file also updates to use the new AvatarAccountVariant enum, confirming the migration is complete.

Performance Test Selection:
These changes are purely UI component library migrations (design system refactoring) with no changes to data loading, state management, list rendering, or app initialization. No performance impact is expected from swapping component imports between equivalent UI libraries.

View GitHub Actions results

@gantunesr gantunesr added this pull request to the merge queue Jun 3, 2026
@gantunesr

gantunesr commented Jun 3, 2026

Copy link
Copy Markdown
Member Author

Test before merge

Screen.Recording.2026-06-03.at.11.56.52.AM.mov

Merged via the queue into main with commit d998126 Jun 3, 2026
195 checks passed
@gantunesr gantunesr deleted the gar/refactor/mul-1688 branch June 3, 2026 16:16
@github-actions github-actions Bot locked and limited conversation to collaborators Jun 3, 2026
@metamaskbotv2 metamaskbotv2 Bot added the release-7.81.0 Issue or pull request that will be included in release 7.81.0 label Jun 3, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@montelaidev montelaidev montelaidev left review comments

@cursor cursor[bot] cursor[bot] left review comments

@hmalik88 hmalik88 hmalik88 approved these changes

Assignees

@gantunesr gantunesr

Labels

no-changelog no-changelog Indicates no external facing user changes, therefore no changelog documentation needed release-7.81.0 Issue or pull request that will be included in release 7.81.0 risk:medium AI analysis: medium risk size-M team-accounts-framework Accounts team

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@gantunesr @hmalik88 @montelaidev