function MainComponent() { const [withdrawAmount, setWithdrawAmount] = React.useState(''); const [recipientAddress, setRecipientAddress] = React.useState(''); const [showTooltip, setShowTooltip] = React.useState(false); const [addressError, setAddressError] = React.useState(''); const [amountError, setAmountError] = React.useState(''); const handleInputChange = (event)=>{ const { name, value } = event.target; if (name === 'withdrawAmount') { if (!isNaN(value) && Number(value) >= 0) { setWithdrawAmount(value); setAmountError(''); } else { setAmountError('Invalid amount.'); } } else if (name === 'recipientAddress') { setRecipientAddress(value); setAddressError(''); } }; const handleSubmit = (event)=>{ event.preventDefault(); const isValidAddress = /^(bc1|[13])[a-zA-HJ-NP-Z0-9]{25,39}$/.test(recipientAddress); if (!isValidAddress) { setAddressError('Invalid Bitcoin address.'); return; } if (amountError) { return; } console.log(`Withdrawing ${withdrawAmount} BTC to ${recipientAddress}`); }; const handleFocus = ()=>setShowTooltip(true); const handleBlur = ()=>setShowTooltip(false); const handleClearClick = ()=>{ setWithdrawAmount(''); setAmountError(''); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-white shadow-lg rounded-md w-[400px]", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-5 text-2xl font-semibold text-center text-[#121212]", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "CoinMarket Cap Withdraw"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "withdrawAmount", className: "block mb-2 text-sm font-bold text-[#121212]", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "BTC Amount to Withdraw"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", inputMode: "decimal", pattern: "^\\d*\\.?\\d*$", name: "withdrawAmount", id: "withdrawAmount", value: withdrawAmount, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, className: `w-full p-4 mb-1 border rounded-md text-[#121212] focus:outline-none focus:ring-2 ${amountError ? 'border-red-500 focus:ring-red-500' : 'focus:ring-[#4CAF50]'}`, __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleClearClick, type: "button", className: "absolute inset-y-0 right-0 px-3 text-gray-700 bg-gray-200 rounded-r-md", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "❌"), showTooltip && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 z-10 p-2 bg-white border shadow-md rounded-md text-sm -mt-10", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "Minimum value: 0"), amountError && /*#__PURE__*/ React.createElement("p", { className: "text-sm text-red-500 mb-3", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, amountError)), /*#__PURE__*/ React.createElement("label", { htmlFor: "recipientAddress", className: "block mb-2 text-sm font-bold text-[#121212]", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Recipient Address"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "recipientAddress", id: "recipientAddress", placeholder: "16XtEkfrVc5vuDNXRYPQQ88gP9qY9FA8Uf", value: recipientAddress, onChange: handleInputChange, className: `w-full p-3 mb-1 border rounded-md text-[#121212] focus:outline-none focus:ring-2 ${addressError ? 'border-red-500 focus:ring-red-500' : 'focus:ring-[#4CAF50]'}`, __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }), addressError && /*#__PURE__*/ React.createElement("p", { className: "text-sm text-red-500 mb-3", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, addressError), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-3 text-sm font-semibold text-white bg-[#4CAF50] hover:bg-[#43A047] rounded-md", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "Withdraw")))); }