fix: Polish Engagement toast for 8.6.0 release

[amandaye0h]

Description

Polishes Engagement toast call sites for the 8.6.0 release so they align with the shared toast pattern (Confirmation icon, success/error icon colors, and default toast chrome instead of custom background colors).

Updates notification copy-clipboard and push-notification onboarding toasts to use Confirmation + success/default icon colors and shared accessory spacing.

Changelog

CHANGELOG entry: Polished toast styling for consistency in the 8.6.0 release

Related issues

Fixes:

Related toast polish PRs for 8.6.0:

• fix: Polish Design System Engineers toast for 8.6.0 release #33765 — Design System Engineers
• fix: Polish Card toast for 8.6.0 release #33766 — Card
• fix: Polish Predict toast for 8.6.0 release #33767 — Predict
• fix: Polish Money Movement toast for 8.6.0 release #33769 — Money Movement
• fix: Polish Metamask Assets toast for 8.6.0 release #33770 — Metamask Assets
• fix: Polish Mobile Core UX toast for 8.6.0 release #33771 — Mobile Core UX
• fix: Polish Social AI toast for 8.6.0 release #33773 — Social AI
• fix: Polish Web3Auth toast for 8.6.0 release #33774 — Web3Auth
• fix: Polish Earn toast for 8.6.0 release #33775 — Earn
• fix: Polish Watchlist toast for 8.6.0 release #33791 — Watchlist

Manual testing steps

Feature: Notification toasts
  Scenario: copy from notification details
    Given the user copies a value from a notification detail
    When the toast appears
    Then it uses the Confirmation icon with the success color

Screenshots/Recordings

Before

Screen.Recording.2026-07-28.at.3.28.55.PM.mov

After

Screen.Recording.2026-07-28.at.3.19.07.PM.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]

🧪 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/Nav/App/App.test.tsx	0/181	0/317	0/322
app/components/Views/Notifications/Details/hooks/useCopyClipboard.test.ts	0/181	0/317	0/322

AI-detected flaky patterns

app/components/Nav/App/App.test.tsx

• J8 — jest.useFakeTimers() combined with waitFor() (polling conflict) (high)
  • Top-level describe calls jest.useFakeTimers(); this test (and similar ones for FoxLoader render and UIStartup trace) follows it with waitFor after advancing timers. Per the loaded skill (which explicitly cites App.test.tsx for this anti-pattern) and the PR's own new comment about waitFor hanging under frozen Date.now, the real-timer polling inside waitFor conflicts with fake timers and produces intermittent timeouts/hangs.
  • Suggested fix in app/components/Nav/App/App.test.tsx:

    -      renderAppWithSeedlessState(true);
    -      jest.advanceTimersByTime(0);
    -      await waitFor(() => {
    -        expect(mockCheckIsSeedlessPasswordOutdated).toHaveBeenCalledWith(
    -
    +      renderAppWithSeedlessState(true);
    +      await act(async () => {
    +        jest.advanceTimersByTime(0);
    +        jest.runAllTimersAsync();
    +      });
    +      expect(mockCheckIsSeedlessPasswordOutdated).toHaveBeenCalledWith(
    +

• J10 — jest.spyOn() without restoreAllMocks()/mockRestore() afterward (medium)
  • Suite contains many jest.spyOn(StorageWrapper, 'getItem'/'setItem'), mockCheckIsSeedlessPasswordOutdated, mockTrace etc. beforeEach only does clearAllMocks(); afterEach lacks restoreAllMocks(). Spies leak between tests. PR added per-test mockRestore() to the two edited tests but not to the shared hook or the other three version-branch tests.
  • Suggested fix in app/components/Nav/App/App.test.tsx:

    -  afterEach(() => {
    -    cleanup();
    -    jest.runOnlyPendingTimers();
    -  });
    -
    +  afterEach(() => {
    +    cleanup();
    +    jest.runOnlyPendingTimers();
    +    jest.restoreAllMocks();
    +  });
    +

app/components/Views/Notifications/Details/hooks/useCopyClipboard.test.ts

• J3 — Shared mock state (high)
  • The test configures multiple shared module-level mocks (mockDispatch, mockShowToast, ClipboardManager.setString) and only clears call counts in beforeEach. Without jest.resetAllMocks() in afterEach, any per-test mockImplementation or mockReturnValue changes would leak across tests (even though this file does not mutate them, the pattern matches J3 and is a common source of order-dependent flakiness). Historical data showed zero failures, so this is a proactive fix.
  • Suggested fix in app/components/Views/Notifications/Details/hooks/useCopyClipboard.test.ts:

    -  afterEach(() => {
    -    jest.useRealTimers();
    -  });
    +  afterEach(() => {
    +    jest.useRealTimers();
    +    jest.resetAllMocks();
    +  });

This check is informational only and does not block merging.

[github-actions]

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
All four changed files contain minor visual/styling updates and unit test fixes:

1. PushNotificationOnboarding/index.tsx: Removes marginRight: 12 from a toast style, changes icon color from IconColor.Alternative to IconColor.Default, and changes icon name from IconName.CheckBold to IconName.Confirmation. These are purely cosmetic UI tweaks to the notification onboarding toast appearance.

2. useCopyClipboard.ts: Changes icon name from CheckBold to Confirmation and updates color references from accent03.dark/normal to success.default. Minor visual change to the copy-to-clipboard toast.

3. App.test.tsx: Unit test fix - replaces waitFor with act(async () => {...}) to properly handle fake timers. This is a unit test improvement with no functional impact on the app.

4. useCopyClipboard.test.ts: Unit test update to match the icon name change (CheckBold → Confirmation).

None of these changes affect core user flows, navigation, confirmations, account management, network operations, or any other functionality covered by E2E smoke tests. The changes are limited to notification toast icon/color appearance. No E2E smoke tests validate notification toast icon names or colors specifically. No performance-sensitive code paths are touched.

Performance Test Selection:
No performance-sensitive code paths are affected. Changes are limited to notification toast icon names, colors, and margins - purely visual/cosmetic changes with no impact on app launch, rendering performance, or any measured performance scenarios.

View GitHub Actions results

[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