fix: sync perps advanced chart pagination and header price

Author: geositta

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

@@ -18,7 +18,7 @@ import {
   selectPerpsAdvancedChartEnabledFlag,
   selectPerpsRelatedMarketsEnabledFlag,
 } from '../../selectors/featureFlags';
-import type { PerpsMarketData } from '@metamask/perps-controller';
+import { TimeDuration, type PerpsMarketData } from '@metamask/perps-controller';
 
 const mockPerpsAdvancedChartMount = jest.fn();
 const mockPerpsAdvancedChartUnmount = jest.fn();
@@ -1482,6 +1482,47 @@ describe('PerpsMarketDetailsView', () => {
       expect(mockPerpsAdvancedChartMount).toHaveBeenCalledTimes(2);
     });
 
+    it('passes YearToDate pagination to advanced chart and uses its latest price for the header', async () => {
+      const { useSelector } = jest.requireMock('react-redux');
+      const mockSelectPerpsEligibility = jest.requireMock(
+        '../../selectors/perpsController',
+      ).selectPerpsEligibility;
+      useSelector.mockImplementation((selector: unknown) => {
+        if (selector === mockSelectPerpsEligibility) {
+          return true;
+        }
+        if (selector === selectPerpsAdvancedChartEnabledFlag) {
+          return true;
+        }
+        if (selector === selectPerpsRelatedMarketsEnabledFlag) {
+          return false;
+        }
+        return undefined;
+      });
+
+      const { getByTestId, getAllByText } = renderWithProvider(
+        <PerpsConnectionProvider>
+          <PerpsMarketDetailsView />
+        </PerpsConnectionProvider>,
+        {
+          state: initialState,
+        },
+      );
+
+      const advancedChart = getByTestId('mock-perps-advanced-chart');
+      expect(advancedChart.props.paginationDuration).toBe(
+        TimeDuration.YearToDate,
+      );
+
+      act(() => {
+        advancedChart.props.onLatestPriceChange(47000);
+      });
+
+      await waitFor(() => {
+        expect(getAllByText('$47,000').length).toBeGreaterThan(0);
+      });
+    });
+
     it('refreshes candle data when position tab is active', async () => {
       // Arrange
       const mockRefreshPosition = jest.fn();

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

@@ -445,6 +445,17 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
     const lastCandle = candleData.candles.at(-1);
     return lastCandle?.close ? Number.parseFloat(lastCandle.close) : 0;
   }, [candleData]);
+  const [advancedChartCurrentPrice, setAdvancedChartCurrentPrice] = useState<
+    number | undefined
+  >(undefined);
+  const syncedChartCurrentPrice =
+    isAdvancedChartEnabled && advancedChartCurrentPrice !== undefined
+      ? advancedChartCurrentPrice
+      : chartCurrentPrice;
+
+  useEffect(() => {
+    setAdvancedChartCurrentPrice(undefined);
+  }, [isAdvancedChartEnabled, market?.symbol, selectedCandlePeriod]);
 
   // Auto-zoom to latest candle when interval changes and new data arrives
   // This ensures the chart shows the most recent data after interval change
@@ -533,10 +544,12 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
   );
 
   // Compute TP/SL lines for the chart based on existing position
-  // Use chartCurrentPrice (from candle close) to ensure price line syncs with live candle
+  // Use the active chart candle close so the header and current price line stay in sync.
   const tpslLines = useMemo(() => {
     const chartPriceStr =
-      chartCurrentPrice > 0 ? chartCurrentPrice.toString() : undefined;
+      syncedChartCurrentPrice > 0
+        ? syncedChartCurrentPrice.toString()
+        : undefined;
 
     if (existingPosition) {
       return {
@@ -550,7 +563,7 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
 
     // Even without position, show current price line on chart
     return chartPriceStr ? { currentPrice: chartPriceStr } : undefined;
-  }, [existingPosition, chartCurrentPrice]);
+  }, [existingPosition, syncedChartCurrentPrice]);
 
   // Stop loss prompt banner logic
   // Hook handles visibility orchestration including fade-out animation
@@ -1302,7 +1315,7 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
         subtitle={
           <LivePriceHeader
             symbol={market.symbol}
-            currentPrice={chartCurrentPrice}
+            currentPrice={syncedChartCurrentPrice}
             testIDPrice={PerpsMarketHeaderSelectorsIDs.PRICE}
             testIDChange={PerpsMarketHeaderSelectorsIDs.PRICE_CHANGE}
             throttleMs={1000}
@@ -1369,7 +1382,7 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
                 </Box>
                 <LivePriceHeader
                   symbol={market.symbol}
-                  currentPrice={chartCurrentPrice}
+                  currentPrice={syncedChartCurrentPrice}
                   testIDPrice={
                     PerpsMarketHeaderSelectorsIDs.PRICE_TITLE_SECTION
                   }
@@ -1422,8 +1435,10 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
                   tpslLines={tpslLines}
                   positionSize={existingPosition?.size}
                   onCrosshairDataChange={setOhlcData}
+                  onLatestPriceChange={setAdvancedChartCurrentPrice}
                   fallbackCandleData={candleData}
                   fallbackFetchMoreHistory={fetchMoreHistory}
+                  paginationDuration={TimeDuration.YearToDate}
                 />
               ) : hasHistoricalData ? (
                 <TradingViewChart

app/components/UI/Perps/components/PerpsAdvancedChart/PerpsAdvancedChart.tsx

@@ -5,7 +5,11 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { CandlePeriod, type CandleData } from '@metamask/perps-controller';
+import {
+  CandlePeriod,
+  TimeDuration,
+  type CandleData,
+} from '@metamask/perps-controller';
 import AdvancedChart from '../../../Charts/AdvancedChart/AdvancedChart';
 import {
   ChartType,
@@ -42,12 +46,15 @@ export interface PerpsAdvancedChartProps {
   /** Signed position size string; used to derive long/short side for position lines. */
   positionSize?: string;
   onCrosshairDataChange?: (data: OhlcData | null) => void;
+  onLatestPriceChange?: (price: number | undefined) => void;
   onError?: (error: string) => void;
   onSkeletonHidden?: (payload?: ChartRangeSettlePayload) => void;
   /** Fallback candle data for the Lightweight chart if AdvancedChart fails this mount. */
   fallbackCandleData: CandleData | null;
   /** Fallback fetch-more-history for the Lightweight chart fallback. */
   fallbackFetchMoreHistory?: () => void;
+  /** Duration used for RN-backed older-bar pagination. */
+  paginationDuration?: TimeDuration;
 }
 
 /**
@@ -159,20 +166,28 @@ const PerpsAdvancedChart: React.FC<PerpsAdvancedChartProps> = ({
   tpslLines,
   positionSize,
   onCrosshairDataChange,
+  onLatestPriceChange,
   onError,
   onSkeletonHidden,
   fallbackCandleData,
   fallbackFetchMoreHistory,
+  paginationDuration,
 }) => {
   const {
     ohlcvData,
     realtimeBar,
+    latestBar,
     ohlcvSeriesKey,
     visibleFromMs,
     visibleToMs,
     isLoading,
     handleFetchOlderBarsRequest,
-  } = usePerpsAdvancedChartAdapter({ symbol, interval, visibleCandleCount });
+  } = usePerpsAdvancedChartAdapter({
+    symbol,
+    interval,
+    visibleCandleCount,
+    paginationDuration,
+  });
 
   // Per-mount error fallback: once errored, stay on Lightweight until unmount.
   const [hasFailed, setHasFailed] = useState(false);
@@ -191,6 +206,14 @@ const PerpsAdvancedChart: React.FC<PerpsAdvancedChartProps> = ({
 
   const volumeColors = useMemo(() => getPerpsVolumeColors(colors), [colors]);
 
+  useEffect(() => {
+    onLatestPriceChange?.(
+      latestBar && Number.isFinite(latestBar.close)
+        ? latestBar.close
+        : undefined,
+    );
+  }, [latestBar, onLatestPriceChange]);
+
   // ---- Crosshair + haptics ----
 
   const prevOhlcRef = useRef<OhlcData | null>(null);
@@ -350,6 +373,7 @@ const PerpsAdvancedChart: React.FC<PerpsAdvancedChartProps> = ({
         height={height}
         visibleCandleCount={visibleCandleCount}
         tpslLines={tpslLines}
+        symbol={symbol}
         onNeedMoreHistory={fallbackFetchMoreHistory}
         onOhlcDataChange={onCrosshairDataChange}
         showOverlay={false}

app/components/UI/Perps/components/PerpsAdvancedChart/__tests__/PerpsAdvancedChart.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { act, render } from '@testing-library/react-native';
-import { CandlePeriod } from '@metamask/perps-controller';
+import { CandlePeriod, TimeDuration } from '@metamask/perps-controller';
 import {
   default as PerpsAdvancedChart,
   mapTpslToPositionLines,
@@ -68,6 +68,7 @@ jest.mock('react-native-performance', () => ({
 const mockAdapterResult = {
   ohlcvData: [],
   realtimeBar: undefined,
+  latestBar: undefined,
   ohlcvSeriesKey: 'BTC|1h',
   visibleFromMs: undefined,
   visibleToMs: undefined,
@@ -112,6 +113,38 @@ describe('PerpsAdvancedChart', () => {
     );
   });
 
+  it('passes pagination duration into the adapter', () => {
+    renderChart({ paginationDuration: TimeDuration.YearToDate });
+
+    expect(mockUsePerpsAdvancedChartAdapter).toHaveBeenCalledWith(
+      expect.objectContaining({
+        symbol: 'BTC',
+        interval: CandlePeriod.OneHour,
+        visibleCandleCount: 100,
+        paginationDuration: TimeDuration.YearToDate,
+      }),
+    );
+  });
+
+  it('notifies the parent when the latest adapter close changes', () => {
+    const onLatestPriceChange = jest.fn();
+    mockUsePerpsAdvancedChartAdapter.mockReturnValue({
+      ...mockAdapterResult,
+      latestBar: {
+        time: 1000,
+        open: 42000,
+        high: 42100,
+        low: 41900,
+        close: 42050,
+        volume: 100,
+      },
+    });
+
+    renderChart({ onLatestPriceChange });
+
+    expect(onLatestPriceChange).toHaveBeenCalledWith(42050);
+  });
+
   it('passes mapped position lines to AdvancedChart', () => {
     renderChart({
       tpslLines: {
@@ -304,6 +337,7 @@ describe('PerpsAdvancedChart', () => {
         height: 240,
         visibleCandleCount: 100,
         tpslLines,
+        symbol: 'BTC',
         onNeedMoreHistory: fallbackFetchMoreHistory,
         onOhlcDataChange: onCrosshairDataChange,
         showOverlay: false,

app/components/UI/Perps/components/PerpsChartFullscreenModal/PerpsChartFullscreenModal.tsx

@@ -218,6 +218,7 @@ const PerpsChartFullscreenModal: React.FC<PerpsChartFullscreenModalProps> = ({
                 candleData={candleData}
                 height={Math.max(chartHeight - ohlcvHeight, 100)}
                 tpslLines={tpslLines}
+                symbol={symbol}
                 visibleCandleCount={
                   visibleCandleCount ??
                   PERPS_CHART_CONFIG.CANDLE_COUNT.FULLSCREEN

app/components/UI/Perps/hooks/__tests__/usePerpsAdvancedChartAdapter.test.ts

@@ -1,5 +1,9 @@
 import { renderHook, act } from '@testing-library/react-hooks';
-import { CandlePeriod, type CandleData } from '@metamask/perps-controller';
+import {
+  CandlePeriod,
+  TimeDuration,
+  type CandleData,
+} from '@metamask/perps-controller';
 import { usePerpsStream } from '../../providers/PerpsStreamManager';
 import type { FetchOlderBarsRequest } from '../../../Charts/AdvancedChart/AdvancedChart.types';
 import {
@@ -126,12 +130,15 @@ describe('usePerpsAdvancedChartAdapter loading lifecycle', () => {
   const SYMBOL = 'BTC';
   const INTERVAL = CandlePeriod.OneHour;
 
-  const renderAdapter = () =>
+  const renderAdapter = (
+    overrides: Partial<Parameters<typeof usePerpsAdvancedChartAdapter>[0]> = {},
+  ) =>
     renderHook(() =>
       usePerpsAdvancedChartAdapter({
         symbol: SYMBOL,
         interval: INTERVAL,
         visibleCandleCount: 45,
+        ...overrides,
       }),
     );
 
@@ -371,7 +378,7 @@ describe('usePerpsAdvancedChartAdapter loading lifecycle', () => {
     expect(mockFetchHistoricalCandles).toHaveBeenCalledWith(
       SYMBOL,
       INTERVAL,
-      '1w',
+      TimeDuration.OneWeek,
     );
     expect(response).toEqual({
       requestId: 'older-1',
@@ -384,6 +391,27 @@ describe('usePerpsAdvancedChartAdapter loading lifecycle', () => {
     });
   });
 
+  it('uses the configured duration when fetching older bars', async () => {
+    const { result } = renderAdapter({
+      paginationDuration: TimeDuration.YearToDate,
+    });
+
+    act(() => {
+      subscribeParams().callback({
+        symbol: SYMBOL,
+        interval: INTERVAL,
+        candles: [candle(1000), candle(2000), candle(3000)],
+      });
+    });
+    await result.current.handleFetchOlderBarsRequest(fetchOlderRequest());
+
+    expect(mockFetchHistoricalCandles).toHaveBeenCalledWith(
+      SYMBOL,
+      INTERVAL,
+      TimeDuration.YearToDate,
+    );
+  });
+
   it('returns noData when handleFetchOlderBarsRequest finds no older bars', async () => {
     const { result } = renderAdapter();
 

app/components/UI/Perps/hooks/usePerpsAdvancedChartAdapter.ts

@@ -61,11 +61,13 @@ export interface UsePerpsAdvancedChartAdapterOptions {
   symbol: string;
   interval: CandlePeriod;
   visibleCandleCount: number;
+  paginationDuration?: TimeDuration;
 }
 
 export interface UsePerpsAdvancedChartAdapterResult {
   ohlcvData: OHLCVBar[];
   realtimeBar: OHLCVBar | undefined;
+  latestBar: OHLCVBar | undefined;
   ohlcvSeriesKey: string;
   visibleFromMs: number | undefined;
   visibleToMs: number | undefined;
@@ -87,6 +89,7 @@ export function usePerpsAdvancedChartAdapter({
   symbol,
   interval,
   visibleCandleCount,
+  paginationDuration = TimeDuration.OneWeek,
 }: UsePerpsAdvancedChartAdapterOptions): UsePerpsAdvancedChartAdapterResult {
   const stream = usePerpsStream();
 
@@ -197,7 +200,7 @@ export function usePerpsAdvancedChartAdapter({
         await stream.candles.fetchHistoricalCandles(
           symbol,
           interval,
-          TimeDuration.OneWeek,
+          paginationDuration,
         );
         // fetchHistoricalCandles notifies subscribers synchronously before resolving,
         // so latestCandleDataRef.current is up to date after the await.
@@ -225,12 +228,15 @@ export function usePerpsAdvancedChartAdapter({
         };
       }
     },
-    [symbol, interval, stream],
+    [symbol, interval, paginationDuration, stream],
   );
 
+  const latestBar = realtimeBar ?? ohlcvData[ohlcvData.length - 1];
+
   return {
     ohlcvData,
     realtimeBar,
+    latestBar,
     ohlcvSeriesKey,
     visibleFromMs,
     visibleToMs,