[pull] main from MetaMask:main

app/components/UI/Perps/Views/PerpsOrderBookView/PerpsOrderBookView.styles.ts

@@ -40,6 +40,15 @@ const styleSheet = (params: { theme: Theme }) => {
     headerUnitButtonActive: {
       backgroundColor: colors.primary.default,
     },
+    controlsRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingHorizontal: 16,
+      paddingVertical: 8,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.border.muted,
+    },
     scrollView: {
       flex: 1,
     },

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

@@ -121,13 +121,34 @@ jest.mock('../../hooks/usePerpsMeasurement', () => ({
   usePerpsMeasurement: jest.fn(),
 }));
 
-// Mock usePerpsNavigation
+// Mock usePerpsNavigation and usePerpsMarkets
 const mockNavigateToOrder = jest.fn();
 
 jest.mock('../../hooks', () => ({
   usePerpsNavigation: jest.fn(() => ({
     navigateToOrder: mockNavigateToOrder,
   })),
+  usePerpsMarkets: jest.fn(() => ({
+    markets: [
+      {
+        symbol: 'BTC',
+        price: '$50,000.00',
+        leverage: 50,
+      },
+    ],
+    isLoading: false,
+    error: null,
+  })),
+}));
+
+// Mock usePerpsOrderBookGrouping
+const mockSaveGrouping = jest.fn();
+
+jest.mock('../../hooks/usePerpsOrderBookGrouping', () => ({
+  usePerpsOrderBookGrouping: jest.fn(() => ({
+    savedGrouping: undefined,
+    saveGrouping: mockSaveGrouping,
+  })),
 }));
 
 // Mock usePerpsEventTracking
@@ -157,6 +178,35 @@ jest.mock('../../components/PerpsOrderBookDepthChart', () => {
   );
 });
 
+// Mock PerpsMarketHeader to avoid PerpsStreamProvider dependency
+jest.mock('../../components/PerpsMarketHeader', () => {
+  const { View, Text, TouchableOpacity } = jest.requireActual('react-native');
+  const selectors = jest.requireActual<
+    typeof import('../../../../../../e2e/selectors/Perps/Perps.selectors')
+  >('../../../../../../e2e/selectors/Perps/Perps.selectors');
+  return {
+    __esModule: true,
+    default: ({
+      market,
+      onBackPress,
+    }: {
+      market?: { symbol: string };
+      onBackPress?: () => void;
+    }) => (
+      <View testID="perps-market-header">
+        <TouchableOpacity
+          testID={selectors.PerpsOrderBookViewSelectorsIDs.BACK_BUTTON}
+          onPress={onBackPress}
+        >
+          <Text>Back</Text>
+        </TouchableOpacity>
+        <Text>Order Book</Text>
+        {market && <Text>{market.symbol}</Text>}
+      </View>
+    ),
+  };
+});
+
 // Mock BottomSheet components to avoid SafeAreaProvider requirement
 jest.mock(
   '../../../../../component-library/components/BottomSheets/BottomSheet',
@@ -330,11 +380,17 @@ describe('PerpsOrderBookView', () => {
 
   describe('unit toggle', () => {
     it('displays BTC symbol on base unit toggle', () => {
-      const { getByText } = renderWithProvider(<PerpsOrderBookView />, {
+      const { getByTestId } = renderWithProvider(<PerpsOrderBookView />, {
         state: initialState,
       });
 
-      expect(getByText('BTC')).toBeOnTheScreen();
+      // Find the base unit toggle button by testID
+      const baseToggle = getByTestId(
+        PerpsOrderBookViewSelectorsIDs.UNIT_TOGGLE_BASE,
+      );
+      expect(baseToggle).toBeOnTheScreen();
+      // The button should contain "BTC" text
+      expect(baseToggle).toHaveTextContent('BTC');
     });
 
     it('displays USD on USD unit toggle', () => {
@@ -462,15 +518,23 @@ describe('PerpsOrderBookView', () => {
       expect(mockTrack).toHaveBeenCalled();
     });
 
-    it('always uses nSigFigs: 5 for API (client-side aggregation)', () => {
+    it('uses dynamic nSigFigs based on grouping and price (server-side aggregation)', () => {
       renderWithProvider(<PerpsOrderBookView />, { state: initialState });
 
-      // nSigFigs should always be 5 (finest granularity) regardless of grouping selection
+      // nSigFigs is dynamically calculated based on grouping and price
+      // For BTC at ~$50k with default grouping of 10, nSigFigs should be 4
       expect(mockUsePerpsLiveOrderBook).toHaveBeenCalledWith(
         expect.objectContaining({
-          nSigFigs: 5,
+          nSigFigs: expect.any(Number),
         }),
       );
+      // Verify nSigFigs is within valid API range (2-5)
+      const calls = mockUsePerpsLiveOrderBook.mock.calls as [
+        { nSigFigs: number },
+      ][];
+      const lastCall = calls[calls.length - 1];
+      expect(lastCall[0].nSigFigs).toBeGreaterThanOrEqual(2);
+      expect(lastCall[0].nSigFigs).toBeLessThanOrEqual(5);
     });
   });
 
@@ -628,12 +692,13 @@ describe('PerpsOrderBookView', () => {
       );
     });
 
-    it('subscribes to live order book with 50 levels for client-side aggregation', () => {
+    it('subscribes to live order book with MAX_ORDER_BOOK_LEVELS (20) for server-side aggregation', () => {
       renderWithProvider(<PerpsOrderBookView />, { state: initialState });
 
+      // Uses MAX_ORDER_BOOK_LEVELS (20) - API returns at most ~20 levels per side with nSigFigs
       expect(mockUsePerpsLiveOrderBook).toHaveBeenCalledWith(
         expect.objectContaining({
-          levels: 50,
+          levels: 20,
         }),
       );
     });
@@ -648,12 +713,13 @@ describe('PerpsOrderBookView', () => {
       );
     });
 
-    it('subscribes to live order book with finest nSigFigs (5) for aggregation', () => {
+    it('subscribes to live order book with valid nSigFigs for aggregation', () => {
       renderWithProvider(<PerpsOrderBookView />, { state: initialState });
 
+      // nSigFigs is calculated dynamically based on price and grouping
       expect(mockUsePerpsLiveOrderBook).toHaveBeenCalledWith(
         expect.objectContaining({
-          nSigFigs: 5,
+          nSigFigs: expect.any(Number),
         }),
       );
     });