chore: add ohlcv websocket streaming

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

@@ -89,6 +89,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 @@
   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,
@@ -65,6 +66,19 @@
 
 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',
@@ -129,7 +143,7 @@
   timePeriod = '1d',
   chartNavigationButtons = [],
   setTimePeriod,
 }: PriceAdvancedProps) => {
   const dispatch = useDispatch();
   const { trackEvent, createEventBuilder } = useAnalytics();
   const [timeRange, setTimeRange] = useState<TimeRange>('1D');
@@ -293,6 +307,37 @@
     vsCurrency: currentCurrency,
   });
 
+  const wsInterval = WS_INTERVAL_BY_TIME_RANGE[timeRange];
+  // TODO: Check if we want to add a feature flag to gate the WS OHLCV feature
+  const wsEnabled =
+    !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 +599,7 @@
           <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');