Merge branch 'feat/perps/price-caching' of github.com:MetaMask/metamask-mobile into feat/perps/price-caching

Author: gambinish

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

@@ -13,7 +13,7 @@ import {
   defaultPerpsClosePositionValidationMock,
   defaultPerpsEventTrackingMock,
   defaultPerpsLivePricesMock,
-  defaultPerpsOrderBookMock,
+  defaultPerpsTopOfBookMock,
   defaultPerpsOrderFeesMock,
   defaultPerpsPositionMock,
   defaultPerpsRewardsMock,
@@ -52,7 +52,7 @@ jest.mock('../../hooks', () => ({
 
 jest.mock('../../hooks/stream', () => ({
   usePerpsLivePrices: jest.fn(),
-  usePerpsOrderBook: jest.fn(),
+  usePerpsTopOfBook: jest.fn(),
 }));
 
 jest.mock('../../hooks/usePerpsEventTracking', () => ({
@@ -122,8 +122,8 @@ describe('PerpsClosePositionView', () => {
   const usePerpsLivePricesMock = jest.mocked(
     jest.requireMock('../../hooks/stream').usePerpsLivePrices,
   );
-  const usePerpsOrderBookMock = jest.mocked(
-    jest.requireMock('../../hooks/stream').usePerpsOrderBook,
+  const usePerpsTopOfBookMock = jest.mocked(
+    jest.requireMock('../../hooks/stream').usePerpsTopOfBook,
   );
   const usePerpsOrderFeesMock = jest.mocked(
     jest.requireMock('../../hooks').usePerpsOrderFees,
@@ -167,7 +167,7 @@ describe('PerpsClosePositionView', () => {
 
     // Setup hook mocks with default values
     usePerpsLivePricesMock.mockReturnValue(defaultPerpsLivePricesMock);
-    usePerpsOrderBookMock.mockReturnValue(defaultPerpsOrderBookMock);
+    usePerpsTopOfBookMock.mockReturnValue(defaultPerpsTopOfBookMock);
     usePerpsOrderFeesMock.mockReturnValue(defaultPerpsOrderFeesMock);
     usePerpsClosePositionValidationMock.mockReturnValue(
       defaultPerpsClosePositionValidationMock,

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

@@ -46,7 +46,7 @@ import {
   usePerpsToasts,
   usePerpsMarketData,
 } from '../../hooks';
-import { usePerpsLivePrices, usePerpsOrderBook } from '../../hooks/stream';
+import { usePerpsLivePrices, usePerpsTopOfBook } from '../../hooks/stream';
 import { usePerpsEventTracking } from '../../hooks/usePerpsEventTracking';
 import { usePerpsMeasurement } from '../../hooks/usePerpsMeasurement';
 import {
@@ -115,11 +115,10 @@ const PerpsClosePositionView: React.FC = () => {
     ? parseFloat(priceData[position.coin].price)
     : parseFloat(position.entryPrice);
 
-  // Get order book data for maker/taker fee determination
-  const orderBooks = usePerpsOrderBook({
-    symbols: [position.coin],
+  // Get top of book data for maker/taker fee determination
+  const currentTopOfBook = usePerpsTopOfBook({
+    symbol: position.coin,
   });
-  const currentOrderBook = orderBooks[position.coin];
 
   // Determine position direction
   const isLong = parseFloat(position.size) > 0;
@@ -198,11 +197,11 @@ const PerpsClosePositionView: React.FC = () => {
     isClosing: true,
     limitPrice,
     direction: isLong ? 'short' : 'long',
-    currentAskPrice: currentOrderBook?.bestAsk
-      ? Number.parseFloat(currentOrderBook.bestAsk)
+    currentAskPrice: currentTopOfBook?.bestAsk
+      ? Number.parseFloat(currentTopOfBook.bestAsk)
       : undefined,
-    currentBidPrice: currentOrderBook?.bestBid
-      ? Number.parseFloat(currentOrderBook.bestBid)
+    currentBidPrice: currentTopOfBook?.bestBid
+      ? Number.parseFloat(currentTopOfBook.bestBid)
       : undefined,
   });
 

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

@@ -571,26 +571,23 @@ const createMockStreamManager = () => {
     account: {
       subscribe: jest.fn(() => jest.fn()),
     },
-    orderBooks: {
-      subscribeToSymbols: ({
-        symbols,
+    topOfBook: {
+      subscribeToSymbol: ({
+        symbol: _symbol,
         callback,
       }: {
-        symbols: string[];
+        symbol: string;
         callback: (data: unknown) => void;
       }) => {
         const id = Math.random().toString();
         subscribers.set(id, callback);
-        // Immediately provide mock order book data
-        const mockOrderBooks: Record<string, unknown> = {};
-        symbols.forEach((symbol: string) => {
-          mockOrderBooks[symbol] = {
-            bestBid: '2999',
-            bestAsk: '3001',
-            spread: '2',
-          };
-        });
-        callback(mockOrderBooks);
+        // Immediately provide mock top of book data
+        const mockTopOfBook = {
+          bestBid: '2999',
+          bestAsk: '3001',
+          spread: '2',
+        };
+        callback(mockTopOfBook);
         return () => {
           subscribers.delete(id);
         };

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

@@ -88,7 +88,7 @@ import {
 import {
   usePerpsLiveAccount,
   usePerpsLivePrices,
-  usePerpsOrderBook,
+  usePerpsTopOfBook,
 } from '../../hooks/stream';
 import { usePerpsEventTracking } from '../../hooks/usePerpsEventTracking';
 import { usePerpsMeasurement } from '../../hooks/usePerpsMeasurement';
@@ -275,11 +275,10 @@ const PerpsOrderViewContentBase: React.FC = () => {
   });
   const currentPrice = prices[orderForm.asset];
 
-  // Get order book data for maker/taker fee determination
-  const orderBooks = usePerpsOrderBook({
-    symbols: [orderForm.asset],
+  // Get top of book data for maker/taker fee determination
+  const currentTopOfBook = usePerpsTopOfBook({
+    symbol: orderForm.asset,
   });
-  const currentOrderBook = orderBooks[orderForm.asset];
 
   // Track screen load with unified hook
   usePerpsMeasurement({
@@ -309,11 +308,11 @@ const PerpsOrderViewContentBase: React.FC = () => {
     isClosing: false,
     limitPrice: orderForm.limitPrice,
     direction: orderForm.direction,
-    currentAskPrice: currentOrderBook?.bestAsk
-      ? Number.parseFloat(currentOrderBook.bestAsk)
+    currentAskPrice: currentTopOfBook?.bestAsk
+      ? Number.parseFloat(currentTopOfBook.bestAsk)
       : undefined,
-    currentBidPrice: currentOrderBook?.bestBid
-      ? Number.parseFloat(currentOrderBook.bestBid)
+    currentBidPrice: currentTopOfBook?.bestBid
+      ? Number.parseFloat(currentTopOfBook.bestBid)
       : undefined,
   });
 

app/components/UI/Perps/__mocks__/perpsHooksMocks.ts

@@ -11,9 +11,10 @@ export const defaultPerpsLivePricesMock = {
   BTC: { price: '45000.00', change24h: 1.2 },
 };
 
-export const defaultPerpsOrderBookMock = {
-  ETH: { bestBid: '2999.00', bestAsk: '3001.00', spread: '2.00' },
-  BTC: { bestBid: '44999.00', bestAsk: '45001.00', spread: '2.00' },
+export const defaultPerpsTopOfBookMock = {
+  bestBid: '2999.00',
+  bestAsk: '3001.00',
+  spread: '2.00',
 };
 
 export const defaultPerpsOrderFeesMock = {

app/components/UI/Perps/hooks/stream/index.ts

@@ -4,7 +4,7 @@ export { usePerpsLiveOrders } from './usePerpsLiveOrders';
 export { usePerpsLivePositions } from './usePerpsLivePositions';
 export { usePerpsLiveFills } from './usePerpsLiveFills';
 export { usePerpsLiveAccount } from './usePerpsLiveAccount';
-export { usePerpsOrderBook } from './usePerpsOrderBook';
+export { usePerpsTopOfBook } from './usePerpsTopOfBook';
 
 // Export types for convenience
 export type { UsePerpsLivePricesOptions } from './usePerpsLivePrices';
@@ -16,9 +16,9 @@ export type {
   UsePerpsLiveAccountReturn,
 } from './usePerpsLiveAccount';
 export type {
-  UsePerpsOrderBookOptions,
-  OrderBookData,
-} from './usePerpsOrderBook';
+  UsePerpsTopOfBookOptions,
+  TopOfBookData,
+} from './usePerpsTopOfBook';
 
 // Re-export types from controllers
 export type {

app/components/UI/Perps/hooks/stream/usePerpsLivePrices.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { usePerpsStream } from '../../providers/PerpsStreamManager';
 import type { PriceUpdate } from '../../controllers/types';
 
@@ -28,6 +28,9 @@ export function usePerpsLivePrices(
   const stream = usePerpsStream();
   const [prices, setPrices] = useState<Record<string, PriceUpdate>>({});
 
+  // Memoize joined symbols to prevent unnecessary effect re-runs
+  const symbolsKey = useMemo(() => symbols.join(','), [symbols]);
+
   useEffect(() => {
     if (symbols.length === 0) return;
 
@@ -45,8 +48,10 @@ export function usePerpsLivePrices(
     return () => {
       unsubscribe();
     };
+    // symbolsKey captures symbols changes via memoization, so symbols is intentionally omitted
+    // to prevent re-subscriptions when array reference changes but content is the same
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [stream, symbols.join(','), throttleMs]);
+  }, [stream, symbolsKey, throttleMs]);
 
   return prices;
 }