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 (
-

Cryptocurrency Tracker

+

💹 Cryptocurrency Tracker

setQuery(e.target.value)} - placeholder="Search coin" + placeholder="Search coin..." + style={{ marginBottom: "1rem" }} /> {loading && } +
- {filtered.map((c) => ( - ${c.current_price}} - > -

Market Cap: ${c.market_cap.toLocaleString()}

-

24h: {c.price_change_percentage_24h?.toFixed(2)}%

- {/* TODO: Add mini sparkline chart */} -
- ))} + {filtered.map((c) => { + const isPositive = c.price_change_percentage_24h >= 0; + return ( + + {c.symbol} + {c.name} ({c.symbol.toUpperCase()}) + + } + footer={${c.current_price.toLocaleString()}} + > +

Market Cap: ${formatNumber(c.market_cap)}

+

+ 24h: {isPositive ? "+" : ""} + {c.price_change_percentage_24h?.toFixed(2)}% +

+ {/* TODO: Add mini sparkline chart */} +
+ ); + })}
-
+
diff --git a/src/utilities/numberFormatter.js b/src/utilities/numberFormatter.js new file mode 100644 index 0000000..bdcebd8 --- /dev/null +++ b/src/utilities/numberFormatter.js @@ -0,0 +1,9 @@ +export default function formatNumber(number) { + return new Intl.NumberFormat("en", { + notation: "compact", + + maximumFractionDigits: 1, + }).format(number); +} + +// TODO: we can make here different type of currency