/** @jsxImportSource https://esm.sh/react */ import { renderToString } from "https://esm.sh/react-dom@18.2.0/server"; import React, { useEffect, useState } from "https://esm.sh/react@18.2.0"; const API_URL = "https://aggy-valcoinapi.web.val.run"; function App() { const [wallets, setWallets] = useState([]); const [sourceKey, setSourceKey] = useState(""); const [destinationHash, setDestinationHash] = useState(""); const [amount, setAmount] = useState(""); const [error, setError] = useState(null); const [feedback, setFeedback] = useState(null); useEffect(() => { fetchWallets(); }, []); async function fetchWallets() { try { const response = await fetch(`${API_URL}/wallets`); const data = await response.json(); setWallets(data); } catch (err) { console.error("Error fetching wallets:", err); setWallets([]); setError("Failed to fetch wallets. Please try again later."); } } async function createWallet() { try { const response = await fetch(`${API_URL}/create-wallet`, { method: "POST" }); const { key, hash } = await response.json(); const newWalletData = { key, hash, value: 0 }; setWallets(prevWallets => [...prevWallets, newWalletData]); setFeedback({ type: "success", message: `New wallet created! Your wallet key is: ${key}. Keep this key safe and private.`, }); } catch (err) { console.error("Error creating wallet:", err); setFeedback({ type: "error", message: "Failed to create wallet. Please try again.", }); } } async function transferValCoin() { // Input validation if (!sourceKey || !destinationHash || !amount) { setFeedback({ type: "error", message: "Please fill in all fields for the transfer.", }); return; } if (isNaN(Number(amount)) || Number(amount) <= 0) { setFeedback({ type: "error", message: "Please enter a valid positive number for the amount.", }); return; } try { const response = await fetch(`${API_URL}/transfer`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sourceKey, destinationHash, amount: Number(amount) }), }); const result = await response.json(); if (response.ok) { setFeedback({ type: "success", message: "Transfer successful!", }); fetchWallets(); setSourceKey(""); setDestinationHash(""); setAmount(""); } else { setFeedback({ type: "error", message: result.message || "Transfer failed. Please try again.", }); } } catch (err) { console.error("Error transferring ValCoin:", err); setFeedback({ type: "error", message: "Failed to transfer ValCoin. Please check your connection and try again.", }); } } function FeedbackMessage({ message, type }) { const bgColor = type === "success" ? "bg-green-100 border-green-400 text-green-700" : "bg-red-100 border-red-400 text-red-700"; return (

{message}

); } return (

ValCoin Dashboard

{feedback && }

Create New Wallet

Transfer

setSourceKey(e.target.value)} placeholder="Source Wallet Key" className="border p-2 rounded w-full" /> setDestinationHash(e.target.value)} placeholder="Destination Wallet Hash" className="border p-2 rounded w-full" /> setAmount(e.target.value)} placeholder="Amount" className="border p-2 rounded w-full" />

Wallets

{error ?

{error}

: ( <>

{Array.isArray(wallets) && wallets.map((wallet) => ( ))}

Hash	Balance
{wallet.hash}	{wallet.value}

)}

); } function renderApp() { const appHtml = renderToString(); return ` ValCoin Wallet Manager

${appHtml}

`; } export default async function(req: Request): Promise { return new Response(renderApp(), { headers: { "Content-Type": "text/html" }, }); } export { App };

valcoinDashboard