fix

Author: nikkyeya

app/page.tsx

@@ -18,8 +18,6 @@ import {
 } from '@/components/ui/table';
 
 import ChartSection from '@/components/ChartSection';
-// import CoinCard from '@/components/CoinCard';
-// import { popularCoins } from '@/lib/constants';
 import { TrendingDown, TrendingUp } from 'lucide-react';
 import CoinCard from '@/components/CoinCard';
 
@@ -29,14 +27,12 @@ const Home = async () => {
   const coinData = await getCoinDetails('bitcoin');
   const coinOHLCData = await getCoinOHLC(
     'bitcoin',
-    30, // days
-    'usd', // vs_currency
-    'hourly', // interval
-    'full' // precision
+    30,
+    'usd',
+    'hourly',
+    'full'
   );
 
-  console.log('===topGainersLosers', topGainersLosers);
-
   return (
     <main className='py-6 md:py-12 container size-full space-y-6 md:space-y-6'>
       <section className='grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 items-start lg:items-center gap-6'>

components/LiveCoinHeader.tsx

@@ -17,7 +17,7 @@ export default function LiveCoinHeader({
   name,
   image,
 }: LiveCoinHeaderProps) {
-  const { prices, connected } = useCoinPrice([coinId]);
+  const { prices } = useCoinPrice([coinId]);
   const priceData = prices[coinId];
 
   const isTrendingUp = priceData

components/LivePriceDisplay.tsx

@@ -5,11 +5,12 @@ import { formatPrice, formatPercentage } from '@/lib/utils';
 import { cn } from '@/lib/utils';
 
 export default function LivePriceDisplay({ coinId }: { coinId: string }) {
-  const { prices, connected } = useCoinPrice([coinId]) as LiveCoinPrice;
+  const { prices } = useCoinPrice([coinId]);
   const priceData = prices[coinId];
 
-  console.log('======Websocket connected', connected);
-  console.log('======Websocket prices', prices);
+  if (!priceData) {
+    return <div className='text-sm text-gray-400'>Loading...</div>;
+  }
 
   const isTrendingUp = priceData.priceChangePercentage24h > 0;
 

hooks/useCoinGeckoSocket.ts

@@ -1,46 +1,35 @@
-import { useState } from 'react';
-import { useCoinGeckoSocket } from './useCoinGeckoSocket';
-
-type PriceInfo = {
-  coinId: string;
-  price: number;
-  priceChangePercentage24h: number;
-  marketCap: number;
-  volume24h: number;
-  lastUpdated: number;
-};
-
-type PricesMap = Record<string, PriceInfo>;
+import { useEffect, useState } from 'react';
+// import { subscribe } from '@/lib/websocket';
 
 export const useCoinPrice = (coinIds: string[]) => {
   const [prices, setPrices] = useState<PricesMap>({});
-  const [connected, setConnected] = useState(false);
+  const coinIdsKey = coinIds.join(',');
+
+  useEffect(() => {
+    const cleanupFunctions: (() => void)[] = [];
+
+    // Subscribe to each coin
+    // coinIds.forEach((coinId) => {
+    //   const cleanup = subscribe(coinId, (allPrices) => {
+    //     setPrices(allPrices);
+    //   });
+    //   cleanupFunctions.push(cleanup);
+    // });
+
+    // Cleanup all subscriptions
+    return () => {
+      cleanupFunctions.forEach((cleanup) => cleanup());
+    };
+     
+  }, [coinIdsKey]); // Use string key to avoid array reference changes
 
-  useCoinGeckoSocket({
-    channel: 'CGSimplePrice',
-    subscribeParams: coinIds,
-    subscribeMessage: (coins) => ({
-      command: 'message',
-      identifier: JSON.stringify({ channel: 'CGSimplePrice' }),
-      data: JSON.stringify({ action: 'set_tokens', coin_id: coins }),
-    }),
-    onReady: () => setConnected(true),
-    onData: (msg) => {
-      if (msg.c === 'C1' && msg.i && msg.p !== undefined) {
-        setPrices((prev) => ({
-          ...prev,
-          [msg.i]: {
-            coinId: msg.i,
-            price: msg.p,
-            priceChangePercentage24h: msg.pp || 0,
-            marketCap: msg.m || 0,
-            volume24h: msg.v || 0,
-            lastUpdated: msg.t || Date.now() / 1000,
-          },
-        }));
-      }
-    },
+  // Filter prices to only include requested coins
+  const filteredPrices: PricesMap = {};
+  coinIds.forEach((coinId) => {
+    if (prices[coinId]) {
+      filteredPrices[coinId] = prices[coinId];
+    }
   });
 
-  return { prices, connected };
+  return { prices: filteredPrices };
 };

hooks/useCoinPrice.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 type OHLCData = [number, number, number, number, number];
 
 interface CandlestickChartProps {
@@ -94,34 +93,21 @@ interface SearchCoin {
   };
 }
 
-interface LiveCoinPrice {
-  prices: {
-    [key: string]: {
-      price: number;
-      priceChangePercentage24h: number;
-      marketCap: number;
-      volume24h: number;
-    };
-  };
-  connected: boolean;
-}
-
-interface UseCoinGeckoSocketProps {
-  channel: string;
-  onReady: (socket: WebSocket) => void;
-  onData: (message: any) => void;
+// WebSocket Types
+interface CoinPriceData {
+  coinId: string;
+  price: number;
+  priceChangePercentage24h: number;
+  marketCap: number;
+  volume24h: number;
+  lastUpdated: number;
 }
 
-interface CGSimplePriceMessage {
-  c: string;
-  i: string;
-  m: number;
-  p: number;
-  pp: number;
-  t: number;
-  v: number;
+interface PricesMap {
+  [coinId: string]: CoinPriceData;
 }
 
+// Chart Section Props
 interface ChartSectionProps {
   coinData: {
     image: { large: string };
@@ -135,25 +121,6 @@ interface ChartSectionProps {
   coinId: string;
 }
 
-interface CoinPriceData {
-  coinId: string;
-  price: number;
-  priceChangePercentage24h: number;
-  marketCap: number;
-  volume24h: number;
-  lastUpdated: number;
-}
-
-interface PricesMap {
-  [coinId: string]: CoinPriceData;
-}
-
-type UseCoinGeckoSocketProps = {
-  channel: string;
-  onReady: (socket: WebSocket) => void;
-  onData: (data: any) => void;
-};
-
 interface TopGainersLosers {
   id: string;
   name: string;