feat: MUSD-187 mUSD conversion design changes ahead of UAT

[Matt561]

Description

Misc. design changes needed ahead of UAT for the mUSD conversion flow.

Fixes

1. mUSD Conversion in progress toast:

• Fixed positioning to be uniform with other toasts. We had a custom bottom offset that rendered the toast higher up.
• Removed ETA
• Replaced asset icon spinner with plain spinner

2. "Buy/Get mUSD" CTA above asset list

• Replaced "Earn daily rewards" text with "Earn a X% bonus"

3. Updated mUSD conversion education screen layout and image
4. Updated copy throughout mUSD conversion flow
5. Added earning-percentage-row to custom-amount-info for musdConversion transactions.

Changelog

CHANGELOG entry: misc mUSD conversion flow design changes ahead of UAT

Related issues

Fixes: MUSD-187: mUSD conversion design adjustments ahead of UAT

Screenshots/Recordings

Before

After

New education screen

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

Implements design tweaks for the mUSD conversion flow.

• CTA copy update: Replaces earn_points_daily with percentage-based text using MUSD_CONVERSION_APY and new i18n key earn.earn_percentage; color switched to Primary in MusdConversionAssetListCta.
• In-progress toast simplification: Uses a spinner accessory, removes ETA and token icon/asset lookup, and centralizes base toast options; label bolding defaults to false; minor icon size adjustment.
• Hook cleanup: useMusdConversionStatus no longer reads transaction pay data or asset images; passes only tokenSymbol to the toast and keeps de-duplication/cleanup logic.
• Locales/consts/tests: Adds MUSD_CONVERSION_APY = 2, new locale string, and updates/cleans tests to match the new copy and toast behavior.

^{Written by Cursor Bugbot for commit c262369. This will update automatically on new commits. 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.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeTrade, SmokeConfirmationsRedesigned
• Risk Level: medium
• AI Confidence: 75%

click to see 🤖 AI reasoning details

The changes are focused on the Earn/mUSD conversion feature with UI updates and confirmation screen modifications:

1. Earn/mUSD Feature Changes: Multiple files in app/components/UI/Earn/ are modified including the education view, asset list CTA, toasts, hooks, and routes. These are UI/UX updates to the mUSD conversion flow including new background images, button changes, and simplified toast notifications.

2. Confirmation Screen Changes: The custom-amount-info.tsx component now includes a new EarningPercentageRow for mUSD conversion transactions, and the button label was changed. A new earning-percentage-row.tsx component was added.

3. Navbar Cleanup: The getCloseOnlyNavbar function was removed from the Navbar component as it's no longer used (the mUSD education view now uses headerShown: false instead).

Tag Selection Rationale:

• SmokeTrade: The stake test (stake-action-smoke.spec.ts) uses this tag and tests the Earn button flow. Since mUSD conversion is part of the Earn feature, this tag is relevant.
• SmokeConfirmationsRedesigned: Changes to custom-amount-info.tsx affect confirmation screens, and a new row component was added for mUSD conversion confirmations.

Why not other tags:

• No direct E2E tests exist for mUSD conversion specifically
• The changes don't affect core wallet functionality, accounts, networks, or other features
• The Navbar change only removes an unused function

Risk Assessment: Medium - The changes are UI-focused but touch confirmation flows which are critical user paths. The removal of the navbar function is safe as it was only used by the mUSD education view which now handles navigation differently.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

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

See analysis details on SonarQube Cloud