chore(runway): cherry-pick fix(MUSD-672): resolve Money Hub UX and UI inconsistencies cp-7.74.0

[runway-github]

• fix(MUSD-672): resolve Money Hub UX and UI inconsistencies cp-7.74.0 (fix(MUSD-672): resolve Money Hub UX and UI inconsistencies cp-7.74.0 #29049)

Description

There are several UX and UI inconsistencies across the Money Hub that
reduce conversion confidence, time-to-first-transaction, and overall
clarity in the mUSD journey. This PR resolves them:

1. Education screen from home "Money" entry-point — First-time users
   clicking the "Money" section header now see the education screen before
   entering the Money Hub, consistent with other entry-points.
2. Tooltip "Learn more" keeps tooltip open — The "Your bonus"
   tooltip no longer dismisses when "Learn more" opens an external URL.
   Added dismissOnButtonPress support to TooltipModal.
3. Empty state "Buy" pre-selects mUSD — Pressing "Buy" from the
   Money Hub empty state now pre-selects mUSD via RampIntent asset ID.
4. Education screen preserves entry context — The education screen
   now honors returnTo and navigationOverride params, routing back to
   the correct Money Hub context instead of defaulting to Quick Convert.
5. Dedicated Money Hub loading skeleton — Replaced the generic token
   list skeleton with a layout-matched CashTokensFullViewSkeleton.
6. Pull-to-refresh in Money Hub — Added useCashTokensRefresh hook
   that orchestrates parallel refresh of EVM token data and Merkl bonus
   rewards.

Changelog

CHANGELOG entry: Fixed Money Hub UX inconsistencies including education
gate on home entry, tooltip persistence, Buy pre-selection, education
context routing, dedicated loading skeleton, and pull-to-refresh

Related issues

Fixes: MUSD-672

Manual testing steps

Feature: Education gate on home screen Money entry

  Scenario: First-time user taps Money section header
    Given the user has not seen the mUSD education screen

    When the user taps the "Money" section header on the home screen
    Then the education screen is displayed
    And after completing education, the user lands on the Money Hub

  Scenario: Returning user taps Money section header
    Given the user has already seen the mUSD education screen

    When the user taps the "Money" section header on the home screen
    Then the user goes directly to the Money Hub

Feature: Tooltip persistence on external navigation

  Scenario: User taps Learn More in bonus tooltip
    Given the "Your bonus" tooltip is displayed

    When the user taps the "Learn more" button
    Then an external URL opens in the browser
    And the tooltip remains visible when returning to the app

Feature: Buy flow pre-selection from Money Hub

  Scenario: User taps Buy from Money Hub empty state
    Given the user has no mUSD or convertible stablecoins

    When the user taps the "Buy" button in the Money Hub empty state
    Then the buy flow opens with mUSD pre-selected

Feature: Education screen context preservation

  Scenario: User triggers education from Money Hub pencil icon
    Given the user has not seen the education screen

    When the user taps the pencil icon in "Convert your stablecoins" section
    Then the education screen is shown
    And the primary button returns the user to the Money Hub conversion context
    And the user is NOT redirected to Quick Convert

Feature: Dedicated Money Hub skeleton

  Scenario: Money Hub is loading
    Given the user navigates to the Money Hub

    When data is loading
    Then a layout-matched skeleton is displayed matching the Money Hub structure

Feature: Money Hub pull-to-refresh

  Scenario: User pulls to refresh Money Hub
    Given the user is on the Money Hub screen

    When the user pulls down to refresh
    Then token balances and Merkl bonus data are refreshed
    And a refresh indicator is shown during loading

Screenshots/Recordings

Before

N/A — behavioral changes, no visual design changes

After

N/A — behavioral changes, no visual design changes

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.

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
Changes navigation flow into Money Hub, adds new refresh
orchestration, and alters tooltip dismissal behavior; regressions could
affect user routing and refresh UX but do not touch security-critical
logic.

Overview
Improves the Money Hub (Cash/mUSD) UX by gating the Home Cash entry
behind the mUSD education screen when the user hasn’t seen it yet,
using a new shared useCashNavigation path and a new returnTo route
param so the education screen can exit to Money Hub without starting
conversion.

Updates the education screen to honor caller intent by forwarding
navigationOverride into initiateCustomConversion, adding returnTo
navigation, and tracking a new redirects_to location (MONEY_HUB) for
analytics.

Enhances Money Hub loading/refresh by adding a first-paint
CashTokensFullViewSkeleton, a pull-to-refresh hook
(useCashTokensRefresh) that refreshes token data plus Merkl rewards
via a new refetch surface from useMerklBonusClaim (plumbed up
through AssetOverviewClaimBonus), and allowing Tokens/TokenList to
accept an external refreshControl and optionally hide the internal
skeleton.

Fixes bonus tooltip UX by adding dismissOnButtonPress support to
TooltipModal/useTooltipModal and using it from the “Your bonus”
tooltip so “Learn more” can open an external URL without dismissing the
sheet; Money Hub “Buy” now passes an mUSD assetId to preselect mUSD.

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

---

Co-authored-by: Matthew Grainger matthew.grainger@consensys.net 5c4fccb

[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.

[github-actions]

🔍 Smart E2E Test Selection

⏭️ Smart E2E selection skipped - PR targets a release branch (release/*)

All E2E tests pre-selected.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[github-actions]

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

[chloeYue]

LGTM