function MainComponent() { const [amount, setAmount] = React.useState(''); const [currencyToExchange, setCurrencyToExchange] = React.useState('BTC'); const [currencyToReceive, setCurrencyToReceive] = React.useState('ETH'); const [exchangeRates, setExchangeRates] = React.useState({}); const [languages, setLanguages] = React.useState([ 'en' ]); const [selectedLanguage, setSelectedLanguage] = React.useState('en'); const [translatedTexts, setTranslatedTexts] = React.useState({}); const [sliderIndex, setSliderIndex] = React.useState(0); const sliderImages = [ '/crypto-slide-1.jpg', '/crypto-slide-2.jpg', '/crypto-slide-3.jpg' ]; React.useEffect(()=>{ const cycleImages = setInterval(()=>{ setSliderIndex((prevIndex)=>(prevIndex + 1) % sliderImages.length); }, 3000); return ()=>clearInterval(cycleImages); }, [ sliderImages.length ]); React.useEffect(()=>{ const fetchExchangeRates = async ()=>{ const response = await fetch('/integrations/web-scraping/post', { method: 'POST', body: JSON.stringify({ url: 'https://vindax.com' }) }); const text = await response.text(); }; fetchExchangeRates(); }, []); React.useEffect(()=>{ const translateTexts = async ()=>{ const textsToTranslate = [ 'Exchange', 'Funds', 'Login', 'Register', 'Amount', 'Receive', 'Exchange', 'Rate:', 'You will receive:' ]; const translationsPromises = textsToTranslate.map((text)=>fetch('/integrations/google-translate/language/translate/v2', { method: 'POST', body: new URLSearchParams({ q: text, target: selectedLanguage }) }).then((res)=>res.json())); const translations = await Promise.all(translationsPromises); setTranslatedTexts(translations.reduce((acc, { data }, idx)=>{ acc[textsToTranslate[idx]] = data.translations[0].translatedText; return acc; }, {})); }; translateTexts(); }, [ selectedLanguage ]); const calculateReceivedAmount = ()=>{ const rate = exchangeRates[currencyToExchange]?.[currencyToReceive] || 0; return (amount * rate).toFixed(4); }; const handleAmountChange = (event)=>setAmount(event.target.value); const handleCurrencyToExchangeChange = (event)=>setCurrencyToExchange(event.target.value); const handleCurrencyToReceiveChange = (event)=>setCurrencyToReceive(event.target.value); const handleLanguageChange = (event)=>setSelectedLanguage(event.target.value); const handleSubmit = (event)=>{ event.preventDefault(); const receivedAmount = calculateReceivedAmount(); alert(`You will receive ${receivedAmount} ${currencyToReceive}`); }; const getTranslation = (key)=>translatedTexts[key] || key; return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-[#121212] text-white flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 95, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full flex justify-between items-center py-4 px-6", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl text-white", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, "VinDAX"), /*#__PURE__*/ React.createElement("nav", { className: "flex-grow", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex justify-end items-center font-roboto text-lg", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "px-3", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, getTranslation('Exchange')), /*#__PURE__*/ React.createElement("li", { className: "px-3", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, getTranslation('Funds')))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#2c2c2c] px-4 py-2 rounded text-sm font-roboto", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, getTranslation('Login')), /*#__PURE__*/ React.createElement("button", { className: "bg-[#4CAF50] px-4 py-2 rounded text-sm font-roboto", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, getTranslation('Register')), /*#__PURE__*/ React.createElement("select", { className: "p-2 bg-[#2c2c2c] rounded text-sm", value: selectedLanguage, onChange: handleLanguageChange, __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, languages.map((lang)=>/*#__PURE__*/ React.createElement("option", { key: lang, value: lang, __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, lang.toUpperCase()))))), /*#__PURE__*/ React.createElement("div", { className: "w-full flex overflow-hidden relative", __source: { fileName: "", lineNumber: 122, columnNumber: 7 }, __self: this }, sliderImages.map((src, index)=>/*#__PURE__*/ React.createElement("div", { key: src, className: `absolute transition-opacity duration-1000 ${index === sliderIndex ? 'opacity-100' : 'opacity-0'}`, style: { width: '100%' }, __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: src, alt: `Crypto currency exchange slide ${index + 1}`, className: "w-full object-cover", style: { height: '300px' }, __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1e1e1e] shadow-lg rounded-lg p-8 mt-6 flex flex-col items-center w-full max-w-md", __source: { fileName: "", lineNumber: 140, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-4", __source: { fileName: "", lineNumber: 141, columnNumber: 9 }, __self: this }, getTranslation('Exchange')), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full", __source: { fileName: "", lineNumber: 142, columnNumber: 9 }, __self: this }))); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 150, columnNumber: 1 }, __self: this }, ` @keyframes slideFade { from { opacity: 0.5; } to { opacity: 1; } } .slide-enter { opacity: 0; } .slide-enter-active { opacity: 1; transition: opacity 1000ms; } .slide-exit { opacity: 1; } .slide-exit-active { opacity: 0; transition: opacity 1000ms; } `);