fix: prevent Buy/Sell toggle parasite animation in QuickBuy

[xavier-brochard]

Description

The QuickBuy Buy/Sell toggle (QuickBuyTradeModeToggle) played a parasite animation when returning to the amount screen from a subsheet.

Root cause: the amount screen subtree is keyed by key={activeScreen} in QuickBuyRoot, so the toggle remounts on every subsheet round-trip (e.g. opening "Pay with" and navigating back). Meanwhile tradeMode persists in QuickBuyContext. On remount the slider's Animated.Value reset to 0 (Buy), and the layout effect unconditionally ran Animated.spring to the Sell position once onLayout fired — producing a visible "starts on Buy, flicks to Sell" animation. The text labels were already correct because they read tradeMode directly, which is why only the highlight animated.

Fix: track whether the slider has been placed once since mount (hasPositioned ref). On the first placement after layout, snap straight to the current mode with slideAnim.setValue(...); only animate via Animated.spring on subsequent tradeMode changes. This is local to the toggle — no changes to the remount/keying behavior or context, so screen transitions are unaffected.

Related issues

Fixes: TSA-714

Manual testing steps

1. Go to an asset details page (for a token with a sellable balance).
2. Open QuickBuy.
3. Switch to Sell mode.
4. Tap the "Pay with" / "Receive" selector to open the subsheet.
5. Navigate back to the amount screen.
6. Verify the Buy/Sell toggle stays on Sell with no flash/parasite animation.
7. Tapping between Buy and Sell still animates smoothly as before.

Screenshots/Recordings

Before

ScreenRecording_06-15-2026.08-41-12_1.MP4

After

Screen.Recording.2026-06-18.at.17.28.51.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.

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.

[mm-token-exchange-service]

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

Warnings — informational, address before merging:

• PR body does not match pull-request-template.md (one or more section headings are missing). See https://github.com/MetaMask/metamask-mobile/blob/main/.github/scripts/shared/pr-template-checks.ts#L15-L23.

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

[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: 95%

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR contains only two changed files, both within the isolated SocialLeaderboard/TraderPositionView/QuickBuy component tree:

1. QuickBuyTradeModeToggle.tsx: A targeted animation bug fix. A hasPositioned ref is added to prevent a spurious buy→sell animation when the toggle component mounts already in "sell" mode (e.g., returning from a subsheet). The fix uses slideAnim.setValue() (instant snap) instead of Animated.spring() for the first placement. This is purely a visual/animation behavior change with zero impact on business logic, state management, navigation, or user-facing functionality.

2. QuickBuyTradeModeToggle.test.tsx: Unit tests added to cover the new snap-on-mount behavior and the subsequent animation-only-after-initial-placement behavior.

Why no E2E tags are needed:

• The change is cosmetic (animation behavior only) — it doesn't alter any user flow, data, or navigation
• No E2E tests reference QuickBuyTradeModeToggle directly (confirmed via grep)
• The SocialLeaderboard feature is feature-flagged (aiSocialLeaderboardEnabled) and not covered by existing E2E smoke suites
• No shared infrastructure (controllers, Engine, navigation, modals, confirmations) is touched
• The fix is fully validated by the accompanying unit tests
• No performance-sensitive code paths are affected (animation runs on JS driver, no new renders or data fetching)

Performance Test Selection:
The change is a pure animation fix (snap vs. spring on first mount) in a feature-flagged SocialLeaderboard component. It does not affect any performance-sensitive flows such as app launch, onboarding, login, asset loading, swaps, or perps. No performance test tags are warranted.

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