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

## **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**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

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

## **Related issues**

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

## **Manual testing steps**

```gherkin
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**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->
See video in https://consensyssoftware.atlassian.net/browse/TAT-2054

### **After**

<!-- [screenshots/recordings] -->


https://github.com/user-attachments/assets/ee863128-68b7-44e6-bd9a-677f99b66fb5



## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Introduces immediate UI feedback for TP/SL changes by updating the
positions cache optimistically after a successful API response.
> 
> - Adds `positions.updatePositionTPSLOptimistic(coin, takeProfitPrice,
stopLossPrice)` in `PerpsStreamManager` to mutate cached positions and
notify subscribers
> - Integrates optimistic call into `usePerpsTPSLUpdate` (invoked before
success toast) while preserving existing error handling/haptics
> - Expands tests: new cases for optimistic updates across scenarios (TP
only, SL only, both, removals, failures, ordering vs toast) and stream
channel cache behavior
> - Minor test wording tweak for haptics verification
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
1765875. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Co-authored-by: Nick Gambino <35090461+gambinish@users.noreply.github.com>

Author: michalconsensys

app/components/UI/Perps/hooks/usePerpsTPSLUpdate.test.ts

@@ -4,9 +4,11 @@ import { ToastContext } from '../../../../component-library/components/Toast';
 import { usePerpsTPSLUpdate } from './usePerpsTPSLUpdate';
 import { usePerpsTrading } from './usePerpsTrading';
 import usePerpsToasts from './usePerpsToasts';
+import { usePerpsStream } from '../providers/PerpsStreamManager';
 
 jest.mock('./usePerpsTrading');
 jest.mock('./usePerpsToasts');
+jest.mock('../providers/PerpsStreamManager');
 jest.mock('../../../../../locales/i18n', () => ({
   strings: jest.fn((key) => key),
 }));
@@ -40,6 +42,7 @@ jest.mock('expo-haptics', () => ({
 describe('usePerpsTPSLUpdate', () => {
   const mockUpdatePositionTPSL = jest.fn();
   const mockShowToast = jest.fn();
+  const mockUpdatePositionTPSLOptimistic = jest.fn();
   const mockToastContext = {
     toastRef: {
       current: {
@@ -49,6 +52,12 @@ describe('usePerpsTPSLUpdate', () => {
     },
   };
 
+  const mockStream = {
+    positions: {
+      updatePositionTPSLOptimistic: mockUpdatePositionTPSLOptimistic,
+    },
+  };
+
   const mockPerpsToastOptions = {
     positionManagement: {
       tpsl: {
@@ -126,6 +135,8 @@ describe('usePerpsTPSLUpdate', () => {
       showToast: mockShowToast,
       PerpsToastOptions: mockPerpsToastOptions,
     });
+
+    (usePerpsStream as jest.Mock).mockReturnValue(mockStream);
   });
 
   const renderHookWithToast = (options = {}) => {
@@ -267,7 +278,7 @@ describe('usePerpsTPSLUpdate', () => {
     );
   });
 
-  it('should use toast configurations with correct haptics types', () => {
+  it('uses toast configurations with correct haptics types', () => {
     // Verify success toast has correct haptics type
     expect(
       mockPerpsToastOptions.positionManagement.tpsl.updateTPSLSuccess
@@ -281,4 +292,145 @@ describe('usePerpsTPSLUpdate', () => {
       );
     expect(errorToast.hapticsType).toBe('error');
   });
+
+  describe('optimistic updates', () => {
+    it('applies optimistic update to position cache on successful API response', async () => {
+      const { result } = renderHookWithToast();
+      const position = createMockPosition();
+      const takeProfitPrice = '3300';
+      const stopLossPrice = '2700';
+
+      mockUpdatePositionTPSL.mockResolvedValue({ success: true });
+
+      await act(async () => {
+        await result.current.handleUpdateTPSL(
+          position,
+          takeProfitPrice,
+          stopLossPrice,
+        );
+      });
+
+      expect(mockUpdatePositionTPSLOptimistic).toHaveBeenCalledWith(
+        'ETH',
+        takeProfitPrice,
+        stopLossPrice,
+      );
+    });
+
+    it('applies optimistic update with undefined take profit price', async () => {
+      const { result } = renderHookWithToast();
+      const position = createMockPosition();
+      const stopLossPrice = '2700';
+
+      mockUpdatePositionTPSL.mockResolvedValue({ success: true });
+
+      await act(async () => {
+        await result.current.handleUpdateTPSL(
+          position,
+          undefined,
+          stopLossPrice,
+        );
+      });
+
+      expect(mockUpdatePositionTPSLOptimistic).toHaveBeenCalledWith(
+        'ETH',
+        undefined,
+        stopLossPrice,
+      );
+    });
+
+    it('applies optimistic update with undefined stop loss price', async () => {
+      const { result } = renderHookWithToast();
+      const position = createMockPosition();
+      const takeProfitPrice = '3300';
+
+      mockUpdatePositionTPSL.mockResolvedValue({ success: true });
+
+      await act(async () => {
+        await result.current.handleUpdateTPSL(
+          position,
+          takeProfitPrice,
+          undefined,
+        );
+      });
+
+      expect(mockUpdatePositionTPSLOptimistic).toHaveBeenCalledWith(
+        'ETH',
+        takeProfitPrice,
+        undefined,
+      );
+    });
+
+    it('applies optimistic update with both TP/SL undefined (removing both)', async () => {
+      const { result } = renderHookWithToast();
+      const position = createMockPosition({
+        takeProfitPrice: '3500',
+        stopLossPrice: '2500',
+      });
+
+      mockUpdatePositionTPSL.mockResolvedValue({ success: true });
+
+      await act(async () => {
+        await result.current.handleUpdateTPSL(position, undefined, undefined);
+      });
+
+      expect(mockUpdatePositionTPSLOptimistic).toHaveBeenCalledWith(
+        'ETH',
+        undefined,
+        undefined,
+      );
+    });
+
+    it('does not apply optimistic update on API failure response', async () => {
+      const { result } = renderHookWithToast();
+      const position = createMockPosition();
+
+      mockUpdatePositionTPSL.mockResolvedValue({
+        success: false,
+        error: 'Network error',
+      });
+
+      await act(async () => {
+        await result.current.handleUpdateTPSL(position, '3300', '2700');
+      });
+
+      expect(mockUpdatePositionTPSLOptimistic).not.toHaveBeenCalled();
+    });
+
+    it('does not apply optimistic update on exception', async () => {
+      const { result } = renderHookWithToast();
+      const position = createMockPosition();
+      const error = new Error('Network error');
+
+      mockUpdatePositionTPSL.mockRejectedValue(error);
+
+      await act(async () => {
+        await result.current.handleUpdateTPSL(position, '3300', '2700');
+      });
+
+      expect(mockUpdatePositionTPSLOptimistic).not.toHaveBeenCalled();
+    });
+
+    it('applies optimistic update before showing success toast', async () => {
+      const callOrder: string[] = [];
+
+      mockUpdatePositionTPSLOptimistic.mockImplementation(() => {
+        callOrder.push('optimistic');
+      });
+      mockShowToast.mockImplementation(() => {
+        callOrder.push('toast');
+      });
+
+      const { result } = renderHookWithToast();
+      const position = createMockPosition();
+
+      mockUpdatePositionTPSL.mockResolvedValue({ success: true });
+
+      await act(async () => {
+        await result.current.handleUpdateTPSL(position, '3300', '2700');
+      });
+
+      expect(callOrder).toEqual(['optimistic', 'toast']);
+    });
+  });
 });

app/components/UI/Perps/hooks/usePerpsTPSLUpdate.ts

@@ -5,6 +5,7 @@ import { usePerpsTrading } from './usePerpsTrading';
 import type { Position, TPSLTrackingData } from '../controllers/types';
 import { captureException } from '@sentry/react-native';
 import usePerpsToasts from './usePerpsToasts';
+import { usePerpsStream } from '../providers/PerpsStreamManager';
 
 interface UseTPSLUpdateOptions {
   onSuccess?: () => void;
@@ -19,6 +20,7 @@ interface UseTPSLUpdateOptions {
 export function usePerpsTPSLUpdate(options?: UseTPSLUpdateOptions) {
   const { updatePositionTPSL } = usePerpsTrading();
   const [isUpdating, setIsUpdating] = useState(false);
+  const stream = usePerpsStream();
 
   const { showToast, PerpsToastOptions } = usePerpsToasts();
 
@@ -43,6 +45,14 @@ export function usePerpsTPSLUpdate(options?: UseTPSLUpdateOptions) {
         if (result.success) {
           DevLogger.log('Position TP/SL updated successfully:', result);
 
+          // Apply optimistic update immediately for better UX
+          // This updates the UI before the WebSocket confirms the change
+          stream.positions.updatePositionTPSLOptimistic(
+            position.coin,
+            takeProfitPrice,
+            stopLossPrice,
+          );
+
           showToast(
             PerpsToastOptions.positionManagement.tpsl.updateTPSLSuccess,
           );
@@ -112,6 +122,7 @@ export function usePerpsTPSLUpdate(options?: UseTPSLUpdateOptions) {
       showToast,
       PerpsToastOptions.positionManagement.tpsl,
       options,
+      stream,
     ],
   );