[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" import type React from "react" // Import React import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "CryptoTracker Dashboard", description: "Track your favorite cryptocurrencies", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/Sidebar.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Home, TrendingUp, BarChart2, PlusCircle, Settings } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { cryptocurrencies } from "@/lib/mockData" import { useState, useEffect } from "react" import CurrencyConverterModal from "./CurrencyConverterModal" import PortfolioModal from "./PortfolioModal" const Sidebar = () => { return (

CryptoTracker

) } const PortfolioSummary = () => { const [totalValue, setTotalValue] = useState(0) useEffect(() => { // This is a mock calculation. In a real app, this would be based on actual user data. const mockPortfolio = [ { symbol: "BTC", amount: 0.5 }, { symbol: "ETH", amount: 5 }, { symbol: "ADA", amount: 1000 }, ] const calculatedValue = mockPortfolio.reduce((sum, asset) => { const crypto = cryptocurrencies.find((c) => c.symbol === asset.symbol) return sum + (crypto ? crypto.price * asset.amount : 0) }, 0) setTotalValue(calculatedValue) }, []) return ( Portfolio Summary

${totalValue.toLocaleString(undefined, { maximumFractionDigits: 2 })}

) } export default Sidebar [V0_FILE]typescriptreact:file="components/PriceChart.tsx" isEdit="true" isMerged="true" import type React from "react" import { Line } from "react-chartjs-2" import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, } from "chart.js" ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend) interface PriceChartProps { priceHistory: number[] } const PriceChart: React.FC = ({ priceHistory }) => { const data = { labels: ["6d ago", "5d ago", "4d ago", "3d ago", "2d ago", "Yesterday", "Today"], datasets: [ { label: "Price", data: priceHistory, fill: false, borderColor: "hsl(var(--primary))", tension: 0.1, }, ], } const options = { responsive: true, plugins: { legend: { display: false, }, title: { display: true, text: "7 Day Price History", color: "hsl(var(--foreground))", }, }, scales: { x: { grid: { color: "hsl(var(--border))", }, ticks: { color: "hsl(var(--foreground))", }, }, y: { grid: { color: "hsl(var(--border))", }, ticks: { color: "hsl(var(--foreground))", }, }, }, } return } export default PriceChart [V0_FILE]javascript:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; --radius: 0.5rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/BentoGrid.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ArrowUpRight, ArrowDownRight, TrendingUp } from "lucide-react" import { getTopGainers, getTopLosers, getTrending } from "@/lib/mockData" const BentoGrid = () => { const topGainer = getTopGainers(1)[0] const topLoser = getTopLosers(1)[0] const trending = getTrending(1)[0] return (

Total Market Cap

$1.23T

+2.5% from last 24h

Top Gainer

{topGainer.name}

+{topGainer.change24h}% in last 24h

Top Loser

{topLoser.name}

{topLoser.change24h}% in last 24h

Trending

{trending.name}

${trending.price.toLocaleString()} | Vol: ${(trending.volume24h / 1e9).toFixed(2)}B

) } export default BentoGrid [V0_FILE]typescriptreact:file="components/NewsFeed.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { newsArticles } from "@/lib/mockData" const NewsFeed = () => { return ( Latest News

{article.title}

{article.source} • {article.date}

) } export default NewsFeed [V0_FILE]typescriptreact:file="components/CurrencyConverter.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { cryptocurrencies } from "@/lib/mockData" import { Button } from "@/components/ui/button" import { ArrowUpDown } from "lucide-react" const CurrencyConverter = () => { const [amount, setAmount] = useState("1") const [fromCurrency, setFromCurrency] = useState("BTC") const [toCurrency, setToCurrency] = useState("USD") const fromCrypto = cryptocurrencies.find((c) => c.symbol === fromCurrency) const toCrypto = cryptocurrencies.find((c) => c.symbol === toCurrency) const convertedAmount = fromCrypto && toCrypto ? ((Number.parseFloat(amount) * fromCrypto.price) / (toCrypto.symbol === "USD" ? 1 : toCrypto.price)).toFixed(8) : "0" const handleSwap = () => { const temp = fromCurrency setFromCurrency(toCurrency) setToCurrency(temp) } return ( Currency Converter

setAmount(e.target.value)} placeholder="Amount" />

{amount} {fromCurrency} = {convertedAmount} {toCurrency}

) } export default CurrencyConverter [V0_FILE]typescriptreact:file="components/PortfolioTracker.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { cryptocurrencies } from "@/lib/mockData" import { Plus, Trash2 } from "lucide-react" const PortfolioTracker = () => { const [portfolio, setPortfolio] = useState([ { symbol: "BTC", amount: 0.5 }, { symbol: "ETH", amount: 5 }, { symbol: "ADA", amount: 1000 }, ]) const [newAsset, setNewAsset] = useState({ symbol: "BTC", amount: "" }) const addAsset = () => { if (newAsset.amount && Number.parseFloat(newAsset.amount) > 0) { setPortfolio([...portfolio, { ...newAsset, amount: Number.parseFloat(newAsset.amount) }]) setNewAsset({ symbol: "BTC", amount: "" }) } } const removeAsset = (symbol: string) => { setPortfolio(portfolio.filter((asset) => asset.symbol !== symbol)) } const portfolioWithValues = portfolio.map((item) => { const crypto = cryptocurrencies.find((c) => c.symbol === item.symbol) return { ...item, value: crypto ? crypto.price * item.amount : 0, change24h: crypto ? crypto.change24h : 0, } }) const totalValue = portfolioWithValues.reduce((sum, item) => sum + item.value, 0) return ( Your Portfolio

Total Value: ${totalValue.toLocaleString()}

Asset Amount Value 24h Change Action {portfolioWithValues.map((item) => ( {item.symbol} {item.amount} ${item.value.toLocaleString()} = 0 ? "text-green-500" : "text-red-500"}> {item.change24h > 0 ? "+" : ""} {item.change24h}% ))}

setNewAsset({ ...newAsset, amount: e.target.value })} />

) } export default PortfolioTracker [V0_FILE]typescriptreact:file="components/MarketSentiment.tsx" isEdit="true" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { marketSentiment } from "@/lib/mockData" import { Gauge } from "lucide-react" const MarketSentiment = () => { const { value, change, label } = marketSentiment const getColor = () => { if (value < 25) return "text-red-500" if (value < 50) return "text-yellow-500" if (value < 75) return "text-green-500" return "text-blue-500" } const getDescription = () => { if (value < 25) return "Extreme Fear" if (value < 50) return "Fear" if (value < 75) return "Greed" return "Extreme Greed" } return ( Market Sentiment

{value}

{label}

{getDescription()}

= 0 ? "text-green-500" : "text-red-500"}> {change > 0 ? "+" : ""} {change} points

) } export default MarketSentiment [V0_FILE]typescriptreact:file="components/ThemeToggle.tsx" isMerged="true" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" export function ThemeToggle() { const { theme, setTheme } = useTheme() return ( ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/CurrencyConverterModal.tsx" isMerged="true" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { cryptocurrencies } from "@/lib/mockData" import { ArrowUpDown } from "lucide-react" const CurrencyConverterModal = () => { const [amount, setAmount] = useState("1") const [fromCurrency, setFromCurrency] = useState("BTC") const [toCurrency, setToCurrency] = useState("USD") const fromCrypto = cryptocurrencies.find((c) => c.symbol === fromCurrency) const toCrypto = cryptocurrencies.find((c) => c.symbol === toCurrency) const convertedAmount = fromCrypto && toCrypto ? ((Number.parseFloat(amount) * fromCrypto.price) / (toCrypto.symbol === "USD" ? 1 : toCrypto.price)).toFixed(8) : "0" const handleSwap = () => { const temp = fromCurrency setFromCurrency(toCurrency) setToCurrency(temp) } return ( ) } export default CurrencyConverterModal [V0_FILE]typescriptreact:file="components/MarketOverviewBanner.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent } from "@/components/ui/card" const MarketOverviewBanner = ({ liveUpdates }) => { const [marketData, setMarketData] = useState({ totalMarketCap: 1.23, volume24h: 78.9, btcDominance: 46.2, }) useEffect(() => { if (liveUpdates) { const interval = setInterval(() => { setMarketData((prevData) => ({ totalMarketCap: prevData.totalMarketCap * (1 + (Math.random() * 0.02 - 0.01)), volume24h: prevData.volume24h * (1 + (Math.random() * 0.02 - 0.01)), btcDominance: prevData.btcDominance + (Math.random() * 0.4 - 0.2), })) }, 2000) return () => clearInterval(interval) } }, [liveUpdates]) return (

Total Market Cap: ${marketData.totalMarketCap.toFixed(2)}T

24h Volume: ${marketData.volume24h.toFixed(1)}B

BTC Dominance: {marketData.btcDominance.toFixed(1)}%

) } export default MarketOverviewBanner [V0_FILE]typescriptreact:file="components/PortfolioModal.tsx" isMerged="true" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { cryptocurrencies } from "@/lib/mockData" import { Plus, Trash2, Wallet } from "lucide-react" const PortfolioModal = () => { const [portfolio, setPortfolio] = useState([ { symbol: "BTC", amount: 0.5 }, { symbol: "ETH", amount: 5 }, { symbol: "ADA", amount: 1000 }, ]) const [newAsset, setNewAsset] = useState({ symbol: "BTC", amount: "" }) const addAsset = () => { if (newAsset.amount && Number.parseFloat(newAsset.amount) > 0) { setPortfolio([...portfolio, { ...newAsset, amount: Number.parseFloat(newAsset.amount) }]) setNewAsset({ symbol: "BTC", amount: "" }) } } const removeAsset = (symbol: string) => { setPortfolio(portfolio.filter((asset) => asset.symbol !== symbol)) } const portfolioWithValues = portfolio.map((item) => { const crypto = cryptocurrencies.find((c) => c.symbol === item.symbol) return { ...item, value: crypto ? crypto.price * item.amount : 0, change24h: crypto ? crypto.change24h : 0, } }) const totalValue = portfolioWithValues.reduce((sum, item) => sum + item.value, 0) return ( ) } export default PortfolioModal [V0_FILE]typescriptreact:file="components/MarketSentimentHeader.tsx" isMerged="true" import { marketSentiment } from "@/lib/mockData" import { Gauge } from "lucide-react" const MarketSentimentHeader = () => { const { value, change, label } = marketSentiment const getColor = () => { if (value < 25) return "text-red-500" if (value < 50) return "text-yellow-500" if (value < 75) return "text-green-500" return "text-blue-500" } const getDescription = () => { if (value < 25) return "Extreme Fear" if (value < 50) return "Fear" if (value < 75) return "Greed" return "Extreme Greed" } return (

{value} - {getDescription()}

= 0 ? "text-green-500" : "text-red-500"}`}> {change > 0 ? "+" : ""} {change}

) } export default MarketSentimentHeader [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Search, Star } from "lucide-react" import { cryptocurrencies, getTopGainers, getTopLosers, getTrending, favorites, toggleFavorite } from "@/lib/mockData" import Sidebar from "@/components/Sidebar" import MarketSentimentHeader from "@/components/MarketSentimentHeader" import { useTheme } from "next-themes" import { ThemeToggle } from "@/components/ThemeToggle" import MarketOverviewBanner from "@/components/MarketOverviewBanner" import TrendingPage from "@/components/TrendingPage" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" const BentoGrid = ({ liveUpdates, cryptoData }) => { const [topGainers, setTopGainers] = useState(getTopGainers(cryptoData, 5)) const [topLosers, setTopLosers] = useState(getTopLosers(cryptoData, 5)) const [trending, setTrending] = useState(getTrending(cryptoData, 5)) useEffect(() => { if (liveUpdates) { const interval = setInterval(() => { setTopGainers(getTopGainers(cryptoData, 5)) setTopLosers(getTopLosers(cryptoData, 5)) setTrending(getTrending(cryptoData, 5)) }, 2000) return () => clearInterval(interval) } }, [liveUpdates, cryptoData]) return (

Top Gainers

{crypto.name} +{crypto.change24h.toFixed(2)}%

Top Losers

{crypto.name} {crypto.change24h.toFixed(2)}%

Trending

{crypto.name} ${crypto.price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

) } export default function CryptoDashboard() { const [searchTerm, setSearchTerm] = useState("") const [favList, setFavList] = useState(favorites) const [liveUpdates, setLiveUpdates] = useState(true) const [cryptoData, setCryptoData] = useState(cryptocurrencies) const { theme } = useTheme() useEffect(() => { if (liveUpdates) { const interval = setInterval(() => { setCryptoData((prevData) => prevData.map((crypto) => ({ ...crypto, price: crypto.price * (1 + (Math.random() * 0.02 - 0.01)), change24h: crypto.change24h + (Math.random() * 2 - 1), change7d: crypto.change7d + (Math.random() * 2 - 1), })), ) }, 2000) return () => clearInterval(interval) } }, [liveUpdates]) const filteredCryptos = cryptoData.filter( (crypto) => crypto.name.toLowerCase().includes(searchTerm.toLowerCase()) || crypto.symbol.toLowerCase().includes(searchTerm.toLowerCase()), ) const handleFavoriteToggle = (id: number) => { toggleFavorite(id) setFavList([...favorites]) } const renderCryptoList = (cryptos) => ( # Name Price 24h % 7d % Market Cap Volume(24h) Circulating Supply {cryptos.map((crypto, index) => ( {index + 1} {crypto.name} {crypto.symbol} ${crypto.price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} = 0 ? "text-green-500" : "text-red-500"}> {crypto.change24h > 0 ? "+" : ""} {crypto.change24h.toFixed(2)}% = 0 ? "text-green-500" : "text-red-500"}> {crypto.change7d > 0 ? "+" : ""} {crypto.change7d.toFixed(2)}% ${crypto.marketCap.toLocaleString()} ${crypto.volume24h.toLocaleString()} {crypto.circulatingSupply.toLocaleString()} {crypto.symbol} ))}

) return (

CryptoTracker

setSearchTerm(e.target.value)} className="pl-10 bg-secondary text-secondary-foreground" />

Live Updates

All Cryptocurrencies Favorites Trending Top Gainers Top Losers {renderCryptoList(filteredCryptos)} {renderCryptoList(cryptoData.filter((crypto) => favList.includes(crypto.id)))} {renderCryptoList(getTopGainers(cryptoData))} {renderCryptoList(getTopLosers(cryptoData))}

) } [V0_FILE]typescriptreact:file="lib/mockData.ts" isEdit="true" isQuickEdit="true" export const cryptocurrencies = [ { id: 1, name: "Bitcoin", symbol: "BTC", price: 29324.52, change24h: 1.2, change7d: 0.5, marketCap: 570123456789, volume24h: 25123456789, circulatingSupply: 19000000, totalSupply: 21000000, priceHistory: [29000, 29100, 29200, 29150, 29300, 29250, 29324.52], }, { id: 2, name: "Ethereum", symbol: "ETH", price: 1876.34, change24h: -0.8, change7d: 2.3, marketCap: 225987654321, volume24h: 15987654321, circulatingSupply: 120000000, totalSupply: 120000000, priceHistory: [1850, 1860, 1870, 1865, 1880, 1875, 1876.34], }, { id: 3, name: "Tether", symbol: "USDT", price: 1.0, change24h: 0.1, change7d: 0, marketCap: 83456789012, volume24h: 45678901234, circulatingSupply: 83456789012, totalSupply: 83456789012, priceHistory: [1, 1, 1, 1, 1, 1, 1], }, { id: 4, name: "BNB", symbol: "BNB", price: 240.56, change24h: 2.5, change7d: -1.2, marketCap: 37123456789, volume24h: 2123456789, circulatingSupply: 154533345, totalSupply: 200000000, priceHistory: [235, 238, 242, 239, 241, 240, 240.56], }, { id: 5, name: "XRP", symbol: "XRP", price: 0.4678, change24h: -1.5, change7d: 3.7, marketCap: 24567890123, volume24h: 1567890123, circulatingSupply: 52544091958, totalSupply: 100000000000, priceHistory: [0.47, 0.465, 0.472, 0.468, 0.471, 0.469, 0.4678], }, { id: 6, name: "Cardano", symbol: "ADA", price: 0.31, change24h: 0.9, change7d: -2.1, marketCap: 10987654321, volume24h: 567890123, circulatingSupply: 35401496384, totalSupply: 45000000000, priceHistory: [0.305, 0.308, 0.312, 0.309, 0.311, 0.31, 0.31], }, { id: 7, name: "Dogecoin", symbol: "DOGE", price: 0.068, change24h: 5.2, change7d: 10.5, marketCap: 9876543210, volume24h: 1234567890, circulatingSupply: 145000000000, totalSupply: 145000000000, priceHistory: [0.064, 0.065, 0.067, 0.066, 0.069, 0.068, 0.068], }, { id: 8, name: "Polkadot", symbol: "DOT", price: 5.23, change24h: -2.1, change7d: 1.8, marketCap: 6543210987, volume24h: 345678901, circulatingSupply: 1251841148, totalSupply: 1268061592, priceHistory: [5.3, 5.28, 5.25, 5.27, 5.24, 5.22, 5.23], }, { id: 9, name: "Shiba Inu", symbol: "SHIB", price: 0.0000079, change24h: 15.3, change7d: 25.7, marketCap: 4567890123, volume24h: 789012345, circulatingSupply: 589735030408323, totalSupply: 999991733688069, priceHistory: [0.0000068, 0.0000071, 0.0000075, 0.0000073, 0.0000077, 0.0000078, 0.0000079], }, { id: 10, name: "Solana", symbol: "SOL", price: 19.87, change24h: -0.5, change7d: 5.2, marketCap: 7890123456, volume24h: 901234567, circulatingSupply: 396870103, totalSupply: 535385983, priceHistory: [19.75, 19.8, 19.9, 19.85, 19.92, 19.89, 19.87], }, { id: 11, name: "Avalanche", symbol: "AVAX", price: 13.45, change24h: 3.2, change7d: 1.8, marketCap: 4567890123, volume24h: 234567890, circulatingSupply: 339621562, totalSupply: 720000000, priceHistory: [13.2, 13.3, 13.4, 13.35, 13.5, 13.4, 13.45], }, { id: 12, name: "Polygon", symbol: "MATIC", price: 0.76, change24h: -2.1, change7d: 5.3, marketCap: 7123456789, volume24h: 456789012, circulatingSupply: 9319469069, totalSupply: 10000000000, priceHistory: [0.75, 0.77, 0.76, 0.78, 0.77, 0.75, 0.76], }, { id: 13, name: "Chainlink", symbol: "LINK", price: 6.32, change24h: 1.5, change7d: -0.8, marketCap: 3234567890, volume24h: 198765432, circulatingSupply: 511802971, totalSupply: 1000000000, priceHistory: [6.25, 6.3, 6.35, 6.28, 6.33, 6.3, 6.32], }, { id: 14, name: "Uniswap", symbol: "UNI", price: 5.41, change24h: -0.5, change7d: 2.1, marketCap: 4123456789, volume24h: 234567890, circulatingSupply: 762209327, totalSupply: 1000000000, priceHistory: [5.4, 5.45, 5.42, 5.44, 5.43, 5.4, 5.41], }, { id: 15, name: "Stellar", symbol: "XLM", price: 0.11, change24h: 0.8, change7d: -1.2, marketCap: 2987654321, volume24h: 123456789, circulatingSupply: 27107692307, totalSupply: 50001806812, priceHistory: [0.109, 0.11, 0.111, 0.1105, 0.111, 0.1095, 0.11], }, ] export const getTopGainers = (cryptos = cryptocurrencies, count = 5) => { return [...cryptos].sort((a, b) => b.change24h - a.change24h).slice(0, count) } export const getTopLosers = (cryptos = cryptocurrencies, count = 5) => { return [...cryptos].sort((a, b) => a.change24h - b.change24h).slice(0, count) } export const getTrending = (cryptos = cryptocurrencies, count = 5) => { return [...cryptos].sort((a, b) => b.volume24h - a.volume24h).slice(0, count) } export const getNewlyAdded = (count = 3) => { // In a real scenario, this would be based on listing date // For now, we'll just return the last 'count' cryptocurrencies return cryptocurrencies.slice(-count) } export const newsArticles = [ { id: 1, title: "Bitcoin Surges Past $30,000 as Institutional Interest Grows", source: "CryptoNews", url: "#", date: "2023-07-15", }, { id: 2, title: "Ethereum 2.0 Upgrade: What You Need to Know", source: "BlockchainInsider", url: "#", date: "2023-07-14", }, { id: 3, title: "Regulatory Challenges Facing Cryptocurrency Exchanges", source: "CoinDesk", url: "#", date: "2023-07-13", }, { id: 4, title: "DeFi Protocols See Record Growth in Total Value Locked", source: "DeFiPulse", url: "#", date: "2023-07-12", }, { id: 5, title: "NFT Market Rebounds: Blue-Chip Collections Lead the Way", source: "NFTWorld", url: "#", date: "2023-07-11", }, ] export const marketSentiment = { value: 65, change: 5, label: "Greed", } export let favorites: number[] = [1, 2] // Initially, Bitcoin and Ethereum are favorites export const toggleFavorite = (id: number) => { if (favorites.includes(id)) { favorites = favorites.filter((favId) => favId !== id) } else { favorites.push(id) } } [V0_FILE]typescriptreact:file="components/TrendingPage.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { getTrending, cryptocurrencies } from "@/lib/mockData" import { ArrowUpDown, Search } from "lucide-react" const TrendingPage = ({ liveUpdates }) => { const [trendingCryptos, setTrendingCryptos] = useState(getTrending(cryptocurrencies, 20)) const [searchTerm, setSearchTerm] = useState("") const [sortConfig, setSortConfig] = useState({ key: "rank", direction: "ascending" }) useEffect(() => { if (liveUpdates) { const interval = setInterval(() => { setTrendingCryptos((prevCryptos) => getTrending( prevCryptos.map((crypto) => ({ ...crypto, price: crypto.price * (1 + (Math.random() * 0.02 - 0.01)), change24h: crypto.change24h + (Math.random() * 2 - 1), })), 20, ), ) }, 2000) return () => clearInterval(interval) } }, [liveUpdates]) const handleSort = (key: string) => { let direction = "ascending" if (sortConfig.key === key && sortConfig.direction === "ascending") { direction = "descending" } setSortConfig({ key, direction }) setTrendingCryptos( trendingCryptos.sort((a, b) => { if (a[key] < b[key]) return direction === "ascending" ? -1 : 1 if (a[key] > b[key]) return direction === "ascending" ? 1 : -1 return 0 }), ) } const filteredCryptos = trendingCryptos.filter( (crypto) => crypto.name.toLowerCase().includes(searchTerm.toLowerCase()) || crypto.symbol.toLowerCase().includes(searchTerm.toLowerCase()), ) return ( Trending Cryptocurrencies

setSearchTerm(e.target.value)} className="pl-10" />

Rank Name Price Market Cap Volume (24h) {filteredCryptos.map((crypto, index) => ( {index + 1} {crypto.name} {crypto.symbol} ${crypto.price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} = 0 ? "text-green-500" : "text-red-500"}> {crypto.change24h > 0 ? "+" : ""} {crypto.change24h.toFixed(2)}% ${crypto.marketCap.toLocaleString()} ${crypto.volume24h.toLocaleString()} ))}

) } export default TrendingPage

CryptoTracker

{article.title}

About

About