let greeting = "Have a great day"; const Button = styled.button` /* Adapt the colors based on primary prop */ background: ${(props) => (props.primary ? "purple" : "white")}; color: ${(props) => (props.primary ? "white" : "purple")}; font-weight: bold; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid purple; border-radius: 10px; `; const Div = styled.div` background: radial-gradient( 40.33% 70.37% at 60.65% 14.31%, #340000 0%, #21002f 100% ) black; min-height: 600px; min-width: 300px; color: white; margin: auto; `; function JumpLogo() { return ( <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M26.2212 0.823372C26.275 0.403568 26.6566 0.107797 27.0782 0.161573C30.0168 0.538877 32.8288 1.44787 35.4352 2.86341C35.8073 3.06551 35.9444 3.53042 35.7431 3.90165C35.6113 4.14451 35.3676 4.28762 35.1108 4.30064C34.9738 4.30757 34.8341 4.27895 34.7049 4.20869C32.265 2.88336 29.6334 2.03248 26.883 1.67946C26.4641 1.62568 26.1674 1.24231 26.2212 0.822505V0.823372ZM15.7512 3.01954C15.8293 3.0152 15.9074 2.99959 15.9837 2.9701C18.1582 2.14003 20.4506 1.65604 22.7977 1.53027C23.2201 1.50772 23.5436 1.1469 23.5211 0.724493C23.4985 0.302086 23.1377 -0.0214406 22.7153 0.00111084C20.2095 0.135552 17.7609 0.652501 15.4373 1.53981C15.0426 1.68987 14.844 2.13309 14.9949 2.52774C15.1163 2.84607 15.4277 3.03689 15.7512 3.01954ZM37.3608 5.48806C38.5716 6.26001 39.7122 7.14993 40.7496 8.13439C41.0566 8.42582 41.5406 8.41281 41.832 8.10576C42.1235 7.79958 42.1113 7.31386 41.8034 7.02329C40.6949 5.97205 39.4771 5.02055 38.183 4.19655C37.8265 3.9693 37.353 4.07425 37.1257 4.43074C36.9852 4.65192 36.9722 4.9182 37.0676 5.14371C37.1257 5.28076 37.2255 5.40219 37.3599 5.48806H37.3608ZM24.8586 5.13504C29.0167 5.31979 33.0578 6.91487 36.2358 9.62799C36.3911 9.76069 36.5845 9.82054 36.7736 9.81013C36.9757 9.79972 37.1734 9.70865 37.3148 9.54212C37.5898 9.22032 37.5516 8.7372 37.2298 8.46312C33.7933 5.52969 29.4235 3.8045 24.9262 3.60414C24.4995 3.58246 24.1456 3.91292 24.1274 4.33533C24.1083 4.75774 24.4362 5.11596 24.8586 5.13417V5.13504ZM13.5637 8.14393C13.6904 8.13699 13.817 8.09882 13.9315 8.02683C16.1147 6.64599 18.5164 5.74306 21.0717 5.34494C21.4897 5.27989 21.776 4.88871 21.71 4.47064C21.645 4.05257 21.246 3.77154 20.8357 3.83226C18.0723 4.26334 15.4737 5.23999 13.1136 6.73359C12.7562 6.95997 12.6495 7.43269 12.8759 7.79004C13.0294 8.03204 13.2966 8.15954 13.5646 8.14479L13.5637 8.14393ZM39.8943 25.2579C39.9169 25.2579 39.9395 25.2579 39.9611 25.2579C40.3532 25.2371 40.6715 24.9179 40.6845 24.518C40.7001 24.0444 40.6949 23.5605 40.6689 23.0782C40.5483 20.8274 39.9906 18.6668 39.0105 16.658C38.8258 16.2789 38.3687 16.1211 37.9861 16.3058C37.6062 16.4914 37.4484 16.9494 37.634 17.3302C38.5239 19.1542 39.0305 21.1162 39.1397 23.1606C39.1632 23.5986 39.1684 24.0384 39.1545 24.4686C39.1406 24.8919 39.4719 25.2457 39.8943 25.2588V25.2579ZM22.3831 8.1075C22.4057 8.5299 22.7665 8.85343 23.1889 8.83088C23.94 8.79098 24.699 8.80573 25.444 8.87511C25.4822 8.87945 25.5204 8.87945 25.5577 8.87772C25.9306 8.85777 26.242 8.5672 26.2776 8.18469C26.3175 7.76402 26.0078 7.39019 25.5872 7.35115C24.7675 7.27396 23.9331 7.25748 23.1074 7.30172C22.685 7.32427 22.3614 7.68509 22.384 8.1075H22.3831ZM20.389 7.67034C18.5806 8.06933 16.8615 8.76322 15.282 9.73207C14.9212 9.95325 14.8084 10.4242 15.0296 10.7851C15.1823 11.0331 15.4529 11.1641 15.7244 11.1493C15.8475 11.1424 15.9707 11.106 16.0834 11.0375C17.5181 10.1579 19.0776 9.52824 20.7195 9.16655C21.1324 9.07547 21.3935 8.66695 21.3024 8.25408C21.2113 7.84122 20.8054 7.58448 20.3899 7.67121L20.389 7.67034ZM25.8274 47.8961C13.4813 48.8354 2.2906 40.0768 0.314744 27.8539C-0.993243 19.7649 1.83003 11.7452 7.76801 6.28777C8.0794 6.0024 8.56339 6.02235 8.84962 6.33374C9.13585 6.64512 9.11503 7.12911 8.80365 7.41534C5.51026 10.4424 3.24123 14.3118 2.19259 18.5375C2.42504 18.3936 2.69566 18.3363 2.97148 18.3892C3.54221 18.4959 3.84492 18.9799 4.10166 19.5636C5.10347 15.0612 7.61709 10.9594 11.3034 8.01989C11.6347 7.75621 12.1161 7.81086 12.3798 8.14132C12.6435 8.47179 12.5888 8.95404 12.2584 9.21686C8.50007 12.2136 6.0593 16.5166 5.3576 21.1821C5.62475 21.294 5.95869 21.3756 6.3863 21.399C6.73758 21.4137 7.12443 21.3244 7.53643 21.1596C8.18782 17.2695 10.1992 13.7376 13.3244 11.1337C13.6487 10.8631 14.1319 10.9065 14.4025 11.2326C14.6731 11.557 14.6289 12.0401 14.3045 12.3107C11.8065 14.3915 10.0952 17.1255 9.31539 20.1578C9.69703 19.8993 10.0882 19.6166 10.4829 19.3251C11.5827 18.5124 12.9471 17.2166 14.0443 16.1749C14.5708 15.6744 15.0686 15.2017 15.4685 14.8469C16.3194 14.0923 18.9093 11.7981 22.6433 12.8346C26.1128 13.7983 27.4346 15.8166 28.492 17.8012C28.5024 17.8202 28.5119 17.8402 28.5206 17.8601C28.59 18.0154 28.6784 18.1941 28.7496 18.3198C29.0731 18.4196 29.7219 18.5731 30.1443 18.6616C29.4834 18.1438 29.0401 17.3857 28.8649 17.0518C28.6741 16.6875 28.3211 16.0109 28.7955 15.4419C29.2509 14.8964 29.9092 15.1028 30.1911 15.1904C30.2232 15.2008 30.2614 15.2103 30.3048 15.2207L30.3377 15.2294C30.9067 15.3751 32.0881 15.6761 33.089 16.9668C33.3874 17.2053 34.8428 18.0145 35.5506 18.4066C37.3859 19.4266 37.6279 19.5688 37.8153 19.8932C37.9254 20.0823 38.2559 20.6548 37.4041 21.7806C37.2046 22.2724 36.6782 22.8015 35.8386 22.72C35.705 22.707 35.5532 22.6792 35.3606 22.6437C34.8263 22.5465 33.5773 22.3193 33.1237 22.6653C32.9719 22.7816 32.4437 23.2361 31.9779 23.6368C31.5165 24.034 31.0455 24.4391 30.7419 24.6889C29.9205 25.3654 29.3593 25.5042 28.4295 25.7332C27.8015 25.8885 27.7044 26.0082 27.2386 26.5841C26.8969 27.0074 26.5499 27.5512 26.321 27.9112C26.2082 28.0881 26.1197 28.2251 26.0651 28.2997C25.7381 28.7525 25.2671 29.1862 24.2332 28.9797C24.1577 28.9641 24.0693 28.9468 23.9739 28.9234C24.1196 29.9078 24.3729 30.3354 24.8395 30.8446C25.3859 31.4413 26.406 32.0971 26.8683 32.2861C26.9576 32.3226 27.0573 32.3607 27.164 32.3998C27.7877 32.6348 28.6247 32.9497 29.165 33.5768C29.5909 34.072 29.8043 34.3834 29.9205 34.687C30.1616 34.8692 30.6057 35.2482 30.7254 35.9664L30.7393 36.0262C30.8746 36.5969 30.5693 36.9881 30.2666 37.1495C30.2024 37.1833 30.0307 37.2622 29.8086 37.2622C29.6352 37.2622 29.3845 37.2128 29.1434 36.9899C28.8771 37.0801 28.5934 37.0618 28.2985 36.9361C27.8345 37.1243 27.3375 36.9768 26.8214 36.4998L26.6757 36.3645C26.1787 35.9004 25.4284 35.2014 24.2566 34.3695C23.5176 33.8439 22.8801 33.5178 22.3675 33.255C21.9581 33.0451 21.6354 32.8803 21.3588 32.6712C20.5287 32.0433 20.5053 31.5515 20.5339 30.6659L20.5426 30.3519C20.5677 29.4525 20.5989 28.3336 20.3613 26.7246C20.1826 25.5155 18.9353 24.6568 17.7297 23.8259C17.2865 23.5206 16.8701 23.2335 16.5032 22.9273C15.8579 22.3886 15.4641 22.033 15.2039 21.798C15.1103 21.713 15.0313 21.6418 14.9689 21.5872C14.9116 21.6193 14.85 21.654 14.7911 21.6878C14.68 21.7511 14.5335 21.8457 14.3487 21.9662C13.5941 22.4554 12.3364 23.2716 10.4048 24.0687C9.86704 24.2908 9.35095 24.4669 8.85569 24.6013C8.85742 24.6429 8.85569 24.6846 8.85829 24.7262C9.24253 32.385 15.1198 38.4852 22.7648 39.0837C29.6889 39.6258 35.934 35.5127 38.2516 29.1584C38.3825 28.7985 38.7442 28.5504 39.1215 28.6207C39.6012 28.71 39.8657 29.1975 39.7079 29.6355C37.5932 35.4884 32.4532 39.6136 26.3773 40.4819C25.8257 40.5608 25.4258 41.0474 25.4553 41.6034V41.6068C25.4891 42.2417 26.0625 42.711 26.6922 42.6208C36.2384 41.2512 43.3517 32.7701 42.826 22.9594C42.7081 20.7623 42.218 18.6295 41.368 16.6207C41.1876 16.1931 41.4244 15.6935 41.8954 15.5772C42.264 15.4862 42.6448 15.7065 42.7922 16.0569C43.7576 18.3502 44.2902 20.7918 44.3734 23.3055C44.7247 33.9185 36.6738 43.1533 26.111 44.2419C19.6587 44.9063 13.6592 42.4967 9.48019 38.2527C9.10029 37.8668 8.48532 37.8459 8.07333 38.1981H8.07246C7.61275 38.5927 7.585 39.2944 8.00914 39.7255C12.3703 44.1465 18.5268 46.7581 25.2012 46.4008C37.5724 45.7381 47.0978 35.1354 46.4352 22.7642C46.2391 19.1074 45.1462 15.5269 43.2736 12.4096C43.0342 12.0106 43.1999 11.4824 43.65 11.302C44.0031 11.1606 44.4107 11.3272 44.6067 11.6541C46.5956 14.977 47.757 18.79 47.9652 22.6818C48.6634 35.714 38.7763 46.909 25.8283 47.8944L25.8274 47.8961ZM7.33173 24.8841C6.5511 24.9534 5.82945 24.891 5.16418 24.6976C5.16765 24.7904 5.17025 24.8832 5.17459 24.9769C5.68894 34.5899 13.3582 42.1533 22.7335 42.7778C23.3797 42.8211 23.9192 42.286 23.8845 41.6398C23.8559 41.0977 23.4283 40.6605 22.8862 40.625C14.5872 40.0768 7.79664 33.3903 7.33086 24.8849L7.33173 24.8841ZM2.43372 20.248C2.40856 20.876 2.82316 22.0174 3.87701 22.9715C5.50853 24.3142 7.61709 24.1641 9.98933 23.1849C12.3616 22.2056 13.7043 21.1769 14.2568 20.863C14.8093 20.549 14.922 20.4865 15.2109 20.6244C15.4997 20.7623 15.7001 21.0512 17.0688 22.1935C18.4366 23.3358 20.9442 24.4417 21.2607 26.5867C21.521 28.3483 21.4741 29.5739 21.449 30.4898C21.4238 31.4058 21.3735 31.5194 21.8878 31.908C22.4022 32.2974 23.4187 32.6357 24.7623 33.5898C26.105 34.5439 26.9082 35.3219 27.4234 35.799C27.9377 36.276 27.988 35.975 27.988 35.8241C27.988 35.6732 28.0132 35.6359 28.4018 35.9247C28.7912 36.2136 28.891 36.0757 28.904 35.8623C28.9161 35.6489 28.9664 35.6611 29.3932 35.975C29.8199 36.289 29.7948 36.4521 29.7323 36.1381C29.6317 35.498 29.0549 35.3974 29.0167 35.184C28.9794 34.9706 28.8537 34.7451 28.3888 34.2048C27.9247 33.6652 27.0079 33.4016 26.4563 33.1752C25.9037 32.9497 24.7614 32.2341 24.084 31.4934C23.4066 30.7526 23.0545 30.0752 22.9044 28.4437C22.7535 26.8122 22.7205 25.6196 22.6659 25.0671C22.5557 23.956 23.5202 22.8952 23.9756 22.6679C24.9939 22.1588 25.6722 23.0383 25.4649 24.2136C25.3348 24.9526 24.8369 26.611 24.7996 26.6986C24.7623 26.7862 24.4232 27.2381 24.4232 27.2381C24.4232 27.2381 24.1343 27.2129 24.097 27.1626C24.0597 27.1123 24.0094 26.6101 23.8715 26.6101C23.7336 26.6101 23.7206 27.0872 23.6833 27.4757C23.646 27.8652 23.8091 27.9276 24.3737 28.0404C24.9384 28.1532 25.0763 27.9649 25.2393 27.7394C25.4024 27.5139 25.9168 26.6353 26.4441 25.9821C26.9715 25.329 27.2352 25.028 28.1511 24.8025C29.067 24.577 29.4435 24.4764 30.0836 23.949C30.7237 23.4217 32.1679 22.1519 32.4931 21.9029C33.4568 21.1674 35.3676 21.7147 35.8819 21.765C36.3963 21.8153 36.496 21.3209 36.496 21.3209C36.496 21.3209 37.0737 20.6105 36.9358 20.372C36.7979 20.1335 32.6432 18.0249 32.317 17.5982C31.3881 16.3683 30.2588 16.2304 29.8572 16.1046C29.4556 15.9788 29.3177 15.9415 29.6655 16.6068C30.0133 17.2721 30.6101 18.0128 31.1999 18.188C31.7897 18.3641 31.7645 18.489 31.7021 18.6147C31.6396 18.7405 30.4722 19.6946 30.2709 19.6695C30.0697 19.6443 28.25 19.2549 28.0748 19.0918C27.8987 18.9287 27.5977 18.2505 27.5977 18.2505C26.4684 16.1289 25.2758 14.5728 22.3389 13.7566C19.402 12.9404 17.2743 14.4835 16.0566 15.5625C14.8388 16.6424 12.6868 18.8524 11.005 20.0945C9.3232 21.3374 7.75413 22.4338 6.28569 22.354C4.13028 22.2369 3.56216 20.8976 3.36093 20.3963C3.1597 19.8941 2.94633 19.3668 2.74597 19.3295C2.54474 19.2922 2.45714 19.6183 2.43198 20.2454L2.43372 20.248ZM23.718 25.6699C23.7822 25.6586 23.8498 25.6534 23.9192 25.6534C24.0016 25.6534 24.0805 25.6621 24.1551 25.6786C24.3243 25.0905 24.5047 24.4131 24.5689 24.0479C24.6201 23.7556 24.5723 23.57 24.5368 23.4902C24.5142 23.4971 24.4856 23.5093 24.4518 23.5258C24.2618 23.6203 23.6035 24.3341 23.6668 24.9734C23.685 25.1538 23.6998 25.3863 23.7163 25.6699H23.718ZM7.27535 35.6073C5.17286 32.5975 3.8562 28.9867 3.64543 25.0584C3.62548 24.6854 3.6168 24.3125 3.61767 23.9412C3.51532 23.8684 3.41471 23.7929 3.31583 23.7114L3.28373 23.6836C2.44759 22.9273 1.93411 22.0504 1.69125 21.281C1.5386 22.5595 1.49349 23.8588 1.56375 25.1685C1.79534 29.4924 3.24384 33.4658 5.55536 36.78C5.90751 37.2856 6.62049 37.3776 7.08887 36.9768C7.48959 36.6334 7.57632 36.0401 7.27448 35.6073H7.27535Z" fill="white" /> </svg> ); } function JumpTextIcon() { return ( <svg width="153" height="18" viewBox="0 0 153 18" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M6.96 17.6914C13.032 17.6914 15.744 15.1474 15.744 9.74741V0.243405H12.696V9.74741C12.696 13.1314 11.04 14.6434 6.96 14.6434H0.576V17.6914H6.96ZM34.1042 9.98741C34.1042 13.4914 32.5442 14.9314 27.7442 14.9314C22.9442 14.9314 21.3842 13.4914 21.3842 9.98741V0.243405H18.2402V9.98741C18.2402 15.3874 20.9282 17.9314 27.6482 17.9314C34.4162 17.9314 37.0802 15.3874 37.0802 9.98741V0.243405H34.1042V9.98741ZM63.6154 17.6914L59.1514 1.27541C58.9114 0.435405 58.4314 0.0274048 57.6874 0.0274048C57.0394 0.0274048 56.5114 0.387406 56.2234 1.05941L50.8474 13.3954L45.4714 1.05941C45.1834 0.387406 44.5834 0.0274048 43.9354 0.0274048C43.1194 0.0274048 42.6394 0.435405 42.4234 1.27541L37.9354 17.6914H40.9354L44.2714 5.42741L49.1914 16.7794C49.5034 17.5234 50.0314 17.9314 50.7514 17.9314C51.4954 17.9314 51.9754 17.5234 52.3114 16.7794L57.2554 5.42741L60.5914 17.6914H63.6154ZM77.901 12.8434C81.933 12.8434 84.285 10.2514 84.285 6.48341C84.285 2.66741 81.933 0.243405 77.901 0.243405H65.637V17.6914H68.661V3.29141H77.901C80.037 3.29141 81.309 4.56341 81.309 6.57941C81.309 8.54741 80.037 9.89141 77.901 9.89141H70.893V12.8434H77.901ZM103.608 17.6914C108.528 17.6914 112.104 13.8514 112.104 8.78741C112.104 3.72341 108.528 0.243405 103.608 0.243405H93.5042V17.6914H103.608ZM96.5282 14.6434V3.29141H103.608C106.752 3.29141 109.056 5.64341 109.056 8.93141C109.056 12.2194 106.752 14.6434 103.608 14.6434H96.5282ZM130.198 17.6914V14.6434H117.622V3.29141H130.174V0.243405H114.598V17.6914H130.198ZM129.526 10.1074V7.53941H119.854V10.1074H129.526ZM135.833 17.6914V3.29141H147.617V0.243405H132.809V17.6914H135.833ZM146.897 10.4674V7.80341H138.065V10.4674H146.897ZM152.947 17.6914V0.243405H149.899V17.6914H152.947Z" fill="white" /> </svg> ); } const Header = styled.div` padding: 0.5rem 1rem; display: flex; justify-content: start; align-items: center; gap: 0.5rem; `; const GlassPanel = styled.div` background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-radius: 10px; padding: 1rem; min-height: 500px; padding-left: 1rem; padding-right: 1rem; `; const Select = styled.select` background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-radius: 10px; padding: 0.5rem; color: white; `; const Option = styled.option` background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-radius: 10px; padding: 0.5rem; color: black; `; const Input = styled.input` background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-radius: 10px; padding: 0.5rem; color: white; border: none; `; return ( <> <Div> <Header class={`py-3 px-3 border border-info flex flex-row`}> {JumpLogo()} {JumpTextIcon()} </Header> <GlassPanel> <div className="flex justify-center items-center gap-1 mx-auto"> <Select> <Option value="volvo">USDC</Option> <Option value="saab">NEAR</Option> <Option value="saab">NEKO</Option> </Select> To <Select> <Option value="volvo">USDC</Option> <Option value="saab">NEAR</Option> <Option value="saab">NEKO</Option> </Select> </div> <br /> <Input type="number" placeholder="Amount" onChange={(e) => setAmount(+e.target.value)} class="bg-white/10 text-center border-b-2 border-gray-300 focus:outline-none focus:border-hover" /> <Button primary>Swap</Button> </GlassPanel> </Div> </> );