fix: Polish money toast for new animation

[amandaye0h]

Description

Polishes Money toast styling to align with the updated legacy Toast animation and design-system tokens.

• Updates useMoneyToasts icon padding and removes wrapper components around toast icons/spinners

Changelog

CHANGELOG entry: null

Related issues

Refs:

Related PRs

PR	Description
#32933	Update DS legacy toast with iOS animation and UI polish (toast/animate-ds-legacy) — must merge first

Manual testing steps

Feature: Money toast polish

  Scenario: User sees a Money deposit toast
    Given the user is on a Money deposit flow
    When a deposit transaction triggers a toast
    Then the toast uses updated icon padding consistent with the new Toast animation

  Scenario: User sees a Money withdraw or send toast
    Given the user is on a Money withdraw or send flow
    When the transaction triggers a toast
    Then the toast icon spacing matches the updated Toast layout

Screenshots/Recordings

Before

After

useMoneyToasts

Before before-money.mov

After money-after.mov

v2OrderToast

Before before-ramps.mov

After ramp-after.mov

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.

Made with Cursor

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

[metamask-ci]

PR template — items to address before "Ready for review"

Warnings — informational, address before merging:

• Related issues section is empty. Add Fixes: #123 / Closes: <URL> / Refs: <Jira key>, or write a short rationale after the colon.

See docs/readme/ready-for-review.md for the full Definition of Ready for Review.

[github-actions]

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR makes targeted changes to toast notification UI components in the Money/Ramp area:

1. useMoneyToasts.tsx: Removes wrapper <View> components with StyleSheet styles (marginRight: 16) around Icon and Spinner components in toast notifications. This is a minor visual/layout change - the icons remain the same, just without the wrapping View.

2. v2OrderToast.ts: More substantive refactoring - switches Ramp order toast notifications from ToastVariants.Plain with custom startAccessory (Avatar + View wrappers) to ToastVariants.Icon with native iconName/iconColor props. Also changes spinner color (PrimaryDefault → IconDefault) and size (Xl → Lg) for pending orders. This affects how toast notifications appear for Completed, Failed, and Cancelled ramp order statuses.

3. v2OrderToast.test.ts: Unit test updates matching the new toast variant assertions.

Tag selection rationale:

• SmokeMoney is the primary tag as these changes directly affect the Ramp (buy/sell) order toast notification system, which is a core part of the ramp flow user experience. The visual appearance of order status toasts (pending, completed, failed, cancelled) has changed.
• No other flows are affected - these are isolated toast utility components specific to Money/Ramp functionality.
• No navigation, confirmations, or other shared components are modified.

Performance: No performance-sensitive code paths are affected. These are pure UI rendering changes to toast components with no data fetching, state management, or rendering loop changes.

Performance Test Selection:
The changes are limited to toast notification UI components (removing View wrappers, switching toast variants). There are no changes to data fetching, rendering loops, state management, or any performance-sensitive code paths. No performance tests are warranted.

View GitHub Actions results

[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