chore: add ohlcv websocket streaming

.github/scripts/known-feature-flag-constants.ts

@@ -20,6 +20,7 @@ const FILE_SOURCES: Array<{ key: string; file: string; exportName: string }> = [
   { key: 'FULL_PAGE_ACCOUNT_LIST_FLAG_NAME', file: sel('fullPageAccountList'), exportName: 'FULL_PAGE_ACCOUNT_LIST_FLAG_NAME' },
   { key: 'IMPORT_SRP_WORD_SUGGESTION_FLAG_NAME', file: sel('importSrpWordSuggestion'), exportName: 'IMPORT_SRP_WORD_SUGGESTION_FLAG_NAME' },
   { key: 'ASSETS_UNIFY_STATE_FLAG', file: sel('assetsUnifyState'), exportName: 'ASSETS_UNIFY_STATE_FLAG' },
+  { key: 'TOKEN_DETAILS_OHLCV_WS_INTEGRATION_FLAG_KEY', file: sel('tokenDetailsOhlcvWsIntegration'), exportName: 'TOKEN_DETAILS_OHLCV_WS_INTEGRATION_FLAG_KEY' },
 ];
 
 function resolveConstantFromFile(filePath: string, constantName: string): string | undefined {

app/components/UI/AssetOverview/Price/Price.advanced.test.tsx

@@ -28,6 +28,13 @@ jest.mock('../PriceChart/PriceChart.context', () => ({
   }),
 }));
 
+jest.mock(
+  '../../../../selectors/featureFlagController/tokenDetailsOhlcvWsIntegration',
+  () => ({
+    selectTokenDetailsOhlcvWsEnabled: jest.fn(() => false),
+  }),
+);
+
 jest.mock('react-redux', () => {
   const actual = jest.requireActual('react-redux');
   return {
@@ -89,6 +96,10 @@ jest.mock('../../Charts/AdvancedChart/useOHLCVChart', () => ({
   useOHLCVChart: (...args: unknown[]) => mockUseOHLCVChart(...args),
 }));
 
+jest.mock('../../Charts/AdvancedChart/useOHLCVRealtime', () => ({
+  useOHLCVRealtime: () => ({ latestBar: null }),
+}));
+
 jest.mock('../../Charts/AdvancedChart/TimeRangeSelector', () => {
   // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
   const { View, Pressable, Text } = require('react-native');

app/components/UI/AssetOverview/Price/Price.advanced.tsx

@@ -36,6 +36,7 @@ import TimeRangeSelector, {
   type TimeRange,
 } from '../../Charts/AdvancedChart/TimeRangeSelector';
 import { useOHLCVChart } from '../../Charts/AdvancedChart/useOHLCVChart';
+import { useOHLCVRealtime } from '../../Charts/AdvancedChart/useOHLCVRealtime';
 import { OHLCVBar } from '../../Charts/AdvancedChart/OHLCVBar/OHLCVBar';
 import {
   Box,
@@ -62,9 +63,23 @@ import {
   TraceName,
   TraceOperation,
 } from '../../../../util/trace';
+import { selectTokenDetailsOhlcvWsEnabled } from '../../../../selectors/featureFlagController/tokenDetailsOhlcvWsIntegration';
 
 const EMPTY_INDICATORS: IndicatorType[] = [];
 
+/**
+ * Maps UI time-range selections to the WebSocket candle interval used by
+ * OHLCVService. These match the default intervals the REST OHLCV API returns
+ * for each timePeriod.
+ */
+const WS_INTERVAL_BY_TIME_RANGE: Record<TimeRange, string> = {
+  '1H': '1m',
+  '1D': '15m',
+  '1W': '1h',
+  '1M': '1d',
+  '1Y': '1d',
+};
+
 const TIME_RANGE_LABELS: Record<TimeRange, string> = {
   '1H': 'asset_overview.chart_time_period.1h',
   '1D': 'asset_overview.chart_time_period.1d',
@@ -134,6 +149,7 @@ const PriceAdvanced = ({
   const { trackEvent, createEventBuilder } = useAnalytics();
   const [timeRange, setTimeRange] = useState<TimeRange>('1D');
   const chartType = useSelector(selectTokenOverviewChartType);
+  const isOhlcvWsEnabled = useSelector(selectTokenDetailsOhlcvWsEnabled);
   const [crosshairData, setCrosshairData] = useState<CrosshairData | null>(
     null,
   );
@@ -293,6 +309,37 @@ const PriceAdvanced = ({
     vsCurrency: currentCurrency,
   });
 
+  const wsInterval = WS_INTERVAL_BY_TIME_RANGE[timeRange];
+  const wsEnabled =
+    isOhlcvWsEnabled &&
+    !chartLoading &&
+    ohlcvData.length >= CHART_DATA_THRESHOLD &&
+    !hasEmptyData &&
+    !chartError;
+
+  const { latestBar } = useOHLCVRealtime({
+    assetId,
+    interval: wsInterval,
+    currency: currentCurrency,
+    timePeriod: timeRange.toLowerCase(),
+    enabled: wsEnabled,
+  });
+
+  // TradingView Advanced Charts Bar.time expects milliseconds
+  // https://www.tradingview.com/charting-library-docs/latest/api/interfaces/Datafeed.Bar/
+  // OHLCVService delivers bars with `timestamp` in Unix seconds — multiply by 1000
+  const realtimeBar = useMemo(() => {
+    if (!latestBar) return undefined;
+    return {
+      time: latestBar.timestamp * 1000,
+      open: latestBar.open,
+      high: latestBar.high,
+      low: latestBar.low,
+      close: latestBar.close,
+      volume: latestBar.volume,
+    };
+  }, [latestBar]);
+
   const ohlcvPagination = useMemo(
     () => ({
       nextCursor,
@@ -554,6 +601,7 @@ const PriceAdvanced = ({
           <AdvancedChart
             ohlcvData={ohlcvData}
             ohlcvSeriesKey={ohlcvSeriesKey}
+            realtimeBar={realtimeBar}
             height={CHART_HEIGHT}
             showVolume={chartType === ChartType.Candles}
             volumeOverlay

app/components/UI/AssetOverview/Price/Price.test.tsx

@@ -52,6 +52,10 @@ jest.mock('../../Charts/AdvancedChart/useOHLCVChart', () => ({
   useOHLCVChart: (...args: unknown[]) => mockUseOHLCVChart(...args),
 }));
 
+jest.mock('../../Charts/AdvancedChart/useOHLCVRealtime', () => ({
+  useOHLCVRealtime: () => ({ latestBar: null }),
+}));
+
 jest.mock('../PriceChart/PriceChart', () => {
   // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
   const { View } = require('react-native');