- {/* Exchange Listings */} -

Exchange Listings

- - - - - Exchange - - Pair - Price - - Last Traded - - - - - {coin.tickers - .slice(0, 7) - .map((ticker: Ticker, index: number) => ( - - - - {ticker.market.name} - - - -

- {ticker.base} -

- / -

- {ticker.target} -

- - - {formatPrice(ticker.converted_last.usd)} - - - {timeAgo(ticker.timestamp)} - - - ))} - -

Exchange Listings

+ + index} + bodyCellClassName='py-2!' + />

- {/* Converter */} -

- {coin.symbol.toUpperCase()} Converter -

- -

+ - {/* Coin Details */} -

Coin Details

- {[ - { - label: 'Market Cap', - value: formatPrice(coin.marketCap), - }, - { - label: 'Market Cap Rank', - value: `# ${coin.marketCapRank}`, - }, - { - label: 'Total Volume', - value: formatPrice(coin.totalVolume), - }, - { - label: 'Website', - value: '-', - link: coin.website, - linkText: 'Website', - }, - { - label: 'Explorer', - value: '-', - link: coin.explorer, - linkText: 'Explorer', - }, - { - label: 'Community Link', - value: '-', - link: coin.communityLink, - linkText: 'Community', - }, - ].map((detail, index) => ( - +

Coin Details

+ +

+
{label}
+ + {link ? ( +
+ + {linkText || label} + + +
+ ) : ( +
{value}
+ )} +

- {/* Top Gainers */} -

Top Gainers

- {topGainersLosers.top_gainers.map( - (coin: TopGainersLosersResponse) => ( - - ) - )} -

); diff --git a/app/coins/page.tsx b/app/coins/page.tsx index 6bb1f9f..f120248 100644 --- a/app/coins/page.tsx +++ b/app/coins/page.tsx @@ -1,27 +1,25 @@ -import { getCoinList } from '@/lib/coingecko.actions'; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from '@/components/ui/table'; +import { fetcher } from '@/lib/coingecko.actions'; +import { DataTable } from '@/components/DataTable'; import Image from 'next/image'; -import { cn, formatPercentage, formatPrice } from '@/lib/utils'; +import Link from 'next/link'; + import CoinsPagination from '@/components/CoinsPagination'; -import { ClickableTableRow } from '@/components/ClickableTableRow'; +import { cn, formatPercentage, formatCurrency } from '@/lib/utils'; + +const Coins = async ({ searchParams }: NextPageProps) => { + const { page } = await searchParams; -const Coins = async ({ - searchParams, -}: { - searchParams: Promise<{ page?: string }>; -}) => { - const params = await searchParams; - const currentPage = Number(params.page) || 1; + const currentPage = Number(page) || 1; const perPage = 10; - const coinsData = await getCoinList(currentPage, perPage); + const coinsData = await fetcher('/coins/markets', { + vs_currency: 'usd', + order: 'market_cap_desc', + per_page: perPage, + page: currentPage, + sparkline: 'false', + price_change_percentage: '24h', + }); // CoinGecko API doesn't return total count, so we determine pagination dynamically: // - If we receive fewer items than perPage, we're on the last page @@ -32,69 +30,71 @@ const Coins = async ({ const estimatedTotalPages = currentPage >= 100 ? Math.ceil(currentPage / 100) * 100 + 100 : 100; - return ( -

All Coins

- - - - Rank - Token - Price - 24h Change - Market Cap - - - - {coinsData.map((coin: CoinMarketData) => { - const isTrendingUp = coin.price_change_percentage_24h > 0; - return ( - - - #{coin.market_cap_rank} - - -

- {coin.name} ({coin.symbol.toUpperCase()}) -

- - - {formatPrice(coin.current_price)} - - - - {isTrendingUp && '+'} - {formatPercentage(coin.price_change_percentage_24h)} - - - - {formatPrice(coin.market_cap)} - - - ); - })} - -

+ const columns: DataTableColumn[] = [ + { + header: 'Rank', + cellClassName: 'rank-cell', + cell: (coin) => ( + <> + #{coin.market_cap_rank} + + + ), + }, + { + header: 'Token', + cellClassName: 'token-cell', + cell: (coin) => ( +

+ {coin.name} ({coin.symbol.toUpperCase()}) +

+ ), + }, + { + header: 'Price', + cellClassName: 'price-cell', + cell: (coin) => formatCurrency(coin.current_price), + }, + { + header: '24h Change', + cellClassName: 'change-cell', + cell: (coin) => { + const isTrendingUp = coin.price_change_percentage_24h > 0; + + return ( + + {isTrendingUp && '+'} + {formatPercentage(coin.price_change_percentage_24h)} + + ); + }, + }, + { + header: 'Market Cap', + cellClassName: 'market-cap-cell', + cell: (coin) => formatCurrency(coin.market_cap), + }, + ]; + + return ( +

All Coins

+ + coin.id} + /> ) { - const trendingCoins = await getTrendingCoins(); + const trendingCoins = await fetcher<{ coins: TrendingCoin[] }>( + '/search/trending', + undefined, + 300 + ); return ( -

{children} diff --git a/app/page.tsx b/app/page.tsx index a47991f..5ef2ad1 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,43 +1,30 @@ import { Suspense } from 'react'; +import { Categories } from '@/components/home/Categories'; +import { CoinOverview } from '@/components/home/CoinOverview'; +import { TrendingCoins } from '@/components/home/TrendingCoins'; import { - getCategories, - getCoinDetails, - getCoinOHLC, - getTrendingCoins, -} from '@/lib/coingecko.actions'; -import { cn, formatPercentage, formatPrice } from '@/lib/utils'; -import Image from 'next/image'; -import Link from 'next/link'; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from '@/components/ui/table'; - -import ChartSection from '@/components/ChartSection'; -import { TrendingDown, TrendingUp } from 'lucide-react'; -import { Skeleton } from '@/components/ui/skeleton'; + CategoriesFallback, + CoinOverviewFallback, + TrendingCoinsFallback, +} from '@/components/home/Fallback'; const Home = () => { return (

- }> - + }> + - }> - + }> +

}> - +

@@ -45,259 +32,3 @@ const Home = () => { }; export default Home; - -const CoinOverviewSection = async () => { - const [coinData, coinOHLCData] = await Promise.all([ - getCoinDetails('bitcoin'), - getCoinOHLC('bitcoin', 30, 'usd', 'hourly', 'full'), - ]); - - return ( - - ); -}; - -const TopMoversSection = async () => { - const trendingCoins = (await getTrendingCoins()) as TrendingCoin[]; - - return ( -

Top Movers

- - - - Name - - 24h Change - - Price - - - - {trendingCoins.slice(0, 6).map((coin: TrendingCoin, index) => { - const item = coin.item; - const isTrendingUp = - item.data.price_change_percentage_24h.usd > 0; - - return ( - - - -

{item.name}

- - - -

- {formatPercentage( - item.data.price_change_percentage_24h.usd - )} -

- {isTrendingUp ? ( - - ) : ( - - )} -

- - - {formatPrice(item.data.price)} - - - ); - })} - -

- ); -}; - -const CategoriesSection = async () => { - const categories = (await getCategories()) as Category[]; - - return ( -

Top Categories

- - - - Category - Top Gainers - 24h Change - Market Cap - 24h Volume - - - - {categories.map((category: Category, index: number) => { - const isTrendingUp = category.market_cap_change_24h > 0; - return ( - - - {category.name} - - - {category.top_3_coins.map((coin: string) => ( - Coin image

- ))} - - -

0, - 'text-red-500': category.market_cap_change_24h < 0, - } - )} - > -

{formatPercentage(category.market_cap_change_24h)}

- {isTrendingUp ? ( - - ) : ( - - )} -

- - - {formatPrice(category.market_cap)} - - - {formatPrice(category.volume_24h)} - - - ); - })} - -

- ); -}; - -const ChartSectionFallback = () => ( -

- -

- - -

- -

-); - -const TopMoversFallback = () => ( -

Top Movers

- - - - Name - - 24h Change - - Price - - - - {Array.from({ length: 6 }).map((_, index) => ( - - -

- - -

- - - - - - - - - ))} - -

-); - -const CategoriesFallback = () => ( -

Top Categories

- - - - Category - Top Gainers - 24h Change - Market Cap - 24h Volume - - - - {Array.from({ length: 6 }).map((_, index) => ( - - - - - - {Array.from({ length: 3 }).map((__, coinIndex) => ( - - ))} - - - - - - - - - - - - ))} - -

-); diff --git a/components/CandlestickChart.tsx b/components/CandlestickChart.tsx index 7839280..face4e3 100644 --- a/components/CandlestickChart.tsx +++ b/components/CandlestickChart.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useEffect, useRef, useMemo, useState } from 'react'; +import { useEffect, useRef, useState, useTransition } from 'react'; import { IChartApi, ISeriesApi, @@ -10,60 +10,56 @@ import { import { getCandlestickConfig, getChartConfig, + LIVE_INTERVAL_BUTTONS, PERIOD_BUTTONS, PERIOD_CONFIG, } from '@/lib/constants'; import { convertOHLCData } from '@/lib/utils'; -const { getCoinOHLC } = await import('@/lib/coingecko.actions'); +const { fetcher } = await import('@/lib/coingecko.actions'); export default function CandlestickChart({ data, coinId, height = 360, children, + liveOhlcv = null, mode = 'historical', + initialPeriod = 'daily', + liveInterval, + setLiveInterval, }: CandlestickChartProps) { const chartContainerRef = useRef(null); const chartRef = useRef(null); const candleSeriesRef = useRef | null>(null); - const resizeObserverRef = useRef(null); - const [period, setPeriod] = useState( - mode === 'live' ? 'daily' : 'monthly' - ); - const [ohlcData, setOhlcData] = useState(data); - const [loading, setLoading] = useState(false); - - // In live mode, use data prop directly; in historical mode, use state - const activeData = mode === 'live' ? data : ohlcData; - - // Memoize converted data to avoid recalculating on every render - const chartData = useMemo(() => convertOHLCData(activeData), [activeData]); + const [period, setPeriod] = useState(initialPeriod); + const [ohlcData, setOhlcData] = useState(data ?? []); + const [isPending, startTransition] = useTransition(); + const prevOhlcDataLength = useRef(data?.length ?? 0); + // Fetch OHLC data when period changes const fetchOHLCData = async (selectedPeriod: Period) => { - setLoading(true); try { const config = PERIOD_CONFIG[selectedPeriod]; - const newData = await getCoinOHLC( - coinId, - config.days, - 'usd', - config.interval, - 'full' - ); - - setOhlcData(newData); - } catch (error) { - console.error('Error fetching OHLC data:', error); - } finally { - setLoading(false); + const newData = await fetcher(`/coins/${coinId}/ohlc`, { + vs_currency: 'usd', + days: config.days, + interval: config.interval, + precision: 'full', + }); + + startTransition(() => { + setOhlcData(newData ?? []); + }); + } catch (err) { + console.error('Failed to fetch OHLC data:', err); } }; - // Handle period change (only in historical mode) const handlePeriodChange = (newPeriod: Period) => { - if (mode === 'live' || newPeriod === period) return; + if (newPeriod === period) return; + setPeriod(newPeriod); fetchOHLCData(newPeriod); }; @@ -73,97 +69,133 @@ export default function CandlestickChart({ const container = chartContainerRef.current; if (!container) return; - // Show time for shorter periods with hourly interval const showTime = ['daily', 'weekly', 'monthly'].includes(period); - - // Initialize chart const chart = createChart(container, { ...getChartConfig(height, showTime), width: container.clientWidth, }); + const series = chart.addSeries(CandlestickSeries, getCandlestickConfig()); - // Add candlestick series - const candleSeries = chart.addSeries( - CandlestickSeries, - getCandlestickConfig() - ); - candleSeries.setData(chartData); - - // Fit content to display all data + series.setData(convertOHLCData(ohlcData)); chart.timeScale().fitContent(); - // Store refs chartRef.current = chart; - candleSeriesRef.current = candleSeries; - - // Handle responsive resizing using ResizeObserver (more efficient than window resize) - resizeObserverRef.current = new ResizeObserver((entries) => { - if (!entries.length || !chartRef.current) return; + candleSeriesRef.current = series; - const { width } = entries[0].contentRect; - chartRef.current.applyOptions({ width }); + const observer = new ResizeObserver((entries) => { + if (!entries.length) return; + chart.applyOptions({ width: entries[0].contentRect.width }); }); + observer.observe(container); - resizeObserverRef.current.observe(container); - - // Cleanup function return () => { - resizeObserverRef.current?.disconnect(); - chartRef.current?.remove(); + observer.disconnect(); + chart.remove(); chartRef.current = null; candleSeriesRef.current = null; }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [height]); - // Update chart data when chartData or period changes + // Update chart when data or liveOhlcv changes useEffect(() => { - if (candleSeriesRef.current && chartRef.current && chartData.length > 0) { - // Update the chart - candleSeriesRef.current.setData(chartData); - chartRef.current.timeScale().fitContent(); - - // Update time visibility based on period - const showTime = ['daily', 'weekly', 'monthly'].includes(period); - chartRef.current.applyOptions({ - timeScale: { - timeVisible: showTime, - }, - }); + if (!candleSeriesRef.current) return; + + // 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; } - }, [chartData, period, mode]); + + // Sort ascending by time (in case of any ordering issues) + merged.sort((a, b) => a[0] - b[0]); + + const converted = convertOHLCData(merged); + + candleSeriesRef.current.setData(converted); + + // 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 ( -

{children}

- {/* Only show period buttons in historical mode */} - {mode === 'historical' && ( -

- {PERIOD_BUTTONS.map(({ value, label }) => ( + +

+ + Period: + + {PERIOD_BUTTONS.map(({ value, label }) => ( + + ))} +

+ + {/* Update Frequency: as fast as 1s, for actively traded pools. */} + {liveInterval && ( +

+ + Update Frequency: + + {LIVE_INTERVAL_BUTTONS.map(({ value, label }) => ( + className={ + liveInterval === value + ? 'config-button-active' + : 'config-button' + } + onClick={() => setLiveInterval && setLiveInterval(value)} + disabled={isPending} + > + {label} + ))}

)}

- {/* Chart Container */} -

); } diff --git a/components/ChartSection.tsx b/components/ChartSection.tsx deleted file mode 100644 index 33f9b11..0000000 --- a/components/ChartSection.tsx +++ /dev/null @@ -1,35 +0,0 @@ -'use client'; - -import Image from 'next/image'; -import { formatPrice } from '@/lib/utils'; -import CandlestickChart from './CandlestickChart'; - -export default function ChartSection({ - coinData, - coinOHLCData, - coinId, -}: ChartSectionProps) { - return ( -

- -

- {coinData.name} / {coinData.symbol.toUpperCase()} -

- {formatPrice(coinData.market_data.current_price.usd)} -

- -

- ); -} diff --git a/components/ClickableTableRow.tsx b/components/ClickableTableRow.tsx deleted file mode 100644 index ad872c9..0000000 --- a/components/ClickableTableRow.tsx +++ /dev/null @@ -1,18 +0,0 @@ -'use client'; - -import { useRouter } from 'next/navigation'; -import { TableRow } from '@/components/ui/table'; - -export function ClickableTableRow({ - href, - children, - className, -}: ClickableTableRowProps) { - const router = useRouter(); - - return ( - router.push(href)}> - {children} - - ); -} diff --git a/components/CoinCard.tsx b/components/CoinCard.tsx index 6761179..15e37fa 100644 --- a/components/CoinCard.tsx +++ b/components/CoinCard.tsx @@ -1,10 +1,10 @@ 'use client'; -import { formatPrice, formatPercentage, cn } from '@/lib/utils'; import Link from 'next/link'; import Image from 'next/image'; -import { TrendingUp, TrendingDown } from 'lucide-react'; -import { Badge } from './ui/badge'; +import { ArrowUpRight, ArrowDownRight } from 'lucide-react'; + +import { formatCurrency, formatPercentage, cn } from '@/lib/utils'; export default function CoinCard({ id, @@ -13,61 +13,43 @@ export default function CoinCard({ image, price, priceChangePercentage24h, - volume24, - rank, }: TopGainersLosers) { const isTrendingUp = priceChangePercentage24h > 0; return ( - -

- {/* Header */} -

+ +

{name}

{symbol}

+ {name} +

+ {symbol} +

- {/* Price */} - <> -

{formatPrice(price, 7)}

- {/* 24h Change */} -

- - {formatPercentage(priceChangePercentage24h)} - {isTrendingUp ? : } - -

- - {/* Market Stats */} -

- Market Cap Rank - #{rank} -

- Volume 24h: - {formatPrice(volume24)} -

- +

{formatCurrency(price)}

+ {isTrendingUp ? ( + + ) : ( + + )} + {formatPercentage(Math.abs(priceChangePercentage24h))} +

); diff --git a/components/CoinDetailCard.tsx b/components/CoinDetailCard.tsx deleted file mode 100644 index 9c16771..0000000 --- a/components/CoinDetailCard.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { ArrowUpRight } from 'lucide-react'; -import Link from 'next/link'; - -interface CoinDetailCardProps { - label: string; - value: string | number; - link?: string; - linkText?: string; -} - -export default function CoinDetailCard({ - label, - value, - link, - linkText, -}: CoinDetailCardProps) { - return ( -

{label}

- {link ? ( -

- - {linkText || label} - - -

- ) : ( -

{value}

- )} -

- ); -} diff --git a/components/CoinHeader.tsx b/components/CoinHeader.tsx index 00b9a5c..89e6379 100644 --- a/components/CoinHeader.tsx +++ b/components/CoinHeader.tsx @@ -1,9 +1,10 @@ 'use client'; -import { cn, formatPercentage, formatPrice } from '@/lib/utils'; -import { TrendingDown, TrendingUp } from 'lucide-react'; import Image from 'next/image'; +import { TrendingDown, TrendingUp } from 'lucide-react'; + import { Badge } from './ui/badge'; +import { cn, formatPercentage, formatCurrency } from '@/lib/utils'; export default function CoinHeader({ livePriceChangePercentage24h, @@ -14,111 +15,74 @@ export default function CoinHeader({ priceChange24h, }: LiveCoinHeaderProps) { const isTrendingUp = livePriceChangePercentage24h > 0; + const isThirtyDayUp = priceChangePercentage30d > 0; + const isPriceChangeUp = priceChange24h > 0; + + const stats = [ + { + label: 'Today', + value: livePriceChangePercentage24h, + isUp: isTrendingUp, + formatter: formatPercentage, + showIcon: true, + }, + { + label: '30 Days', + value: priceChangePercentage30d, + isUp: isThirtyDayUp, + formatter: formatPercentage, + showIcon: true, + }, + { + label: 'Price Change (24h)', + value: priceChange24h, + isUp: isPriceChangeUp, + formatter: formatCurrency, + showIcon: false, + }, + ]; return ( -

- {name ? ( -

{name}

{formatPrice(livePrice)}

- - {formatPercentage(livePriceChangePercentage24h)} - {isTrendingUp ? : } - (24h) - -

Today

0, - 'text-red-500': livePriceChangePercentage24h < 0, - })} - > -

{formatPercentage(livePriceChangePercentage24h)}

- {isTrendingUp ? ( - - ) : ( - - )} -

{name}

30 Days

0, - 'text-red-500': priceChangePercentage30d < 0, - })} - > -

{formatPercentage(priceChangePercentage30d)}

- {isTrendingUp ? ( +

+ +

{formatCurrency(livePrice)}

+ + {formatPercentage(livePriceChangePercentage24h)} + {isTrendingUp ? : } + (24h) + +

+ +

+
{stat.label}
+ +
+
{stat.formatter(stat.value)}
+ {stat.showIcon && + (stat.isUp ? ( ) : ( - )} -
-

- -

Price Change (24h)

0, - 'text-red-500': priceChange24h < 0, - })} - > - {formatPrice(priceChange24h)} -

- ) : ( - <> -

+ ))}

- {[1, 2, 3].map((i) => ( -

- {i === 1 ? 'Today' : i === 2 ? 'Market Cap' : 'Volume 24h'} -

- ))} -

- - )} + + ))} +

); } diff --git a/components/CoinsPagination.tsx b/components/CoinsPagination.tsx index f23847b..78065c3 100644 --- a/components/CoinsPagination.tsx +++ b/components/CoinsPagination.tsx @@ -9,91 +9,48 @@ import { PaginationNext, PaginationPrevious, } from '@/components/ui/pagination'; -import { cn } from '@/lib/utils'; +import { buildPageNumbers, cn, ELLIPSIS } from '@/lib/utils'; export default function CoinsPagination({ currentPage, totalPages, hasMorePages, -}: { - currentPage: number; - totalPages: number; - hasMorePages: boolean; -}) { +}: Pagination) { const router = useRouter(); const handlePageChange = (page: number) => { router.push(`/coins?page=${page}`); }; - // Generate page numbers to display - const getPageNumbers = () => { - const pages: (number | string)[] = []; - const showPages = 5; // Number of page buttons to show - - if (totalPages <= showPages) { - // Show all pages if total is less than or equal to showPages - for (let i = 1; i <= totalPages; i++) { - pages.push(i); - } - } else { - pages.push(1); - - // Calculate start and end of middle pages - const start = Math.max(2, currentPage - 1); - const end = Math.min(totalPages - 1, currentPage + 1); - - // Add ellipsis after first page if needed - if (start > 2) { - pages.push('...'); - } - - // Add middle pages - for (let i = start; i <= end; i++) { - pages.push(i); - } - - // Add ellipsis before last page if needed - if (end < totalPages - 1) { - pages.push('...'); - } - - pages.push(totalPages); - } - - return pages; - }; - - const pageNumbers = getPageNumbers(); + const pageNumbers = buildPageNumbers(currentPage, totalPages); const isLastPage = !hasMorePages || currentPage === totalPages; return ( - - - + + + currentPage > 1 && handlePageChange(currentPage - 1)} className={ currentPage === 1 - ? 'pointer-events-none opacity-50' - : 'cursor-pointer' + ? 'control-disabled' + : 'control-button' } /> -

{pageNumbers.map((page, index) => ( - {page === '...' ? ( - ... + {page === ELLIPSIS ? ( + ... ) : ( handlePageChange(page as number)} + onClick={() => handlePageChange(page)} className={cn( - `hover:!bg-dark-400 rounded-sm text-base cursor-pointer`, + 'page-link', { - '!bg-green-500 text-dark-900 font-semibold': - currentPage === page, + 'page-link-active': currentPage === page, } )} isActive={currentPage === page} @@ -105,11 +62,11 @@ export default function CoinsPagination({ ))}

- + !isLastPage && handlePageChange(currentPage + 1)} className={ - isLastPage ? 'pointer-events-none opacity-50' : 'cursor-pointer' + isLastPage ? 'control-disabled' : 'control-button' } /> diff --git a/components/Converter.tsx b/components/Converter.tsx deleted file mode 100644 index f1b9660..0000000 --- a/components/Converter.tsx +++ /dev/null @@ -1,83 +0,0 @@ -'use client'; - -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '@/components/ui/select'; -import Image from 'next/image'; -import { useState } from 'react'; -import { Input } from './ui/input'; -import { formatPrice } from '@/lib/utils'; - -export const Converter = ({ symbol, icon, priceList }: ConverterProps) => { - const [currency, setCurrency] = useState('usd'); - const [amount, setAmount] = useState('10'); - - // Calculate converted price - const convertedPrice = (parseFloat(amount) || 0) * (priceList[currency] || 0); - - return ( -

- setAmount(e.target.value)} - className='converter-input' - /> -

- {symbol.toUpperCase()} -

- -

- -

- {formatPrice(convertedPrice, 2, currency, false)} -

- -

- ); -}; diff --git a/components/DataTable.tsx b/components/DataTable.tsx new file mode 100644 index 0000000..475d733 --- /dev/null +++ b/components/DataTable.tsx @@ -0,0 +1,66 @@ +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from '@/components/ui/table'; +import { cn } from '@/lib/utils'; + +export const DataTable = ({ + columns, + data, + rowKey, + tableClassName, + headerClassName, + headerRowClassName, + headerCellClassName, + bodyRowClassName, + bodyCellClassName, +}: DataTableProps) => { + return ( + + + + {columns.map((column, columnIndex) => ( + + {column.header} + + ))} + + + + {data.map((row, rowIndex) => ( + + {columns.map((column, columnIndex) => ( + + {column.cell(row, rowIndex)} + + ))} + + ))} + +

+ ); +}; diff --git a/components/Header.tsx b/components/Header.tsx index 18ab0ff..4afb62a 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -4,19 +4,14 @@ import Image from 'next/image'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; import { cn } from '@/lib/utils'; -import { navItems } from '@/lib/constants'; import { SearchModal } from './SearchModal'; -export const Header = ({ - trendingCoins = [], -}: { - trendingCoins: TrendingCoin[]; -}) => { +export const Header = ({ trendingCoins = [] }: HeaderProps) => { const pathname = usePathname(); return ( -

diff --git a/components/LiveDataWrapper.tsx b/components/LiveDataWrapper.tsx index 2a60e8f..a7b71d7 100644 --- a/components/LiveDataWrapper.tsx +++ b/components/LiveDataWrapper.tsx @@ -1,107 +1,106 @@ 'use client'; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from '@/components/ui/table'; +import { DataTable } from '@/components/DataTable'; import CoinHeader from './CoinHeader'; import { Separator } from './ui/separator'; import CandlestickChart from './CandlestickChart'; -import { formatPrice, timeAgo } from '@/lib/utils'; +import { formatCurrency, timeAgo } from '@/lib/utils'; import { useCoinGeckoWebSocket } from '@/hooks/useCoinGeckoWebSocket'; +import { useState } from 'react'; export default function LiveDataWrapper({ coinId, - pool, + poolId, coin, coinOHLCData, children, }: LiveDataProps) { + const [liveInterval, setLiveInterval] = useState<'1s' | '1m'>('1s'); const { price, trades, ohlcv } = useCoinGeckoWebSocket({ coinId, - poolId: pool.id, - coinOHLCData, + poolId, + liveInterval, }); + const tradeColumns: DataTableColumn[] = [ + { + header: 'Price', + cellClassName: 'price-cell', + cell: (trade) => (trade.price ? formatCurrency(trade.price) : '-'), + }, + { + header: 'Amount', + cellClassName: 'amount-cell', + cell: (trade) => trade.amount?.toFixed(4) ?? '-', + }, + { + header: 'Value', + cellClassName: 'value-cell', + cell: (trade) => (trade.value ? formatCurrency(trade.value) : '-'), + }, + { + header: 'Buy/Sell', + cellClassName: 'type-cell', + cell: (trade) => ( + + {trade.type === 'b' ? 'Buy' : 'Sell'} + + ), + }, + { + header: 'Time', + cellClassName: 'time-cell', + cell: (trade) => (trade.timestamp ? timeAgo(trade.timestamp) : '-'), + }, + ]; + return ( -

- + - {/* Trend Overview */} -

Trend Overview

- +

+ +

Trend Overview

- + - {/* Recent Trades */} -

Recent Trades

- {trades.length > 0 ? ( - - - - Price - Amount - Value - - Buy/Sell - - Time - - - - {trades?.map((trade, index) => ( - - - {trade.price ? formatPrice(trade.price) : '-'} - - - {trade.amount?.toFixed(4) ?? '-'} - - - {trade.value ? formatPrice(trade.value) : '-'} - - - - {trade.type === 'b' ? 'Buy' : 'Sell'} - - - - {trade.timestamp ? timeAgo(trade.timestamp) : '-'} - - - ))} - -

- ) : ( -

- No recent trades -

- )} + {tradeColumns && ( +

Recent Trades

+ index} + />

+ )} {children}

diff --git a/components/SearchModal.tsx b/components/SearchModal.tsx index 1cff6a0..14bdc53 100644 --- a/components/SearchModal.tsx +++ b/components/SearchModal.tsx @@ -12,12 +12,57 @@ import { } from '@/components/ui/command'; import { Button } from './ui/button'; import { searchCoins } from '@/lib/coingecko.actions'; -import { Search as SearchIcon, TrendingUp } from 'lucide-react'; +import { Search as SearchIcon, TrendingDown, TrendingUp } from 'lucide-react'; import { useState } from 'react'; -import { cn, formatPercentage, formatPrice } from '@/lib/utils'; +import { cn, formatPercentage } from '@/lib/utils'; import useSWR from 'swr'; import { useDebounce, useKey } from 'react-use'; +const TRENDING_LIMIT = 8; +const SEARCH_LIMIT = 10; + +const SearchItem = ({ coin, onSelect, isActiveName }: SearchItemProps) => { + const isSearchCoin = + typeof coin.data?.price_change_percentage_24h === 'number'; + + const change = isSearchCoin + ? (coin as SearchCoin).data?.price_change_percentage_24h ?? 0 + : (coin as TrendingCoin['item']).data.price_change_percentage_24h?.usd ?? 0; + + return ( + onSelect(coin.id)} + className='search-item' + > +

+ +

+ {coin.name} +

{coin.symbol}

+ +

0, + 'text-red-500': change < 0, + })} + > + {change > 0 ? ( + + ) : ( + + )} + {formatPercentage(Math.abs(change))} +

+ + ); +}; + export const SearchModal = ({ initialTrendingCoins = [], }: { @@ -25,6 +70,7 @@ export const SearchModal = ({ }) => { const router = useRouter(); const [open, setOpen] = useState(false); + const [searchQuery, setSearchQuery] = useState(''); const [debouncedQuery, setDebouncedQuery] = useState(''); @@ -36,10 +82,9 @@ export const SearchModal = ({ [searchQuery] ); - const { - data: searchResults = [], - isValidating: isSearching, - } = useSWR( + const { data: searchResults = [], isValidating: isSearching } = useSWR< + SearchCoin[] + >( debouncedQuery ? ['coin-search', debouncedQuery] : null, ([, query]) => searchCoins(query as string), { @@ -48,7 +93,8 @@ export const SearchModal = ({ ); useKey( - (event) => event.key?.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey), + (event) => + event.key?.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey), (event) => { event.preventDefault(); setOpen((prev) => !prev); @@ -65,155 +111,78 @@ export const SearchModal = ({ }; const hasQuery = debouncedQuery.length > 0; - const trendingCoins = initialTrendingCoins; + const trendingCoins = initialTrendingCoins.slice(0, TRENDING_LIMIT); const showTrending = !hasQuery && trendingCoins.length > 0; + const isSearchEmpty = !isSearching && !hasQuery && !showTrending; + const isTrendingListVisible = !isSearching && showTrending; + + const isNoResults = !isSearching && hasQuery && searchResults.length === 0; + const isResultsVisible = !isSearching && hasQuery && searchResults.length > 0; + return ( - <> - - {/* Dialog */} -

- - {isSearching &&

Searching...

} + + {isSearching &&

Searching...

} - {!isSearching && !hasQuery && !showTrending && ( -

Type to search for coins...

+ {isSearchEmpty && ( +

Type to search for coins...

)} - {!isSearching && showTrending && ( - - - Trending Coins -

- } - className='bg-dark-500' - > - {trendingCoins.slice(0, 8).map((trendingCoin) => { - const coin = trendingCoin.item; - - return ( - handleSelect(coin.id)} - className='search-item' - > -

{coin.name}

{coin.symbol}

- - - {formatPrice(coin.data.price)} - - -

0, - 'text-red-500': - coin.data.price_change_percentage_24h.usd < 0, - })} - > - {formatPercentage( - coin.data.price_change_percentage_24h.usd - )} -

- - ); - })} + {isTrendingListVisible && ( + + {trendingCoins.map(({ item }) => ( + + ))} )} - {!isSearching && hasQuery && searchResults.length === 0 && ( - No coins found. - )} + {isNoResults && No coins found.} - {!isSearching && hasQuery && searchResults.length > 0 && ( + {isResultsVisible && ( Search Results

} - className='search-group' + heading={

Search Results

} + className='group' > - {searchResults.slice(0, 10).map((coin) => { - return ( - handleSelect(coin.id)} - className='search-item' - > -

{coin.name}

{coin.symbol}

- - {coin.data?.price && ( - - {formatPrice(coin.data.price)} - - )} - -

0, - 'text-red-500': - coin.data?.price_change_percentage_24h < 0, - })} - > - {formatPercentage(coin.data?.price_change_percentage_24h)} -

- - ); - })} + {searchResults.slice(0, SEARCH_LIMIT).map((coin) => ( + + ))} )} - +

); }; diff --git a/components/coin-details/Converter.tsx b/components/coin-details/Converter.tsx new file mode 100644 index 0000000..2a4ac7e --- /dev/null +++ b/components/coin-details/Converter.tsx @@ -0,0 +1,78 @@ +'use client'; + +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; +import Image from 'next/image'; +import { useState } from 'react'; +import { Input } from '../ui/input'; +import { formatCurrency } from '@/lib/utils'; + +export const Converter = ({ symbol, icon, priceList }: ConverterProps) => { + const [currency, setCurrency] = useState('usd'); + const [amount, setAmount] = useState('10'); + + const convertedPrice = (parseFloat(amount) || 0) * (priceList[currency] || 0); + + return ( +

{symbol.toUpperCase()} Converter

+ +

+ setAmount(e.target.value)} + className='input' + /> +

{symbol.toUpperCase()}

+ +

{formatCurrency(convertedPrice, 2, currency, false)}

+ + +

+ ); +}; diff --git a/components/coin-details/TopGainersLosers.tsx b/components/coin-details/TopGainersLosers.tsx new file mode 100644 index 0000000..ec1fc1a --- /dev/null +++ b/components/coin-details/TopGainersLosers.tsx @@ -0,0 +1,54 @@ +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; +import CoinCard from '../CoinCard'; +import { fetcher } from '@/lib/coingecko.actions'; + +const TAB_CONFIG = [ + { value: 'top-gainers', label: 'Top Gainers', key: 'top_gainers' }, + { value: 'top-losers', label: 'Top Losers', key: 'top_losers' }, +] as const; + +const renderCoinCard = (coin: TopGainersLosersResponse) => ( + +); + +export const TopGainersLosers = async () => { + const data = await fetcher<{ + top_gainers: TopGainersLosersResponse[]; + top_losers: TopGainersLosersResponse[]; + }>('/coins/top_gainers_losers', { vs_currency: 'usd' }); + + const topGainersLosers = { + top_gainers: data.top_gainers?.slice(0, 4) ?? [], + top_losers: data.top_losers?.slice(0, 4) ?? [], + }; + + return ( + + + {TAB_CONFIG.map((tab) => ( + + {tab.label} + + ))} + + + {TAB_CONFIG.map((tab) => ( + + {topGainersLosers[tab.key].map(renderCoinCard)} + + ))} + + ); +}; diff --git a/components/home/Categories.tsx b/components/home/Categories.tsx new file mode 100644 index 0000000..6f662d8 --- /dev/null +++ b/components/home/Categories.tsx @@ -0,0 +1,77 @@ +import { TrendingDown, TrendingUp } from 'lucide-react'; +import Image from 'next/image'; + +import { DataTable } from '@/components/DataTable'; +import { fetcher } from '@/lib/coingecko.actions'; +import { cn, formatPercentage, formatCurrency } from '@/lib/utils'; + +export const Categories = async () => { + const categories = await fetcher('/coins/categories'); + + const columns: DataTableColumn[] = [ + { + header: 'Category', + cellClassName: 'category-cell', + cell: (category) => category.name, + }, + { + header: 'Top Gainers', + cellClassName: 'top-gainers-cell', + cell: (category) => + category.top_3_coins.map((coin: string) => ( + Coin image

+ )), + }, + { + header: '24h Change', + cellClassName: 'change-header-cell', + cell: (category) => { + const isTrendingUp = category.market_cap_change_24h > 0; + + return ( +

0, + 'text-red-500': category.market_cap_change_24h < 0, + })} + > +

{formatPercentage(category.market_cap_change_24h)}

+ {isTrendingUp ? ( + + ) : ( + + )} +

+ ); + }, + }, + { + header: 'Market Cap', + cellClassName: 'market-cap-cell', + cell: (category) => formatCurrency(category.market_cap), + }, + { + header: '24h Volume', + cellClassName: 'volume-cell', + cell: (category) => formatCurrency(category.volume_24h), + }, + ]; + + return ( +

Top Categories

+ index} + /> +

+ ); +}; diff --git a/components/home/CoinOverview.tsx b/components/home/CoinOverview.tsx new file mode 100644 index 0000000..75d1673 --- /dev/null +++ b/components/home/CoinOverview.tsx @@ -0,0 +1,40 @@ +import Image from 'next/image'; + +import CandlestickChart from '../CandlestickChart'; +import { fetcher } from '@/lib/coingecko.actions'; +import { formatCurrency } from '@/lib/utils'; + +export const CoinOverview = async () => { + const [coinData, coinOHLCData] = await Promise.all([ + fetcher('/coins/bitcoin', { + dex_pair_format: 'contract_address', + }), + fetcher('/coins/bitcoin/ohlc', { + vs_currency: 'usd', + days: 1, + interval: 'hourly', + precision: 'full', + }), + ]); + + return ( +

+ +

+ {coinData.name} / {coinData.symbol.toUpperCase()} +

{formatCurrency(coinData.market_data.current_price.usd)}

+ +

+ ); +}; diff --git a/components/home/Fallback.tsx b/components/home/Fallback.tsx new file mode 100644 index 0000000..cceb446 --- /dev/null +++ b/components/home/Fallback.tsx @@ -0,0 +1,117 @@ +import { DataTable } from '@/components/DataTable'; +import { Skeleton } from '../ui/skeleton'; + +export const CategoriesFallback = () => ( +

Top Categories

+ , + }, + { + header: 'Top Gainers', + cellClassName: 'top-gainers-cell', + cell: () => + Array.from({ length: 3 }).map((_, coinIndex) => ( + + )), + }, + { + header: '24h Change', + cellClassName: 'change-header-cell', + cell: () => ( +

+ + +

+ ), + }, + { + header: 'Market Cap', + cellClassName: 'market-cap-cell', + cell: () => , + }, + { + header: '24h Volume', + cellClassName: 'volume-cell', + cell: () => , + }, + ]} + data={Array.from({ length: 6 })} + rowKey={(_, index) => index} + /> +

+); + +export const CoinOverviewFallback = () => ( +

+ +

+ + +

+ {Array.from({ length: 7 }).map((_, index) => ( + + ))} +

+ +

+); + +export const TrendingCoinsFallback = () => ( + +); diff --git a/components/home/TrendingCoins.tsx b/components/home/TrendingCoins.tsx new file mode 100644 index 0000000..3adaab4 --- /dev/null +++ b/components/home/TrendingCoins.tsx @@ -0,0 +1,78 @@ +import Image from 'next/image'; +import Link from 'next/link'; +import { TrendingDown, TrendingUp } from 'lucide-react'; + +import { DataTable } from '@/components/DataTable'; +import { fetcher } from '@/lib/coingecko.actions'; +import { cn, formatPercentage, formatCurrency } from '@/lib/utils'; + +export const TrendingCoins = async () => { + const trendingCoins = await fetcher<{ coins: TrendingCoin[] }>( + '/search/trending', + undefined, + 300 + ); + + const columns: DataTableColumn[] = [ + { + header: 'Name', + cellClassName: 'name-cell', + cell: (coin) => { + const item = coin.item; + + return ( + +

{item.name}

+ + ); + }, + }, + { + header: '24h Change', + cellClassName: 'change-cell', + cell: (coin) => { + const item = coin.item; + const isTrendingUp = item.data.price_change_percentage_24h.usd > 0; + + return ( +

{formatPercentage(item.data.price_change_percentage_24h.usd)}

+ {isTrendingUp ? ( + + ) : ( + + )} +

+ ); + }, + }, + { + header: 'Price', + cellClassName: 'price-cell', + cell: (coin) => { + return formatCurrency(coin.item.data.price); + }, + }, + ]; + + return ( + + ); +}; diff --git a/components/ui/pagination.tsx b/components/ui/pagination.tsx index 1dcfb0c..586028f 100644 --- a/components/ui/pagination.tsx +++ b/components/ui/pagination.tsx @@ -6,7 +6,7 @@ import { } from "lucide-react" import { cn } from "@/lib/utils" -import { buttonVariants, type Button } from "@/components/ui/button" +import { buttonVariants } from "@/components/ui/button" function Pagination({ className, ...props }: React.ComponentProps<"nav">) { return ( @@ -37,11 +37,6 @@ function PaginationItem({ ...props }: React.ComponentProps<"li">) { return

} -type PaginationLinkProps = { - isActive?: boolean -} & Pick, "size"> & - React.ComponentProps<"a"> - function PaginationLink({ className, isActive, diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx new file mode 100644 index 0000000..497ba5e --- /dev/null +++ b/components/ui/tabs.tsx @@ -0,0 +1,66 @@ +"use client" + +import * as React from "react" +import * as TabsPrimitive from "@radix-ui/react-tabs" + +import { cn } from "@/lib/utils" + +function Tabs({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function TabsList({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function TabsTrigger({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function TabsContent({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +export { Tabs, TabsList, TabsTrigger, TabsContent } diff --git a/hooks/useCoinGeckoWebSocket.ts b/hooks/useCoinGeckoWebSocket.ts index c1e1b46..b07802a 100644 --- a/hooks/useCoinGeckoWebSocket.ts +++ b/hooks/useCoinGeckoWebSocket.ts @@ -1,195 +1,143 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -import { useEffect, useRef, useState, useCallback } from 'react'; +import { useEffect, useRef, useState } from 'react'; const WS_BASE = `${process.env.NEXT_PUBLIC_COINGECKO_WEBSOCKET_URL}?x_cg_pro_api_key=${process.env.NEXT_PUBLIC_COINGECKO_API_KEY}`; export function useCoinGeckoWebSocket({ coinId, poolId, - coinOHLCData, + liveInterval }: UseCoinGeckoWebSocketProps): UseCoinGeckoWebSocketReturn { const wsRef = useRef(null); const subscribed = useRef>(new Set()); const [price, setPrice] = useState(null); - const [trades, setTrades] = useState([]); - const [ohlcv, setOhlcv] = useState(coinOHLCData); + const [trades, setTrades] = useState([]); + const [ohlcv, setOhlcv] = useState(null); + const [isWsReady, setIsWsReady] = useState(false); - // Track where historical data ends and live data begins - const historicalDataLength = useRef(coinOHLCData.length); + // WebSocket connection + useEffect(() => { + const ws = new WebSocket(WS_BASE); + wsRef.current = ws; + const send = (payload: Record) => + ws.send(JSON.stringify(payload)); - const handleMessage = useCallback((event: MessageEvent) => { - const ws = wsRef.current; - const msg: WebSocketMessage = JSON.parse(event.data); + const handleMessage = (event: MessageEvent) => { + const msg: WebSocketMessage = JSON.parse(event.data); - if (msg.type === 'ping') return ws?.send(JSON.stringify({ type: 'pong' })); + if (msg.type === 'ping') { + send({ type: 'pong' }); + return; + } - if (msg.type === 'confirm_subscription') { - const { channel } = JSON.parse(msg?.identifier ?? ''); - subscribed.current.add(channel); - console.log(`Subscribed to: ${channel}`); - return; - } + if (msg.type === 'confirm_subscription') { + const { channel } = JSON.parse(msg?.identifier ?? ''); + subscribed.current.add(channel); + return; + } - // C1: Price updates - if (msg.c === 'C1') { - setPrice({ - usd: msg.p ?? 0, - coin: msg.i, - price: msg.p, - change24h: msg.pp, - marketCap: msg.m, - volume24h: msg.v, - timestamp: msg.t, - }); - } + if (msg.c === 'C1') { + setPrice({ + usd: msg.p ?? 0, + coin: msg.i, + price: msg.p, + change24h: msg.pp, + marketCap: msg.m, + volume24h: msg.v, + timestamp: msg.t, + }); + } - // G2: Trade updates - if (msg.c === 'G2') { - const newTrade: TradeData = { - price: msg.pu, - value: msg.vo, - timestamp: msg.t ?? 0, - type: msg.ty, - amount: msg.to, - }; - - setTrades((prev) => { - // Prepend new trade to beginning (most recent first) - const allTrades = [newTrade, ...prev]; - return allTrades.slice(0, 10); - }); - } + if (msg.c === 'G2') { + const newTrade: Trade = { + price: msg.pu, + value: msg.vo, + timestamp: msg.t ?? 0, + type: msg.ty, + amount: msg.to, + }; - // G3: OHLCV updates - if (msg.ch === 'G3') { - setOhlcv((prev) => { - const lastCandle = prev[prev.length - 1]; + setTrades((prev) => [newTrade, ...prev].slice(0, 7)); + } - const newTimeMs = msg.t ?? 0; + if (msg.ch === 'G3') { + const timestamp = msg.t || 0; const newCandle: OHLCData = [ - newTimeMs, + timestamp, Number(msg.o ?? 0), Number(msg.h ?? 0), Number(msg.l ?? 0), Number(msg.c ?? 0), ]; - // If same timestamp, update the existing candle - if (lastCandle && lastCandle[0] === newTimeMs) { - return [...prev.slice(0, -1), newCandle]; - } - - // Only append if timestamp is newer than the last candle - if (lastCandle && newTimeMs < lastCandle[0]) { - console.warn( - 'Skipping out-of-order candle:', - newTimeMs, - 'vs', - lastCandle[0] - ); - return prev; - } - - // Keep all historical data + last 100 live candles - const historicalCount = historicalDataLength.current; - const liveCandles = prev.slice(historicalCount); - const limitedLiveCandles = [...liveCandles, newCandle].slice(-100); - - return [...prev.slice(0, historicalCount), ...limitedLiveCandles]; - }); - } - }, []); - - // WebSocket connection setup - useEffect(() => { - const ws = new WebSocket(WS_BASE); - wsRef.current = ws; + setOhlcv(newCandle); + } + }; ws.onopen = () => setIsWsReady(true); ws.onmessage = handleMessage; ws.onclose = () => setIsWsReady(false); return () => ws.close(); - }, [handleMessage]); + }, []); - const subscribe = useCallback( - (channel: string, data?: Record) => { - const ws = wsRef.current; - if (!ws || !isWsReady || subscribed.current.has(channel)) return; + // Subscribe on connection ready + useEffect(() => { + if (!isWsReady) return; + const ws = wsRef.current; + if (!ws) return; + const send = (payload: Record) => + ws.send(JSON.stringify(payload)); - ws.send( - JSON.stringify({ - command: 'subscribe', + const unsubscribeAll = () => { + subscribed.current.forEach((channel) => { + send({ + command: 'unsubscribe', identifier: JSON.stringify({ channel }), - }) - ); + }); + }); + subscribed.current.clear(); + }; - if (data) { - ws.send( - JSON.stringify({ - command: 'message', - identifier: JSON.stringify({ channel }), - data: JSON.stringify(data), - }) - ); - } - }, - [isWsReady] - ); + const subscribe = (channel: string, data?: Record) => { + if (subscribed.current.has(channel)) return; - const unsubscribeAll = useCallback(() => { - const ws = wsRef.current; - subscribed.current.forEach((channel) => { - ws?.send( - JSON.stringify({ - command: 'unsubscribe', - identifier: JSON.stringify({ channel }), - }) - ); - }); - subscribed.current.clear(); - }, []); + send({ command: 'subscribe', identifier: JSON.stringify({ channel }) }); - // Subscribe to channels when connected - useEffect(() => { - if (!isWsReady) return; + if (data) { + send({ + command: 'message', + identifier: JSON.stringify({ channel }), + data: JSON.stringify(data), + }); + } + }; - let active = true; - (async () => { + queueMicrotask(() => { setPrice(null); setTrades([]); - setOhlcv(coinOHLCData); - historicalDataLength.current = coinOHLCData.length; - - if (!active) return; - - unsubscribeAll(); + setOhlcv(null); + }); - // Subscribe to price updates - subscribe('CGSimplePrice', { coin_id: [coinId], action: 'set_tokens' }); + unsubscribeAll(); - // Subscribe to trade and OHLCV updates - const wsPools = [poolId.replace('_', ':')]; - if (wsPools.length) { - subscribe('OnchainTrade', { - 'network_id:pool_addresses': wsPools, - action: 'set_pools', - }); + subscribe('CGSimplePrice', { coin_id: [coinId], action: 'set_tokens' }); - subscribe('OnchainOHLCV', { - 'network_id:pool_addresses': wsPools, - interval: '1s', - action: 'set_pools', - }); - } - })(); + const poolAddress = poolId.replace('_', ':'); + if (poolAddress) { + subscribe('OnchainTrade', { + 'network_id:pool_addresses': [poolAddress], + action: 'set_pools', + }); - return () => { - active = false; - }; - }, [coinId, poolId, isWsReady, coinOHLCData, subscribe, unsubscribeAll]); + subscribe('OnchainOHLCV', { + 'network_id:pool_addresses': [poolAddress], + interval: liveInterval, + action: 'set_pools', + }); + } + }, [coinId, poolId, isWsReady, liveInterval]); return { price, diff --git a/lib/coingecko.actions.ts b/lib/coingecko.actions.ts index 539d406..3084bef 100644 --- a/lib/coingecko.actions.ts +++ b/lib/coingecko.actions.ts @@ -1,181 +1,119 @@ 'use server'; -const baseUrl = process.env.COINGECKO_BASE_URL!; -const header = { - method: 'GET', - headers: { - 'x-cg-pro-api-key': process.env.COINGECKO_API_KEY!, - }, - cache: 'no-store' as RequestCache, -}; - -export async function getCoinList(page: number = 1, perPage: number = 50) { - const params = new URLSearchParams({ - vs_currency: 'usd', - order: 'market_cap_desc', - per_page: perPage.toString(), - page: page.toString(), - sparkline: 'false', - locale: 'en', - price_change_percentage: '24h', - }); +import qs from 'query-string'; - const res = await fetch(`${baseUrl}/coins/markets?${params}`, header); +const BASE_URL = process.env.COINGECKO_BASE_URL; +const API_KEY = process.env.COINGECKO_API_KEY; - if (!res.ok) throw new Error('Failed to fetch CoinGecko API data'); - return res.json(); +if (!BASE_URL) { + throw new Error('Missing COINGECKO_BASE_URL environment variable'); } -export async function getCategories() { - const res = await fetch( - `${baseUrl}/coins/categories`, - header - ); - - if (!res.ok) throw new Error('Failed to fetch top gainers/losers'); - - const data = await res.json(); - return data.slice(0, 10) || []; +if (!API_KEY) { + throw new Error('Missing COINGECKO_API_KEY environment variable'); } -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 fetcher( + endpoint: string, + params?: QueryParams, + revalidate = 60 +): Promise { + const url = qs.stringifyUrl( + { + url: `${BASE_URL}${endpoint}`, + query: params, + }, + { skipEmptyString: true, skipNull: true } + ); -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(), + const response = await fetch(url, { + headers: { + 'x-cg-pro-api-key': API_KEY, + 'Content-Type': 'application/json', + } as Record, + next: { revalidate }, }); - 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); - - if (!res.ok) throw new Error('Failed to fetch trending coins'); - - const data = await res.json(); - return data.coins || []; -} - -export async function getTopGainersLosers() { - const res = await fetch( - `${baseUrl}/coins/top_gainers_losers?vs_currency=usd`, - header - ); - - if (!res.ok) throw new Error('Failed to fetch top gainers/losers'); + if (!response.ok) { + const errorBody: CoinGeckoErrorBody = await response + .json() + .catch(() => ({})); + throw new Error( + `API Error ${response.status}: ${errorBody.error || response.statusText}` + ); + } - const data = await res.json(); - return { - top_gainers: data.top_gainers.slice(0, 4) || [], - top_losers: data.top_losers.slice(0, 4) || [], - }; + return response.json(); } export async function searchCoins(query: string): Promise { - if (!query || query.trim().length === 0) return []; - - const res = await fetch( - `${baseUrl}/search?query=${encodeURIComponent(query)}`, - header - ); - - if (!res.ok) throw new Error('Failed to fetch search data'); + if (!query?.trim()) return []; - const data = await res.json(); - const coins = data.coins || []; - - // Get price data for the search results (limit to first 10) - const coinIds = coins.slice(0, 10).map((coin: SearchCoin) => coin.id); + const searchData = await fetcher<{ coins: SearchCoin[] }>('/search', { + query, + }); + const coins = searchData.coins?.slice(0, 10) ?? []; - if (coinIds.length === 0) return []; + if (coins.length === 0) return []; try { - const priceParams = new URLSearchParams({ + const coinIds = coins.map((coin) => coin.id).join(','); + const priceData = await fetcher('/coins/markets', { vs_currency: 'usd', - ids: coinIds.join(','), - order: 'market_cap_desc', - per_page: '10', - page: '1', - sparkline: 'false', + ids: coinIds, }); + const priceMap = new Map(priceData.map((coin) => [coin.id, coin])); - const priceRes = await fetch( - `${baseUrl}/coins/markets?${priceParams}`, - header - ); - - if (priceRes.ok) { - const priceData = await priceRes.json(); - - // Create a map of coin prices - const priceMap = new Map( - priceData.map((coin: CoinMarketData) => [ - coin.id, - { - price: coin.current_price, - price_change_percentage_24h: coin.price_change_percentage_24h, - }, - ]) - ); - - return coins.slice(0, 10).map((coin: SearchCoin) => ({ + return coins.map((coin) => { + const market = priceMap.get(coin.id); + return { ...coin, - data: priceMap.get(coin.id) || undefined, - })); - } + data: { + price: market?.current_price, + price_change_percentage_24h: market?.price_change_percentage_24h ?? 0, + }, + }; + }); } catch (error) { - console.error('Failed to fetch price data for search results:', error); + console.error('Search enrichment failed:', error); + return coins.map((coin) => ({ + ...coin, + data: { + price: undefined, + price_change_percentage_24h: 0, + }, + })); } - - return coins.slice(0, 10); } -export async function fetchPools( - id: string -): Promise<{ id: string; address: string; name: string; network: string }> { - try { - // Fetch onchain data for the coin which includes pool information - const res = await fetch( - `${baseUrl}/onchain/search/pools?query=${encodeURIComponent(id)}`, - header +export async function getPools( + id: string, + network?: string | null, + contractAddress?: string | null +): Promise { + const fallback: PoolData = { + id: '', + address: '', + name: '', + network: '', + }; + + if (network && contractAddress) { + const poolData = await fetcher<{ data: PoolData[] }>( + `/onchain/networks/${network}/tokens/${contractAddress}/pools` ); - if (!res.ok) { - console.warn(`No pool data found for ${id}`); - return { id: '', address: '', name: '', network: '' }; - } + return poolData.data?.[0] ?? fallback; + } - const data = await res.json(); - const pool = data.data[0]; + try { + const poolData = await fetcher<{ data: PoolData[] }>( + '/onchain/search/pools', + { query: id } + ); - return { - id: pool.id as string, - address: pool.attributes.address as string, - name: pool.attributes.name as string, - network: pool.id.split('_')[0] as string, - }; - } catch (error) { - console.error('Failed to fetch pools', error); - return { id: '', address: '', name: '', network: '' }; + return poolData.data?.[0] ?? fallback; + } catch { + return fallback; } } diff --git a/lib/constants.ts b/lib/constants.ts index 90b80a7..e744ad9 100644 --- a/lib/constants.ts +++ b/lib/constants.ts @@ -15,7 +15,7 @@ export const navItems = [ href: '/', }, { - label: 'Coins', + label: 'All Coins', href: '/coins', }, ]; @@ -114,11 +114,7 @@ export const PERIOD_BUTTONS: { value: Period; label: string }[] = [ { value: 'max', label: 'Max' }, ]; -// Test Data -export const orderBook = [ - { price: '0.031 BTC', amountBTC: '0.5 BTC', amountETH: '$15,000' }, - { price: '0.0305 BTC', amountBTC: '1.0 BTC', amountETH: '$30,000' }, - { price: '0.0300 BTC', amountBTC: '2.0 BTC', amountETH: '$60,000' }, - { price: '0.0295 BTC', amountBTC: '1.5 BTC', amountETH: '$45,000' }, - { price: '0.0290 BTC', amountBTC: '3.0 BTC', amountETH: '$90,000' }, +export const LIVE_INTERVAL_BUTTONS: { value: '1s' | '1m'; label: string }[] = [ + { value: '1s', label: '1s' }, + { value: '1m', label: '1m' }, ]; diff --git a/lib/utils.ts b/lib/utils.ts index 0ebb529..a4c384c 100644 --- a/lib/utils.ts +++ b/lib/utils.ts @@ -1,16 +1,16 @@ import { clsx, type ClassValue } from 'clsx'; -import { CandlestickData, Time } from 'lightweight-charts'; +import { Time } from 'lightweight-charts'; import { twMerge } from 'tailwind-merge'; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } -export function formatPrice( +export function formatCurrency( value: number | null | undefined, digits?: number, currency?: string, - showSymbol?: boolean, + showSymbol?: boolean ) { if (value === null || value === undefined || isNaN(value)) { return showSymbol !== false ? '$0.00' : '0.00'; @@ -24,10 +24,10 @@ export function formatPrice( maximumFractionDigits: digits ?? 2, }); } - return value.toLocaleString(undefined, { - minimumFractionDigits: digits ?? 2, - maximumFractionDigits: digits ?? 2, - }); + return value.toLocaleString(undefined, { + minimumFractionDigits: digits ?? 2, + maximumFractionDigits: digits ?? 2, + }); } export function formatPercentage(change: number | null | undefined): string { @@ -48,16 +48,6 @@ export function trendingClasses(value: number) { }; } -export const convertOHLCData = (rawData: OHLCData[]): CandlestickData[] => { - return rawData.map(([timestampMs, open, high, low, close]) => ({ - time: Math.floor(timestampMs / 1000) as Time, - open: Number(open), - high: Number(high), - low: Number(low), - close: Number(close), - })); -}; - export function timeAgo(date: string | number | Date): string { const now = new Date(); const past = new Date(date); @@ -77,4 +67,56 @@ export function timeAgo(date: string | number | Date): string { // Format date as YYYY-MM-DD return past.toISOString().split('T')[0]; -} \ No newline at end of file +} + +export function convertOHLCData(data: OHLCData[]) { + return data + .map((d) => ({ + time: d[0] as Time, // ensure seconds, not ms + open: d[1], + high: d[2], + low: d[3], + close: d[4], + })) + .filter( + (item, index, arr) => index === 0 || item.time !== arr[index - 1].time + ); +} + +export const ELLIPSIS = 'ellipsis' as const; +export const buildPageNumbers = ( + currentPage: number, + totalPages: number +): (number | typeof ELLIPSIS)[] => { + const MAX_VISIBLE_PAGES = 5; + + const pages: (number | typeof ELLIPSIS)[] = []; + + if (totalPages <= MAX_VISIBLE_PAGES) { + for (let i = 1; i <= totalPages; i += 1) { + pages.push(i); + } + return pages; + } + + pages.push(1); + + const start = Math.max(2, currentPage - 1); + const end = Math.min(totalPages - 1, currentPage + 1); + + if (start > 2) { + pages.push(ELLIPSIS); + } + + for (let i = start; i <= end; i += 1) { + pages.push(i); + } + + if (end < totalPages - 1) { + pages.push(ELLIPSIS); + } + + pages.push(totalPages); + + return pages; +}; diff --git a/package-lock.json b/package-lock.json index 9cb970b..98f0d9f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,12 +12,14 @@ "@radix-ui/react-select": "^2.2.6", "@radix-ui/react-separator": "^1.1.8", "@radix-ui/react-slot": "^1.2.4", + "@radix-ui/react-tabs": "^1.1.13", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", "lightweight-charts": "^5.0.9", "lucide-react": "^0.559.0", "next": "16.0.8", + "query-string": "^9.3.1", "react": "19.2.1", "react-dom": "19.2.1", "react-use": "^17.6.0", @@ -1669,6 +1671,37 @@ } } }, + "node_modules/@radix-ui/react-roving-focus": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz", + "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.3", + "@radix-ui/react-collection": "1.1.7", + "@radix-ui/react-compose-refs": "1.1.2", + "@radix-ui/react-context": "1.1.2", + "@radix-ui/react-direction": "1.1.1", + "@radix-ui/react-id": "1.1.1", + "@radix-ui/react-primitive": "2.1.3", + "@radix-ui/react-use-callback-ref": "1.1.1", + "@radix-ui/react-use-controllable-state": "1.2.2" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-select": { "version": "2.2.6", "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz", @@ -1794,6 +1827,36 @@ } } }, + "node_modules/@radix-ui/react-tabs": { + "version": "1.1.13", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz", + "integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.3", + "@radix-ui/react-context": "1.1.2", + "@radix-ui/react-direction": "1.1.1", + "@radix-ui/react-id": "1.1.1", + "@radix-ui/react-presence": "1.1.5", + "@radix-ui/react-primitive": "2.1.3", + "@radix-ui/react-roving-focus": "1.1.11", + "@radix-ui/react-use-controllable-state": "1.2.2" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-use-callback-ref": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz", @@ -3536,6 +3599,15 @@ } } }, + "node_modules/decode-uri-component": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz", + "integrity": "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==", + "license": "MIT", + "engines": { + "node": ">=14.16" + } + }, "node_modules/deep-is": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", @@ -4396,6 +4468,18 @@ "node": ">=8" } }, + "node_modules/filter-obj": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz", + "integrity": "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==", + "license": "MIT", + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -6295,6 +6379,23 @@ "node": ">=6" } }, + "node_modules/query-string": { + "version": "9.3.1", + "resolved": "https://registry.npmjs.org/query-string/-/query-string-9.3.1.tgz", + "integrity": "sha512-5fBfMOcDi5SA9qj5jZhWAcTtDfKF5WFdd2uD9nVNlbxVv1baq65aALy6qofpNEGELHvisjjasxQp7BlM9gvMzw==", + "license": "MIT", + "dependencies": { + "decode-uri-component": "^0.4.1", + "filter-obj": "^5.1.0", + "split-on-first": "^3.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -6899,6 +7000,18 @@ "node": ">=0.10.0" } }, + "node_modules/split-on-first": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-3.0.0.tgz", + "integrity": "sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==", + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/stable-hash": { "version": "0.0.5", "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz", diff --git a/package.json b/package.json index e42b1ed..5b03919 100644 --- a/package.json +++ b/package.json @@ -13,12 +13,14 @@ "@radix-ui/react-select": "^2.2.6", "@radix-ui/react-separator": "^1.1.8", "@radix-ui/react-slot": "^1.2.4", + "@radix-ui/react-tabs": "^1.1.13", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", "lightweight-charts": "^5.0.9", "lucide-react": "^0.559.0", "next": "16.0.8", + "query-string": "^9.3.1", "react": "19.2.1", "react-dom": "19.2.1", "react-use": "^17.6.0", diff --git a/types.d.ts b/types.d.ts index 24dd464..d918440 100644 --- a/types.d.ts +++ b/types.d.ts @@ -1,11 +1,20 @@ type OHLCData = [number, number, number, number, number]; +interface NextPageProps { + params: Promise<{ [key: string]: string }>; + searchParams: Promise<{ [key: string]: string | string[] | undefined }>; +} + interface CandlestickChartProps { - data: OHLCData[]; + data?: OHLCData[]; + liveOhlcv?: OHLCData | null; coinId: string; height?: number; children?: React.ReactNode; mode?: 'historical' | 'live'; + initialPeriod?: Period; + liveInterval?: '1s' | '1m'; + setLiveInterval?: (interval: '1s' | '1m') => void; } interface ConverterProps { @@ -94,21 +103,7 @@ interface SearchCoin { }; } -// WebSocket Types -interface CoinPriceData { - coinId: string; - price: number; - priceChangePercentage24h: number; - marketCap: number; - volume24h: number; - lastUpdated: number; -} - -interface PricesMap { - [coinId: string]: CoinPriceData; -} - -// Chart Section Props +// Chart Section Props (used in ChartSection.tsx) interface ChartSectionProps { coinData: { image: { large: string }; @@ -129,8 +124,6 @@ interface TopGainersLosers { image: string; price: number; priceChangePercentage24h: number; - volume24: number; - rank: number; } interface TopGainersLosersResponse { @@ -148,7 +141,7 @@ interface PriceData { usd: number; } -interface TradeData { +interface Trade { price?: number; timestamp?: number; type?: string; @@ -156,7 +149,6 @@ interface TradeData { value?: number; } - interface ExtendedPriceData { usd: number; coin?: string; @@ -188,31 +180,61 @@ interface WebSocketMessage { identifier?: string; } -interface LiveDataProps { - coinId: string; - pool: { - id: string; - address: string; - name: string; - network: string; +interface CoinDetailsData { + id: string; + name: string; + symbol: string; + asset_platform_id?: string | null; + detail_platforms?: Record< + string, + { + geckoterminal_url: string; + contract_address: string; + } + >; + image: { + large: string; + small: string; }; - coin: { - name: string; - image: string; - description: string; - priceChangePercentage24h: number; - priceChangePercentage30d: number; - priceChange24h: number; - price: number; + market_data: { + current_price: { + usd: number; + [key: string]: number; + }; + price_change_24h_in_currency: { + usd: number; + }; + price_change_percentage_24h_in_currency: { + usd: number; + }; + price_change_percentage_30d_in_currency: { + usd: number; + }; + market_cap: { + usd: number; + }; + total_volume: { + usd: number; + }; }; - coinOHLCData: OHLCData[]; - children?: React.ReactNode; + market_cap_rank: number; + description: { + en: string; + }; + links: { + homepage: string[]; + blockchain_site: string[]; + subreddit_url: string; + }; + tickers: Ticker[]; } -interface ClickableTableRowProps { - href: string; - children: ReactNode; - className?: string; +interface LiveDataProps { + coinId: string; + poolId: string; + coin: CoinDetailsData; + coinOHLCData?: OHLCData[]; + children?: React.ReactNode; } interface LiveCoinHeaderProps { @@ -235,12 +257,69 @@ interface Category { interface UseCoinGeckoWebSocketProps { coinId: string; poolId: string; - coinOHLCData: OHLCData[]; + liveInterval?: '1s' | '1m'; } interface UseCoinGeckoWebSocketReturn { price: ExtendedPriceData | null; - trades: TradeData[]; - ohlcv: OHLCData[]; + trades: Trade[]; + ohlcv: OHLCData | null; isConnected: boolean; -} \ No newline at end of file +} + +interface DataTableColumn { + header: React.ReactNode; + cell: (row: T, index: number) => React.ReactNode; + headClassName?: string; + cellClassName?: string; +} + +interface DataTableProps { + columns: DataTableColumn[]; + data: T[]; + rowKey: (row: T, index: number) => React.Key; + tableClassName?: string; + headerClassName?: string; + headerRowClassName?: string; + headerCellClassName?: string; + bodyRowClassName?: string; + bodyCellClassName?: string; +} + +type ButtonSize = 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg'; + +type PaginationLinkProps = { + isActive?: boolean; + size?: ButtonSize; +} & React.ComponentProps<'a'>; + +interface Pagination { + currentPage: number; + totalPages: number; + hasMorePages: boolean; +} + +interface HeaderProps { + trendingCoins: TrendingCoin[]; +} + +type SearchItemCoin = SearchCoin | TrendingCoin['item']; + +interface SearchItemProps { + coin: SearchItemCoin; + onSelect: (coinId: string) => void; + isActiveName: boolean; +} + +interface CoinGeckoErrorBody { + error?: string; +} + +type QueryParams = Record; + +interface PoolData { + id: string; + address: string; + name: string; + network: string; +}