fix: Add swipe to dismiss for DS Legacy toast

[amandaye0h]

Description

Adds swipe-to-dismiss to the legacy DS Toast component.

Users can swipe a top toast upward to dismiss it (by distance or quick flick). Incomplete swipes spring back and resume auto-dismiss timing. Manual close and tap handlers are unchanged.

Changelog

CHANGELOG entry: Added swipe-to-dismiss for in-app toasts

Related issues

Refs: #33600

Manual testing steps

Feature: Toast swipe to dismiss

  Scenario: user dismisses a toast by swiping up
    Given a Toast is visible at the top of the screen
    When the user swipes the toast upward past the dismiss threshold
    Then the toast animates out and is dismissed

  Scenario: user cancels a dismiss swipe
    Given a Toast is visible at the top of the screen
    When the user swipes the toast upward a short distance and releases
    Then the toast springs back into place
    And auto-dismiss continues as expected

Field	Value
Source branch	toast/swipe-to-dismiss
Build name	main-rc
Build commit SHA	3a546d4
Build version	8.5.0
Build number	6146
TestFlight group	MetaMask BETA & Release Candidates
Workflow branch ref	main

Screenshots/Recordings

Before

Toast can't be swiped

ScreenRecording_07-22-2026.00-21-44_1.MP4

After

Toast can be swiped

ScreenRecording_07-21-2026.22-51-17_1.MP4

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.

---

Note

Medium Risk
Touches shared in-app toast animation/gesture and timer logic with several race-edge fixes; scope is UI-only but behavior is user-visible app-wide.

Overview
Adds swipe-up to dismiss on the legacy design-system Toast, using a vertical pan gesture with tuned distance/velocity thresholds and offsets so taps and horizontal scrolls are not stolen.

Auto-dismiss no longer uses Reanimated withDelay; it uses a JS setTimeout that is cleared during pans, dismiss, remeasure, and toast replacement (so an old timed toast cannot dismiss a newly shown persistent toast). Incomplete swipes spring back and resume the remaining auto-dismiss time, with guards for interrupted entrance, mid-closeToast dismiss, and stale spring-back after showToast replaces content.

Tests mock react-native-gesture-handler and cover dismiss thresholds, incomplete swipes, replacement, and dismiss-in-progress edge cases.

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

[github-actions]

🧪 Flaky unit test detection

✅ All previously detected unit test flakiness issues in this PR have been fixed.

View recent run history

This check is informational only and does not block merging.

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

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeWalletPlatform, SmokeSwap, SmokeConfirmations, SmokeStake, SmokeMoney
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 72%

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR modifies the Toast component — a shared UI component used across many features in the app. Key changes include:

1. Swipe-to-dismiss gesture: Added GestureDetector + Gesture.Pan() from react-native-gesture-handler. This wraps the entire Toast view and could potentially conflict with existing gesture handlers in screens that display toasts.

2. Auto-dismiss timer refactoring: Changed from withDelay (Reanimated animation-based delay) to setTimeout-based scheduling. This is a behavioral change in timing that could affect how toasts appear/disappear in existing flows.

3. New shared values and state: Added visibleTranslateY, gestureStartY, toastHeight, isDismissing shared values and autoDismissTimeoutRef, hasNoTimeoutRef refs — more complex state management.

Toast usage across features:

• useEarnToasts → used in Earn/Stake flows → SmokeStake
• HwQrScanner → hardware wallet swaps → SmokeSwap + SmokeConfirmations
• useMoneyToasts → Money/Card flows → SmokeMoney
• TokenDetailsList → token details in wallet → SmokeWalletPlatform
• CollectibleDetectionModal → NFT detection → SmokeWalletPlatform

SmokeConfirmations is included because SmokeSwap and SmokeMoney flows involve confirmations, and the Toast component is used during transaction flows.

Performance tests: Not selected — the Toast changes are UI/gesture behavioral changes that don't affect the performance-measured scenarios (app launch, login, onboarding, asset loading, swaps execution timing). The gesture handler addition is lightweight and not in a performance-critical path.

Performance Test Selection:
The Toast changes add swipe gesture support and refactor auto-dismiss timing. These are UI interaction changes that don't affect the performance-measured scenarios (app launch cold/warm start, login unlock time, onboarding flow, asset loading, swap execution timing). The GestureDetector wrapper is lightweight and not in any performance-critical rendering path.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[georgewrmarshall]

LGTM! Two non-blocking follow ups below.

[georgewrmarshall]

non-blocking: The four separate useRef objects + four one-liner wrapper functions is quite verbose for what it's doing. A single stable-ref object would be easier to follow:

const swipeCallbacks = useRef({ closeToast, ensureAutoDismissAfterIncompleteSwipe, resumeAutoDismissAfterSwipe, clearScheduledAutoDismiss });
swipeCallbacks.current = { closeToast, ensureAutoDismissAfterIncompleteSwipe, resumeAutoDismissAfterSwipe, clearScheduledAutoDismiss };

Then in the memoized gesture: runOnJS(() => swipeCallbacks.current.closeToast())(). Reduces 24 lines to ~2 while keeping the same semantics.

[georgewrmarshall]

non-blocking: The 24 minimum dismiss distance is a magic number. Worth extracting to a named constant in Toast.constants.ts alongside the other gesture thresholds, e.g. TOAST_DISMISS_MINIMUM_PX = 24.