feat(MUSD-431, MUSD-752): add Money balance card to wallet home#29724
Conversation
- Wallet integration: assert MoneyBalanceCard renders only when both selectMoneyHomeScreenEnabledFlag and selectHomepageSectionsV1Enabled return true, and stays hidden when either flag is off. - Money routes: assert MONEY_BALANCE_INFO_SHEET registers as a modal screen alongside MoneyAddMoneySheet. - MoneyBalanceCard: layout resilience test for very long balances (APY tag and Add button stay on screen).
|
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. |
Per design — the empty state was previously rendering a Primary Add button based on ticket text; the canonical design specifies Secondary in both states.
|
waiting for #29645 to land so I can correctly wire the navigation |
…unded Per design clarification: Primary highlights Add as the main action when the user has no balance; Secondary takes over once the user has funded the account, since adding more is a follow-up rather than the primary intent.
The empty-state CTA now reflects whether the user has seen the Money onboarding flow: - Never seen onboarding + zero balance: Primary "Get started", routes through the conversion education flow with a returnTo to Money home. - Seen onboarding + zero balance: Primary "Add" (current behaviour). - Funded balance: Secondary "Add" (current behaviour). Reuses the existing homepage.sections.cash_empty_state.get_started string since it literally translates to "Get started".
- Wallet view: render Carousel above MoneyBalanceCard so the promo reads first when the Money home flag is on. - Homepage Cash section: drop legacy MoneyAccountHomeRow render branch; fold !isMoneyHomeEnabled into isCashSectionEnabled so the section returns null when MoneyBalanceCard supersedes it. - Delete app/components/UI/Money/components/MoneyAccountHomeRow/* — fully replaced by MoneyBalanceCard. - CashSection.test.tsx: replace the MoneyAccountHomeRow render test with an explicit null-render assertion when isMoneyHomeEnabled is on.
…oney-balance-card # Conflicts: # app/components/Views/Wallet/index.test.tsx # app/components/Views/Wallet/index.tsx
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
❌ 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 71753bd. Configure here.
| buttonVariant = ButtonVariant.Primary; | ||
| buttonLabel = strings('money.balance_card.add'); | ||
| buttonTestId = MoneyBalanceCardTestIds.ADD_BUTTON; | ||
| containerTestId = MoneyBalanceCardTestIds.EMPTY_CONTAINER; |
There was a problem hiding this comment.
Empty state uses Primary variant instead of Secondary
Medium Severity
The PR specification states the Empty state (MUSD-431) uses a Secondary "Add" button, but buttonVariant is set to ButtonVariant.Primary in the else if (isEmpty) branch. The Funded state correctly uses ButtonVariant.Secondary. This visual inconsistency contradicts the design requirement that both Empty and Funded states share a Secondary "Add" button.
Reviewed by Cursor Bugbot for commit 71753bd. Configure here.
Logger reason ternary previously only knew about flag_off and geo_ineligible, so when isMoneyHomeEnabled (the new gate) was the actual cause of CashSection returning null, the log misreported it as geo_ineligible. Add an explicit money_home_on branch and include the moneyHome flag value in the log line.
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsE2E Test Selection: Key findings:
Risk is medium because: the Wallet home screen is a widely-used component, but changes are feature-flag gated (isMoneyHomeScreenEnabled), limiting blast radius to users with that flag enabled. Performance Test Selection: |
|
Description
Adds a new Money balance card to the wallet home screen, slotted between the
wallet action bar (Buy/Swap/Send/Receive) and the Carousel/Tokens block. The
card surfaces the user's Money Account balance, current vault APY, and a
direct CTA to add funds — replacing the chevron-style "Money" section pattern
described in the Money Home Review (April 30, 2026) for users on the new
wallet home.
The card has two visual states sharing one component:
$0.00, Secondary "Add" button.totalFiatFormattedfromuseMoneyAccountBalance,Secondary "Add" button. Switches as soon as
totalFiatRaw > 0.Other behaviour:
Routes.MONEY.ROOT)Routes.MONEY.MODALS.ADD_MONEY_SHEET(same flow as the existingMoney home Add pill)
MoneyBalanceInfoSheetmodal (registered alongside theexisting APY/Earnings info sheets)
selectMoneyHomeScreenEnabledFlag && isHomepageSectionsV1EnabledThe legacy
MoneyAccountHomeRowandCashSectionare intentionally untouchedin this PR — they continue to serve users without the Money home flag.
Changelog
CHANGELOG entry: Added a new Money balance card to the wallet home screen showing the user's Money Account balance, vault APY, and a quick action to add funds.
Related issues
Fixes: MUSD-431, MUSD-752
Manual testing steps
Screenshots/Recordings
Before
After
Pre-merge author checklist
Performance checks (if applicable)
Pre-merge reviewer checklist
Note
Medium Risk
Adds new wallet-home UI and navigation paths (including a new modal route) gated by feature flags; risk is mainly around routing/press handlers and empty-state logic but is localized and well-covered by tests.
Overview
Adds a new
MoneyBalanceCardon the wallet home header area (shown only whenselectMoneyHomeScreenEnabledFlagis on) that displays Money balance + APY with loading skeletons, and provides CTAs to open the Add Money sheet, navigate to Money Home, or start the mUSD conversion education flow for new users.Introduces a new
MoneyBalanceInfoSheetbottom-sheet modal and registers it in the Money modal stack via new routeRoutes.MONEY.MODALS.MONEY_BALANCE_INFO_SHEET, along with new i18n strings for the card label and sheet copy.Removes the legacy
MoneyAccountHomeRowcomponent/tests and updatesCashSectionso the entire Cash section is not rendered when the Money home flag is enabled; updates/extends unit tests (Wallet flag-gated rendering, Cash section null behavior, Money modal registration) accordingly.Reviewed by Cursor Bugbot for commit dea4013. Bugbot is set up for automated code reviews on this repo. Configure here.