function MainComponent() { const [selectedCrypto, setSelectedCrypto] = React.useState("bitcoin"); const [tokenAmount, setTokenAmount] = React.useState(""); const [selectedCurrency, setSelectedCurrency] = React.useState("USD"); const [cryptoPrice, setCryptoPrice] = React.useState(null); const [customPrice, setCustomPrice] = React.useState(""); const [useCustomPrice, setUseCustomPrice] = React.useState(false); const [exchangeRate, setExchangeRate] = React.useState(1); const [totalValue, setTotalValue] = React.useState(null); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const cryptoOptions = [ { id: "bitcoin", name: "Bitcoin (BTC)", symbol: "BTC" }, { id: "ethereum", name: "Ethereum (ETH)", symbol: "ETH" }, { id: "binancecoin", name: "Binance Coin (BNB)", symbol: "BNB" }, { id: "cardano", name: "Cardano (ADA)", symbol: "ADA" }, { id: "solana", name: "Solana (SOL)", symbol: "SOL" }, { id: "polkadot", name: "Polkadot (DOT)", symbol: "DOT" }, { id: "dogecoin", name: "Dogecoin (DOGE)", symbol: "DOGE" }, { id: "avalanche-2", name: "Avalanche (AVAX)", symbol: "AVAX" }, { id: "chainlink", name: "Chainlink (LINK)", symbol: "LINK" }, { id: "polygon", name: "Polygon (MATIC)", symbol: "MATIC" }, { id: "ripple", name: "XRP (XRP)", symbol: "XRP" } ]; const currencyOptions = [ { code: "USD", name: "US Dollar", symbol: "$" }, { code: "EUR", name: "Euro", symbol: "€" }, { code: "GBP", name: "British Pound", symbol: "£" }, { code: "JPY", name: "Japanese Yen", symbol: "¥" }, { code: "CAD", name: "Canadian Dollar", symbol: "C$" }, { code: "AUD", name: "Australian Dollar", symbol: "A$" }, { code: "NZD", name: "New Zealand Dollar", symbol: "NZ$" }, { code: "CHF", name: "Swiss Franc", symbol: "CHF" }, { code: "CNY", name: "Chinese Yuan", symbol: "¥" }, { code: "INR", name: "Indian Rupee", symbol: "₹" }, { code: "KRW", name: "South Korean Won", symbol: "₩" } ]; const fetchCryptoPrice = async ()=>{ try { setLoading(true); setError(null); let priceInUSD; if (useCustomPrice && customPrice) { // Use custom price entered by user (always in USD) priceInUSD = parseFloat(customPrice); if (isNaN(priceInUSD) || priceInUSD <= 0) { throw new Error("Please enter a valid custom price"); } } else { // Fetch crypto price in USD from CoinGecko API const cryptoResponse = await fetch(`https://api.coingecko.com/api/v3/simple/price?ids=${selectedCrypto}&vs_currencies=usd`); if (!cryptoResponse.ok) { throw new Error("Failed to fetch crypto price"); } const cryptoData = await cryptoResponse.json(); priceInUSD = cryptoData[selectedCrypto]?.usd; if (!priceInUSD) { throw new Error("Crypto price not found"); } } setCryptoPrice(priceInUSD); // If currency is not USD, fetch exchange rate for display if (selectedCurrency !== "USD") { const exchangeResponse = await fetch(`https://api.exchangerate-api.com/v4/latest/USD`); if (!exchangeResponse.ok) { throw new Error("Failed to fetch exchange rates"); } const exchangeData = await exchangeResponse.json(); const rate = exchangeData.rates[selectedCurrency]; if (!rate) { throw new Error("Exchange rate not found"); } setExchangeRate(rate); } else { setExchangeRate(1); } } catch (err) { console.error(err); setError(err.message || "Failed to fetch prices. Please try again."); } finally{ setLoading(false); } }; const calculateTotal = ()=>{ if (cryptoPrice && tokenAmount && exchangeRate) { const total = parseFloat(tokenAmount) * cryptoPrice * exchangeRate; setTotalValue(total); } else { setTotalValue(null); } }; React.useEffect(()=>{ calculateTotal(); }, [ cryptoPrice, tokenAmount, exchangeRate ]); const selectedCurrencyInfo = currencyOptions.find((c)=>c.code === selectedCurrency); const selectedCryptoInfo = cryptoOptions.find((c)=>c.id === selectedCrypto); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-4", __source: { fileName: "", lineNumber: 118, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 119, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-2xl shadow-xl p-8", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-800 mb-2", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-coins text-yellow-500 mr-3", __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }), "Crypto Price Prediction Calculator"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, "Calculate the value of your cryptocurrency holdings")), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 134, columnNumber: 15 }, __self: this }, "Select Cryptocurrency"), /*#__PURE__*/ React.createElement("select", { value: selectedCrypto, onChange: (e)=>setSelectedCrypto(e.target.value), className: "w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent", __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }, cryptoOptions.map((crypto)=>/*#__PURE__*/ React.createElement("option", { key: crypto.id, value: crypto.id, __source: { fileName: "", lineNumber: 143, columnNumber: 19 }, __self: this }, crypto.name)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-3", __source: { fileName: "", lineNumber: 152, columnNumber: 15 }, __self: this }, "Price Source"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 155, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 156, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "priceSource", checked: !useCustomPrice, onChange: ()=>setUseCustomPrice(false), className: "mr-3 text-blue-600", __source: { fileName: "", lineNumber: 157, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 164, columnNumber: 19 }, __self: this }, "Use live market price")), /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 166, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "priceSource", checked: useCustomPrice, onChange: ()=>setUseCustomPrice(true), className: "mr-3 text-blue-600", __source: { fileName: "", lineNumber: 167, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 174, columnNumber: 19 }, __self: this }, "Use custom price")))), useCustomPrice && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 182, columnNumber: 17 }, __self: this }, "Custom Price (USD)"), /*#__PURE__*/ React.createElement("input", { type: "number", value: customPrice, onChange: (e)=>setCustomPrice(e.target.value), placeholder: "Enter custom price in USD", className: "w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent", step: "any", min: "0", __source: { fileName: "", lineNumber: 185, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 199, columnNumber: 15 }, __self: this }, "Amount of ", selectedCryptoInfo?.symbol, " Tokens"), /*#__PURE__*/ React.createElement("input", { type: "number", value: tokenAmount, onChange: (e)=>setTokenAmount(e.target.value), placeholder: "Enter token amount", className: "w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent", step: "any", min: "0", __source: { fileName: "", lineNumber: 202, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 214, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 215, columnNumber: 15 }, __self: this }, "Select Currency"), /*#__PURE__*/ React.createElement("select", { value: selectedCurrency, onChange: (e)=>setSelectedCurrency(e.target.value), className: "w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent", __source: { fileName: "", lineNumber: 218, columnNumber: 15 }, __self: this }, currencyOptions.map((currency)=>/*#__PURE__*/ React.createElement("option", { key: currency.code, value: currency.code, __source: { fileName: "", lineNumber: 224, columnNumber: 19 }, __self: this }, currency.name, " (", currency.code, ")")))), /*#__PURE__*/ React.createElement("button", { onClick: fetchCryptoPrice, disabled: loading || !tokenAmount || useCustomPrice && !customPrice, className: "w-full bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200", __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 241, columnNumber: 19 }, __self: this }), "Calculating...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calculator mr-2", __source: { fileName: "", lineNumber: 246, columnNumber: 19 }, __self: this }), "Calculate Value")), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4", __source: { fileName: "", lineNumber: 254, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 255, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-triangle text-red-500 mr-2", __source: { fileName: "", lineNumber: 256, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-red-700", __source: { fileName: "", lineNumber: 257, columnNumber: 19 }, __self: this }, error))), cryptoPrice && !loading && /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-lg p-6 space-y-4", __source: { fileName: "", lineNumber: 264, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 265, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line text-green-500 mr-2", __source: { fileName: "", lineNumber: 266, columnNumber: 19 }, __self: this }), "Price Information"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 270, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg", __source: { fileName: "", lineNumber: 271, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 272, columnNumber: 21 }, __self: this }, useCustomPrice ? "Custom Price" : "Current Price"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-bold text-blue-600", __source: { fileName: "", lineNumber: 275, columnNumber: 21 }, __self: this }, "$", cryptoPrice.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 8 }), " ", "USD", useCustomPrice && /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500 block", __source: { fileName: "", lineNumber: 283, columnNumber: 25 }, __self: this }, "(Custom)"))), selectedCurrency !== "USD" && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg", __source: { fileName: "", lineNumber: 291, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 292, columnNumber: 23 }, __self: this }, "Exchange Rate"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-bold text-purple-600", __source: { fileName: "", lineNumber: 293, columnNumber: 23 }, __self: this }, "1 USD =", " ", exchangeRate.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 4 }), " ", selectedCurrency))), totalValue && tokenAmount && /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-green-500 to-blue-600 text-white p-6 rounded-lg mt-4", __source: { fileName: "", lineNumber: 306, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 307, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm opacity-90 mb-2", __source: { fileName: "", lineNumber: 308, columnNumber: 23 }, __self: this }, "Total Value"), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 309, columnNumber: 23 }, __self: this }, selectedCurrencyInfo?.symbol, totalValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }), " ", selectedCurrency), /*#__PURE__*/ React.createElement("p", { className: "text-sm opacity-90 mt-2", __source: { fileName: "", lineNumber: 317, columnNumber: 23 }, __self: this }, tokenAmount, " ", selectedCryptoInfo?.symbol, " ×", " ", selectedCurrencyInfo?.symbol, (cryptoPrice * exchangeRate).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 8 }))))))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-8 text-gray-500 text-sm", __source: { fileName: "", lineNumber: 337, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 338, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle mr-1", __source: { fileName: "", lineNumber: 339, columnNumber: 13 }, __self: this }), "Prices are fetched in real-time from CoinGecko and ExchangeRate-API")))); }