fix: Polish earn, quick-buy, rewards and gas toast for new animation

[amandaye0h]

Description

Polishes Earn, Quick Buy, Rewards, and Gas toast styling to align with the updated legacy Toast animation and design-system tokens.

• Quick Buy: updates icon spacing and spinner color in quickBuyToastOptions
• Earn: updates icon spacing, text style, and spinner color in useEarnToasts
• Rewards: updates icon spacing and related test in useRewardsToast
• Gas: updates text and close button icon in gas-fee-token-toast

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: Feature toast polish

  Scenario: User sees a Quick Buy toast
    Given the user initiates a Quick Buy transaction
    When the transaction triggers a toast
    Then the toast uses updated icon spacing and spinner color

  Scenario: User sees an Earn toast
    Given the user is on an Earn flow
    When an Earn action triggers a toast
    Then the toast uses updated icon spacing, text style, and spinner color

  Scenario: User sees a Rewards toast
    Given the user is on a Rewards flow
    When a rewards action triggers a toast
    Then the toast uses updated icon spacing consistent with the new Toast animation

  Scenario: User sees a Gas fee token toast
    Given the user is confirming a transaction with gas fee token options
    When the gas fee token toast appears
    Then the toast text and close button icon match the updated Toast design

Screenshots/Recordings

Before

After

Earn

Before before-earn.mov

After earn-after.mov

QuickBuy

Before before-quickbuy.mov

After quickbuy-after.mov

Rewards

Before before-rewards.mov

After rewards-after.mov

Gas

Before gas-before.mov

After gas-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: SmokeConfirmations, SmokeStake, SmokePerps, SmokeWalletPlatform
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 82%

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR contains UI-level toast notification refactoring across several areas:

1. gas-fee-token-toast.tsx (Confirmations): Changes the close button from ButtonVariants.Primary to ButtonIconVariant.Icon and consolidates label options. This is a functional UI change in the gas fee token toast shown during EIP-7702 confirmations. SmokeConfirmations is warranted to verify the toast still renders and dismisses correctly.

2. useEarnToasts.tsx (Earn/Staking): Removes View wrappers around icons, changes primaryIsBold default to true. Affects toast notifications shown during staking operations. SmokeStake is warranted.

3. quickBuyToastOptions.tsx (SocialLeaderboard/Perps QuickBuy): Removes Box wrapper, changes spinner color from PrimaryDefault to IconDefault. Affects the Perps quick buy flow toast. SmokePerps is warranted, and per tag description, SmokeWalletPlatform (Trending section) should also be selected.

4. useRewardsToast.tsx (Rewards): Removes Box wrappers around icons. Minor UI change to rewards toast notifications. No dedicated smoke tag for Rewards specifically, but it's related to the wallet platform.

5. Test files updated to match the implementation changes - no additional tag selection needed.

All changes are cosmetic/minor UI refactoring (removing wrapper components, adjusting styling), but the gas fee token close button variant change and the earn toast bold text default change are functional enough to warrant targeted smoke testing. Per tag descriptions: SmokePerps requires SmokeWalletPlatform and SmokeConfirmations; SmokeStake requires SmokeConfirmations.

Performance Test Selection:
All changes are UI-level toast notification refactoring (removing wrapper components, adjusting styling, consolidating labels). These changes do not affect app launch, login, onboarding, asset loading, swap execution, or other performance-sensitive flows. No performance tests are warranted.

View GitHub Actions results

[github-actions]

🧪 Flaky unit test detection

Run history flaky detection

View recent run history

Historical failure rate is a hint, not proof — review each suggestion in context. See the flaky-test-detection skill for the full pattern reference and manual audit workflow.

Failures / runs sampled per window:

File	7d	15d	30d
app/components/UI/Rewards/hooks/useRewardsToast.test.tsx	0/50	0/178	0/375

AI-detected flaky patterns

app/components/UI/Rewards/hooks/useRewardsToast.test.tsx

• J6 — Arbitrary setTimeout/sleep in test body (high)
  • Concrete J6 match: zero-delay setTimeout used as synchronization barrier after showToast call (and similar in 3 other tests in this file). This relies on real timers and can flake under CI load variations even with act(). No other J1-J10 patterns matched with exact code snippets (e.g. beforeEach uses clearAllMocks so not J3; no waitFor so not J4/J8; no module let mutations so not J9; no spyOn so not J10; mocks use initialRootState equivalent so not J5). History.json showed 0 failures so historicalHintUsed=false. Fix replaces barrier with waitFor containing assertions (per J6 and J4 guidance). Also update import to include waitFor from '@testing-library/react-native'.
  • Suggested fix in app/components/UI/Rewards/hooks/useRewardsToast.test.tsx:

    -      await act(async () => {
    -        result.current.showToast(testConfig);
    -        await new Promise((resolve) => setTimeout(resolve, 0));
    -      });
    -
    -      expect(mockShowToast).toHaveBeenCalledWith({
    -        variant: ToastVariants.Icon,
    -        iconName: IconName.Confirmation,
    -        labelOptions: [{ label: 'Test', isBold: true }],
    -        hasNoTimeout: false,
    -      });
    -      expect(playNotification).toHaveBeenCalledWith(NotificationMoment.Success);
    +      await act(async () => {
    +        result.current.showToast(testConfig);
    +      });
    +
    +      await waitFor(() => {
    +        expect(mockShowToast).toHaveBeenCalledWith({
    +          variant: ToastVariants.Icon,
    +          iconName: IconName.Confirmation,
    +          labelOptions: [{ label: 'Test', isBold: true }],
    +          hasNoTimeout: false,
    +        });
    +        expect(playNotification).toHaveBeenCalledWith(NotificationMoment.Success);
    +      });

This check is informational only and does not block merging.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud