Description

Implements the Money Account homepage "card linking" state — displayed when a user has deposited funds and has an unlinked MetaMask Card. This state encourages card linking with benefits messaging.

Subtasks implemented:

• MUSD-610: Updated the "Step 2 of 2" MoneyOnboardingCard with a variant prop ('get-card' | 'link-card'). The link-card variant shows "Link your MetaMask Card" title, cashback description, benefits bullets (checkmark icons with cashback and APY text), and a "Link card" CTA button.
• MUSD-611: Added a mode prop ('upsell' | 'link') to MoneyMetaMaskCard. Link mode replaces the virtual/metal card rows with a card-linking layout: metal card thumbnail, benefits bullets, and a full-width "Link card" button.
• MUSD-612: Wired the card-unlinked state in MoneyHomeView using the selectIsCardholder Redux selector. When isMilestone && isCardholder, both MoneyOnboardingCard and MoneyMetaMaskCard switch to their link-card variants. Verified all 6 reused sections (balance, action pills, earnings, activity, condensed cards, potential earnings) render correctly in the new state.

Card linking CTA handlers are currently stubbed with displayUnderConstructionAlert — they will be wired to the card linking flow when MUSD-489 lands.

Changelog

CHANGELOG entry: null

Related issues

Fixes: MUSD-602

Manual testing steps

Feature: Money Account card linking homepage state

  Scenario: user sees card linking prompt when they have an unlinked card
    Given user has a Money Account with balance > $0.00
    And user has ordered/received a MetaMask Card (isCardholder = true)
    And card is NOT linked to Money Account

    When user navigates to Money home screen
    Then the "Step 2 of 2" card shows "Link your MetaMask Card" title
    And benefits bullets show "Get 1-3% cashback" and "Earn 4% APY on your balance"
    And CTA button reads "Link card"
    And MetaMask Card section shows card linking layout instead of virtual/metal card rows
    And all other sections (balance, earnings, activity, condensed cards) display correctly

  Scenario: user without a card sees standard milestone state
    Given user has a Money Account with balance > $0.00
    And user does NOT have a MetaMask Card (isCardholder = false)

    When user navigates to Money home screen
    Then the "Step 2 of 2" card shows "Get your MetaMask Card" title
    And MetaMask Card section shows virtual/metal card rows with "Get now" buttons

Screenshots/Recordings

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
• I've tested with a power user scenario
• I've instrumented key operations with Sentry traces for production performance metrics

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.