chore(runway): cherry-pick fix: fix marging value on OrderView from tokenDetails page cp-7.66.0 (#26154)

- fix: fix marging value on OrderView from tokenDetails page (#26105)

## **Description**

When navigating to the Perps order view from the **Token Details** page
(Long/Short buttons), the margin value at the bottom of the order screen
is permanently stuck at **$0**, regardless of the amount entered. This
does not happen when entering from the Perps main flow (Market Details →
Long/Short), because an earlier screen (`PerpsMarketStatisticsCard`)
subscribes to price data with `includeMarketData: true`, which populates
the `HyperLiquidSubscriptionService`'s `#marketDataCache` with oracle
prices.

### Root cause

The `marginRequired` calculation in `PerpsOrderView` uses
`assetData.markPrice` (oracle price). This value comes from
`usePerpsLivePrices` → `PriceStreamChannel` →
`PerpsController.subscribeToPrices()`. However, the `PriceStreamChannel`
**never passes `includeMarketData: true`** in its subscription. Without
this flag, the `activeAssetCtx` WebSocket subscription is not created,
the `#marketDataCache` stays empty, and `markPrice` is always
`undefined` — resulting in a `$0` margin.

When the user visits the Perps Market Details page first,
`usePerpsMarketStats` subscribes with `includeMarketData: true`, which
populates the shared singleton cache. Subsequent price updates from
`allMids` then include `markPrice` from the cache. This is why the bug
only manifests on a fresh app start when going directly from Token
Details.

### Fix

Added a `useEffect` in `PerpsOrderViewContentBase` that subscribes to
`PerpsController.subscribeToPrices` with `includeMarketData: true` for
the traded asset. This creates an `activeAssetCtx` WebSocket
subscription that populates the `#marketDataCache` with the oracle
price. The existing `usePerpsLivePrices` subscription then picks up
`markPrice` from the cache on the next `allMids` update. This mirrors
what `usePerpsMarketStats` already does on the Market Details page.

## **Changelog**

CHANGELOG entry: Fixed perpetual trading margin display showing $0 when
placing orders from the Token Details page

## **Related issues**

Fixes: #26106

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

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

### **Before**

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



https://github.com/user-attachments/assets/30213d59-b131-4459-8b74-d37f7f0e152f


### **After**

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



https://github.com/user-attachments/assets/c0fb6543-1744-46cf-9f92-128f8118cb2b



## **Pre-merge author checklist**

- [ ] 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).
- [ ] 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](https://jsdoc.app/) format
if applicable
- [ ] 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]
> **Low Risk**
> Small, localized change that adds a single price subscription gated by
controller initialization; main risk is unintended extra websocket
subscription or missing cleanup, but it returns the provided
unsubscribe.
> 
> **Overview**
> Fixes a Perps `OrderView` bug where margin stayed at `$0` when
arriving from Token Details by adding a gated `useEffect` that calls
`subscribeToPrices({ includeMarketData: true })` for the selected asset,
ensuring `markPrice`/oracle price is available for margin calculation.
> 
> Updates tests to mock the new direct `usePerpsConnection` import and
the added `usePerpsTrading.subscribeToPrices` function so the view can
mount cleanly under Jest.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
90b90ae. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[786871d](786871d)

Co-authored-by: sahar-fehri <sahar.fehri@consensys.net>

Author: runway-github[bot]

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

@@ -334,6 +334,18 @@ jest.mock('../../hooks', () => ({
 }));
 
 // Mock direct hook imports (when imported from specific file paths)
+jest.mock('../../hooks/usePerpsConnection', () => ({
+  usePerpsConnection: jest.fn(() => ({
+    isConnected: true,
+    isConnecting: false,
+    isInitialized: true,
+    error: null,
+    connect: jest.fn(),
+    disconnect: jest.fn(),
+    resetError: jest.fn(),
+  })),
+}));
+
 jest.mock('../../hooks/usePerpsPaymentTokens', () => ({
   usePerpsPaymentTokens: jest.fn(() => [
     {
@@ -679,6 +691,7 @@ const defaultMockHooks = {
     placeOrder: jest.fn(),
     depositWithConfirmation: jest.fn().mockResolvedValue(undefined),
     withdrawWithConfirmation: jest.fn(),
+    subscribeToPrices: jest.fn(() => jest.fn()),
     getMarkets: jest.fn().mockResolvedValue([
       {
         name: 'ETH',

app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.tsx

@@ -119,6 +119,7 @@ import {
   usePerpsLivePrices,
   usePerpsTopOfBook,
 } from '../../hooks/stream';
+import { usePerpsConnection } from '../../hooks/usePerpsConnection';
 import { useIsPerpsBalanceSelected } from '../../hooks/useIsPerpsBalanceSelected';
 import { usePerpsEventTracking } from '../../hooks/usePerpsEventTracking';
 import { usePerpsMeasurement } from '../../hooks/usePerpsMeasurement';
@@ -256,6 +257,8 @@ const PerpsOrderViewContentBase: React.FC<PerpsOrderViewContentProps> = ({
   const orderStartTimeRef = useRef<number>(0);
   const inputMethodRef = useRef<InputMethod>('default');
 
+  const { isInitialized } = usePerpsConnection();
+  const { subscribeToPrices, updatePositionTPSL } = usePerpsTrading();
   const { account, isInitialLoading: isLoadingAccount } = usePerpsLiveAccount();
 
   // Get order form state from context; balanceForValidation respects custom token amount when set
@@ -372,6 +375,32 @@ const PerpsOrderViewContentBase: React.FC<PerpsOrderViewContentProps> = ({
     },
   });
 
+  // Ensure oracle price (markPrice) is available for margin calculation.
+  // The PriceStreamChannel subscribes without includeMarketData, so the
+  // HyperLiquid marketDataCache has no oraclePrice and markPrice is always
+  // undefined when entering from Token Details (no prior market data sub).
+  // This subscription populates the cache for the traded asset so that
+  // subsequent allMids price updates include markPrice.
+  //
+  // We gate on isInitialized (from usePerpsConnection) so the subscription
+  // is deferred until the controller is ready. This mirrors the pattern in
+  // usePerpsPrices and avoids a silent failure that would leave markPrice
+  // undefined with no retry (the old deps would never change).
+  useEffect(() => {
+    if (!isDataReady || !isInitialized || !orderForm.asset) return;
+
+    const unsubscribe = subscribeToPrices({
+      symbols: [orderForm.asset],
+      includeMarketData: true,
+      callback: () => {
+        // No-op callback — the side effect of populating the
+        // marketDataCache with oraclePrice is all we need.
+      },
+    });
+
+    return unsubscribe;
+  }, [isDataReady, isInitialized, orderForm.asset, subscribeToPrices]);
+
   // Get real-time price data using new stream architecture (deferred)
   // Uses single WebSocket subscription with component-level debouncing
   const prices = usePerpsLivePrices({
@@ -524,8 +553,6 @@ const PerpsOrderViewContentBase: React.FC<PerpsOrderViewContentProps> = ({
     return requiredUsd > balanceUsd;
   }, [hasCustomTokenSelected, marginRequired, payToken]);
 
-  const { updatePositionTPSL } = usePerpsTrading();
-
   // Order execution using new hook
   const { placeOrder: executeOrder, isPlacing: isPlacingOrder } =
     usePerpsOrderExecution({