fix(money): bottom sheet and how it works design review updates (MUSD-1018, MUSD-1017)

[Kureev]

Description

Design-review polishes for the Money account home and action sheets:

1. "Coming soon" tag alignment (MUSD-1018) — In the Add funds and Send funds bottom sheets the "Coming soon" tag was stacked below the action label. It now sits inline on the same line as the label, matching Figma. Both sheets share MoneySheetOptionsList, so this is a single style change.
2. "How it works" banner (MUSD-1017) — The banner and the mUSD token row were rendered as two separate home sections, so the generic section divider was injected inside the banner. They are now a single section, so no divider renders between the body text and the token row; the divider below the banner is preserved. This matches the Figma component (one cohesive card).
3. "How it works" top spacing — The banner now uses the pt-7 (28px) top spacing convention already used by the other first-position home sections (e.g. MoneyEarnings), instead of the tighter py-3.
4. Action button height — The Money action row (Add/Send/Card) was taller than the Home screen action row. The DSRN MainActionButton vertical padding is overridden to py-3 so both rows are identical height (no component-library usage introduced).

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MUSD-1018
Fixes: https://consensyssoftware.atlassian.net/browse/MUSD-1017

Manual testing steps

Feature: Money account design-review polishes

  Scenario: Coming soon tag alignment in the action sheets
    Given I am on the Money account home
    When I open the Add funds sheet (and the Send funds sheet)
    Then the "Coming soon" tag is shown inline on the same line as the disabled action label

  Scenario: How it works banner has no internal divider
    Given my Money account is in the empty state
    When I view the "How it works" banner
    Then no divider is rendered between the body text and the MetaMask USD token row
    And a divider is still rendered below the banner

  Scenario: How it works top spacing
    Given my Money account is in the empty state
    Then the "How it works" heading sits 28px below the action buttons

  Scenario: Action button height matches Home
    Given I compare the Money home action buttons with the wallet Home action buttons
    Then both rows of buttons have identical height

Screenshots/Recordings

Before

After

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

Low Risk
Visual and section-composition tweaks only; no auth, payments, or data-path changes.

Overview
Design-review fixes for Money account home and shared bottom-sheet rows—layout and spacing only, no new flows or business logic.

Empty-state “How it works” block: MoneyHowItWorks and MoneyMusdTokenRow are now one scroll section (fragment) instead of two contentSections entries, so the home Divider no longer sits between the banner body and the mUSD row while the divider below the combined block stays the same. Top padding on the banner changes from py-3 to pt-7 pb-3 to match other first sections (e.g. earnings).

Action row: Add / Transfer / Card MainActionButtons get twClassName="py-3" so row height matches wallet Home.

Add/Send sheets: In MoneySheetOptionsList, disabledRowContent switches from column to row with centered alignment so the Coming soon tag sits inline with the disabled label (Add funds and Send funds share this list).

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

[github-actions]

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.

[Jwhiles]

lgtm

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeMoney
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 95%

click to see 🤖 AI reasoning details

E2E Test Selection:
All four changed files are within the app/components/UI/Money/ directory and contain purely UI/layout/styling changes:

1. MoneyHomeView.tsx: Merges two separate FlatList content sections (how-it-works and musd-row) into a single section using a React Fragment. This is a structural refactor with no logic change.
2. MoneyActionButtonRow.tsx: Adds twClassName="py-3" padding to three action buttons (Add, Transfer, Card). Pure styling.
3. MoneyHowItWorks.tsx: Changes padding from py-3 to pt-7 pb-3. Pure styling.
4. MoneySheetOptionsList.styles.tsx: Changes disabledRowContent layout from column to row with different alignment/gap. Styling change affecting how disabled options appear.

All changes are scoped to the MetaMask Card/Money feature. SmokeMoney covers the card home screen, action buttons, and related flows. No controllers, core logic, shared navigation, or other feature areas are affected. No need for SmokeConfirmations, SmokeSwap, or SmokeWalletPlatform as these are purely visual/layout adjustments with no functional flow changes.

Performance Test Selection:
The changes are purely UI/layout/styling adjustments within the Money/Card feature. No performance-sensitive flows (app launch, login, onboarding, asset loading, swaps) are affected. No performance test tags are warranted.

View GitHub Actions results