feat(perps): add optimistic updates for take profit and stop loss prices

[michalconsensys]

Description

When users update take profit (TP) or stop loss (SL) prices in Perps, the position would display undefined values until the WebSocket returned the updated position from the server. This created a poor user experience with a visible delay.

This PR implements optimistic updates that immediately reflect TP/SL price changes in the UI after a successful API response, before the WebSocket confirms the change. This provides instant feedback to users.

Changelog

CHANGELOG entry: Use optimistic approach when updating TP/SL in perps

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TAT-2054

Manual testing steps

Feature: Perps TP/SL Optimistic Updates

  Scenario: user updates take profit price
    Given user has an open position in Perps
    And user is on the TP/SL view

    When user sets a take profit price and confirms
    Then the take profit price is immediately displayed on the position
    And user does not see undefined or empty values

  Scenario: user updates stop loss price
    Given user has an open position in Perps
    And user is on the TP/SL view

    When user sets a stop loss price and confirms
    Then the stop loss price is immediately displayed on the position
    And user does not see undefined or empty values

  Scenario: user removes take profit and stop loss
    Given user has an open position with TP/SL set
    And user is on the TP/SL view

    When user removes both TP and SL and confirms
    Then the position immediately shows no TP/SL values
    And user does not see stale values

Screenshots/Recordings

Before

See video in https://consensyssoftware.atlassian.net/browse/TAT-2054

After

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2025-12-18.at.15.42.03.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.

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

Adds optimistic TP/SL updates to the positions stream and applies them in the TPSL update hook, with comprehensive test coverage.

• Perps Stream Manager:
  • PositionStreamChannel: Add updatePositionTPSLOptimistic(coin, takeProfitPrice, stopLossPrice) to update cached positions (takeProfitPrice, stopLossPrice, takeProfitCount, stopLossCount) and immediately notifySubscribers.
  • Logs and guards for empty cache or missing position.
• Hooks:
  • usePerpsTPSLUpdate: Integrate usePerpsStream; on successful API response, call stream.positions.updatePositionTPSLOptimistic(...) before showing success toast; update dependencies.
• Tests:
  • PerpsStreamManager.test.tsx: Add extensive cases for updatePositionTPSLOptimistic (TP only, SL only, both, remove both, unrelated positions unaffected, cache empty/miss, property preservation).
  • usePerpsTPSLUpdate.test.ts: Mock usePerpsStream and assert optimistic updates are applied (including undefined values), ensure not applied on failures/exceptions, and verify ordering (optimistic update precedes toast); minor test name tweak.

^{Written by Cursor Bugbot for commit cc778a1. This will update automatically on new commits. 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]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokePerps
• Risk Level: low
• AI Confidence: 95%

click to see 🤖 AI reasoning details

The changes are entirely scoped to the Perps (Perpetuals trading) feature within app/components/UI/Perps/. The modifications add optimistic update functionality for Take Profit/Stop Loss (TP/SL) position updates:

1. usePerpsTPSLUpdate.ts - Added a call to stream.positions.updatePositionTPSLOptimistic() after successful API response to immediately update the UI before WebSocket confirmation
2. PerpsStreamManager.tsx - Added new method updatePositionTPSLOptimistic to the PositionStreamChannel class that updates cached positions and notifies subscribers

Both implementation files have corresponding comprehensive unit tests added. The changes:

• Don't touch any critical files (no controllers, Engine, core modules)
• Are isolated to a single feature (Perps)
• Are well-tested with unit tests
• Don't affect any shared infrastructure or other features

Only the SmokePerps tag is needed to verify this feature enhancement works correctly in E2E testing.

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