fix

Author: nikkyeya

components/CandlestickChart.tsx

@@ -13,7 +13,7 @@ import {
   PERIOD_BUTTONS,
   PERIOD_CONFIG,
 } from '@/lib/constants';
-import { convertOHLCData, convertOHLCToCandlestickData } from '@/lib/utils';
+import { convertOHLCData } from '@/lib/utils';
 const { getCoinOHLC } = await import('@/lib/coingecko.actions');
 
 export default function CandlestickChart({
@@ -95,31 +95,50 @@ export default function CandlestickChart({
   useEffect(() => {
     if (!candleSeriesRef.current) return;
 
-    // Convert timestamps from milliseconds to seconds while keeping full OHLC structure
-    const convertedToSeconds = ohlcData.map((item) => [
-      Math.floor(item[0] / 1000), // timestamp in seconds
-      item[1], // open
-      item[2], // high
-      item[3], // low
-      item[4], // close
-    ] as OHLCData);
-    console.log('==== Updating convertedToSeconds:', convertedToSeconds);
-
-    const merged = liveOhlcv
-      ? [...convertedToSeconds, liveOhlcv]
-      : [...convertedToSeconds];
-
-    console.log('==== Updating merged:', merged);
-    // Sort ascending by time
+    // Convert timestamps from milliseconds to seconds
+    const convertedToSeconds = ohlcData.map(
+      (item) =>
+        [
+          Math.floor(item[0] / 1000), // timestamp in seconds
+          item[1], // open
+          item[2], // high
+          item[3], // low
+          item[4], // close
+        ] as OHLCData
+    );
+
+    let merged: OHLCData[];
+
+    if (liveOhlcv) {
+      const liveTimestamp = liveOhlcv[0];
+
+      // Check if we need to update an existing candle or add a new one
+      const lastHistoricalCandle =
+        convertedToSeconds[convertedToSeconds.length - 1];
+
+      if (lastHistoricalCandle && lastHistoricalCandle[0] === liveTimestamp) {
+        // Update the last candle with live data
+        merged = [...convertedToSeconds.slice(0, -1), liveOhlcv];
+      } else {
+        // Append new live candle
+        merged = [...convertedToSeconds, liveOhlcv];
+      }
+    } else {
+      merged = convertedToSeconds;
+    }
+
+    // Sort ascending by time (in case of any ordering issues)
     merged.sort((a, b) => a[0] - b[0]);
 
     const converted = convertOHLCData(merged);
 
-    console.log('==== Updating Candlestick Data:', converted);
-
     candleSeriesRef.current.setData(converted);
-    chartRef.current?.timeScale().fitContent();
-  }, [ohlcData, liveOhlcv, period]);
+
+    // Only fit content on initial load or period change, not on live updates
+    if (!liveOhlcv || mode === 'historical') {
+      chartRef.current?.timeScale().fitContent();
+    }
+  }, [ohlcData, liveOhlcv, period, mode]);
 
   return (
     <div className='candlestick-container'>

hooks/useCoinGeckoWebSocket.ts

@@ -13,23 +13,11 @@ export function useCoinGeckoWebSocket({
 
   const [price, setPrice] = useState<ExtendedPriceData | null>(null);
   const [trades, setTrades] = useState<TradeData[]>([]);
-  // const [ohlcv, setOhlcv] = useState<OHLCData[]>(
-  //   coinOHLCData.map((c) => [
-  //     Math.floor(c[0] / 1000), // normalize ms → seconds
-  //     c[1],
-  //     c[2],
-  //     c[3],
-  //     c[4],
-  //   ])
-  // );
-   const [ohlcv, setOhlcv] = useState<OHLCData | null>( null)
-  
+  const [ohlcv, setOhlcv] = useState<OHLCData | null>(null);
+  const lastOhlcvTimestamp = useRef<number>(0);
 
   const [isWsReady, setIsWsReady] = useState(false);
 
-  // Track where historical data ends and live data begins
-  // const historicalDataLength = useRef(ohlcv.length);
-
   const handleMessage = useCallback((event: MessageEvent) => {
     const ws = wsRef.current;
     const msg: WebSocketMessage = JSON.parse(event.data);
@@ -69,18 +57,21 @@ export function useCoinGeckoWebSocket({
 
       setTrades((prev) => [newTrade, ...prev].slice(0, 10));
     }
-   console.log('==== Message:', msg);
-  // G3: OHLCV updates — simple append
-if (msg.ch === 'G3') {
-     
-  setOhlcv([
-      msg.t || 0, // seconds
-      Number(msg.o ?? 0),
-      Number(msg.h ?? 0),
-      Number(msg.l ?? 0),
-      Number(msg.c ?? 0),
-    ]);
-}
+    // G3: OHLCV updates
+    if (msg.ch === 'G3') {
+      const timestamp = msg.t || 0; // already in seconds
+      const newCandle: OHLCData = [
+        timestamp,
+        Number(msg.o ?? 0),
+        Number(msg.h ?? 0),
+        Number(msg.l ?? 0),
+        Number(msg.c ?? 0),
+      ];
+
+      // Always update with the latest candle - chart will handle deduplication
+      setOhlcv(newCandle);
+      lastOhlcvTimestamp.current = timestamp;
+    }
   }, []);
 
   // WebSocket connection
@@ -100,7 +91,7 @@ if (msg.ch === 'G3') {
     (channel: string, data?: Record<string, any>) => {
       const ws = wsRef.current;
       if (!ws || !isWsReady || subscribed.current.has(channel)) return;
-console.log('==== Subscribing to channel:', channel, data);
+
       ws.send(
         JSON.stringify({
           command: 'subscribe',
@@ -143,19 +134,11 @@ console.log('==== Subscribing to channel:', channel, data);
     (async () => {
       if (!active) return;
 
-      // Reset state and normalize historical data
+      // Reset state
       setPrice(null);
       setTrades([]);
-      // setOhlcv(
-      //   coinOHLCData.map((c) => [
-      //     Math.floor(c[0] / 1000),
-      //     c[1],
-      //     c[2],
-      //     c[3],
-      //     c[4],
-      //   ])
-      // );
-      // historicalDataLength.current = coinOHLCData.length;
+      setOhlcv(null);
+      lastOhlcvTimestamp.current = 0;
 
       unsubscribeAll();