Skip to content

refactor: migrate MultichainAccountConnect, PrivateKeyList, AddressList, and IntroModal to design-system-react-native#30183

Merged
gantunesr merged 19 commits into
mainfrom
gar/refactor/mul-1692
May 20, 2026
Merged

refactor: migrate MultichainAccountConnect, PrivateKeyList, AddressList, and IntroModal to design-system-react-native#30183
gantunesr merged 19 commits into
mainfrom
gar/refactor/mul-1692

Conversation

@gantunesr

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

Copy link
Copy Markdown
Member

Description

This PR updates MultichainAccountConnect, PrivateKeyList, AddressList, and IntroModal/LearnMoreBottomSheet to use the design-system Toast, Text, BottomSheet, and related types/imports.

Changelog

CHANGELOG entry: null

Related issues

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

Manual testing steps

Feature: Multichain account design system migration

  Scenario: user connects multichain accounts to a dapp
    Given the app receives a multichain account connection request
    When the user reviews the account and network permissions
    And the user confirms the connection
    Then the connection flow completes successfully
    And the permissions updated toast is shown

  Scenario: user copies an address from the Address List
    Given the user is viewing the Multichain Account Address List
    When the user taps the copy button for an address
    Then the address is copied to the clipboard
    And the copied-to-clipboard toast is shown

  Scenario: user reveals and copies a private key
    Given the user is viewing the Private Key List
    When the user enters the correct password
    And taps copy for a private key row
    Then the private key is copied with expiration
    And the copied toast is shown

  Scenario: user opens the Learn More bottom sheet
    Given the Multichain Accounts intro modal is visible
    When the user opens the Learn More bottom sheet
    Then the bottom sheet renders correctly
    And the checkbox enables the confirmation button
    And the back and close buttons dismiss the sheet

Screenshots/Recordings

Screen.Recording.2026-05-14.at.12.45.00.PM.mov

Screenshot 2026-05-19 at 10 33 13 PM Screenshot 2026-05-19 at 10 33 26 PM

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

Medium Risk
Mostly UI/refactor work, but it touches the multichain dapp connect flow and private key copying screens where regressions could impact key user journeys (toasts, navigation headers, and permission-updated feedback). No changes to permission decisions or key material handling beyond how feedback is displayed.

Overview
Migrates Multichain Accounts UI surfaces (MultichainAccountConnect, AddressList, PrivateKeyList, and IntroModal/LearnMoreBottomSheet) off the legacy ToastContext/component-library primitives onto @metamask/design-system-react-native (toast, Toaster, BottomSheet, and Text). Copy and connect confirmation feedback now uses design-system toast() calls with per-screen <Toaster /> mounting, including a favicon accessory for the permissions updated toast in MultichainAccountConnect.

Updates MultichainAddressRow copy API to make toastMessage optional and only trigger the legacy row-managed toast when both toastRef and toastMessage are provided, enabling callers to own toast behavior. Refreshes tests/stories accordingly (new toast mocks and assertions, added header back-button test), and includes small UI tweaks like tab bar padding and a reduced network-name max width in MultichainPermissionsSummary.

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

@gantunesr
refactor: migrate MultichainAccountConnect, PrivateKeyList, AddressLi…
0f01aed 
…st, and IntroModal to design-system-react-native
@metamaskbotv2 metamaskbotv2 Bot added the team-accounts-framework Accounts team label May 14, 2026
@github-actions github-actions Bot added pr-not-ready-for-e2e Skip E2E and block merging. Remove this label once the PR is ready to run the E2E tests. size-M labels May 14, 2026
@gantunesr gantunesr marked this pull request as ready for review May 14, 2026 17:18
@gantunesr gantunesr requested review from a team as code owners May 14, 2026 17:18
@gantunesr gantunesr removed the pr-not-ready-for-e2e Skip E2E and block merging. Remove this label once the PR is ready to run the E2E tests. label May 14, 2026
@gantunesr

gantunesr commented May 14, 2026

Copy link
Copy Markdown
Member Author

@metamaskbot update-mobile-fixture

@github-actions

github-actions Bot commented May 14, 2026

Copy link
Copy Markdown
Contributor

🔄 Fixture update started. Running workflow from branch gar/refactor/mul-1692. View workflow runs

@github-actions

github-actions Bot commented May 14, 2026

Copy link
Copy Markdown
Contributor

❌ E2E fixture update failed.\n\nCommon causes:\n- CI workflow is still running — wait for 'Build iOS Apps' to complete\n- CI workflow was skipped — ensure your PR has iOS-impacting changes or use skip-smart-e2e-selection label\n- iOS build failed — check the CI workflow for errors\n\nView logs and retry

@gantunesr gantunesr added the skip-smart-e2e-selection Skip Smart E2E selection, i.e. select all E2E tests to run label May 15, 2026
@codecov-commenter

codecov-commenter commented May 15, 2026 •
edited
Loading

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 75.00000% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 82.04%. Comparing base (3ee5c69) to head (903fa37).
⚠️ Report is 7 commits behind head on main.

Files with missing lines Patch % Lines
...tichainAccountConnect/MultichainAccountConnect.tsx 66.66% 0 Missing and 2 partials ⚠️
...ermissionsSummary/MultichainPermissionsSummary.tsx 50.00% 1 Missing ⚠️
Additional details and impacted files 
@@           Coverage Diff           @@
##             main   #30183   +/-   ##
=======================================
  Coverage   82.03%   82.04%           
=======================================
  Files        5454     5455    +1     
  Lines      145830   145885   +55     
  Branches    33411    33428   +17     
=======================================
+ Hits       119629   119686   +57     
+ Misses      18016    18015    -1     
+ Partials     8185     8184    -1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@gantunesr gantunesr requested a review from a team as a code owner May 15, 2026 13:51
cursor[bot]
cursor Bot reviewed May 15, 2026
View reviewed changes
Comment thread app/components/Views/MultichainAccounts/MultichainAccountConnect/MultichainAccountConnect.tsx Outdated
cursor[bot]
cursor Bot reviewed May 15, 2026
View reviewed changes
Comment thread ...nents/Views/MultichainAccounts/MultichainAccountConnect/MultichainAccountConnect.stories.tsx Outdated
ccharly
ccharly reviewed May 18, 2026
View reviewed changes
Comment thread app/components/Views/MultichainAccounts/AddressList/AddressList.test.tsx
Comment thread app/components/Views/MultichainAccounts/PrivateKeyList/PrivateKeyList.test.tsx Outdated
Comment thread app/components/Views/MultichainAccounts/PrivateKeyList/PrivateKeyList.tsx Outdated
Comment thread app/components/Views/MultichainAccounts/AddressList/AddressList.tsx Outdated
@hmalik88

hmalik88 commented May 18, 2026

Copy link
Copy Markdown
Contributor

The bar looks like it might be off on the connect screen, when you click to permissions it seems like it's going off the screen

Step 1   →   Step 2

@gantunesr

gantunesr commented May 19, 2026

Copy link
Copy Markdown
Member Author

Fixed @hmalik88

Screen.Recording.2026-05-18.at.10.38.30.PM.mov

@hmalik88

hmalik88 commented May 19, 2026

Copy link
Copy Markdown
Contributor

There's another thing that's looking off 🙈

Screenshot 2026-05-18 at 10 42 26 PM

@github-actions github-actions Bot added size-L and removed size-M labels May 20, 2026
cursor[bot]
cursor Bot reviewed May 20, 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.

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 e229d88. Configure here.

Comment thread ...nents/Views/MultichainAccounts/MultichainPermissionsSummary/MultichainPermissionsSummary.tsx
@gantunesr

gantunesr commented May 20, 2026 •
edited
Loading

Copy link
Copy Markdown
Member Author

Fixed @hmalik88! I have updated the description with the screenshots

@github-actions

github-actions Bot commented May 20, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

⏭️ Smart E2E selection skipped - skip-smart-e2e-selection label found

All E2E tests pre-selected.

View GitHub Actions results

@sonarqubecloud

sonarqubecloud Bot commented May 20, 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
1.0% Duplication on New Code

See analysis details on SonarQube Cloud

@gantunesr gantunesr added the no-changelog no-changelog Indicates no external facing user changes, therefore no changelog documentation needed label May 20, 2026
ccharly
ccharly approved these changes May 20, 2026
View reviewed changes

@ccharly ccharly 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.

Code LGTM (not tested)

@gantunesr gantunesr added this pull request to the merge queue May 20, 2026
Merged via the queue into main with commit 297394d May 20, 2026
212 of 217 checks passed
@gantunesr gantunesr deleted the gar/refactor/mul-1692 branch May 20, 2026 22:34
@github-actions github-actions Bot locked and limited conversation to collaborators May 20, 2026
@metamaskbotv2 metamaskbotv2 Bot added the release-7.79.0 Issue or pull request that will be included in release 7.79.0 label May 20, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

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

@ccharly ccharly ccharly approved these changes

Assignees

No one assigned

Labels

no-changelog no-changelog Indicates no external facing user changes, therefore no changelog documentation needed release-7.79.0 Issue or pull request that will be included in release 7.79.0 size-L skip-smart-e2e-selection Skip Smart E2E selection, i.e. select all E2E tests to run team-accounts-framework Accounts team

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@gantunesr @codecov-commenter @hmalik88 @ccharly