feat: MUSD-795 money home screen onboarding stepper by Matt561 · Pull Request #30226 · MetaMask/metamask-mobile

Matt561 · 2026-05-15T01:32:03Z

Description

Introduces a step-by-step onboarding experience on the Money home screen, replacing the previous static MoneyOnboardingCard with a generic StepperCard component backed by Redux state.

Key changes:

StepperCard + SegmentedProgressBar — new reusable components that render a multi-step card with a visual progress bar, image slot, title/description, and primary/secondary CTAs. Designed to be product-agnostic; driven entirely by the caller via steps[] + currentStep props.
Redux stepper state — SET_ONBOARDING_STEPPER_STEP action + reducer keyed by stepperId, so multiple independent steppers can coexist without new Redux fields per product.
useMoneyOnboardingStep — thin hook that reads/writes the Money stepper step from Redux, exposing currentStep and incrementStep.
MoneyConfirmationScreenStack split — the Money confirmation screens are now registered as a separate MoneyConfirmationScreenStack in MainNavigator to prevent the bottom tab bar from rendering on Money confirmation screens.
Added Money onboarding stepper reset to developer options — The Money onboarding stepper state can now be reset in the developer options.

Changelog

CHANGELOG entry: refactored the Money onboarding stepper; created generic StepperCard and SegmentedProgressBar component

Related issues

Fixes:

Manual testing steps

Feature: Money home onboarding stepper

  Scenario: New user sees step 1 (Fund your account)
    Given the user has a Money account with zero balance
    And the user has not previously completed onboarding
    When the user opens the Money tab
    Then the StepperCard is visible showing step 1 of 2
    And the segmented progress bar shows 1 segment filled

  Scenario: Step auto-advances when balance is detected
    Given the user has a Money account with a non-zero mUSD balance
    When the user opens the Money tab
    Then step 1 is automatically skipped
    And the StepperCard shows the next "get card"/"link card" step

  Scenario: User completes all onboarding steps
    Given the user is on the final stepper step
    When the user presses the primary CTA
    Then the StepperCard disappears
    And the Money earnings section is shown without extra top padding

  Scenario: Add money sheet opens from confirmation route
    Given the user taps "Add money"
    Then the Add money screen opens without the bottom tab bar visible

Screenshots/Recordings

Before

After

https://www.loom.com/share/22884085e9184bb899772e3b7dbd7b34

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

Medium Risk
Medium risk due to new persisted Redux state and navigation stack restructuring for Money (including a new confirmations root), which could impact onboarding visibility/progress and Money flow routing if miswired.

Overview
Replaces the Money home’s static onboarding card with a Redux-backed multi-step stepper that can auto-advance based on account balance and card-link status, and introduces reusable StepperCard/SegmentedProgressBar components to render step-based onboarding with primary/secondary CTAs.

Adds generic onboarding stepper persistence via onboardingStepperProgress (keyed by stepperId) plus setOnboardingStepperStep and useOnboardingStep, including a dev option to reset Money’s stepper progress.

Refactors Money navigation by splitting out a dedicated Routes.MONEY.CONFIRMATIONS_ROOT + MoneyConfirmationScreenStack (no bottom tab bar) and updates Money deposit/withdraw confirmation routing accordingly; includes associated test updates and copy changes for the new stepper strings.

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

github-actions · 2026-05-15T01:32:19Z

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.

codecov-commenter · 2026-05-16T01:45:15Z

Codecov Report

❌ Patch coverage is 92.92929% with 7 lines in your changes missing coverage. Please review.
✅ Project coverage is 81.96%. Comparing base (b90a311) to head (f3185ae).
⚠️ Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
...y/components/MoneyBalanceCard/MoneyBalanceCard.tsx	40.00%	1 Missing and 2 partials ⚠️
app/actions/user/index.ts	0.00%	1 Missing ⚠️
...I/Money/components/MoneyEarnings/MoneyEarnings.tsx	66.66%	0 Missing and 1 partial ⚠️
...onents/MoneyOnboardingCard/MoneyOnboardingCard.tsx	97.91%	0 Missing and 1 partial ⚠️
...oney/components/MoneyUiDeveloperOptionsSection.tsx	50.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #30226      +/-   ##
==========================================
+ Coverage   81.95%   81.96%   +0.01%     
==========================================
  Files        5446     5447       +1     
  Lines      145449   145528      +79     
  Branches    33223    33237      +14     
==========================================
+ Hits       119209   119289      +80     
  Misses      18107    18107              
+ Partials     8133     8132       -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.

brianacnguyen

since these components are not official yet, can you place them in the components-temp folder? Thank you

…eveloper options

…mentation in MoneyHomeView

…sh of step one for already funded Money accounts; fixed excessive padding when onboarding stepper isn\'t rendered

…tepper

Co-authored-by: Matthew Grainger <Matt561@users.noreply.github.com>

…tepper

cursor

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

^{❌ 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 85575da. Configure here.}

github-actions · 2026-05-21T21:24:09Z

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR introduces significant changes to the MetaMask Card/Money feature:

SmokeMoney (primary): Extensive changes to the Money home screen onboarding flow:
- New MoneyOnboardingCard component with multi-step stepper (replaces old single-step card)
- New reusable StepperCard and SegmentedProgressBar components
- New useOnboardingStep hook with Redux-backed stepper progress tracking
- New useUpgradeMoneyAccountOnMount hook
- Navigation refactoring: MoneyAccountStackGate split into MoneyTabScreenStack + MoneyConfirmationScreenStack
- New Routes.MONEY.CONFIRMATIONS_ROOT route added
- Redux state changes: new onboardingStepperProgress field in user reducer/actions/selectors
- useMoneyAccountCardLinkage exposes new isCardLinkedToMoneyAccount field
- Minor UI tweaks (padding changes in MoneyActionButtonRow, MoneyEarnings)
SmokeConfirmations: The deposit and withdrawal flows now navigate to Routes.MONEY.CONFIRMATIONS_ROOT instead of Routes.MONEY.ROOT. This is a critical navigation change - the new MoneyConfirmationScreenStack is registered separately in MainNavigator.js outside of HomeTabs, specifically to hide the bottom navbar during confirmations. This change must be validated to ensure confirmations still render correctly.
SmokeSwap: Per SmokeMoney tag description, when Card Add Funds flows execute swaps, SmokeSwap should also be selected.
SmokeWalletPlatform: Per SmokeMoney tag description, when changes touch wallet home or actions entry to buy/sell, SmokeWalletPlatform should also be selected. The Money home view changes could affect wallet platform integration.

The changes are well-scoped to the Money/Card feature area with no impact on unrelated features like accounts, network management, snaps, or browser functionality.

Performance Test Selection:
The changes are focused on the Money/Card onboarding UI and navigation refactoring. While there are new components (StepperCard, SegmentedProgressBar) and Redux state changes, these are lightweight UI components and simple state additions that are unlikely to cause measurable performance regressions. The changes don't affect account list rendering, app startup, login flows, or other performance-sensitive areas covered by the available performance test tags.

View GitHub Actions results

sonarqubecloud · 2026-05-21T21:44:02Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

Matt561 added the team-earn label May 15, 2026

github-actions Bot added the size-XL label May 15, 2026

Matt561 force-pushed the feat/musd-795-money-home-screen-onboarding-stepper branch from 0f9e1cc to df9dfc0 Compare May 15, 2026 17:18

Matt561 marked this pull request as ready for review May 15, 2026 19:20

Matt561 requested review from a team as code owners May 15, 2026 19:20

cursor Bot reviewed May 15, 2026

View reviewed changes

Comment thread app/component-library/components-temp/StepperCard/StepperCard.tsx

Comment thread app/components/UI/Money/components/MoneyOnboardingCard/MoneyOnboardingCard.test.tsx Outdated

cursor Bot reviewed May 15, 2026

View reviewed changes

Comment thread app/components/UI/Money/Views/MoneyHomeView/MoneyHomeView.tsx

Comment thread app/components/UI/Money/components/MoneyOnboardingCard/MoneyOnboardingCard.tsx Outdated

cursor Bot reviewed May 15, 2026

View reviewed changes

Comment thread app/component-library/components/StepperCard/StepperCard.tsx Outdated

Comment thread app/components/UI/Money/components/MoneyOnboardingCard/MoneyOnboardingCard.tsx

cursor Bot reviewed May 15, 2026

View reviewed changes

Comment thread app/components/UI/Money/components/MoneyOnboardingCard/MoneyOnboardingCard.tsx Outdated

Matt561 force-pushed the feat/musd-795-money-home-screen-onboarding-stepper branch from 0250e8a to f3185ae Compare May 16, 2026 01:24

cursor Bot reviewed May 16, 2026

View reviewed changes

Comment thread app/components/UI/Money/components/MoneyOnboardingCard/MoneyOnboardingCard.tsx Outdated

brianacnguyen requested changes May 19, 2026

View reviewed changes

Matt561 force-pushed the feat/musd-795-money-home-screen-onboarding-stepper branch from f3185ae to 8e228c0 Compare May 20, 2026 21:25

cursor Bot reviewed May 20, 2026

View reviewed changes

Comment thread app/components/UI/Money/routes/index.tsx

Matt561 requested a review from brianacnguyen May 20, 2026 22:06

brianacnguyen previously approved these changes May 20, 2026

View reviewed changes

Matt561 added 11 commits May 21, 2026 10:01

feat: add generic stepper card redux plumbing

f6c1322

feat: added generic StepperCard and SegmentedProgressBar components

42c4083

feat: updated Money onboarding stepper to use StepperCard

5b0df30

feat: moved money home onboarding stepper from Money home screen to d…

d2e3de6

…eveloper options

feat: updated Money Card handleLinkPressed to copy card team\'s imple…

32f9bb3

…mentation in MoneyHomeView

feat: moved automatic step increment to MoneyBalanceCard to avoid fla…

6f61e2a

…sh of step one for already funded Money accounts; fixed excessive padding when onboarding stepper isn\'t rendered

feat: added test coverage

db838b9

feat: moved onComplete invocation in StepperCard into useEffect

39018d8

feat: fixed top-level describe block in MoneyOnboardingCard test suite

f240e32

feat: addressing cursor bugbot comments

7502619

feat: addressing cursor bugbot comments

44fe4a3

Matt561 requested review from Kureev, brianacnguyen and shane-t May 21, 2026 17:00

cursor Bot reviewed May 21, 2026

View reviewed changes

Comment thread app/components/UI/Money/Views/MoneyHomeView/MoneyHomeView.test.tsx

Matt561 and others added 2 commits May 21, 2026 13:37

feat: addressed bugbot issue

edfd886

Merge branch 'main' into feat/musd-795-money-home-screen-onboarding-s…

0794c0c

…tepper

cursor Bot reviewed May 21, 2026

View reviewed changes

Comment thread app/components/UI/Money/components/MoneyBalanceCard/MoneyBalanceCard.tsx Outdated

feat: move money onboarding step 1 skip into MoneyOnboardingCard

c009e08

Brunonascdev previously approved these changes May 21, 2026

View reviewed changes

fix: avoid money onboarding stepper flicker

7767ef6

Co-authored-by: Matthew Grainger <Matt561@users.noreply.github.com>

cursor Bot dismissed Brunonascdev’s stale review via 7767ef6 May 21, 2026 18:38

cursor Bot reviewed May 21, 2026

View reviewed changes

Comment thread app/components/UI/Money/Views/MoneyHomeView/MoneyHomeView.tsx

Matt561 and others added 2 commits May 21, 2026 17:00

feat: hide MoneyOnboardingCard when Money account balance is loading

bbdbe3b

Merge branch 'main' into feat/musd-795-money-home-screen-onboarding-s…

85575da

…tepper

cursor Bot reviewed May 21, 2026

View reviewed changes

Comment thread app/components/UI/Money/components/MoneyOnboardingCard/MoneyOnboardingCard.tsx Outdated

feat: removed unused Divider component

1a07b56

Matt561 requested a review from Brunonascdev May 21, 2026 22:05

Brunonascdev approved these changes May 21, 2026

View reviewed changes

brianacnguyen approved these changes May 21, 2026

View reviewed changes

shane-t approved these changes May 21, 2026

View reviewed changes

Matt561 enabled auto-merge May 21, 2026 22:27

Matt561 added the skip-sonar-cloud Only used for bypassing sonar cloud when failures are not relevant to the changes. label May 21, 2026

Matt561 added this pull request to the merge queue May 21, 2026

Merged via the queue into main with commit 46c7b03 May 21, 2026
528 of 539 checks passed

Matt561 deleted the feat/musd-795-money-home-screen-onboarding-stepper branch May 21, 2026 22:49

github-actions Bot locked and limited conversation to collaborators May 21, 2026

metamaskbotv2 Bot added the release-7.80.0 Issue or pull request that will be included in release 7.80.0 label May 21, 2026

Uh oh!

Conversation

Matt561 commented May 15, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Performance checks (if applicable)

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented May 15, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

codecov-commenter commented May 16, 2026

Codecov Report

Uh oh!

brianacnguyen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented May 21, 2026

🔍 Smart E2E Test Selection

Uh oh!

sonarqubecloud Bot commented May 21, 2026

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Matt561 commented May 15, 2026 •

edited by cursor Bot

Loading