fix

Author: nikkyeya

app/page.tsx

@@ -18,7 +18,7 @@ const Home = () => {
   return (
     <main className='main-container'>
       <section className='home-grid'>
-        <Suspense fallback={<ChartSectionFallback />}>
+        <Suspense fallback={<CoinOverviewFallback />}>
           <CoinOverviewSection />
         </Suspense>
 
@@ -38,7 +38,7 @@ const Home = () => {
 
 export default Home;
 
-const ChartSectionFallback = () => (
+const CoinOverviewFallback = () => (
   <div className='chart-section-container'>
     <div className='w-full h-full min-h-[420px] rounded-2xl bg-dark-500/60 p-6'>
       <div className='flex items-center gap-4 mb-6'>

components/CandlestickChart.tsx

@@ -34,30 +34,20 @@ export default function CandlestickChart({
   const [loading, setLoading] = useState(false);
   const prevOhlcDataLength = useRef<number>(data?.length ?? 0);
 
-  console.log('=====liveOhlcv', liveOhlcv);
-
   // 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('Failed to fetch OHLC data:', err);
@@ -69,7 +59,6 @@ export default function CandlestickChart({
   const handlePeriodChange = (newPeriod: Period) => {
     if (newPeriod === period) return;
 
-    console.log('==== Period Change:', { from: period, to: newPeriod, mode });
     setPeriod(newPeriod);
     fetchOHLCData(newPeriod);
   };
@@ -104,18 +93,13 @@ export default function CandlestickChart({
       chartRef.current = null;
       candleSeriesRef.current = null;
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [height]);
 
   // Update chart when data or liveOhlcv changes
   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) =>
@@ -129,7 +113,6 @@ export default function CandlestickChart({
     );
 
     let merged: OHLCData[];
-    let action = 'none';
 
     if (liveOhlcv) {
       const liveTimestamp = liveOhlcv[0];
@@ -141,19 +124,10 @@ 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;
     }

hooks/useCoinGeckoWebSocket.ts

@@ -66,17 +66,7 @@ export function useCoinGeckoWebSocket({
         Number(msg.l ?? 0),
         Number(msg.c ?? 0),
       ];
-
-      console.log('==== G3 OHLCV Update:', {
-        timestamp,
-        formattedTime: new Date(timestamp * 1000).toISOString(),
-        open: msg.o,
-        high: msg.h,
-        low: msg.l,
-        close: msg.c,
-        candle: newCandle,
-      });
-
+      
       // Always update with the latest candle - chart will handle deduplication
       setOhlcv(newCandle);
       lastOhlcvTimestamp.current = timestamp;
@@ -155,7 +145,7 @@ export function useCoinGeckoWebSocket({
       subscribe('CGSimplePrice', { coin_id: [coinId], action: 'set_tokens' });
 
       const wsPools = [poolId.replace('_', ':')];
-      console.log("===wsPools", wsPools)
+     
 
       if (wsPools.length) {
         subscribe('OnchainTrade', {

lib/coingecko.actions.ts

@@ -9,6 +9,38 @@ const header = {
   cache: 'no-store' as RequestCache,
 };
 
+// Get detailed information about a specific coin by its ID
+export async function getCoinDetails(id: string) {
+  const res = await fetch(`${baseUrl}/coins/${id}`, header);
+
+  if (!res.ok) throw new Error('Failed to fetch CoinGecko API data');
+  return res.json();
+}
+
+// Get OHLC (Open, High, Low, Close) data for a coin
+export async function getCoinOHLC(
+  id: string,
+  days: number | string,
+  currency?: string,
+  interval?: 'daily' | 'hourly',
+  precision?: 'full' | string
+) {
+  const currencyParam = currency || 'usd';
+  const params = new URLSearchParams({
+    vs_currency: currencyParam,
+    days: days.toString(),
+  });
+
+  if (interval) params.append('interval', interval);
+  if (precision) params.append('precision', precision);
+
+  const res = await fetch(`${baseUrl}/coins/${id}/ohlc?${params}`, header);
+
+  if (!res.ok) throw new Error('Failed to fetch CoinGecko API data');
+  return res.json();
+}
+
+
 export async function getCoinList(page: number = 1, perPage: number = 50) {
   const params = new URLSearchParams({
     vs_currency: 'usd',
@@ -38,34 +70,7 @@ export async function getCategories() {
   return data.slice(0, 10) || [];
 }
 
-export async function getCoinDetails(id: string) {
-  const res = await fetch(`${baseUrl}/coins/${id}`, header);
-
-  if (!res.ok) throw new Error('Failed to fetch CoinGecko API data');
-  return res.json();
-}
-
-export async function getCoinOHLC(
-  id: string,
-  days: number | string,
-  currency?: string,
-  interval?: 'daily' | 'hourly',
-  precision?: 'full' | string
-) {
-  const currencyParam = currency || 'usd';
-  const params = new URLSearchParams({
-    vs_currency: currencyParam,
-    days: days.toString(),
-  });
-
-  if (interval) params.append('interval', interval);
-  if (precision) params.append('precision', precision);
-
-  const res = await fetch(`${baseUrl}/coins/${id}/ohlc?${params}`, header);
 
-  if (!res.ok) throw new Error('Failed to fetch CoinGecko API data');
-  return res.json();
-}
 
 export async function getTrendingCoins() {
   const res = await fetch(`${baseUrl}/search/trending`, header);