/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function CryptoPriceApp() { const [prices, setPrices] = useState<{ bitcoin: { current: number | null, previous: number | null }, solana: { current: number | null, previous: number | null } }>({ bitcoin: { current: null, previous: null }, solana: { current: null, previous: null } }); const [error, setError] = useState(null); const [lastUpdated, setLastUpdated] = useState(null); useEffect(() => { async function fetchCryptoPrices() { try { // Fetch Bitcoin price from CoinDesk const bitcoinResponse = await fetch('https://api.coindesk.com/v1/bpi/currentprice/USD.json'); const bitcoinData = await bitcoinResponse.json(); const bitcoinPrice = bitcoinData.bpi.USD.rate_float; // Fetch Solana price from CoinGecko (free API) const solanaResponse = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=solana&vs_currencies=usd'); const solanaData = await solanaResponse.json(); const solanaPrice = solanaData.solana.usd; setPrices(prev => ({ bitcoin: { current: bitcoinPrice, previous: prev.bitcoin.current }, solana: { current: solanaPrice, previous: prev.solana.current } })); setLastUpdated(new Date()); } catch (err) { setError('Could not fetch cryptocurrency prices'); console.error(err); } } fetchCryptoPrices(); const interval = setInterval(fetchCryptoPrices, 60000); // Update every minute return () => clearInterval(interval); }, []); const PriceDisplay = ({ name, icon, price, previousPrice }: { name: string, icon: string, price: number | null, previousPrice: number | null }) => { const getPriceChange = () => { if (!price || !previousPrice) return null; return ((price - previousPrice) / previousPrice * 100).toFixed(2); }; const priceChange = getPriceChange(); const isPositive = priceChange && parseFloat(priceChange) >= 0; return (

{icon}

{name}

{price ? `$${price.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : 'Loading...'}

{priceChange && (

{isPositive ? '▲' : '▼'} {priceChange}%

)}

); }; return (

Crypto Tracker

{error ? (

{error}

) : ( <> {lastUpdated && (

Last updated: {lastUpdated.toLocaleTimeString()}

)} )}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Crypto Tracker

`, { headers: { "content-type": "text/html" } }); }

ericxyz86