diff --git a/src/pages/Landing/__snapshots__/index.test.tsx.snap b/src/pages/Landing/__snapshots__/index.test.tsx.snap index 0b38ad7a8d..b885567047 100644 --- a/src/pages/Landing/__snapshots__/index.test.tsx.snap +++ b/src/pages/Landing/__snapshots__/index.test.tsx.snap @@ -30,7 +30,7 @@ exports[`disable nft on landing page does not render nft information and card 1` border-radius: 4px; } -.c50 { +.c47 { box-sizing: border-box; margin: 0; min-width: 0; @@ -71,24 +71,6 @@ exports[`disable nft on landing page does not render nft information and card 1` justify-content: flex-start; } -.c49 { - width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - padding: 0; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - gap: 8px; -} - .c9 { -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -110,7 +92,7 @@ exports[`disable nft on landing page does not render nft information and card 1` color: #7D7D7D; } -.c102 { +.c99 { -webkit-text-decoration: none; text-decoration: none; cursor: pointer; @@ -121,15 +103,15 @@ exports[`disable nft on landing page does not render nft information and card 1` font-weight: 500; } -.c102:hover { +.c99:hover { opacity: 0.6; } -.c102:active { +.c99:active { opacity: 0.4; } -.c100 { +.c97 { -webkit-text-decoration: none; text-decoration: none; cursor: pointer; @@ -140,36 +122,36 @@ exports[`disable nft on landing page does not render nft information and card 1` font-weight: 500; } -.c100:hover { +.c97:hover { opacity: 0.6; } -.c100:active { +.c97:active { opacity: 0.4; } -.c93 { +.c90 { height: 32px; width: 32px; fill: #98A1C0; opacity: 1; } -.c94 { +.c91 { height: 32px; width: 32px; fill: #98A1C0; opacity: 1; } -.c95 { +.c92 { height: 32px; width: 32px; fill: #98A1C0; opacity: 1; } -.c87 { +.c84 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -182,7 +164,7 @@ exports[`disable nft on landing page does not render nft information and card 1` max-width: 1440px; } -.c88 { +.c85 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -192,24 +174,24 @@ exports[`disable nft on landing page does not render nft information and card 1` flex-direction: column; } -.c89 { +.c86 { display: none; } -.c104 { +.c101 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.c90 { +.c87 { width: 72px; height: 72px; display: none; } -.c91 { +.c88 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -222,20 +204,20 @@ exports[`disable nft on landing page does not render nft information and card 1` margin: 20px 0 0 0; } -.c92 { +.c89 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.c97 { +.c94 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } -.c98 { +.c95 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -248,32 +230,32 @@ exports[`disable nft on landing page does not render nft information and card 1` margin: 20px 0 0 0; } -.c99 { +.c96 { font-size: 16px; line-height: 20px; font-weight: 535; } -.c103 { +.c100 { font-size: 16px; line-height: 20px; color: #7D7D7D; } -.c101 { +.c98 { font-size: 16px; line-height: 20px; color: #7D7D7D; } -.c96 { +.c93 { font-size: 16px; line-height: 20px; margin: 1rem 0 0 0; color: #CECECE; } -.c70 { +.c67 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -301,11 +283,11 @@ exports[`disable nft on landing page does not render nft information and card 1` transition: 250ms ease border; } -.c70:hover { +.c67:hover { border: 1px solid #CECECE; } -.c76 { +.c73 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -333,11 +315,11 @@ exports[`disable nft on landing page does not render nft information and card 1` transition: 250ms ease border; } -.c76:hover { +.c73:hover { border: 1px solid #CECECE; } -.c71 { +.c68 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -352,13 +334,13 @@ exports[`disable nft on landing page does not render nft information and card 1` justify-content: space-between; } -.c72 { +.c69 { font-size: 20px; line-height: 28px; font-weight: 535; } -.c73 { +.c70 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -373,7 +355,7 @@ exports[`disable nft on landing page does not render nft information and card 1` max-width: 480px; } -.c77 { +.c74 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -388,7 +370,7 @@ exports[`disable nft on landing page does not render nft information and card 1` max-width: 480px; } -.c74 { +.c71 { color: #FC72FF; font-weight: 535; margin: 24px 0 0; @@ -397,18 +379,18 @@ exports[`disable nft on landing page does not render nft information and card 1` transition: 250ms ease opacity; } -.c74:hover { +.c71:hover { opacity: 0.6; } -.c78 { +.c75 { min-width: 20px; min-height: 20px; max-height: 48px; max-width: 48px; } -.c53 { +.c50 { background-color: transparent; bottom: 0; border-radius: inherit; @@ -479,7 +461,7 @@ exports[`disable nft on landing page does not render nft information and card 1` text-decoration: none; } -.c84 { +.c81 { padding: 16px; width: 200px; line-height: 24px; @@ -518,58 +500,58 @@ exports[`disable nft on landing page does not render nft information and card 1` transform: perspective(1px) translateZ(0); } -.c84:disabled { +.c81:disabled { opacity: 50%; cursor: auto; pointer-events: none; } -.c84 > * { +.c81 > * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } -.c84 > a { +.c81 > a { -webkit-text-decoration: none; text-decoration: none; } -.c51 { +.c48 { background-color: #FFEFFF; color: #FC72FF; font-size: 20px; font-weight: 535; } -.c51:focus { +.c48:focus { box-shadow: 0 0 0 1pt #FFEFFF; background-color: #FFEFFF; } -.c51:hover { +.c48:hover { background-color: #FFEFFF; } -.c51:active { +.c48:active { box-shadow: 0 0 0 1pt #FFEFFF; background-color: #FFEFFF; } -.c51:hover .c52 { +.c48:hover .c49 { background-color: #98A1C014; } -.c51:active .c52 { +.c48:active .c49 { background-color: #B8C0DC3d; } -.c51:disabled { +.c48:disabled { opacity: 0.4; } -.c51:disabled:hover { +.c48:disabled:hover { cursor: auto; background-color: transparent; box-shadow: none; @@ -593,7 +575,7 @@ exports[`disable nft on landing page does not render nft information and card 1` background-color: #e0e0e0; } -.c85 { +.c82 { background-color: transparent; color: #FC72FF; display: -webkit-box; @@ -610,22 +592,22 @@ exports[`disable nft on landing page does not render nft information and card 1` align-items: center; } -.c85:focus { +.c82:focus { -webkit-text-decoration: underline; text-decoration: underline; } -.c85:hover { +.c82:hover { -webkit-text-decoration: none; text-decoration: none; } -.c85:active { +.c82:active { -webkit-text-decoration: none; text-decoration: none; } -.c85:disabled { +.c82:disabled { opacity: 50%; cursor: auto; } @@ -659,7 +641,7 @@ exports[`disable nft on landing page does not render nft information and card 1` cursor: auto; } -.c79 { +.c76 { height: 340px; width: 100%; border-radius: 32px; @@ -685,7 +667,7 @@ exports[`disable nft on landing page does not render nft information and card 1` background: url(Mesh.png),linear-gradient(93.06deg,#FF00C7 2.66%,#FF9FFB 98.99%); } -.c80 { +.c77 { color: white; display: -webkit-box; display: -webkit-flex; @@ -699,20 +681,20 @@ exports[`disable nft on landing page does not render nft information and card 1` flex-direction: column; } -.c81 { +.c78 { font-weight: 535; font-size: 28px; line-height: 36px; } -.c82 { +.c79 { margin: 10px 10px 0 0; font-weight: 535; font-size: 16px; line-height: 20px; } -.c83 { +.c80 { width: 100%; display: -webkit-box; display: -webkit-flex; @@ -726,16 +708,16 @@ exports[`disable nft on landing page does not render nft information and card 1` transition: 250ms ease opacity; } -.c83:hover { +.c80:hover { opacity: 0.6; } -.c86 { +.c83 { color: white; border: 1px solid white; } -.c45 { +.c43 { display: grid; grid-auto-rows: auto; grid-row-gap: 4px; @@ -749,21 +731,6 @@ exports[`disable nft on landing page does not render nft information and card 1` transition: opacity 250ms ease-in-out; } -.c41 { - border-radius: 12px; - border-radius: 12px; - height: 24px; - width: 50%; - width: 50%; - -webkit-animation: fAQEyV 1.5s infinite; - animation: fAQEyV 1.5s infinite; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - background: linear-gradient( to left, #22222212 25%, rgba(53,53,53,0.07) 50%, #22222212 75% ); - will-change: background-position; - background-size: 400%; -} - .c14 { display: inline-block; height: inherit; @@ -846,12 +813,6 @@ exports[`disable nft on landing page does not render nft information and card 1` color: #CECECE; } -.c42 { - border-radius: 4px; - width: 4rem; - height: 1rem; -} - .c24 { display: -webkit-box; display: -webkit-flex; @@ -932,7 +893,7 @@ exports[`disable nft on landing page does not render nft information and card 1` background-color: #B8C0DC3d; } -.c47 { +.c45 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -965,12 +926,12 @@ exports[`disable nft on landing page does not render nft information and card 1` animation: none; } -.c47:hover, -.c47:active { +.c45:hover, +.c45:active { background-color: #FC72FF; } -.c47:before { +.c45:before { background-size: 100%; border-radius: inherit; position: absolute; @@ -981,11 +942,11 @@ exports[`disable nft on landing page does not render nft information and card 1` content: ''; } -.c47:hover:before { +.c45:hover:before { background-color: #98A1C014; } -.c47:active:before { +.c45:active:before { background-color: #B8C0DC3d; } @@ -1065,13 +1026,13 @@ exports[`disable nft on landing page does not render nft information and card 1` stroke-width: 2px; } -.c48 { +.c46 { margin: 0 0.25rem 0 0.35rem; height: 35%; margin-left: 8px; } -.c48 path { +.c46 path { stroke: #FFFFFF; stroke-width: 2px; } @@ -1139,7 +1100,7 @@ exports[`disable nft on landing page does not render nft information and card 1` padding-top: 12px; } -.c43 { +.c41 { border-radius: 12px; height: 40px; width: 40px; @@ -1154,7 +1115,7 @@ exports[`disable nft on landing page does not render nft information and card 1` z-index: 2; } -.c43:hover { +.c41:hover { cursor: pointer; opacity: 0.8; } @@ -1216,7 +1177,7 @@ exports[`disable nft on landing page does not render nft information and card 1` gap: 16px; } -.c44 { +.c42 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -1267,7 +1228,7 @@ exports[`disable nft on landing page does not render nft information and card 1` border-color: #B8C0DC3d; } -.c46 { +.c44 { border-bottom: 1px solid #FFFFFF; } @@ -1294,7 +1255,7 @@ exports[`disable nft on landing page does not render nft information and card 1` overflow-x: hidden; } -.c54 { +.c51 { position: absolute; display: -webkit-box; display: -webkit-flex; @@ -1318,7 +1279,7 @@ exports[`disable nft on landing page does not render nft information and card 1` height: calc(100vh - 48px); } -.c55 { +.c52 { position: absolute; display: -webkit-box; display: -webkit-flex; @@ -1339,7 +1300,7 @@ exports[`disable nft on landing page does not render nft information and card 1` height: calc(100vh - 48px); } -.c56 { +.c53 { position: absolute; top: 68px; bottom: 0; @@ -1352,7 +1313,7 @@ exports[`disable nft on landing page does not render nft information and card 1` height: 100%; } -.c57 { +.c54 { position: absolute; display: -webkit-box; display: -webkit-flex; @@ -1380,11 +1341,11 @@ exports[`disable nft on landing page does not render nft information and card 1` pointer-events: none; } -.c57 * { +.c54 * { pointer-events: auto; } -.c58 { +.c55 { color: transparent; font-size: 36px; line-height: 44px; @@ -1396,7 +1357,7 @@ exports[`disable nft on landing page does not render nft information and card 1` -webkit-background-clip: text; } -.c60 { +.c57 { color: #7D7D7D; font-size: 16px; line-height: 24px; @@ -1406,7 +1367,7 @@ exports[`disable nft on landing page does not render nft information and card 1` margin: 0 0 32px; } -.c59 { +.c56 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1417,12 +1378,12 @@ exports[`disable nft on landing page does not render nft information and card 1` justify-content: center; } -.c62 { +.c59 { padding: 16px 0px; border-radius: 24px; } -.c63 { +.c60 { background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%); border: none; color: #FFFFFF; @@ -1430,24 +1391,24 @@ exports[`disable nft on landing page does not render nft information and card 1` transition: all 250ms ease; } -.c63:hover { +.c60:hover { box-shadow: 0px 0px 16px 0px #ff00c7; } -.c64 { +.c61 { margin: 0px; font-size: 16px; font-weight: 535; white-space: nowrap; } -.c61 { +.c58 { max-width: 300px; width: 100%; pointer-events: auto; } -.c65 { +.c62 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1467,16 +1428,16 @@ exports[`disable nft on landing page does not render nft information and card 1` transition: 250ms ease opacity; } -.c65:hover { +.c62:hover { opacity: 0.6; } -.c66 { +.c63 { margin-left: 14px; size: 20px; } -.c68 { +.c65 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1493,7 +1454,7 @@ exports[`disable nft on landing page does not render nft information and card 1` background: linear-gradient(179.82deg,rgba(255,255,255,0) 0.16%,#eaeaea 99.85%); } -.c69 { +.c66 { display: grid; gap: 12px; width: 100%; @@ -1506,7 +1467,7 @@ exports[`disable nft on landing page does not render nft information and card 1` grid-template-columns: 1fr; } -.c75 { +.c72 { display: grid; gap: 12px; width: 100%; @@ -1560,7 +1521,7 @@ exports[`disable nft on landing page does not render nft information and card 1` width: 100%; } -.c67 { +.c64 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -1576,12 +1537,12 @@ exports[`disable nft on landing page does not render nft information and card 1` text-align: center; } -.c67:hover { +.c64:hover { color: #CECECE; } @media screen and (min-width:1024px) { - .c87 { + .c84 { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -1593,7 +1554,7 @@ exports[`disable nft on landing page does not render nft information and card 1` } @media screen and (min-width:1024px) { - .c89 { + .c86 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1602,63 +1563,63 @@ exports[`disable nft on landing page does not render nft information and card 1` } @media screen and (min-width:1024px) { - .c104 { + .c101 { display: none; } } @media screen and (min-width:1024px) { - .c90 { + .c87 { display: block; } } @media screen and (min-width:1280px) { - .c97 { + .c94 { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 24px; } } @media screen and (min-width:1280px) { - .c98 { + .c95 { margin: 0; } } @media screen and (min-width:640px) { - .c70 { + .c67 { height: 360px; } } @media screen and (min-width:1280px) { - .c70 { + .c67 { padding: 32px; } } @media screen and (min-width:640px) { - .c76 { + .c73 { height: 260px; } } @media screen and (min-width:1280px) { - .c76 { + .c73 { padding: 32px; } } @media screen and (min-width:1024px) { - .c72 { + .c69 { font-size: 28px; line-height: 36px; } } @media screen and (min-width:1280px) { - .c73 { + .c70 { font-size: 20px; line-height: 28px; max-width: 480px; @@ -1666,7 +1627,7 @@ exports[`disable nft on landing page does not render nft information and card 1` } @media screen and (min-width:1280px) { - .c77 { + .c74 { font-size: 20px; line-height: 28px; max-width: 480px; @@ -1674,7 +1635,7 @@ exports[`disable nft on landing page does not render nft information and card 1` } @media screen and (min-width:1024px) { - .c79 { + .c76 { height: 140px; -webkit-flex-direction: row; -ms-flex-direction: row; @@ -1683,21 +1644,21 @@ exports[`disable nft on landing page does not render nft information and card 1` } @media screen and (min-width:1280px) { - .c81 { + .c78 { font-size: 28px; line-height: 36px; } } @media screen and (min-width:1280px) { - .c82 { + .c79 { font-size: 20px; line-height: 28px; } } @media screen and (min-width:1024px) { - .c83 { + .c80 { width: auto; } } @@ -1715,79 +1676,79 @@ exports[`disable nft on landing page does not render nft information and card 1` } @media screen and (min-width:768px) { - .c54 { + .c51 { height: 100vh; } } @media screen and (min-width:768px) { - .c55 { + .c52 { height: 100vh; } } @media screen and (min-width:640px) { - .c58 { + .c55 { font-size: 48px; line-height: 56px; } } @media screen and (min-width:768px) { - .c58 { + .c55 { font-size: 64px; line-height: 72px; } } @media screen and (min-width:768px) { - .c60 { + .c57 { font-size: 20px; line-height: 28px; } } @media screen and (min-width:640px) { - .c64 { + .c61 { font-size: 20px; } } @media screen and (min-width:640px) { - .c65 { + .c62 { visibility: visible; } } @media screen and (min-width:768px) { - .c68 { + .c65 { padding: 0 96px 5rem; } } @media screen and (min-width:640px) { - .c69 { + .c66 { grid-template-columns: 1fr; gap: 32px; } } @media screen and (min-width:1024px) { - .c69 { + .c66 { grid-template-columns: 1fr; gap: 32px; } } @media screen and (min-width:640px) { - .c75 { + .c72 { grid-template-columns: 1fr; gap: 32px; } } @media screen and (min-width:1024px) { - .c75 { + .c72 { grid-template-columns: 1fr 1fr 1fr; gap: 32px; } @@ -1963,11 +1924,7 @@ exports[`disable nft on landing page does not render nft information and card 1` >
-
-
+ />
@@ -1975,10 +1932,10 @@ exports[`disable nft on landing page does not render nft information and card 1`
@@ -2007,11 +1964,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
dropdown.svg @@ -2084,23 +2041,7 @@ exports[`disable nft on landing page does not render nft information and card 1` >
-
-
-
-
- - -
-
-
-
-
+ />
@@ -2110,11 +2051,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
@@ -2126,52 +2067,52 @@ exports[`disable nft on landing page does not render nft information and card 1`

Trade crypto with confidence

Buy, sell, and explore tokens

Get started

Learn more
Swap tokens
Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more.
Buy crypto
@@ -2290,12 +2231,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
Buy crypto with your credit card or bank account at the best rates.
Buy now @@ -2303,30 +2244,30 @@ exports[`disable nft on landing page does not render nft information and card 1`
Earn
Analytics
Provide liquidity to pools on Uniswap and earn fees on swaps.
Provide liquidity @@ -2334,16 +2275,16 @@ exports[`disable nft on landing page does not render nft information and card 1`
Build dApps
@@ -2370,12 +2311,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
Build apps and tools on the largest DeFi protocol on Ethereum.
Powered by the Uniswap Protocol
The leading decentralized crypto trading protocol, governed by a global community.
Uniswap Logo © 2023 @@ -2477,45 +2418,45 @@ exports[`disable nft on landing page does not render nft information and card 1`
Protocol
Uniswap Logo © 2023 @@ -2685,7 +2626,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` border-radius: 4px; } -.c50 { +.c47 { box-sizing: border-box; margin: 0; min-width: 0; @@ -2726,24 +2667,6 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` justify-content: flex-start; } -.c49 { - width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - padding: 0; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - gap: 8px; -} - .c9 { -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -2765,7 +2688,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` color: #7D7D7D; } -.c103 { +.c100 { -webkit-text-decoration: none; text-decoration: none; cursor: pointer; @@ -2776,15 +2699,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` font-weight: 500; } -.c103:hover { +.c100:hover { opacity: 0.6; } -.c103:active { +.c100:active { opacity: 0.4; } -.c101 { +.c98 { -webkit-text-decoration: none; text-decoration: none; cursor: pointer; @@ -2795,36 +2718,36 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` font-weight: 500; } -.c101:hover { +.c98:hover { opacity: 0.6; } -.c101:active { +.c98:active { opacity: 0.4; } -.c94 { +.c91 { height: 32px; width: 32px; fill: #98A1C0; opacity: 1; } -.c95 { +.c92 { height: 32px; width: 32px; fill: #98A1C0; opacity: 1; } -.c96 { +.c93 { height: 32px; width: 32px; fill: #98A1C0; opacity: 1; } -.c88 { +.c85 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2837,7 +2760,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` max-width: 1440px; } -.c89 { +.c86 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2847,24 +2770,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` flex-direction: column; } -.c90 { +.c87 { display: none; } -.c105 { +.c102 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.c91 { +.c88 { width: 72px; height: 72px; display: none; } -.c92 { +.c89 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2877,20 +2800,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` margin: 20px 0 0 0; } -.c93 { +.c90 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.c98 { +.c95 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } -.c99 { +.c96 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2903,32 +2826,32 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` margin: 20px 0 0 0; } -.c100 { +.c97 { font-size: 16px; line-height: 20px; font-weight: 535; } -.c104 { +.c101 { font-size: 16px; line-height: 20px; color: #7D7D7D; } -.c102 { +.c99 { font-size: 16px; line-height: 20px; color: #7D7D7D; } -.c97 { +.c94 { font-size: 16px; line-height: 20px; margin: 1rem 0 0 0; color: #CECECE; } -.c70 { +.c67 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2956,11 +2879,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transition: 250ms ease border; } -.c70:hover { +.c67:hover { border: 1px solid #CECECE; } -.c75 { +.c72 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2988,11 +2911,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transition: 250ms ease border; } -.c75:hover { +.c72:hover { border: 1px solid #CECECE; } -.c77 { +.c74 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -3020,11 +2943,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transition: 250ms ease border; } -.c77:hover { +.c74:hover { border: 1px solid #CECECE; } -.c71 { +.c68 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -3039,13 +2962,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` justify-content: space-between; } -.c72 { +.c69 { font-size: 20px; line-height: 28px; font-weight: 535; } -.c73 { +.c70 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -3060,7 +2983,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` max-width: 480px; } -.c78 { +.c75 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -3075,7 +2998,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` max-width: 480px; } -.c74 { +.c71 { color: #FC72FF; font-weight: 535; margin: 24px 0 0; @@ -3084,18 +3007,18 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transition: 250ms ease opacity; } -.c74:hover { +.c71:hover { opacity: 0.6; } -.c79 { +.c76 { min-width: 20px; min-height: 20px; max-height: 48px; max-width: 48px; } -.c53 { +.c50 { background-color: transparent; bottom: 0; border-radius: inherit; @@ -3166,7 +3089,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` text-decoration: none; } -.c85 { +.c82 { padding: 16px; width: 200px; line-height: 24px; @@ -3205,58 +3128,58 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transform: perspective(1px) translateZ(0); } -.c85:disabled { +.c82:disabled { opacity: 50%; cursor: auto; pointer-events: none; } -.c85 > * { +.c82 > * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } -.c85 > a { +.c82 > a { -webkit-text-decoration: none; text-decoration: none; } -.c51 { +.c48 { background-color: #FFEFFF; color: #FC72FF; font-size: 20px; font-weight: 535; } -.c51:focus { +.c48:focus { box-shadow: 0 0 0 1pt #FFEFFF; background-color: #FFEFFF; } -.c51:hover { +.c48:hover { background-color: #FFEFFF; } -.c51:active { +.c48:active { box-shadow: 0 0 0 1pt #FFEFFF; background-color: #FFEFFF; } -.c51:hover .c52 { +.c48:hover .c49 { background-color: #98A1C014; } -.c51:active .c52 { +.c48:active .c49 { background-color: #B8C0DC3d; } -.c51:disabled { +.c48:disabled { opacity: 0.4; } -.c51:disabled:hover { +.c48:disabled:hover { cursor: auto; background-color: transparent; box-shadow: none; @@ -3280,7 +3203,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` background-color: #e0e0e0; } -.c86 { +.c83 { background-color: transparent; color: #FC72FF; display: -webkit-box; @@ -3297,22 +3220,22 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` align-items: center; } -.c86:focus { +.c83:focus { -webkit-text-decoration: underline; text-decoration: underline; } -.c86:hover { +.c83:hover { -webkit-text-decoration: none; text-decoration: none; } -.c86:active { +.c83:active { -webkit-text-decoration: none; text-decoration: none; } -.c86:disabled { +.c83:disabled { opacity: 50%; cursor: auto; } @@ -3346,7 +3269,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` cursor: auto; } -.c80 { +.c77 { height: 340px; width: 100%; border-radius: 32px; @@ -3372,7 +3295,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` background: url(Mesh.png),linear-gradient(93.06deg,#FF00C7 2.66%,#FF9FFB 98.99%); } -.c81 { +.c78 { color: white; display: -webkit-box; display: -webkit-flex; @@ -3386,20 +3309,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` flex-direction: column; } -.c82 { +.c79 { font-weight: 535; font-size: 28px; line-height: 36px; } -.c83 { +.c80 { margin: 10px 10px 0 0; font-weight: 535; font-size: 16px; line-height: 20px; } -.c84 { +.c81 { width: 100%; display: -webkit-box; display: -webkit-flex; @@ -3413,16 +3336,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transition: 250ms ease opacity; } -.c84:hover { +.c81:hover { opacity: 0.6; } -.c87 { +.c84 { color: white; border: 1px solid white; } -.c45 { +.c43 { display: grid; grid-auto-rows: auto; grid-row-gap: 4px; @@ -3436,21 +3359,6 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transition: opacity 250ms ease-in-out; } -.c41 { - border-radius: 12px; - border-radius: 12px; - height: 24px; - width: 50%; - width: 50%; - -webkit-animation: fAQEyV 1.5s infinite; - animation: fAQEyV 1.5s infinite; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - background: linear-gradient( to left, #22222212 25%, rgba(53,53,53,0.07) 50%, #22222212 75% ); - will-change: background-position; - background-size: 400%; -} - .c14 { display: inline-block; height: inherit; @@ -3533,12 +3441,6 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` color: #CECECE; } -.c42 { - border-radius: 4px; - width: 4rem; - height: 1rem; -} - .c24 { display: -webkit-box; display: -webkit-flex; @@ -3619,7 +3521,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` background-color: #B8C0DC3d; } -.c47 { +.c45 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -3652,12 +3554,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` animation: none; } -.c47:hover, -.c47:active { +.c45:hover, +.c45:active { background-color: #FC72FF; } -.c47:before { +.c45:before { background-size: 100%; border-radius: inherit; position: absolute; @@ -3668,11 +3570,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` content: ''; } -.c47:hover:before { +.c45:hover:before { background-color: #98A1C014; } -.c47:active:before { +.c45:active:before { background-color: #B8C0DC3d; } @@ -3752,13 +3654,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` stroke-width: 2px; } -.c48 { +.c46 { margin: 0 0.25rem 0 0.35rem; height: 35%; margin-left: 8px; } -.c48 path { +.c46 path { stroke: #FFFFFF; stroke-width: 2px; } @@ -3826,7 +3728,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` padding-top: 12px; } -.c43 { +.c41 { border-radius: 12px; height: 40px; width: 40px; @@ -3841,7 +3743,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` z-index: 2; } -.c43:hover { +.c41:hover { cursor: pointer; opacity: 0.8; } @@ -3903,7 +3805,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` gap: 16px; } -.c44 { +.c42 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -3954,7 +3856,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` border-color: #B8C0DC3d; } -.c46 { +.c44 { border-bottom: 1px solid #FFFFFF; } @@ -3981,7 +3883,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` overflow-x: hidden; } -.c54 { +.c51 { position: absolute; display: -webkit-box; display: -webkit-flex; @@ -4005,7 +3907,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` height: calc(100vh - 48px); } -.c55 { +.c52 { position: absolute; display: -webkit-box; display: -webkit-flex; @@ -4026,7 +3928,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` height: calc(100vh - 48px); } -.c56 { +.c53 { position: absolute; top: 68px; bottom: 0; @@ -4039,7 +3941,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` height: 100%; } -.c57 { +.c54 { position: absolute; display: -webkit-box; display: -webkit-flex; @@ -4067,11 +3969,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` pointer-events: none; } -.c57 * { +.c54 * { pointer-events: auto; } -.c58 { +.c55 { color: transparent; font-size: 36px; line-height: 44px; @@ -4083,7 +3985,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` -webkit-background-clip: text; } -.c60 { +.c57 { color: #7D7D7D; font-size: 16px; line-height: 24px; @@ -4093,7 +3995,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` margin: 0 0 32px; } -.c59 { +.c56 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -4104,12 +4006,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` justify-content: center; } -.c62 { +.c59 { padding: 16px 0px; border-radius: 24px; } -.c63 { +.c60 { background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%); border: none; color: #FFFFFF; @@ -4117,24 +4019,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transition: all 250ms ease; } -.c63:hover { +.c60:hover { box-shadow: 0px 0px 16px 0px #ff00c7; } -.c64 { +.c61 { margin: 0px; font-size: 16px; font-weight: 535; white-space: nowrap; } -.c61 { +.c58 { max-width: 300px; width: 100%; pointer-events: auto; } -.c65 { +.c62 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -4154,16 +4056,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transition: 250ms ease opacity; } -.c65:hover { +.c62:hover { opacity: 0.6; } -.c66 { +.c63 { margin-left: 14px; size: 20px; } -.c68 { +.c65 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -4180,7 +4082,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` background: linear-gradient(179.82deg,rgba(255,255,255,0) 0.16%,#eaeaea 99.85%); } -.c69 { +.c66 { display: grid; gap: 12px; width: 100%; @@ -4193,7 +4095,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` grid-template-columns: 1fr; } -.c76 { +.c73 { display: grid; gap: 12px; width: 100%; @@ -4247,7 +4149,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` width: 100%; } -.c67 { +.c64 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -4263,12 +4165,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` text-align: center; } -.c67:hover { +.c64:hover { color: #CECECE; } @media screen and (min-width:1024px) { - .c88 { + .c85 { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -4280,7 +4182,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` } @media screen and (min-width:1024px) { - .c90 { + .c87 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -4289,75 +4191,75 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` } @media screen and (min-width:1024px) { - .c105 { + .c102 { display: none; } } @media screen and (min-width:1024px) { - .c91 { + .c88 { display: block; } } @media screen and (min-width:1280px) { - .c98 { + .c95 { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 24px; } } @media screen and (min-width:1280px) { - .c99 { + .c96 { margin: 0; } } @media screen and (min-width:640px) { - .c70 { + .c67 { height: 360px; } } @media screen and (min-width:1280px) { - .c70 { + .c67 { padding: 32px; } } @media screen and (min-width:640px) { - .c75 { + .c72 { height: 360px; } } @media screen and (min-width:1280px) { - .c75 { + .c72 { padding: 32px; } } @media screen and (min-width:640px) { - .c77 { + .c74 { height: 260px; } } @media screen and (min-width:1280px) { - .c77 { + .c74 { padding: 32px; } } @media screen and (min-width:1024px) { - .c72 { + .c69 { font-size: 28px; line-height: 36px; } } @media screen and (min-width:1280px) { - .c73 { + .c70 { font-size: 20px; line-height: 28px; max-width: 480px; @@ -4365,7 +4267,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` } @media screen and (min-width:1280px) { - .c78 { + .c75 { font-size: 20px; line-height: 28px; max-width: 480px; @@ -4373,7 +4275,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` } @media screen and (min-width:1024px) { - .c80 { + .c77 { height: 140px; -webkit-flex-direction: row; -ms-flex-direction: row; @@ -4382,21 +4284,21 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` } @media screen and (min-width:1280px) { - .c82 { + .c79 { font-size: 28px; line-height: 36px; } } @media screen and (min-width:1280px) { - .c83 { + .c80 { font-size: 20px; line-height: 28px; } } @media screen and (min-width:1024px) { - .c84 { + .c81 { width: auto; } } @@ -4414,79 +4316,79 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` } @media screen and (min-width:768px) { - .c54 { + .c51 { height: 100vh; } } @media screen and (min-width:768px) { - .c55 { + .c52 { height: 100vh; } } @media screen and (min-width:640px) { - .c58 { + .c55 { font-size: 48px; line-height: 56px; } } @media screen and (min-width:768px) { - .c58 { + .c55 { font-size: 64px; line-height: 72px; } } @media screen and (min-width:768px) { - .c60 { + .c57 { font-size: 20px; line-height: 28px; } } @media screen and (min-width:640px) { - .c64 { + .c61 { font-size: 20px; } } @media screen and (min-width:640px) { - .c65 { + .c62 { visibility: visible; } } @media screen and (min-width:768px) { - .c68 { + .c65 { padding: 0 96px 5rem; } } @media screen and (min-width:640px) { - .c69 { + .c66 { grid-template-columns: 1fr 1fr; gap: 32px; } } @media screen and (min-width:1024px) { - .c69 { + .c66 { grid-template-columns: 1fr 1fr; gap: 32px; } } @media screen and (min-width:640px) { - .c76 { + .c73 { grid-template-columns: 1fr; gap: 32px; } } @media screen and (min-width:1024px) { - .c76 { + .c73 { grid-template-columns: 1fr 1fr 1fr; gap: 32px; } @@ -4662,11 +4564,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` >
-
-
+ />
@@ -4674,10 +4572,10 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
@@ -4706,11 +4604,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
dropdown.svg @@ -4783,23 +4681,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` >
-
-
-
-
- - -
-
-
-
-
+ />
@@ -4809,11 +4691,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
@@ -4825,52 +4707,52 @@ exports[`disable nft on landing page renders nft information and card 1`] = `

Trade crypto and NFTs with confidence

Buy, sell, and explore tokens and NFTs

Get started

Learn more
Swap tokens
Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more.
Trade Tokens @@ -4948,25 +4830,25 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Trade NFTs
Buy and sell NFTs across marketplaces to find more listings at better prices.
Buy crypto
@@ -5015,12 +4897,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Buy crypto with your credit card or bank account at the best rates.
Buy now @@ -5028,30 +4910,30 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Earn
Analytics
Provide liquidity to pools on Uniswap and earn fees on swaps.
Provide liquidity @@ -5059,16 +4941,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Build dApps
@@ -5095,12 +4977,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Build apps and tools on the largest DeFi protocol on Ethereum.
Powered by the Uniswap Protocol
The leading decentralized crypto trading protocol, governed by a global community.
Uniswap Logo © 2023 @@ -5202,51 +5084,51 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Protocol
Uniswap Logo © 2023 diff --git a/src/pages/Swap/index.tsx b/src/pages/Swap/index.tsx index 0510f20354..260bdf35c1 100644 --- a/src/pages/Swap/index.tsx +++ b/src/pages/Swap/index.tsx @@ -323,6 +323,8 @@ export function Swap({ [independentField, parsedAmount, showWrap, trade] ) + const showFiatValueInput = Boolean(parsedAmounts[Field.INPUT]) + const showFiatValueOutput = Boolean(parsedAmounts[Field.OUTPUT]) const getSingleUnitAmount = (currency?: Currency) => { if (!currency) return return CurrencyAmount.fromRawAmount(currency, JSBI.BigInt(10 ** currency.decimals)) @@ -641,7 +643,7 @@ export function Swap({ currency={currencies[Field.INPUT] ?? null} onUserInput={handleTypeInput} onMax={handleMaxInput} - fiatValue={fiatValueInput} + fiatValue={showFiatValueInput ? fiatValueInput : undefined} onCurrencySelect={handleInputSelect} otherCurrency={currencies[Field.OUTPUT]} showCommonBases @@ -682,7 +684,7 @@ export function Swap({ label={You receive} showMaxButton={false} hideBalance={false} - fiatValue={fiatValueOutput} + fiatValue={showFiatValueOutput ? fiatValueOutput : undefined} priceImpact={stablecoinPriceImpact} currency={currencies[Field.OUTPUT] ?? null} onCurrencySelect={handleOutputSelect}