feat(perps): add live order book to pro market view

[michalconsensys]

Description

Adds a live order book to the Perps Pro market screen (PerpsProOrderBookPanel), matching Extension’s dual-stream approach:

1. Raw book via PerpsController.subscribeToOrderBook (mid price + spread)
2. Aggregated ladder via a dedicated AggregatedOrderBookConnection so server-side nSigFigs grouping does not clobber the shared socket

Also includes:

• View toggle, depth bars, buy/sell depth ratio, and a Figma-aligned Order book settings sheet (listed-by / group-by chips + Save; layout section omitted)
• Collapse/expand so the order book can be hidden and the order-form column goes full width
• Full-width settings sheet via RN Modal (avoids clipping in the narrow order-book column)
• Bump @metamask/perps-controller to ^10.0.0 (npm) for AggregatedOrderBookConnection
• Fixture/mock updates for mode and proLayoutPreferences

Changelog

CHANGELOG entry: Added a live order book to the Perps Pro market view

Related issues

Refs: https://consensyssoftware.atlassian.net/browse/TAT-3579

Manual testing steps

Feature: Perps Pro order book

  Scenario: user opens a market in Pro mode and sees a live order book
    Given the Perps Pro-mode market layout is enabled
    And the user is on a market details screen in Pro mode (e.g. BTC)

    When the order book panel loads
    Then bid and ask ladder rows are shown with depth bars
    And a spread row is shown between asks and bids
    And a buy/sell depth ratio is shown directly below the ladder

  Scenario: user changes order book settings
    Given the Pro order book is showing live data

    When the user opens the order book settings sheet
    Then the sheet is full width with title "Order book settings"
    And listed-by and group-by options use outlined selected/unselected chips
    When the user selects options and taps Save
    Then the ladder refreshes with the new currency, metric, and grouping

  Scenario: user collapses and expands the order book
    Given the Pro order book is visible beside the order form

    When the user taps the collapse control next to settings
    Then the order book and divider are hidden
    And the order form column fills the trading area width
    When the user taps expand
    Then the order book column is shown again

  Scenario: user recovers from a dropped aggregated connection
    Given the aggregated order book stream reports an error

    When the user taps Reconnect
    Then the panel re-subscribes and shows live ladder data again

Screenshots/Recordings

N/A — UI verified on iOS simulator during development; attach before/after screenshots before ready-for-review if desired.

Before

After

N/A (pending attached device screenshots of live ladder, settings sheet, and collapse)

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.

Performance checks (if applicable)

• I've tested on Android
  • Ideally on a mid-range device; emulator is acceptable
• I've tested with a power user scenario
  • Use these power-user SRPs to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

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

Medium Risk
New real-time WebSocket subscriptions and a major perps-controller bump affect trading UI reliability; scope is mostly Pro perps UI with solid test coverage.

Overview
Replaces the Pro market order book placeholder with a live ladder wired like Extension: raw mid/spread on PerpsController.subscribeToOrderBook, plus a server-aggregated stream on a new mobile AggregatedOrderBookConnection singleton so grouping does not affect the shared socket. usePerpsLiveOrderBook gains an orderBookAggregated channel with connectionStatus and reconnect.

The panel adds depth bars, spread, buy/sell ratio, view-mode cycling, loading skeleton, reconnect on errors, and a Modal-wrapped settings sheet (currency, metric, grouping with per-market persistence). Collapse/expand hides the right column, unmounts the book (drops live subscriptions), and widens the order form; route price is parsed as a grouping fallback.

Also bumps @metamask/perps-controller to ^10.0.0, extends orderBookGrouping helpers, new i18n strings, test IDs, and test/fixture updates for Pro layout state.

^{Reviewed by Cursor Bugbot for commit 2b9f53c. Bugbot is set up for automated code reviews on this repo. 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.

[metamask-ci]

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

Warnings — informational, address before merging:

• Pre-merge author checklist has unchecked items (e.g. "I've tested on Android"). Every box must be consciously checked — see docs/readme/ready-for-review.md.

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

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/​@​metamask/​perps-controller@​9.3.0 ⏵ 10.0.0	+1		+1	+1

View full report

[github-actions]

🧪 Flaky unit test detection

Run history flaky detection

View recent run history

Historical failure rate is a hint, not proof — review each suggestion in context. See the flaky-test-detection skill for the full pattern reference and manual audit workflow.

Failures / runs sampled per window:

File	7d	15d	30d
app/components/UI/Perps/Views/PerpsProMarketView/components/PerpsProOrderBookPanel.test.tsx	0/150	0/243	0/285
app/components/UI/Perps/hooks/stream/usePerpsLiveOrderBook.test.ts	0/150	0/243	0/285

AI-detected flaky patterns

app/components/UI/Perps/Views/PerpsProMarketView/components/PerpsProOrderBookPanel.test.tsx

• J7 — Non-deterministic data: Date.now() (medium)
  • The mockOrderBook constant is defined at module level with lastUpdated: Date.now(). This value is captured once when the test module is first loaded by Jest. If the component under test renders or formats this timestamp (e.g. as a relative time like "X seconds ago", a staleness indicator, or any time-dependent display), the rendered output will vary depending on how much wall-clock time has elapsed since module load — causing intermittent assertion failures, especially in slow CI environments. Pinning lastUpdated to a fixed epoch value eliminates this non-determinism entirely.
  • Suggested fix in app/components/UI/Perps/Views/PerpsProMarketView/components/PerpsProOrderBookPanel.test.tsx:63:

    -const mockOrderBook: OrderBookData = {
    -  bids: [
    -    {
    -      price: '50000',
    -      size: '1.5',
    -      total: '1.5',
    -      notional: '75000',
    -      totalNotional: '75000',
    -    },
    -    {
    -      price: '49900',
    -      size: '2.0',
    -      total: '3.5',
    -      notional: '99800',
    -      totalNotional: '174800',
    -    },
    -  ],
    -  asks: [
    -    {
    -      price: '50100',
    -      size: '1.2',
    -      total: '1.2',
    -      notional: '60120',
    -      totalNotional: '60120',
    -    },
    -    {
    -      price: '50200',
    -      size: '1.8',
    -      total: '3.0',
    -      notional: '90360',
    -      totalNotional: '150480',
    -    },
    -  ],
    -  spread: '100',
    -  spreadPercentage: '0.2',
    -  midPrice: '50050',
    -  lastUpdated: Date.now(),
    -  maxTotal: '3.5',
    -};
    +const FIXED_TIMESTAMP = 1_700_000_000_000; // 2023-11-14T22:13:20.000Z — fixed epoch
    +
    +const mockOrderBook: OrderBookData = {
    +  bids: [
    +    {
    +      price: '50000',
    +      size: '1.5',
    +      total: '1.5',
    +      notional: '75000',
    +      totalNotional: '75000',
    +    },
    +    {
    +      price: '49900',
    +      size: '2.0',
    +      total: '3.5',
    +      notional: '99800',
    +      totalNotional: '174800',
    +    },
    +  ],
    +  asks: [
    +    {
    +      price: '50100',
    +      size: '1.2',
    +      total: '1.2',
    +      notional: '60120',
    +      totalNotional: '60120',
    +    },
    +    {
    +      price: '50200',
    +      size: '1.8',
    +      total: '3.0',
    +      notional: '90360',
    +      totalNotional: '150480',
    +    },
    +  ],
    +  spread: '100',
    +  spreadPercentage: '0.2',
    +  midPrice: '50050',
    +  lastUpdated: FIXED_TIMESTAMP,
    +  maxTotal: '3.5',
    +};

app/components/UI/Perps/hooks/stream/usePerpsLiveOrderBook.test.ts

• J9 — Module-level mutable let bindings not reset in beforeEach (high)
  • The mockOrderBookData object is defined at describe-scope and contains lastUpdated: Date.now(). Because Date.now() is evaluated once when the describe block is first parsed (before any test runs), the value is frozen for the entire test run. This is not directly flaky on its own, but it becomes a J7/J9 risk when tests spread the object ({ ...mockOrderBookData, spread: '100' }) and then assert toEqual against those spreads — the lastUpdated field in the spread copies carries the same frozen timestamp. More critically, mockOrderBookData is a const defined inside the describe block but outside beforeEach, meaning it is shared across all tests. If any test mutates a nested property of mockOrderBookData (e.g. pushing to bids), that mutation bleeds into subsequent tests. The safe pattern is to define the fixture as a factory function or freeze it with Object.freeze, and replace Date.now() with a pinned value so the fixture is fully deterministic.
  • Suggested fix in app/components/UI/Perps/hooks/stream/usePerpsLiveOrderBook.test.ts:63:

    -  const mockOrderBookData: OrderBookData = {
    -    bids: [
    -      {
    -        price: '50000',
    -        size: '1.5',
    -        total: '1.5',
    -        notional: '75000',
    -        totalNotional: '75000',
    -      },
    -      {
    -        price: '49900',
    -        size: '2.0',
    -        total: '3.5',
    -        notional: '99800',
    -        totalNotional: '174800',
    -      },
    -    ],
    -    asks: [
    -      {
    -        price: '50100',
    -        size: '1.2',
    -        total: '1.2',
    -        notional: '60120',
    -        totalNotional: '60120',
    -      },
    -      {
    -        price: '50200',
    -        size: '1.8',
    -        total: '3.0',
    -        notional: '90360',
    -        totalNotional: '150480',
    -      },
    -    ],
    -    spread: '100',
    -    spreadPercentage: '0.2',
    -    midPrice: '50050',
    -    lastUpdated: Date.now(),
    -    maxTotal: '3.5',
    -  };
    +  const MOCK_LAST_UPDATED = 1700000000000; // pinned, deterministic
    +
    +  const makeMockOrderBookData = (): OrderBookData => ({
    +    bids: [
    +      {
    +        price: '50000',
    +        size: '1.5',
    +        total: '1.5',
    +        notional: '75000',
    +        totalNotional: '75000',
    +      },
    +      {
    +        price: '49900',
    +        size: '2.0',
    +        total: '3.5',
    +        notional: '99800',
    +        totalNotional: '174800',
    +      },
    +    ],
    +    asks: [
    +      {
    +        price: '50100',
    +        size: '1.2',
    +        total: '1.2',
    +        notional: '60120',
    +        totalNotional: '60120',
    +      },
    +      {
    +        price: '50200',
    +        size: '1.8',
    +        total: '3.0',
    +        notional: '90360',
    +        totalNotional: '150480',
    +      },
    +    ],
    +    spread: '100',
    +    spreadPercentage: '0.2',
    +    midPrice: '50050',
    +    lastUpdated: MOCK_LAST_UPDATED,
    +    maxTotal: '3.5',
    +  });
    +
    +  // In each test, call makeMockOrderBookData() instead of referencing mockOrderBookData directly:
    +  // const mockOrderBookData = makeMockOrderBookData();

• J3 — Missing jest.clearAllMocks() / jest.resetAllMocks() (high)
  • beforeEach calls jest.clearAllMocks() (clears call counts and instances but preserves mock implementations) and then manually calls mockReset() on only the two aggregated mocks. mockSubscribeToOrderBook — the primary mock used in almost every test — is NOT explicitly reset in beforeEach; it relies on jest.clearAllMocks() to clear its call history, but any mockImplementation or mockReturnValue set in a previous test is NOT cleared by clearAllMocks(). Only jest.resetAllMocks() in afterEach resets implementations. This creates a window where, if a test throws before afterEach runs (e.g. due to an unhandled promise rejection), the implementation set by that test bleeds into the next test's beforeEach phase. The fix is to use jest.resetAllMocks() (not just clearAllMocks()) in beforeEach so each test always starts with a clean slate regardless of what the previous test did.
  • Suggested fix in app/components/UI/Perps/hooks/stream/usePerpsLiveOrderBook.test.ts:73:

    -  beforeEach(() => {
    -    jest.clearAllMocks();
    -    jest.useFakeTimers();
    -    mockAggregatedSubscribe.mockReset();
    -    mockAggregatedClose.mockReset();
    -  });
    -
    -  afterEach(() => {
    -    jest.runOnlyPendingTimers();
    -    jest.useRealTimers();
    -    jest.resetAllMocks();
    -  });
    +  beforeEach(() => {
    +    jest.resetAllMocks(); // resets implementations + clears call history for ALL mocks
    +    jest.useFakeTimers();
    +  });
    +
    +  afterEach(() => {
    +    jest.runOnlyPendingTimers();
    +    jest.useRealTimers();
    +  });

This check is informational only and does not block merging.

[codecov-commenter]

Codecov Report

❌ Patch coverage is 81.53846% with 48 lines in your changes missing coverage. Please review.
✅ Project coverage is 84.73%. Comparing base (0a8b272) to head (bfd78eb).
⚠️ Report is 17 commits behind head on main.

Files with missing lines	Patch %	Lines
app/components/UI/Perps/utils/orderBookGrouping.ts	52.08%	8 Missing and 15 partials ⚠️
...roMarketView/components/PerpsProOrderBookPanel.tsx	86.60%	5 Missing and 10 partials ⚠️
...etView/components/PerpsProOrderBookConfigSheet.tsx	90.19%	4 Missing and 1 partial ⚠️
...nts/UI/Perps/hooks/stream/usePerpsLiveOrderBook.ts	85.18%	2 Missing and 2 partials ⚠️
...ps/Views/PerpsProMarketView/PerpsProMarketView.tsx	90.90%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #33664      +/-   ##
==========================================
+ Coverage   84.70%   84.73%   +0.02%     
==========================================
  Files        6202     6205       +3     
  Lines      166489   166697     +208     
  Branches    40711    40796      +85     
==========================================
+ Hits       141022   141246     +224     
+ Misses      15845    15801      -44     
- Partials     9622     9650      +28     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[geositta]

Thanks for implementing the dedicated aggregated connection alongside the raw controller stream. I verified that this matches the controller’s fast stream and reconnection behavior.

I am requesting changes for three focused issues:

1. Add Android system-Back handling to the React Native Modal.
2. Expose the active orderbook view mode to assistive technology.
3. Remove duplicate mode and proLayoutPreferences fixture keys.

Collapse currently resets the non-persisted orderbook controls when the panel is expanded again. I am treating that as a non-blocking scope decision for this greenfield task, provided the behavior is intentional.

[geositta]

React Native requires onRequestClose for Android Modals. While this Modal is open, BackHandler events are not emitted, so the Android system Back button has no path to close the sheet. Please add onRequestClose={handleClose} and cover that callback in the sheet test.

[geositta]

This label describes the action but does not expose whether the current view shows both sides, bids only, or asks only. Please add a localized accessibilityValue={{ text: ... }} derived from viewMode, and verify that its value changes as the control cycles. This lets VoiceOver and TalkBack announce the current state.

[geositta]

This comment applies to line 491 but since that line is not in the PR diff will include here.

mode and proLayoutPreferences are already defined at lines 532–540. JSON parsing silently keeps these later values, making the earlier definitions ineffective. Please retain one authoritative copy so fixture changes behave as written.

[geositta]

Nonblocking followup: Collapsing the column unmounts PerpsProOrderBookPanel. On expansion, currency, metric, and view mode return to their defaults; grouping persists because it is stored separately. If resetting these session only choices is intentional for this task, please document that behavior. Otherwise, preserve them above this conditional boundary in a followup while still allowing the hidden subscriptions to disconnect.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 2b9f53c. Configure here.}

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeAccounts, SmokeConfirmations, SmokeNetworkAbstractions, SmokeNetworkExpansion, SmokeSwap, SmokeStake, SmokeWalletPlatform, SmokeMoney, SmokePerps, SmokeMultiChainAPI, SmokePredictions, SmokeSeedlessOnboarding, SmokeBrowser, SmokeSnaps
• Selected Performance tags: @PerformanceAccountList, @PerformanceOnboarding, @PerformanceLogin, @PerformanceSwaps, @PerformanceLaunch, @PerformanceAssetLoading, @PerformancePredict, @PerformancePreps
• Risk Level: high
• AI Confidence: 100%

click to see 🤖 AI reasoning details

E2E Test Selection:
Hard rule (controller-version-update): @MetaMask controller package version updated in package.json: @metamask/perps-controller. Running all tests.

Performance Test Selection:
Fallback: AI analysis did not complete successfully. Running all performance tests.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
5 New issues
0 Accepted issues

Measures
0 Security Hotspots
88.9% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

⚡ Performance Test Results

ℹ️ Performance test results are currently non-blocking and will not block this PR.

❌ 4 tests failed · 20 tests · 1 device

📱 Devices tested (1)

Android: Google Pixel 8 Pro (v14.0)

❌ Failed Tests (4)

@swap-bridge-dev-team

Test	Platform	Device	Reason	Recording
Cross-chain swap flow - ETH to SOL - 50+ accounts, SRP 1 + SRP 2 + SRP 3	Android	Google Pixel 8 Pro (v14.0)	Quality gates exceeded	📹 Watch

@mm-perps-engineering-team

Test	Platform	Device	Reason	Recording
Perps add funds	Android	Google Pixel 8 Pro (v14.0)	Quality gates exceeded	📹 Watch
Perps open position and close it	Android	Google Pixel 8 Pro (v14.0)	Test error	📹 Watch

@metamask-onboarding-team

Test	Platform	Device	Reason	Recording
Fresh SRP wallet creation performance	Android	Google Pixel 8 Pro (v14.0)	Quality gates exceeded	📹 Watch

✅ Passed Tests (16)

Test	Platform	Device	Duration	Team	Recording
Aggregated Balance Loading Time, SRP 1 + SRP 2 + SRP 3	Android	Google Pixel 8 Pro (v14.0)	8.52s	@assets-dev-team	📹 Watch
Asset View, SRP 1 + SRP 2 + SRP 3	Android	Google Pixel 8 Pro (v14.0)	3.39s	@assets-dev-team	📹 Watch
Swap flow - ETH to LINK, SRP 1 + SRP 2 + SRP 3	Android	Google Pixel 8 Pro (v14.0)	2.05s	@swap-bridge-dev-team	📹 Watch
Import SRP with +50 accounts, SRP 1, SRP 2, SRP 3	Android	Google Pixel 8 Pro (v14.0)	4.71s	@Accounts-team	📹 Watch
Cold Start: Measure ColdStart To Login Screen	Android	Google Pixel 8 Pro (v14.0)	4.70s	@metamask-mobile-platform	📹 Watch
Measure Warm Start: Login To Wallet Screen	Android	Google Pixel 8 Pro (v14.0)	2.69s	@metamask-mobile-platform	📹 Watch
Measure Warm Start: Warm Start to Login Screen	Android	Google Pixel 8 Pro (v14.0)	1.01s	@metamask-mobile-platform	📹 Watch
Predict Available Balance - Complete Flow Performance	Android	Google Pixel 8 Pro (v14.0)	1.35s	@team-predict	📹 Watch
Predict Deposit - Complete Flow Performance	Android	Google Pixel 8 Pro (v14.0)	9.96s	@team-predict	📹 Watch
Predict Market Details - Complete Flow Performance	Android	Google Pixel 8 Pro (v14.0)	3.61s	@team-predict	📹 Watch
Onboarding Import SRP with +50 accounts, SRP 3	Android	Google Pixel 8 Pro (v14.0)	10.35s	@metamask-onboarding-team	📹 Watch
Cold Start after importing a wallet	Android	Google Pixel 8 Pro (v14.0)	2.24s	@metamask-mobile-platform	📹 Watch
Measure Cold Start To Onboarding Screen	Android	Google Pixel 8 Pro (v14.0)	4.11s	@metamask-mobile-platform	📹 Watch
Account creation after fresh install	Android	Google Pixel 8 Pro (v14.0)	3.98s	@metamask-onboarding-team	📹 Watch
Seedless Onboarding: Apple Login New User	Android	Google Pixel 8 Pro (v14.0)	12.38s	@metamask-onboarding-team	📹 Watch
Seedless Onboarding: Google Login New User	Android	Google Pixel 8 Pro (v14.0)	10.76s	@metamask-onboarding-team	📹 Watch

---

Branch: feat/perps-pro-order-book · Build: Normal · Commit: b12c3a6 · View full run