feat: MUSD-740, MUSD-746 — MetaMask Card section polish

[Kureev]

Description

Two small polish items in the MetaMask Card section on Money Home.

• MUSD-746 wraps the "1% cashback" / "3% cashback" labels on the Virtual and Metal card rows in the MMDS Tag (severity = success) so they read as pills. This matches the APY tag pattern in the Money Home header and gives the labels stronger emphasis.
• MUSD-740 rebalances the link variant of MoneyMetaMaskCard. The card image is enlarged from 104×66 to 152×96 (a new linkCardImage style), and the row gains BoxAlignItems.Center so the checklist sits vertically centred next to the larger image. The upsell variant rows are unchanged.

No copy, analytics, or routing changes.

Changelog

CHANGELOG entry: null

Related issues

Fixes:

• https://consensyssoftware.atlassian.net/browse/MUSD-740
• https://consensyssoftware.atlassian.net/browse/MUSD-746

Manual testing steps

Feature: MetaMask Card section polish

  Scenario: user views the MetaMask Card section in upsell mode
    Given the Money Account feature flag is enabled and the user has no card
    When the user scrolls to the "MetaMask Card" section on Money Home
    Then "1% cashback" and "3% cashback" render as green pill tags
    And both pills sit immediately below the card name
    And the existing "Get now" buttons are unchanged

  Scenario: user views the MetaMask Card section in link mode
    Given the user is in the link-card flow
    When the "Link MetaMask Card" card is rendered
    Then the card image is visibly larger than before
    And the two checklist bullets ("Up to 3% cash back", "Up to N% APY") are vertically centred next to the image
    And the "Link card" button position is unchanged

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.

---

Note

Low Risk
Low risk UI-only changes: swaps cashback labels to MMDS Tag pills and tweaks link-mode layout/image sizing without touching navigation, analytics, or data logic.

Overview
Updates the Money Home MoneyMetaMaskCard UI polish.

Cashback labels in the upsell rows are now rendered as MMDS Tag pills (success severity) instead of plain green text. Link mode layout is adjusted by enlarging the card image via a new linkCardImage style and vertically centering the image/bullet row.

^{Reviewed by Cursor Bugbot for commit 8b2297f. 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.

[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 0df732b. Configure here.}

[Jwhiles]

@Kureev why are we bumping axios?

[Kureev]

ah, that was a no-op vs current main. I merged main in and it went away

[github-actions]

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are purely UI/styling modifications to the MoneyMetaMaskCard component:

1. MoneyMetaMaskCard.tsx:

   • Replaced a Text component (with green color) with a Tag component (TagSeverity.Success) for the cashback percentage display in CardRow
   • Added alignItems={BoxAlignItems.Center} to the LinkContent Box container
   • Changed style reference from cardImage to linkCardImage for the card image in LinkContent

2. MoneyMetaMaskCard.styles.ts:

   • Added a new linkCardImage style with larger dimensions (152x96 instead of 104x66)

These are contained visual/styling changes within the MetaMask Card UI component. They only affect the Money/Card feature area and do not touch any shared infrastructure, controllers, navigation, or other feature areas. SmokeMoney is the appropriate and sufficient tag to validate these changes. No dependent tags are required per the tag descriptions (no swap flows, no wallet home changes).

Performance Test Selection:
The changes are purely cosmetic UI modifications (component swap from Text to Tag, image size adjustment, alignment fix) within the MoneyMetaMaskCard component. These changes do not affect rendering performance in any measurable way - no list rendering, no data loading, no state management changes, no critical user flow performance paths are impacted.

View GitHub Actions results

[Kureev]

Updated the copy, rebased on top of the main

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud