fix

Author: nikkyeya

app/coins/[id]/page.tsx

@@ -24,8 +24,9 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
   const { id } = await params;
   const coinData = await getCoinDetails(id);
   const topGainersLosers = await getTopGainersLosers();
-  const coinOHLCData = await getCoinOHLC(id, 1, 'usd', 'hourly', 'full');
   const pool = await fetchPools(id);
+  // Fetch initial OHLC data for 1 day (matches initialPeriod='daily')
+  const coinOHLCData = await getCoinOHLC(id, 1, 'usd', 'hourly', 'full');
 
   const coinDetails = [
     {
@@ -64,10 +65,10 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
     <main className='coin-details-main'>
       <section className='size-full xl:col-span-2'>
         <LiveDataWrapper
-          coinOHLCData={coinOHLCData}
           coinId={id}
           pool={pool}
           coin={coinData}
+          coinOHLCData={coinOHLCData}
         >
           {/* Exchange Listings - pass it as a child of a client component 
           // so it will be render server side */}

components/CandlestickChart.tsx

@@ -23,38 +23,53 @@ export default function CandlestickChart({
   children,
   liveOhlcv = null,
   mode = 'historical',
+  initialPeriod = 'daily',
 }: CandlestickChartProps) {
   const chartContainerRef = useRef<HTMLDivElement | null>(null);
   const chartRef = useRef<IChartApi | null>(null);
   const candleSeriesRef = useRef<ISeriesApi<'Candlestick'> | null>(null);
-  const [period, setPeriod] = useState<Period>('daily');
+
+  const [period, setPeriod] = useState<Period>(initialPeriod);
   const [ohlcData, setOhlcData] = useState<OHLCData[]>(data ?? []);
   const [loading, setLoading] = useState(false);
+  const prevOhlcDataLength = useRef<number>(data?.length ?? 0);
 
-  console.log('==== Candlestick Chart Live OHLCV:', liveOhlcv);
+  console.log('=====liveOhlcv', liveOhlcv);
 
-  // Fetch historical data
+  // Fetch OHLC data when period changes
   const fetchOHLCData = async (selectedPeriod: Period) => {
     setLoading(true);
     try {
       const config = PERIOD_CONFIG[selectedPeriod];
+      console.log('==== Fetching OHLC:', {
+        period: selectedPeriod,
+        days: config.days,
+        interval: config.interval,
+        coinId,
+      });
       const newData = await getCoinOHLC(
         coinId,
         config.days,
         'usd',
         config.interval,
         'full'
       );
+      console.log('==== OHLC Fetched:', {
+        period: selectedPeriod,
+        dataPoints: newData?.length,
+      });
       setOhlcData(newData ?? []);
     } catch (err) {
-      console.error(err);
+      console.error('Failed to fetch OHLC data:', err);
     } finally {
       setLoading(false);
     }
   };
 
   const handlePeriodChange = (newPeriod: Period) => {
-    if (mode === 'live' || newPeriod === period) return;
+    if (newPeriod === period) return;
+
+    console.log('==== Period Change:', { from: period, to: newPeriod, mode });
     setPeriod(newPeriod);
     fetchOHLCData(newPeriod);
   };
@@ -95,6 +110,12 @@ export default function CandlestickChart({
   useEffect(() => {
     if (!candleSeriesRef.current) return;
 
+    console.log('==== Chart Update Effect Triggered:', {
+      ohlcDataPoints: ohlcData.length,
+      hasLiveOhlcv: !!liveOhlcv,
+      liveOhlcv,
+    });
+
     // Convert timestamps from milliseconds to seconds
     const convertedToSeconds = ohlcData.map(
       (item) =>
@@ -108,6 +129,7 @@ export default function CandlestickChart({
     );
 
     let merged: OHLCData[];
+    let action = 'none';
 
     if (liveOhlcv) {
       const liveTimestamp = liveOhlcv[0];
@@ -119,10 +141,19 @@ export default function CandlestickChart({
       if (lastHistoricalCandle && lastHistoricalCandle[0] === liveTimestamp) {
         // Update the last candle with live data
         merged = [...convertedToSeconds.slice(0, -1), liveOhlcv];
+        action = 'updated';
       } else {
         // Append new live candle
         merged = [...convertedToSeconds, liveOhlcv];
+        action = 'appended';
       }
+
+      console.log('==== Live OHLCV Merge:', {
+        action,
+        liveTimestamp,
+        liveTime: new Date(liveTimestamp * 1000).toISOString(),
+        lastHistoricalTimestamp: lastHistoricalCandle?.[0],
+      });
     } else {
       merged = convertedToSeconds;
     }
@@ -134,34 +165,34 @@ export default function CandlestickChart({
 
     candleSeriesRef.current.setData(converted);
 
-    // Only fit content on initial load or period change, not on live updates
-    if (!liveOhlcv || mode === 'historical') {
+    // Fit content when ohlcData changes (period change), not on live updates
+    const dataChanged = prevOhlcDataLength.current !== ohlcData.length;
+    if (dataChanged || mode === 'historical') {
       chartRef.current?.timeScale().fitContent();
+      prevOhlcDataLength.current = ohlcData.length;
     }
   }, [ohlcData, liveOhlcv, period, mode]);
 
   return (
     <div className='candlestick-container'>
       <div className='candlestick-header'>
         <div className='flex-1'>{children}</div>
-        {mode === 'historical' && (
-          <div className='candlestick-button-group'>
-            {PERIOD_BUTTONS.map(({ value, label }) => (
-              <button
-                key={value}
-                className={
-                  period === value
-                    ? 'candlestick-period-button-active'
-                    : 'candlestick-period-button'
-                }
-                onClick={() => handlePeriodChange(value)}
-                disabled={loading}
-              >
-                {label}
-              </button>
-            ))}
-          </div>
-        )}
+        <div className='candlestick-button-group'>
+          {PERIOD_BUTTONS.map(({ value, label }) => (
+            <button
+              key={value}
+              className={
+                period === value
+                  ? 'candlestick-period-button-active'
+                  : 'candlestick-period-button'
+              }
+              onClick={() => handlePeriodChange(value)}
+              disabled={loading}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
       </div>
       <div
         ref={chartContainerRef}

components/LiveDataWrapper.tsx

@@ -24,12 +24,8 @@ export default function LiveDataWrapper({
   const { price, trades, ohlcv } = useCoinGeckoWebSocket({
     coinId,
     poolId: pool.id,
-    coinOHLCData,
   });
 
-  // console.log('==== LiveDataWrapper coinOHLCData:', coinOHLCData);
-  // console.log('==== LiveDataWrapper OHLCV:', ohlcv);
-
   return (
     <section className='size-full xl:col-span-2'>
       <CoinHeader
@@ -53,6 +49,7 @@ export default function LiveDataWrapper({
           liveOhlcv={ohlcv}
           coinId={coinId}
           mode='live'
+          initialPeriod='daily'
         />
       </div>
 

hooks/useCoinGeckoWebSocket.ts

@@ -6,7 +6,6 @@ const WS_BASE = `${process.env.NEXT_PUBLIC_COINGECKO_WEBSOCKET_URL}?x_cg_pro_api
 export function useCoinGeckoWebSocket({
   coinId,
   poolId,
-  coinOHLCData,
 }: UseCoinGeckoWebSocketProps): UseCoinGeckoWebSocketReturn {
   const wsRef = useRef<WebSocket | null>(null);
   const subscribed = useRef<Set<string>>(new Set());
@@ -163,7 +162,7 @@ export function useCoinGeckoWebSocket({
     return () => {
       active = false;
     };
-  }, [coinId, poolId, isWsReady, coinOHLCData, subscribe, unsubscribeAll]);
+  }, [coinId, poolId, isWsReady, subscribe, unsubscribeAll]);
 
   return {
     price,

types.d.ts

@@ -1,12 +1,13 @@
 type OHLCData = [number, number, number, number, number];
 
 interface CandlestickChartProps {
-  data: OHLCData[];
+  data?: OHLCData[];
   liveOhlcv?: OHLCData | null;
   coinId: string;
   height?: number;
   children?: React.ReactNode;
   mode?: 'historical' | 'live';
+  initialPeriod?: Period;
 }
 
 interface ConverterProps {
@@ -225,7 +226,7 @@ interface LiveDataProps {
     network: string;
   };
   coin: CoinDetailsData;
-  coinOHLCData: OHLCData[];
+  coinOHLCData?: OHLCData[];
   children?: React.ReactNode;
 }
 
@@ -249,7 +250,6 @@ interface Category {
 interface UseCoinGeckoWebSocketProps {
   coinId: string;
   poolId: string;
-  coinOHLCData: OHLCData[];
 }
 
 interface UseCoinGeckoWebSocketReturn {