function MainComponent() { const [currency, setCurrency] = React.useState('USD'); const [amount, setAmount] = React.useState(''); const [operation, setOperation] = React.useState('send'); const [recipientName, setRecipientName] = React.useState(''); const [recipientAddress, setRecipientAddress] = React.useState(''); const [showContacts, setShowContacts] = React.useState(false); const contacts = [ { name: "Alice", address: "0x...a1b2" }, { name: "Bob", address: "0x...b3c4" }, { name: "Charlie", address: "0x...c5d6" }, { name: "Daisy", address: "0x...d7e8" } ]; const handleSubmit = (e)=>{ e.preventDefault(); alert(`Transaction type: ${operation}. Amount: ${amount} ${currency}. Recipient: ${recipientName} - ${recipientAddress}.`); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f8fa]", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-8 space-y-8 bg-white shadow-md rounded-xl", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl text-center", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "xPay"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "operation", className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "Operation"), /*#__PURE__*/ React.createElement("select", { name: "operation", value: operation, onChange: (e)=>setOperation(e.target.value), className: "w-full px-3 py-2 mt-1 border rounded-md", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "send", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "Send Money"), /*#__PURE__*/ React.createElement("option", { value: "request", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, "Request Money"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "currency", className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Currency"), /*#__PURE__*/ React.createElement("select", { name: "currency", value: currency, onChange: (e)=>setCurrency(e.target.value), className: "w-full px-3 py-2 mt-1 border rounded-md", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "USD", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "USD"), /*#__PURE__*/ React.createElement("option", { value: "EUR", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "EUR"), /*#__PURE__*/ React.createElement("option", { value: "GBP", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "GBP"), /*#__PURE__*/ React.createElement("option", { value: "JPY", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, "JPY"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "amount", className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Amount"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "amount", value: amount, onChange: (e)=>setAmount(e.target.value), className: "w-full px-3 py-2 mt-1 border rounded-md", placeholder: "Enter amount", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "recipientName", className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Recipient Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "recipientName", value: recipientName, onChange: (e)=>setRecipientName(e.target.value), className: "w-full px-3 py-2 mt-1 border rounded-md", placeholder: "Recipient's name", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "recipientAddress", className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Recipient Address"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "recipientAddress", value: recipientAddress, onChange: (e)=>setRecipientAddress(e.target.value), className: "w-full px-3 py-2 mt-1 border rounded-md", placeholder: "Recipient's address", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 mt-4 text-white bg-blue-500 rounded-md hover:bg-blue-600", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, "Proceed with Transaction"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowContacts(!showContacts), className: "w-full py-2 text-white bg-green-500 rounded-md hover:bg-green-600", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, showContacts ? 'Hide' : 'Show', " Contacts")), showContacts && /*#__PURE__*/ React.createElement("ul", { className: "mt-4 space-y-2", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, contacts.map((contact, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "px-4 py-2 text-sm font-roboto bg-gray-100 rounded-md", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }, contact.name, " - ", contact.address))))); }