chore(runway): cherry-pick fix: invalid order book buttons cp-7.62.0 (#24889)

- fix: invalid order book buttons cp-7.62.0 (#24878)

## **Description**

This PR fixes the action buttons on the Order Book screen
(`PerpsOrderBookView`) to show **Modify/Close** buttons when the user
has an open position, instead of always showing **Long/Short** buttons.

**Problem:** The Order Book screen always displayed Long/Short buttons,
even when the user had an existing position for that market.

**Solution:** Added position-checking logic (consistent with
`PerpsMarketDetailsView`) to conditionally render:
- **Modify/Close** buttons when user has an existing position
- **Long/Short** buttons when no position exists

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes:
[TAT-2224](https://consensyssoftware.atlassian.net/browse/TAT-2224)
#24879

## **Manual testing steps**

```gherkin
Feature: Order Book action buttons based on position

  Scenario: User views Order Book without an open position
    Given user has no open position for BTC
    When user navigates to the BTC Order Book screen
    Then user sees "Long" and "Short" buttons

  Scenario: User views Order Book with an open long position
    Given user has an open long position for BTC
    When user navigates to the BTC Order Book screen
    Then user sees "Modify" and "Close Long" buttons

  Scenario: User views Order Book with an open short position
    Given user has an open short position for BTC
    When user navigates to the BTC Order Book screen
    Then user sees "Modify" and "Close Short" buttons

  Scenario: User taps Modify button
    Given user has an open position for BTC
    And user is on the BTC Order Book screen
    When user taps the "Modify" button
    Then the modify action sheet opens

  Scenario: User taps Close button
    Given user has an open position for BTC
    And user is on the BTC Order Book screen
    When user taps the "Close Long" or "Close Short" button
    Then user is navigated to the close position flow
```

## **Screenshots/Recordings**

### **Before**

- Order Book always shows Long/Short buttons regardless of position
status

### **After**

- Order Book shows Modify/Close buttons when position exists
- Order Book shows Long/Short buttons when no position exists



https://github.com/user-attachments/assets/c3427894-b62b-42ab-b5a2-d49157c2bc38


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


[TAT-2224]:

https://consensyssoftware.atlassian.net/browse/TAT-2224?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Updates `PerpsOrderBookView` to reflect existing positions and enable
position management actions.
> 
> - Conditionally render `Modify` and `Close` buttons (replacing
`Long`/`Short`) when `useHasExistingPosition` returns a position; label
`Close Long`/`Close Short` based on size sign
> - Wire actions: `Modify` opens bottom sheet via
`usePositionManagement`; `Close` navigates with
`navigateToClosePosition`; render `PerpsSelectModifyActionView` when
sheet is visible
> - Preserve `Long`/`Short` buttons when no position exists; maintain
A/B color handling
> - Add new test IDs (`perps-order-book-modify-button`,
`perps-order-book-close-button`) and i18n strings
> - Expand tests to cover conditional rendering, modify sheet open, and
close navigation
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
be0ca08. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[8293e94](8293e94)

[TAT-2224]:
https://consensyssoftware.atlassian.net/browse/TAT-2224?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
[TAT-2224]:
https://consensyssoftware.atlassian.net/browse/TAT-2224?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Co-authored-by: abretonc7s <107169956+abretonc7s@users.noreply.github.com>

Author: runway-github[bot]

app/components/UI/Perps/Perps.testIds.ts

@@ -635,6 +635,8 @@ export const PerpsOrderBookViewSelectorsIDs = {
   TABLE: 'perps-order-book-table',
   LONG_BUTTON: 'perps-order-book-long-button',
   SHORT_BUTTON: 'perps-order-book-short-button',
+  MODIFY_BUTTON: 'perps-order-book-modify-button',
+  CLOSE_BUTTON: 'perps-order-book-close-button',
   DEPTH_BAND_BUTTON: 'perps-order-book-depth-band-button',
   DEPTH_BAND_OPTION: 'perps-order-book-depth-band-option',
   UNIT_TOGGLE_BASE: 'perps-order-book-unit-toggle-base',

app/components/UI/Perps/Views/PerpsOrderBookView/PerpsOrderBookView.test.tsx

@@ -37,6 +37,9 @@ jest.mock('../../../../../../locales/i18n', () => ({
       'perps.order_book.error': 'Failed to load order book',
       'perps.market.long': 'Long',
       'perps.market.short': 'Short',
+      'perps.market.modify': 'Modify',
+      'perps.market.close_long': 'Close Long',
+      'perps.market.close_short': 'Close Short',
       'perps.order_book.depth_band.title': 'Depth Band',
     };
     return translations[key] || key;
@@ -121,12 +124,18 @@ jest.mock('../../hooks/usePerpsMeasurement', () => ({
   usePerpsMeasurement: jest.fn(),
 }));
 
-// Mock usePerpsNavigation and usePerpsMarkets
+// Mock usePerpsNavigation, usePerpsMarkets, and usePositionManagement
 const mockNavigateToOrder = jest.fn();
+const mockNavigateToClosePosition = jest.fn();
+const mockOpenModifySheet = jest.fn();
+const mockCloseModifySheet = jest.fn();
+const mockHandleReversePosition = jest.fn();
+const mockModifyActionSheetRef = { current: null };
 
 jest.mock('../../hooks', () => ({
   usePerpsNavigation: jest.fn(() => ({
     navigateToOrder: mockNavigateToOrder,
+    navigateToClosePosition: mockNavigateToClosePosition,
   })),
   usePerpsMarkets: jest.fn(() => ({
     markets: [
@@ -139,6 +148,21 @@ jest.mock('../../hooks', () => ({
     isLoading: false,
     error: null,
   })),
+  usePositionManagement: jest.fn(() => ({
+    showModifyActionSheet: false,
+    modifyActionSheetRef: mockModifyActionSheetRef,
+    openModifySheet: mockOpenModifySheet,
+    closeModifySheet: mockCloseModifySheet,
+    handleReversePosition: mockHandleReversePosition,
+  })),
+}));
+
+// Mock useHasExistingPosition
+jest.mock('../../hooks/useHasExistingPosition', () => ({
+  useHasExistingPosition: jest.fn(() => ({
+    isLoading: false,
+    existingPosition: null,
+  })),
 }));
 
 // Mock usePerpsOrderBookGrouping
@@ -238,6 +262,15 @@ jest.mock(
   },
 );
 
+// Mock PerpsSelectModifyActionView
+jest.mock('../PerpsSelectModifyActionView', () => {
+  const { View } = jest.requireActual('react-native');
+  return {
+    __esModule: true,
+    default: () => <View testID="perps-select-modify-action-view" />,
+  };
+});
+
 describe('PerpsOrderBookView', () => {
   const initialState = {
     engine: {
@@ -576,6 +609,167 @@ describe('PerpsOrderBookView', () => {
     });
   });
 
+  describe('action buttons with existing position', () => {
+    const mockLongPosition = {
+      coin: 'BTC',
+      size: '1.5',
+      entryPrice: '50000',
+      leverage: { value: 10, type: 'cross' as const },
+      margin: '5000',
+      unrealizedPnl: '100',
+      unrealizedPnlPercent: '2',
+      liquidationPrice: '45000',
+      takeProfitPrice: undefined,
+      stopLossPrice: undefined,
+      returnOnEquity: '2',
+    };
+
+    const mockShortPosition = {
+      ...mockLongPosition,
+      size: '-1.5',
+    };
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('renders Modify and Close buttons when position exists', () => {
+      const { useHasExistingPosition } = jest.requireMock(
+        '../../hooks/useHasExistingPosition',
+      );
+      useHasExistingPosition.mockReturnValue({
+        isLoading: false,
+        existingPosition: mockLongPosition,
+      });
+
+      const { getByTestId, queryByTestId } = renderWithProvider(
+        <PerpsOrderBookView />,
+        {
+          state: initialState,
+        },
+      );
+
+      expect(
+        getByTestId(PerpsOrderBookViewSelectorsIDs.MODIFY_BUTTON),
+      ).toBeOnTheScreen();
+      expect(
+        getByTestId(PerpsOrderBookViewSelectorsIDs.CLOSE_BUTTON),
+      ).toBeOnTheScreen();
+      expect(
+        queryByTestId(PerpsOrderBookViewSelectorsIDs.LONG_BUTTON),
+      ).toBeNull();
+      expect(
+        queryByTestId(PerpsOrderBookViewSelectorsIDs.SHORT_BUTTON),
+      ).toBeNull();
+    });
+
+    it('opens modify action sheet when Modify button is pressed', () => {
+      const { useHasExistingPosition } = jest.requireMock(
+        '../../hooks/useHasExistingPosition',
+      );
+      useHasExistingPosition.mockReturnValue({
+        isLoading: false,
+        existingPosition: mockLongPosition,
+      });
+
+      const { getByTestId } = renderWithProvider(<PerpsOrderBookView />, {
+        state: initialState,
+      });
+
+      const modifyButton = getByTestId(
+        PerpsOrderBookViewSelectorsIDs.MODIFY_BUTTON,
+      );
+      fireEvent.press(modifyButton);
+
+      expect(mockOpenModifySheet).toHaveBeenCalled();
+    });
+
+    it('navigates to close position when Close button is pressed', () => {
+      const { useHasExistingPosition } = jest.requireMock(
+        '../../hooks/useHasExistingPosition',
+      );
+      useHasExistingPosition.mockReturnValue({
+        isLoading: false,
+        existingPosition: mockLongPosition,
+      });
+
+      const { getByTestId } = renderWithProvider(<PerpsOrderBookView />, {
+        state: initialState,
+      });
+
+      const closeButton = getByTestId(
+        PerpsOrderBookViewSelectorsIDs.CLOSE_BUTTON,
+      );
+      fireEvent.press(closeButton);
+
+      expect(mockNavigateToClosePosition).toHaveBeenCalledWith(
+        mockLongPosition,
+      );
+    });
+
+    it('displays "Close Long" for long positions', () => {
+      const { useHasExistingPosition } = jest.requireMock(
+        '../../hooks/useHasExistingPosition',
+      );
+      useHasExistingPosition.mockReturnValue({
+        isLoading: false,
+        existingPosition: mockLongPosition,
+      });
+
+      const { getByText } = renderWithProvider(<PerpsOrderBookView />, {
+        state: initialState,
+      });
+
+      expect(getByText('Close Long')).toBeOnTheScreen();
+    });
+
+    it('displays "Close Short" for short positions', () => {
+      const { useHasExistingPosition } = jest.requireMock(
+        '../../hooks/useHasExistingPosition',
+      );
+      useHasExistingPosition.mockReturnValue({
+        isLoading: false,
+        existingPosition: mockShortPosition,
+      });
+
+      const { getByText } = renderWithProvider(<PerpsOrderBookView />, {
+        state: initialState,
+      });
+
+      expect(getByText('Close Short')).toBeOnTheScreen();
+    });
+
+    it('shows Long/Short buttons when no position exists', () => {
+      const { useHasExistingPosition } = jest.requireMock(
+        '../../hooks/useHasExistingPosition',
+      );
+      useHasExistingPosition.mockReturnValue({
+        isLoading: false,
+        existingPosition: null,
+      });
+
+      const { getByTestId, queryByTestId } = renderWithProvider(
+        <PerpsOrderBookView />,
+        {
+          state: initialState,
+        },
+      );
+
+      expect(
+        getByTestId(PerpsOrderBookViewSelectorsIDs.LONG_BUTTON),
+      ).toBeOnTheScreen();
+      expect(
+        getByTestId(PerpsOrderBookViewSelectorsIDs.SHORT_BUTTON),
+      ).toBeOnTheScreen();
+      expect(
+        queryByTestId(PerpsOrderBookViewSelectorsIDs.MODIFY_BUTTON),
+      ).toBeNull();
+      expect(
+        queryByTestId(PerpsOrderBookViewSelectorsIDs.CLOSE_BUTTON),
+      ).toBeNull();
+    });
+  });
+
   describe('error state', () => {
     it('displays error message when order book fails to load', () => {
       mockUsePerpsLiveOrderBook.mockReturnValue({