function MainComponent() { const [initialAmount, setInitialAmount] = useState(''); const [yearlyRate] = useState(4); // Fixed 4% APY const [btcPrice, setBtcPrice] = useState(null); const [showResults, setShowResults] = useState(false); const [investmentPeriod, setInvestmentPeriod] = useState(12); const [finalBalance, setFinalBalance] = useState(0); const [accruedInterest, setAccruedInterest] = useState(0); const [deposits, setDeposits] = useState(0); const [monthlyData, setMonthlyData] = useState([]); const [lastUpdateTime, setLastUpdateTime] = useState(null); const [loading, setLoading] = useState(true); const fetchBitcoinPrice = async ()=>{ console.log('Fetching price at:', new Date().toLocaleTimeString()); setLoading(true); try { const response = await fetch(`/integrations/web-scraping/post`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Cache-Control': 'no-cache, no-store, must-revalidate', 'Pragma': 'no-cache', 'Expires': '0' }, body: JSON.stringify({ url: `https://api.coinbase.com/v2/prices/BTC-USD/spot?_=${Date.now()}`, getText: true }) }); const data = await response.text(); const priceMatch = data.match(/"amount":"([0-9.]+)"/); if (priceMatch) { const price = parseFloat(priceMatch[1]); if (!isNaN(price) && price > 0) { const formattedPrice = Number(price.toFixed(2)); setBtcPrice(formattedPrice); setLastUpdateTime(new Date().toLocaleTimeString()); console.log('New price set:', formattedPrice, 'at', new Date().toLocaleTimeString()); } } } catch (error) { console.error("Failed to fetch Bitcoin price:", error); } finally{ setLoading(false); } }; useEffect(()=>{ // Immediate fetch on load fetchBitcoinPrice(); // If price isn't set within 5 seconds, try again const backupCheck = setInterval(()=>{ if (!btcPrice) { console.log('Backup check triggered - no price found'); fetchBitcoinPrice(); } }, 5000); // Regular interval for updates const intervalId = setInterval(()=>{ console.log('Fetching price at:', new Date().toLocaleTimeString()); fetchBitcoinPrice(); }, 120000); // Cleanup both intervals return ()=>{ clearInterval(intervalId); clearInterval(backupCheck); }; }, []); useEffect(()=>{ if (!btcPrice) { const backupCheck = setInterval(()=>{ if (!btcPrice) { console.log('Backup check triggered - no price found'); fetchBitcoinPrice(); } }, 5000); return ()=>clearInterval(backupCheck); } }, [ btcPrice ]); const getFutureDate = (months)=>{ const date = new Date(); date.setDate(1); // Set to first of current month date.setMonth(date.getMonth() + months); // Add months // Get last day of the month const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); date.setDate(lastDay); // Set to last day of month return date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }); }; const calculateCompoundInterest = ()=>{ const principal = Number(initialAmount) || 0; const rate = yearlyRate / 100; const n = 365; // Compound daily const t = investmentPeriod / 12; // Convert months to years const finalAmt = principal * Math.pow(1 + rate / n, n * t); const interest = finalAmt - principal; setFinalBalance(finalAmt); setAccruedInterest(interest); setDeposits(principal); }; const calculateMonthlyData = ()=>{ const dataPoints = []; const principal = Number(initialAmount) || 0; const rate = yearlyRate / 100; const n = 365; // Daily compounding for(let month = 0; month <= investmentPeriod; month++){ const t = month / 12; // Time in years const amount = principal * Math.pow(1 + rate / n, n * t); const interest = amount - principal; dataPoints.push({ month, total: amount, interest: interest, initial: principal }); } setMonthlyData(dataPoints); }; const handleSubmit = (e)=>{ e.preventDefault(); calculateCompoundInterest(); calculateMonthlyData(); setShowResults(true); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0f0f0f] text-white font-roboto", __source: { fileName: "", lineNumber: 145, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-[#1a1a1a] p-4", __source: { fileName: "", lineNumber: 146, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 147, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 148, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://bitcoin.org/img/icons/opengraph.png", alt: "Bitcoin Logo", className: "h-12 w-12 rotate-animation", __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, "Bitcoin Advisory Services")), /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-[#ffd700] hover:underline", __source: { fileName: "", lineNumber: 156, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home mr-2", __source: { fileName: "", lineNumber: 157, columnNumber: 13 }, __self: this }), "Back to Home"))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 py-12", __source: { fileName: "", lineNumber: 163, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto bg-[#1a1a1a] rounded-lg shadow-lg p-8", __source: { fileName: "", lineNumber: 164, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 165, columnNumber: 11 }, __self: this }, "Bitcoin Savings Calculator - Earn 4% APY"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-8", __source: { fileName: "", lineNumber: 166, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 items-end", __source: { fileName: "", lineNumber: 167, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 168, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 169, columnNumber: 17 }, __self: this }, "Initial Amount", /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 171, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-bitcoin text-[#ffd700]", __source: { fileName: "", lineNumber: 172, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("input", { type: "number", value: initialAmount, onChange: (e)=>setInitialAmount(e.target.value), className: "w-full p-3 rounded bg-[#2a2a2a] text-white", min: "0", step: "0.00000001", placeholder: "Enter BTC amount", required: true, __source: { fileName: "", lineNumber: 175, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 187, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 188, columnNumber: 17 }, __self: this }, "Investment Period (Months)"), /*#__PURE__*/ React.createElement("input", { type: "number", value: investmentPeriod, onChange: (e)=>setInvestmentPeriod(Number(e.target.value)), className: "w-full p-3 rounded bg-[#2a2a2a] text-white", min: "1", max: "360", required: true, __source: { fileName: "", lineNumber: 189, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#ffd700] text-black px-6 py-3 rounded text-lg font-bold hover:bg-[#e5c100] transition-colors h-[48px]", __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calculator mr-2", __source: { fileName: "", lineNumber: 204, columnNumber: 17 }, __self: this }), "Calculate"))), showResults && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 mb-8", __source: { fileName: "", lineNumber: 212, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-6 rounded-lg", __source: { fileName: "", lineNumber: 213, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 mb-1", __source: { fileName: "", lineNumber: 214, columnNumber: 19 }, __self: this }, "Initial Investment"), /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold text-white", __source: { fileName: "", lineNumber: 215, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-bitcoin mr-1", __source: { fileName: "", lineNumber: 216, columnNumber: 21 }, __self: this }), Number(initialAmount).toFixed(8), btcPrice && /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400 mt-1", __source: { fileName: "", lineNumber: 219, columnNumber: 23 }, __self: this }, "$", (Number(initialAmount) * btcPrice).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }), " USD"))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-6 rounded-lg", __source: { fileName: "", lineNumber: 228, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 mb-1", __source: { fileName: "", lineNumber: 229, columnNumber: 19 }, __self: this }, "Fixed Interest Rate"), /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold text-white", __source: { fileName: "", lineNumber: 230, columnNumber: 19 }, __self: this }, "4% APY")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-6 rounded-lg", __source: { fileName: "", lineNumber: 232, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 mb-1", __source: { fileName: "", lineNumber: 233, columnNumber: 19 }, __self: this }, "Accrued Interest at 4% APY"), /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold text-[#ffd700]", __source: { fileName: "", lineNumber: 234, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-bitcoin mr-1", __source: { fileName: "", lineNumber: 235, columnNumber: 21 }, __self: this }), accruedInterest.toFixed(8), btcPrice && /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400 mt-1", __source: { fileName: "", lineNumber: 238, columnNumber: 23 }, __self: this }, "$", (accruedInterest * btcPrice).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }), " USD")))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-6 rounded-lg mb-8 text-center", __source: { fileName: "", lineNumber: 248, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 249, columnNumber: 17 }, __self: this }, "Estimated Final Balance at 4% APY"), /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-bold text-[#ffd700] mb-2", __source: { fileName: "", lineNumber: 250, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-bitcoin mr-2", __source: { fileName: "", lineNumber: 251, columnNumber: 19 }, __self: this }), finalBalance.toFixed(8), " BTC"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400", __source: { fileName: "", lineNumber: 254, columnNumber: 17 }, __self: this }, "on ", getFutureDate(investmentPeriod), btcPrice && /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 257, columnNumber: 21 }, __self: this }, "$", (finalBalance * btcPrice).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }), " USD", /*#__PURE__*/ React.createElement("span", { className: "text-sm ml-2", __source: { fileName: "", lineNumber: 262, columnNumber: 23 }, __self: this }, "(based on current exchange rate)")))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] rounded-lg p-6", __source: { fileName: "", lineNumber: 268, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 269, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl text-center", __source: { fileName: "", lineNumber: 270, columnNumber: 19 }, __self: this }, "Monthly Interest Breakdown"), lastUpdateTime && /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 272, columnNumber: 21 }, __self: this }, "Last price update: ", lastUpdateTime, loading && /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 274, columnNumber: 35 }, __self: this }, "Updating..."))), /*#__PURE__*/ React.createElement("div", { className: `${monthlyData.length > 14 ? 'overflow-auto max-h-[800px]' : ''}`, __source: { fileName: "", lineNumber: 278, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 279, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: `${monthlyData.length > 14 ? 'sticky top-0' : ''} bg-[#2a2a2a]`, __source: { fileName: "", lineNumber: 280, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 281, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "text-left p-2 text-[#ffd700]", __source: { fileName: "", lineNumber: 282, columnNumber: 25 }, __self: this }, "Date"), /*#__PURE__*/ React.createElement("th", { className: "text-right p-2 text-[#ffd700]", __source: { fileName: "", lineNumber: 283, columnNumber: 25 }, __self: this }, "Balance (BTC)"), /*#__PURE__*/ React.createElement("th", { className: "text-right p-2 text-[#ffd700]", __source: { fileName: "", lineNumber: 284, columnNumber: 25 }, __self: this }, "Interest Earned"), /*#__PURE__*/ React.createElement("th", { className: "text-right p-2 text-[#ffd700]", __source: { fileName: "", lineNumber: 285, columnNumber: 25 }, __self: this }, "Total Interest"))), /*#__PURE__*/ React.createElement("tbody", { className: "divide-y divide-gray-700", __source: { fileName: "", lineNumber: 288, columnNumber: 21 }, __self: this }, monthlyData.map((data, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "hover:bg-[#1a1a1a]", __source: { fileName: "", lineNumber: 290, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 291, columnNumber: 27 }, __self: this }, getFutureDate(data.month)), /*#__PURE__*/ React.createElement("td", { className: "text-right p-2", __source: { fileName: "", lineNumber: 292, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-bitcoin mr-1", __source: { fileName: "", lineNumber: 293, columnNumber: 29 }, __self: this }), data.total.toFixed(8)), /*#__PURE__*/ React.createElement("td", { className: "text-right p-2 text-green-400", __source: { fileName: "", lineNumber: 296, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-bitcoin mr-1", __source: { fileName: "", lineNumber: 297, columnNumber: 29 }, __self: this }), (data.total - (monthlyData[index - 1]?.total || Number(initialAmount))).toFixed(8)), /*#__PURE__*/ React.createElement("td", { className: "text-right p-2 text-[#ffd700]", __source: { fileName: "", lineNumber: 300, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-bitcoin mr-1", __source: { fileName: "", lineNumber: 301, columnNumber: 29 }, __self: this }), data.interest.toFixed(8))))))))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1a1a1a] mt-12 py-6", __source: { fileName: "", lineNumber: 315, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto text-center text-gray-400", __source: { fileName: "", lineNumber: 316, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center mb-2", __source: { fileName: "", lineNumber: 317, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://bitcoin.org/img/icons/opengraph.png", alt: "Bitcoin Logo", className: "h-6 w-6 rotate-animation mr-2", __source: { fileName: "", lineNumber: 318, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 323, columnNumber: 13 }, __self: this }, "Bitcoin Advisory Services")), /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 325, columnNumber: 11 }, __self: this }, "© ", new Date().getFullYear(), " Bitcoin Advisory Services. All Rights Reserved."))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 331, columnNumber: 7 }, __self: this }, ` @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rotate-animation { animation: rotate 10s linear infinite; } `)); }