Skip to content

refactor: migrate OnboardingSheet to design system component#28079

Merged
smgv merged 1 commit into
mainfrom
refactor/onboarding-sheet-ds-migration
Mar 30, 2026
Merged

refactor: migrate OnboardingSheet to design system component#28079
smgv merged 1 commit into
mainfrom
refactor/onboarding-sheet-ds-migration

Conversation

@smgv

@smgv smgv commented Mar 30, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Description

This PR migrates the OnboardingSheet toward the MetaMask design system.

JIra Link: https://consensyssoftware.atlassian.net/browse/TO-645

Changelog

CHANGELOG entry: migrate OnboardingSheet to design system component

Related issues

Fixes:

Manual testing steps

Feature: BottomSheet for Wallet Creation/Onboarding

  Scenario: user clicks on `Create  a new wallet / I have an existing wallet button`
    Then BottomSheet appears with the login options.

Screenshots/Recordings

Before

After

Screen.Recording.2026-03-30.at.12.06.51.PM.mov

Pre-merge author checklist

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
Swaps the underlying BottomSheet implementation and wiring, which can subtly change sheet dismissal/back navigation behavior and layout across platforms.

Overview
Migrates OnboardingSheet from the in-repo deprecated BottomSheet to the @metamask/design-system-react-native BottomSheet, updating the import and passing navigation.goBack via the new goBack prop.

Updates Jest snapshots to reflect the design-system bottom sheet structure/style output (notably overlay/container layout and flex/style prop normalization) for both create and import modes.

Written by Cursor Bugbot for commit 296db77. This will update automatically on new commits. Configure here.

@smgv smgv self-assigned this Mar 30, 2026
@smgv smgv requested a review from a team as a code owner March 30, 2026 06:41
@smgv smgv added the needs-qa Any New Features that needs a full manual QA prior to being added to a release. label Mar 30, 2026
@github-actions

github-actions Bot commented Mar 30, 2026

Copy link
Copy Markdown
Contributor

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@metamaskbot metamaskbot added the team-onboarding Onboarding team label Mar 30, 2026
@github-actions github-actions Bot added size-XS risk-medium Moderate testing recommended · Possible bug introduction risk labels Mar 30, 2026
@github-actions

github-actions Bot commented Mar 30, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeWalletPlatform, SmokeAccounts, SmokeIdentity
  • Selected Performance tags: @PerformanceOnboarding, @PerformanceLaunch
  • Risk Level: medium
  • AI Confidence: 78%
click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are focused on the OnboardingSheet component:

  1. BottomSheet import migration: Moved from internal component library (component-library/components/BottomSheets/BottomSheet) to @metamask/design-system-react-native. The snapshot diff shows the new BottomSheet has a different rendering structure (different style nesting, collapsable={false}, flexBasis/flexGrow/flexShrink instead of flex: 1).

  2. goBack prop added: <BottomSheet goBack={navigation.goBack}> — this ensures the sheet properly handles back navigation/dismissal.

Why these tags:

  • SmokeWalletPlatform: Covers wallet lifecycle analytics including new wallet creation and SRP import events — both of which start from the OnboardingSheet. This is the primary tag for onboarding flows.
  • SmokeAccounts: Covers SRP import flows which use the OnboardingSheet as the entry point (tapImportSeedButton). The OnboardingSheet is directly referenced in account-related E2E tests.
  • SmokeIdentity: Covers backup and sync onboarding flows that also start from the OnboardingSheet.

Why not other tags: The change is isolated to the OnboardingSheet component which is only used during initial onboarding. It doesn't affect confirmations, trading, network management, snaps, or other wallet features.

Risk: Medium — the BottomSheet component swap could affect how the sheet renders, animates, or responds to gestures/back navigation in E2E tests. The goBack prop addition changes dismissal behavior. However, the functional logic (buttons, callbacks) is unchanged.

Performance Test Selection:
The OnboardingSheet is directly used in performance tests: tests/performance/onboarding/import-wallet.spec.js, tests/performance/onboarding/new-wallet-account-creation.spec.js, and tests/performance/onboarding/launch-times/cold-start-after-wallet-import.spec.js all interact with OnboardingSheet. The BottomSheet component swap from internal to design-system could affect rendering performance and timing measurements in these tests. @PerformanceLaunch is also relevant as cold-start-to-login.spec.js uses OnboardingSheet.

View GitHub Actions results

cursor[bot]
cursor Bot reviewed Mar 30, 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.

Automation run status: blocked for this PR context.

The task instructions target MetaMask/metamask-design-system docs work (DSYS-616), but this run is attached to MetaMask/metamask-mobile PR #28079 and the available write tooling can only open/update PRs in metamask-mobile.

Blocking constraints found:

  1. Required MMDS doc paths are missing in this checkout:
  • packages/design-system-react/MIGRATION.md
  • packages/design-system-react-native/MIGRATION.md
  • packages/design-system-react/src/components/{ComponentName}
  • packages/design-system-react-native/src/components/{ComponentName}
  1. Jira/Atlassian MCP tools requested by the prompt are not configured in this run.
  2. No DSYS-616 client PRs with a Migration doc discrepancies found section were discovered in mobile/extension via GitHub search.

No repository changes were made in this run.

Open in Web View Automation 

Sent by Cursor Automation: DSYS-616: MMDS - Create/Update migration docs

@github-actions

github-actions Bot commented Mar 30, 2026

Copy link
Copy Markdown
Contributor

✅ E2E Fixture Validation — Schema is up to date
17 value mismatches detected (expected — fixture represents an existing user).
View details

@sonarqubecloud

sonarqubecloud Bot commented Mar 30, 2026

Copy link
Copy Markdown

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

tylerc-consensys
tylerc-consensys approved these changes Mar 30, 2026
View reviewed changes

@tylerc-consensys tylerc-consensys 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.

lgtm

@LeVinhGithub LeVinhGithub added QA Passed QA testing has been completed and passed and removed needs-qa Any New Features that needs a full manual QA prior to being added to a release. labels Mar 30, 2026
@smgv smgv added this pull request to the merge queue Mar 30, 2026
Merged via the queue into main with commit e91ae23 Mar 30, 2026
142 of 145 checks passed
@smgv smgv deleted the refactor/onboarding-sheet-ds-migration branch March 30, 2026 09:51
@github-actions github-actions Bot locked and limited conversation to collaborators Mar 30, 2026
@metamaskbot metamaskbot added the release-7.73.0 Issue or pull request that will be included in release 7.73.0 label Mar 30, 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

@LeVinhGithub LeVinhGithub LeVinhGithub approved these changes

@tylerc-consensys tylerc-consensys tylerc-consensys approved these changes

Assignees

@smgv smgv

Labels

QA Passed QA testing has been completed and passed release-7.73.0 Issue or pull request that will be included in release 7.73.0 risk-medium Moderate testing recommended · Possible bug introduction risk size-XS team-onboarding Onboarding team

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@smgv @LeVinhGithub @tylerc-consensys @metamaskbot