diff --git a/src/pages/Crypto.jsx b/src/pages/Crypto.jsx index b58b3ab..89ecebb 100644 --- a/src/pages/Crypto.jsx +++ b/src/pages/Crypto.jsx @@ -3,11 +3,11 @@ * ---------------------- * Easy: * - [ ] Sort buttons (Market Cap, Price, 24h %) - * - [ ] Show coin symbol & small logo (image URL in API) - * - [ ] Format numbers with utility (abbreviate large caps: 1.2B) - * - [ ] Highlight positive vs negative 24h change (green/red) + * - [x] Show coin symbol & small logo (image URL in API) + * - [x] Format numbers with utility (abbreviate large caps: 1.2B) + * - [x] Highlight positive vs negative 24h change (green/red) * Medium: - * - [ ] Add pagination (Top 50 -> allow next pages) + * - [x] Add pagination (Top 50 -> allow next pages) * - [ ] Client-side caching with timestamp (avoid re-fetch spam) * - [ ] Mini sparkline (use canvas or simple SVG) * - [ ] Favorites (star) + localStorage persistence @@ -18,10 +18,12 @@ * - [ ] Dark mode adaptive coloring for charts * - [ ] Extract to service + custom hook (useCryptoMarkets) */ + import { useEffect, useState } from "react"; import Loading from "../components/Loading.jsx"; import ErrorMessage from "../components/ErrorMessage.jsx"; import Card from "../components/Card.jsx"; +import formatNumber from "../utilities/numberFormatter.js"; export default function Crypto() { const [coins, setCoins] = useState([]); @@ -57,30 +59,61 @@ export default function Crypto() { return (
Market Cap: ${c.market_cap.toLocaleString()}
-24h: {c.price_change_percentage_24h?.toFixed(2)}%
- {/* TODO: Add mini sparkline chart */} -Market Cap: ${formatNumber(c.market_cap)}
++ 24h: {isPositive ? "+" : ""} + {c.price_change_percentage_24h?.toFixed(2)}% +
+ {/* TODO: Add mini sparkline chart */} +