/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import Chart from "https://esm.sh/chart.js/auto"; function App() { const [cryptoSymbol, setCryptoSymbol] = useState('BTC'); const [transactionData, setTransactionData] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); async function fetchTransactionData(symbol) { try { setLoading(true); const response = await fetch(`/transactions?symbol=${symbol.toUpperCase()}`); if (!response.ok) throw new Error('Failed to fetch transactions'); const data = await response.json(); setTransactionData(data); setLoading(false); } catch (err) { setError(err.message); setLoading(false); } } useEffect(() => { fetchTransactionData(cryptoSymbol); }, [cryptoSymbol]); useEffect(() => { if (transactionData.length && !loading) { const ctx = document.getElementById('transactionChart').getContext('2d'); // Destroy existing chart if it exists const existingChart = Chart.getChart(ctx); if (existingChart) { existingChart.destroy(); } new Chart(ctx, { type: 'line', data: { labels: transactionData.map(entry => new Date(entry.timestamp).toLocaleString()), datasets: [{ label: `${cryptoSymbol} Transactions`, data: transactionData.map(entry => entry.transaction_count), borderColor: 'rgb(75, 192, 192)', tension: 0.1 }] }, options: { responsive: true, plugins: { title: { display: true, text: `${cryptoSymbol} Transaction Volume Over Time` } }, scales: { y: { beginAtZero: true, title: { display: true, text: 'Number of Transactions' } } } } }); } }, [transactionData, loading, cryptoSymbol]); const handleSymbolSubmit = (e) => { e.preventDefault(); const symbolInput = e.target.elements.cryptoSymbol.value.toUpperCase(); setCryptoSymbol(symbolInput); }; if (error) return

Error: {error}

; return (

Crypto Transaction Tracker 📊

{loading ? (

Loading transaction data...

) : ( <>

{cryptoSymbol} Transaction Data

{transactionData.map((entry, index) => ( ))}

Timestamp	Transaction Count
{new Date(entry.timestamp).toLocaleString()}	{entry.transaction_count}

View Val Source

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const SCHEMA_VERSION = 2; const url = new URL(request.url); // Handle transactions endpoint if (url.pathname === '/transactions') { const symbol = url.searchParams.get('symbol') || 'BTC'; try { const result = await sqlite.execute(` SELECT transaction_count, timestamp FROM ${KEY}_${symbol}_transactions_${SCHEMA_VERSION} ORDER BY timestamp DESC LIMIT 50 `); return new Response(JSON.stringify(result.rows), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { return new Response(JSON.stringify({ error: 'No data found for this symbol' }), { status: 404, headers: { 'Content-Type': 'application/json' } }); } } return new Response(` Crypto Transaction Tracker

`, { headers: { 'Content-Type': 'text/html' } }); } const css = ` body { font-family: Arial, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background-color: #f4f4f4; } .container { background-color: white; border-radius: 8px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } h1 { text-align: center; color: #333; } .symbol-form { display: flex; margin-bottom: 20px; gap: 10px; } .symbol-form input { flex-grow: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px; } .symbol-form button { padding: 8px 16px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } canvas { max-width: 100%; height: auto; } .data-table { margin-top: 20px; } table { width: 100%; border-collapse: collapse; } table, th, td { border: 1px solid #ddd; } th, td { padding: 8px; text-align: left; } .source-link { display: block; margin-top: 10px; text-align: center; color: #666; text-decoration: none; } `;

cryptoTransactionTracker