diff --git a/src/hooks/Tokens.ts b/src/hooks/Tokens.ts index cc9dd2b65e..4d7687b07c 100644 --- a/src/hooks/Tokens.ts +++ b/src/hooks/Tokens.ts @@ -190,7 +190,7 @@ export function useToken(tokenAddress?: string | null): Token | null | undefined return useTokenFromMapOrNetwork(tokens, tokenAddress) } -export function useCurrency(currencyId: Maybe, chainId?: ChainId): Currency | null | undefined { +export function useCurrency(currencyId: Maybe, chainId?: ChainId): Currency | undefined { const { chainId: connectedChainId } = useWeb3React() const tokens = useDefaultActiveTokens(chainId ?? connectedChainId) return useCurrencyFromMap(tokens, chainId ?? connectedChainId, currencyId) diff --git a/src/lib/hooks/useCurrency.ts b/src/lib/hooks/useCurrency.ts index 6226cca379..acdb9480d7 100644 --- a/src/lib/hooks/useCurrency.ts +++ b/src/lib/hooks/useCurrency.ts @@ -80,7 +80,7 @@ type TokenMap = { [address: string]: Token } * Returns null if token is loading or null was passed. * Returns undefined if tokenAddress is invalid or token does not exist. */ -export function useTokenFromMapOrNetwork(tokens: TokenMap, tokenAddress?: string | null): Token | null | undefined { +export function useTokenFromMapOrNetwork(tokens: TokenMap, tokenAddress?: string | null): Token | undefined { const address = isAddress(tokenAddress) const token: Token | undefined = address ? tokens[address] : undefined const tokenFromNetwork = useTokenFromActiveNetwork(token ? undefined : address ? address : undefined) @@ -106,7 +106,7 @@ export function useCurrencyFromMap( tokens: TokenMap, chainId: ChainId | undefined, currencyId?: string | null -): Currency | null | undefined { +): Currency | undefined { const nativeCurrency = useNativeCurrency(chainId) const isNative = Boolean(nativeCurrency && currencyId?.toUpperCase() === 'ETH') const shorthandMatchAddress = useMemo(() => { @@ -116,7 +116,7 @@ export function useCurrencyFromMap( const token = useTokenFromMapOrNetwork(tokens, isNative ? undefined : shorthandMatchAddress ?? currencyId) - if (currencyId === null || currencyId === undefined || !isSupportedChain(chainId)) return null + if (currencyId === null || currencyId === undefined || !isSupportedChain(chainId)) return // this case so we use our builtin wrapped token instead of wrapped tokens on token lists const wrappedNative = nativeCurrency?.wrapped diff --git a/src/pages/Landing/__snapshots__/index.test.tsx.snap b/src/pages/Landing/__snapshots__/index.test.tsx.snap index 7ceccd72bc..5fe60f069e 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; } -.c47 { +.c50 { box-sizing: border-box; margin: 0; min-width: 0; @@ -71,6 +71,24 @@ 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; @@ -92,7 +110,7 @@ exports[`disable nft on landing page does not render nft information and card 1` color: #7D7D7D; } -.c99 { +.c102 { -webkit-text-decoration: none; text-decoration: none; cursor: pointer; @@ -103,15 +121,15 @@ exports[`disable nft on landing page does not render nft information and card 1` font-weight: 500; } -.c99:hover { +.c102:hover { opacity: 0.6; } -.c99:active { +.c102:active { opacity: 0.4; } -.c97 { +.c100 { -webkit-text-decoration: none; text-decoration: none; cursor: pointer; @@ -122,36 +140,36 @@ exports[`disable nft on landing page does not render nft information and card 1` font-weight: 500; } -.c97:hover { +.c100:hover { opacity: 0.6; } -.c97:active { +.c100:active { opacity: 0.4; } -.c90 { +.c93 { height: 32px; width: 32px; fill: #98A1C0; opacity: 1; } -.c91 { +.c94 { height: 32px; width: 32px; fill: #98A1C0; opacity: 1; } -.c92 { +.c95 { height: 32px; width: 32px; fill: #98A1C0; opacity: 1; } -.c84 { +.c87 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -164,7 +182,7 @@ exports[`disable nft on landing page does not render nft information and card 1` max-width: 1440px; } -.c85 { +.c88 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -174,24 +192,24 @@ exports[`disable nft on landing page does not render nft information and card 1` flex-direction: column; } -.c86 { +.c89 { display: none; } -.c101 { +.c104 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.c87 { +.c90 { width: 72px; height: 72px; display: none; } -.c88 { +.c91 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -204,20 +222,20 @@ exports[`disable nft on landing page does not render nft information and card 1` margin: 20px 0 0 0; } -.c89 { +.c92 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.c94 { +.c97 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } -.c95 { +.c98 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -230,32 +248,32 @@ exports[`disable nft on landing page does not render nft information and card 1` margin: 20px 0 0 0; } -.c96 { +.c99 { font-size: 16px; line-height: 20px; font-weight: 535; } -.c100 { +.c103 { font-size: 16px; line-height: 20px; color: #7D7D7D; } -.c98 { +.c101 { font-size: 16px; line-height: 20px; color: #7D7D7D; } -.c93 { +.c96 { font-size: 16px; line-height: 20px; margin: 1rem 0 0 0; color: #CECECE; } -.c67 { +.c70 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -283,11 +301,11 @@ exports[`disable nft on landing page does not render nft information and card 1` transition: 250ms ease border; } -.c67:hover { +.c70:hover { border: 1px solid #CECECE; } -.c73 { +.c76 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -315,11 +333,11 @@ exports[`disable nft on landing page does not render nft information and card 1` transition: 250ms ease border; } -.c73:hover { +.c76:hover { border: 1px solid #CECECE; } -.c68 { +.c71 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -334,13 +352,13 @@ exports[`disable nft on landing page does not render nft information and card 1` justify-content: space-between; } -.c69 { +.c72 { font-size: 20px; line-height: 28px; font-weight: 535; } -.c70 { +.c73 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -355,7 +373,7 @@ exports[`disable nft on landing page does not render nft information and card 1` max-width: 480px; } -.c74 { +.c77 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -370,7 +388,7 @@ exports[`disable nft on landing page does not render nft information and card 1` max-width: 480px; } -.c71 { +.c74 { color: #FC72FF; font-weight: 535; margin: 24px 0 0; @@ -379,18 +397,18 @@ exports[`disable nft on landing page does not render nft information and card 1` transition: 250ms ease opacity; } -.c71:hover { +.c74:hover { opacity: 0.6; } -.c75 { +.c78 { min-width: 20px; min-height: 20px; max-height: 48px; max-width: 48px; } -.c50 { +.c53 { background-color: transparent; bottom: 0; border-radius: inherit; @@ -461,7 +479,7 @@ exports[`disable nft on landing page does not render nft information and card 1` text-decoration: none; } -.c81 { +.c84 { padding: 16px; width: 200px; line-height: 24px; @@ -500,58 +518,58 @@ exports[`disable nft on landing page does not render nft information and card 1` transform: perspective(1px) translateZ(0); } -.c81:disabled { +.c84:disabled { opacity: 50%; cursor: auto; pointer-events: none; } -.c81 > * { +.c84 > * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } -.c81 > a { +.c84 > a { -webkit-text-decoration: none; text-decoration: none; } -.c48 { +.c51 { background-color: #FFEFFF; color: #FC72FF; font-size: 20px; font-weight: 535; } -.c48:focus { +.c51:focus { box-shadow: 0 0 0 1pt #FFEFFF; background-color: #FFEFFF; } -.c48:hover { +.c51:hover { background-color: #FFEFFF; } -.c48:active { +.c51:active { box-shadow: 0 0 0 1pt #FFEFFF; background-color: #FFEFFF; } -.c48:hover .c49 { +.c51:hover .c52 { background-color: #98A1C014; } -.c48:active .c49 { +.c51:active .c52 { background-color: #B8C0DC3d; } -.c48:disabled { +.c51:disabled { opacity: 0.4; } -.c48:disabled:hover { +.c51:disabled:hover { cursor: auto; background-color: transparent; box-shadow: none; @@ -575,7 +593,7 @@ exports[`disable nft on landing page does not render nft information and card 1` background-color: #e0e0e0; } -.c82 { +.c85 { background-color: transparent; color: #FC72FF; display: -webkit-box; @@ -592,22 +610,22 @@ exports[`disable nft on landing page does not render nft information and card 1` align-items: center; } -.c82:focus { +.c85:focus { -webkit-text-decoration: underline; text-decoration: underline; } -.c82:hover { +.c85:hover { -webkit-text-decoration: none; text-decoration: none; } -.c82:active { +.c85:active { -webkit-text-decoration: none; text-decoration: none; } -.c82:disabled { +.c85:disabled { opacity: 50%; cursor: auto; } @@ -641,7 +659,7 @@ exports[`disable nft on landing page does not render nft information and card 1` cursor: auto; } -.c76 { +.c79 { height: 340px; width: 100%; border-radius: 32px; @@ -667,7 +685,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%); } -.c77 { +.c80 { color: white; display: -webkit-box; display: -webkit-flex; @@ -681,20 +699,20 @@ exports[`disable nft on landing page does not render nft information and card 1` flex-direction: column; } -.c78 { +.c81 { font-weight: 535; font-size: 28px; line-height: 36px; } -.c79 { +.c82 { margin: 10px 10px 0 0; font-weight: 535; font-size: 16px; line-height: 20px; } -.c80 { +.c83 { width: 100%; display: -webkit-box; display: -webkit-flex; @@ -708,16 +726,16 @@ exports[`disable nft on landing page does not render nft information and card 1` transition: 250ms ease opacity; } -.c80:hover { +.c83:hover { opacity: 0.6; } -.c83 { +.c86 { color: white; border: 1px solid white; } -.c43 { +.c45 { display: grid; grid-auto-rows: auto; grid-row-gap: 4px; @@ -731,6 +749,21 @@ 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; @@ -813,6 +846,12 @@ 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; @@ -893,7 +932,7 @@ exports[`disable nft on landing page does not render nft information and card 1` background-color: #B8C0DC3d; } -.c45 { +.c47 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -926,12 +965,12 @@ exports[`disable nft on landing page does not render nft information and card 1` animation: none; } -.c45:hover, -.c45:active { +.c47:hover, +.c47:active { background-color: #FC72FF; } -.c45:before { +.c47:before { background-size: 100%; border-radius: inherit; position: absolute; @@ -942,11 +981,11 @@ exports[`disable nft on landing page does not render nft information and card 1` content: ''; } -.c45:hover:before { +.c47:hover:before { background-color: #98A1C014; } -.c45:active:before { +.c47:active:before { background-color: #B8C0DC3d; } @@ -1026,13 +1065,13 @@ exports[`disable nft on landing page does not render nft information and card 1` stroke-width: 2px; } -.c46 { +.c48 { margin: 0 0.25rem 0 0.35rem; height: 35%; margin-left: 8px; } -.c46 path { +.c48 path { stroke: #FFFFFF; stroke-width: 2px; } @@ -1100,7 +1139,7 @@ exports[`disable nft on landing page does not render nft information and card 1` padding-top: 12px; } -.c41 { +.c43 { border-radius: 12px; height: 40px; width: 40px; @@ -1115,7 +1154,7 @@ exports[`disable nft on landing page does not render nft information and card 1` z-index: 2; } -.c41:hover { +.c43:hover { cursor: pointer; opacity: 0.8; } @@ -1177,7 +1216,7 @@ exports[`disable nft on landing page does not render nft information and card 1` gap: 16px; } -.c42 { +.c44 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -1228,7 +1267,7 @@ exports[`disable nft on landing page does not render nft information and card 1` border-color: #B8C0DC3d; } -.c44 { +.c46 { border-bottom: 1px solid #FFFFFF; } @@ -1255,7 +1294,7 @@ exports[`disable nft on landing page does not render nft information and card 1` overflow-x: hidden; } -.c51 { +.c54 { position: absolute; display: -webkit-box; display: -webkit-flex; @@ -1279,7 +1318,7 @@ exports[`disable nft on landing page does not render nft information and card 1` height: calc(100vh - 48px); } -.c52 { +.c55 { position: absolute; display: -webkit-box; display: -webkit-flex; @@ -1300,7 +1339,7 @@ exports[`disable nft on landing page does not render nft information and card 1` height: calc(100vh - 48px); } -.c53 { +.c56 { position: absolute; top: 68px; bottom: 0; @@ -1313,7 +1352,7 @@ exports[`disable nft on landing page does not render nft information and card 1` height: 100%; } -.c54 { +.c57 { position: absolute; display: -webkit-box; display: -webkit-flex; @@ -1341,11 +1380,11 @@ exports[`disable nft on landing page does not render nft information and card 1` pointer-events: none; } -.c54 * { +.c57 * { pointer-events: auto; } -.c55 { +.c58 { color: transparent; font-size: 36px; line-height: 44px; @@ -1357,7 +1396,7 @@ exports[`disable nft on landing page does not render nft information and card 1` -webkit-background-clip: text; } -.c57 { +.c60 { color: #7D7D7D; font-size: 16px; line-height: 24px; @@ -1367,7 +1406,7 @@ exports[`disable nft on landing page does not render nft information and card 1` margin: 0 0 32px; } -.c56 { +.c59 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1378,12 +1417,12 @@ exports[`disable nft on landing page does not render nft information and card 1` justify-content: center; } -.c59 { +.c62 { padding: 16px 0px; border-radius: 24px; } -.c60 { +.c63 { background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%); border: none; color: #FFFFFF; @@ -1391,24 +1430,24 @@ exports[`disable nft on landing page does not render nft information and card 1` transition: all 250ms ease; } -.c60:hover { +.c63:hover { box-shadow: 0px 0px 16px 0px #ff00c7; } -.c61 { +.c64 { margin: 0px; font-size: 16px; font-weight: 535; white-space: nowrap; } -.c58 { +.c61 { max-width: 300px; width: 100%; pointer-events: auto; } -.c62 { +.c65 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1428,16 +1467,16 @@ exports[`disable nft on landing page does not render nft information and card 1` transition: 250ms ease opacity; } -.c62:hover { +.c65:hover { opacity: 0.6; } -.c63 { +.c66 { margin-left: 14px; size: 20px; } -.c65 { +.c68 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1454,7 +1493,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%); } -.c66 { +.c69 { display: grid; gap: 12px; width: 100%; @@ -1467,7 +1506,7 @@ exports[`disable nft on landing page does not render nft information and card 1` grid-template-columns: 1fr; } -.c72 { +.c75 { display: grid; gap: 12px; width: 100%; @@ -1521,7 +1560,7 @@ exports[`disable nft on landing page does not render nft information and card 1` width: 100%; } -.c64 { +.c67 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -1537,12 +1576,12 @@ exports[`disable nft on landing page does not render nft information and card 1` text-align: center; } -.c64:hover { +.c67:hover { color: #CECECE; } @media screen and (min-width:1024px) { - .c84 { + .c87 { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -1554,7 +1593,7 @@ exports[`disable nft on landing page does not render nft information and card 1` } @media screen and (min-width:1024px) { - .c86 { + .c89 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1563,63 +1602,63 @@ exports[`disable nft on landing page does not render nft information and card 1` } @media screen and (min-width:1024px) { - .c101 { + .c104 { display: none; } } @media screen and (min-width:1024px) { - .c87 { + .c90 { display: block; } } @media screen and (min-width:1280px) { - .c94 { + .c97 { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 24px; } } @media screen and (min-width:1280px) { - .c95 { + .c98 { margin: 0; } } @media screen and (min-width:640px) { - .c67 { + .c70 { height: 360px; } } @media screen and (min-width:1280px) { - .c67 { + .c70 { padding: 32px; } } @media screen and (min-width:640px) { - .c73 { + .c76 { height: 260px; } } @media screen and (min-width:1280px) { - .c73 { + .c76 { padding: 32px; } } @media screen and (min-width:1024px) { - .c69 { + .c72 { font-size: 28px; line-height: 36px; } } @media screen and (min-width:1280px) { - .c70 { + .c73 { font-size: 20px; line-height: 28px; max-width: 480px; @@ -1627,7 +1666,7 @@ exports[`disable nft on landing page does not render nft information and card 1` } @media screen and (min-width:1280px) { - .c74 { + .c77 { font-size: 20px; line-height: 28px; max-width: 480px; @@ -1635,7 +1674,7 @@ exports[`disable nft on landing page does not render nft information and card 1` } @media screen and (min-width:1024px) { - .c76 { + .c79 { height: 140px; -webkit-flex-direction: row; -ms-flex-direction: row; @@ -1644,21 +1683,21 @@ exports[`disable nft on landing page does not render nft information and card 1` } @media screen and (min-width:1280px) { - .c78 { + .c81 { font-size: 28px; line-height: 36px; } } @media screen and (min-width:1280px) { - .c79 { + .c82 { font-size: 20px; line-height: 28px; } } @media screen and (min-width:1024px) { - .c80 { + .c83 { width: auto; } } @@ -1676,79 +1715,79 @@ exports[`disable nft on landing page does not render nft information and card 1` } @media screen and (min-width:768px) { - .c51 { + .c54 { height: 100vh; } } @media screen and (min-width:768px) { - .c52 { + .c55 { height: 100vh; } } @media screen and (min-width:640px) { - .c55 { + .c58 { font-size: 48px; line-height: 56px; } } @media screen and (min-width:768px) { - .c55 { + .c58 { font-size: 64px; line-height: 72px; } } @media screen and (min-width:768px) { - .c57 { + .c60 { font-size: 20px; line-height: 28px; } } @media screen and (min-width:640px) { - .c61 { + .c64 { font-size: 20px; } } @media screen and (min-width:640px) { - .c62 { + .c65 { visibility: visible; } } @media screen and (min-width:768px) { - .c65 { + .c68 { padding: 0 96px 5rem; } } @media screen and (min-width:640px) { - .c66 { + .c69 { grid-template-columns: 1fr; gap: 32px; } } @media screen and (min-width:1024px) { - .c66 { + .c69 { grid-template-columns: 1fr; gap: 32px; } } @media screen and (min-width:640px) { - .c72 { + .c75 { grid-template-columns: 1fr; gap: 32px; } } @media screen and (min-width:1024px) { - .c72 { + .c75 { grid-template-columns: 1fr 1fr 1fr; gap: 32px; } @@ -1924,7 +1963,11 @@ exports[`disable nft on landing page does not render nft information and card 1` >
+ > +
+
@@ -1932,10 +1975,10 @@ exports[`disable nft on landing page does not render nft information and card 1`
@@ -1964,11 +2007,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
dropdown.svg @@ -2041,7 +2084,23 @@ exports[`disable nft on landing page does not render nft information and card 1` >
+ > +
+
+
+
+ - +
+
+
+
+
@@ -2051,11 +2110,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
@@ -2067,52 +2126,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
@@ -2231,12 +2290,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 @@ -2244,30 +2303,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 @@ -2275,16 +2334,16 @@ exports[`disable nft on landing page does not render nft information and card 1`
Build dApps
@@ -2311,12 +2370,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 @@ -2418,45 +2477,45 @@ exports[`disable nft on landing page does not render nft information and card 1`
Protocol
Uniswap Logo © 2023 @@ -2626,7 +2685,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` border-radius: 4px; } -.c47 { +.c50 { box-sizing: border-box; margin: 0; min-width: 0; @@ -2667,6 +2726,24 @@ 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; @@ -2688,7 +2765,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` color: #7D7D7D; } -.c100 { +.c103 { -webkit-text-decoration: none; text-decoration: none; cursor: pointer; @@ -2699,15 +2776,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` font-weight: 500; } -.c100:hover { +.c103:hover { opacity: 0.6; } -.c100:active { +.c103:active { opacity: 0.4; } -.c98 { +.c101 { -webkit-text-decoration: none; text-decoration: none; cursor: pointer; @@ -2718,36 +2795,36 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` font-weight: 500; } -.c98:hover { +.c101:hover { opacity: 0.6; } -.c98:active { +.c101:active { opacity: 0.4; } -.c91 { +.c94 { height: 32px; width: 32px; fill: #98A1C0; opacity: 1; } -.c92 { +.c95 { height: 32px; width: 32px; fill: #98A1C0; opacity: 1; } -.c93 { +.c96 { height: 32px; width: 32px; fill: #98A1C0; opacity: 1; } -.c85 { +.c88 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2760,7 +2837,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` max-width: 1440px; } -.c86 { +.c89 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2770,24 +2847,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` flex-direction: column; } -.c87 { +.c90 { display: none; } -.c102 { +.c105 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.c88 { +.c91 { width: 72px; height: 72px; display: none; } -.c89 { +.c92 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2800,20 +2877,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` margin: 20px 0 0 0; } -.c90 { +.c93 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.c95 { +.c98 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } -.c96 { +.c99 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2826,32 +2903,32 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` margin: 20px 0 0 0; } -.c97 { +.c100 { font-size: 16px; line-height: 20px; font-weight: 535; } -.c101 { +.c104 { font-size: 16px; line-height: 20px; color: #7D7D7D; } -.c99 { +.c102 { font-size: 16px; line-height: 20px; color: #7D7D7D; } -.c94 { +.c97 { font-size: 16px; line-height: 20px; margin: 1rem 0 0 0; color: #CECECE; } -.c67 { +.c70 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2879,11 +2956,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transition: 250ms ease border; } -.c67:hover { +.c70:hover { border: 1px solid #CECECE; } -.c72 { +.c75 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2911,11 +2988,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transition: 250ms ease border; } -.c72:hover { +.c75:hover { border: 1px solid #CECECE; } -.c74 { +.c77 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2943,11 +3020,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transition: 250ms ease border; } -.c74:hover { +.c77:hover { border: 1px solid #CECECE; } -.c68 { +.c71 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2962,13 +3039,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` justify-content: space-between; } -.c69 { +.c72 { font-size: 20px; line-height: 28px; font-weight: 535; } -.c70 { +.c73 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2983,7 +3060,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` max-width: 480px; } -.c75 { +.c78 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2998,7 +3075,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` max-width: 480px; } -.c71 { +.c74 { color: #FC72FF; font-weight: 535; margin: 24px 0 0; @@ -3007,18 +3084,18 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transition: 250ms ease opacity; } -.c71:hover { +.c74:hover { opacity: 0.6; } -.c76 { +.c79 { min-width: 20px; min-height: 20px; max-height: 48px; max-width: 48px; } -.c50 { +.c53 { background-color: transparent; bottom: 0; border-radius: inherit; @@ -3089,7 +3166,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` text-decoration: none; } -.c82 { +.c85 { padding: 16px; width: 200px; line-height: 24px; @@ -3128,58 +3205,58 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transform: perspective(1px) translateZ(0); } -.c82:disabled { +.c85:disabled { opacity: 50%; cursor: auto; pointer-events: none; } -.c82 > * { +.c85 > * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } -.c82 > a { +.c85 > a { -webkit-text-decoration: none; text-decoration: none; } -.c48 { +.c51 { background-color: #FFEFFF; color: #FC72FF; font-size: 20px; font-weight: 535; } -.c48:focus { +.c51:focus { box-shadow: 0 0 0 1pt #FFEFFF; background-color: #FFEFFF; } -.c48:hover { +.c51:hover { background-color: #FFEFFF; } -.c48:active { +.c51:active { box-shadow: 0 0 0 1pt #FFEFFF; background-color: #FFEFFF; } -.c48:hover .c49 { +.c51:hover .c52 { background-color: #98A1C014; } -.c48:active .c49 { +.c51:active .c52 { background-color: #B8C0DC3d; } -.c48:disabled { +.c51:disabled { opacity: 0.4; } -.c48:disabled:hover { +.c51:disabled:hover { cursor: auto; background-color: transparent; box-shadow: none; @@ -3203,7 +3280,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` background-color: #e0e0e0; } -.c83 { +.c86 { background-color: transparent; color: #FC72FF; display: -webkit-box; @@ -3220,22 +3297,22 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` align-items: center; } -.c83:focus { +.c86:focus { -webkit-text-decoration: underline; text-decoration: underline; } -.c83:hover { +.c86:hover { -webkit-text-decoration: none; text-decoration: none; } -.c83:active { +.c86:active { -webkit-text-decoration: none; text-decoration: none; } -.c83:disabled { +.c86:disabled { opacity: 50%; cursor: auto; } @@ -3269,7 +3346,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` cursor: auto; } -.c77 { +.c80 { height: 340px; width: 100%; border-radius: 32px; @@ -3295,7 +3372,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%); } -.c78 { +.c81 { color: white; display: -webkit-box; display: -webkit-flex; @@ -3309,20 +3386,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` flex-direction: column; } -.c79 { +.c82 { font-weight: 535; font-size: 28px; line-height: 36px; } -.c80 { +.c83 { margin: 10px 10px 0 0; font-weight: 535; font-size: 16px; line-height: 20px; } -.c81 { +.c84 { width: 100%; display: -webkit-box; display: -webkit-flex; @@ -3336,16 +3413,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transition: 250ms ease opacity; } -.c81:hover { +.c84:hover { opacity: 0.6; } -.c84 { +.c87 { color: white; border: 1px solid white; } -.c43 { +.c45 { display: grid; grid-auto-rows: auto; grid-row-gap: 4px; @@ -3359,6 +3436,21 @@ 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; @@ -3441,6 +3533,12 @@ 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; @@ -3521,7 +3619,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` background-color: #B8C0DC3d; } -.c45 { +.c47 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -3554,12 +3652,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` animation: none; } -.c45:hover, -.c45:active { +.c47:hover, +.c47:active { background-color: #FC72FF; } -.c45:before { +.c47:before { background-size: 100%; border-radius: inherit; position: absolute; @@ -3570,11 +3668,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` content: ''; } -.c45:hover:before { +.c47:hover:before { background-color: #98A1C014; } -.c45:active:before { +.c47:active:before { background-color: #B8C0DC3d; } @@ -3654,13 +3752,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` stroke-width: 2px; } -.c46 { +.c48 { margin: 0 0.25rem 0 0.35rem; height: 35%; margin-left: 8px; } -.c46 path { +.c48 path { stroke: #FFFFFF; stroke-width: 2px; } @@ -3728,7 +3826,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` padding-top: 12px; } -.c41 { +.c43 { border-radius: 12px; height: 40px; width: 40px; @@ -3743,7 +3841,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` z-index: 2; } -.c41:hover { +.c43:hover { cursor: pointer; opacity: 0.8; } @@ -3805,7 +3903,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` gap: 16px; } -.c42 { +.c44 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -3856,7 +3954,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` border-color: #B8C0DC3d; } -.c44 { +.c46 { border-bottom: 1px solid #FFFFFF; } @@ -3883,7 +3981,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` overflow-x: hidden; } -.c51 { +.c54 { position: absolute; display: -webkit-box; display: -webkit-flex; @@ -3907,7 +4005,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` height: calc(100vh - 48px); } -.c52 { +.c55 { position: absolute; display: -webkit-box; display: -webkit-flex; @@ -3928,7 +4026,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` height: calc(100vh - 48px); } -.c53 { +.c56 { position: absolute; top: 68px; bottom: 0; @@ -3941,7 +4039,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` height: 100%; } -.c54 { +.c57 { position: absolute; display: -webkit-box; display: -webkit-flex; @@ -3969,11 +4067,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` pointer-events: none; } -.c54 * { +.c57 * { pointer-events: auto; } -.c55 { +.c58 { color: transparent; font-size: 36px; line-height: 44px; @@ -3985,7 +4083,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` -webkit-background-clip: text; } -.c57 { +.c60 { color: #7D7D7D; font-size: 16px; line-height: 24px; @@ -3995,7 +4093,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` margin: 0 0 32px; } -.c56 { +.c59 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -4006,12 +4104,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` justify-content: center; } -.c59 { +.c62 { padding: 16px 0px; border-radius: 24px; } -.c60 { +.c63 { background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%); border: none; color: #FFFFFF; @@ -4019,24 +4117,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transition: all 250ms ease; } -.c60:hover { +.c63:hover { box-shadow: 0px 0px 16px 0px #ff00c7; } -.c61 { +.c64 { margin: 0px; font-size: 16px; font-weight: 535; white-space: nowrap; } -.c58 { +.c61 { max-width: 300px; width: 100%; pointer-events: auto; } -.c62 { +.c65 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -4056,16 +4154,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` transition: 250ms ease opacity; } -.c62:hover { +.c65:hover { opacity: 0.6; } -.c63 { +.c66 { margin-left: 14px; size: 20px; } -.c65 { +.c68 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -4082,7 +4180,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%); } -.c66 { +.c69 { display: grid; gap: 12px; width: 100%; @@ -4095,7 +4193,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` grid-template-columns: 1fr; } -.c73 { +.c76 { display: grid; gap: 12px; width: 100%; @@ -4149,7 +4247,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` width: 100%; } -.c64 { +.c67 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -4165,12 +4263,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` text-align: center; } -.c64:hover { +.c67:hover { color: #CECECE; } @media screen and (min-width:1024px) { - .c85 { + .c88 { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -4182,7 +4280,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` } @media screen and (min-width:1024px) { - .c87 { + .c90 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -4191,75 +4289,75 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` } @media screen and (min-width:1024px) { - .c102 { + .c105 { display: none; } } @media screen and (min-width:1024px) { - .c88 { + .c91 { display: block; } } @media screen and (min-width:1280px) { - .c95 { + .c98 { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 24px; } } @media screen and (min-width:1280px) { - .c96 { + .c99 { margin: 0; } } @media screen and (min-width:640px) { - .c67 { + .c70 { height: 360px; } } @media screen and (min-width:1280px) { - .c67 { + .c70 { padding: 32px; } } @media screen and (min-width:640px) { - .c72 { + .c75 { height: 360px; } } @media screen and (min-width:1280px) { - .c72 { + .c75 { padding: 32px; } } @media screen and (min-width:640px) { - .c74 { + .c77 { height: 260px; } } @media screen and (min-width:1280px) { - .c74 { + .c77 { padding: 32px; } } @media screen and (min-width:1024px) { - .c69 { + .c72 { font-size: 28px; line-height: 36px; } } @media screen and (min-width:1280px) { - .c70 { + .c73 { font-size: 20px; line-height: 28px; max-width: 480px; @@ -4267,7 +4365,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` } @media screen and (min-width:1280px) { - .c75 { + .c78 { font-size: 20px; line-height: 28px; max-width: 480px; @@ -4275,7 +4373,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` } @media screen and (min-width:1024px) { - .c77 { + .c80 { height: 140px; -webkit-flex-direction: row; -ms-flex-direction: row; @@ -4284,21 +4382,21 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` } @media screen and (min-width:1280px) { - .c79 { + .c82 { font-size: 28px; line-height: 36px; } } @media screen and (min-width:1280px) { - .c80 { + .c83 { font-size: 20px; line-height: 28px; } } @media screen and (min-width:1024px) { - .c81 { + .c84 { width: auto; } } @@ -4316,79 +4414,79 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` } @media screen and (min-width:768px) { - .c51 { + .c54 { height: 100vh; } } @media screen and (min-width:768px) { - .c52 { + .c55 { height: 100vh; } } @media screen and (min-width:640px) { - .c55 { + .c58 { font-size: 48px; line-height: 56px; } } @media screen and (min-width:768px) { - .c55 { + .c58 { font-size: 64px; line-height: 72px; } } @media screen and (min-width:768px) { - .c57 { + .c60 { font-size: 20px; line-height: 28px; } } @media screen and (min-width:640px) { - .c61 { + .c64 { font-size: 20px; } } @media screen and (min-width:640px) { - .c62 { + .c65 { visibility: visible; } } @media screen and (min-width:768px) { - .c65 { + .c68 { padding: 0 96px 5rem; } } @media screen and (min-width:640px) { - .c66 { + .c69 { grid-template-columns: 1fr 1fr; gap: 32px; } } @media screen and (min-width:1024px) { - .c66 { + .c69 { grid-template-columns: 1fr 1fr; gap: 32px; } } @media screen and (min-width:640px) { - .c73 { + .c76 { grid-template-columns: 1fr; gap: 32px; } } @media screen and (min-width:1024px) { - .c73 { + .c76 { grid-template-columns: 1fr 1fr 1fr; gap: 32px; } @@ -4564,7 +4662,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` >
+ > +
+
@@ -4572,10 +4674,10 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
@@ -4604,11 +4706,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
dropdown.svg @@ -4681,7 +4783,23 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` >
+ > +
+
+
+
+ - +
+
+
+
+
@@ -4691,11 +4809,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
@@ -4707,52 +4825,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 @@ -4830,25 +4948,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
@@ -4897,12 +5015,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 @@ -4910,30 +5028,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 @@ -4941,16 +5059,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Build dApps
@@ -4977,12 +5095,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 @@ -5084,51 +5202,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 e342d135ea..736b389544 100644 --- a/src/pages/Swap/index.tsx +++ b/src/pages/Swap/index.tsx @@ -323,10 +323,19 @@ export function Swap({ [independentField, parsedAmount, showWrap, trade] ) - const fiatValueInput = useUSDPrice(parsedAmounts[Field.INPUT], currencies[Field.INPUT] ?? undefined) - const fiatValueOutput = useUSDPrice(parsedAmounts[Field.OUTPUT], currencies[Field.OUTPUT] ?? undefined) - 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)) + } + + const fiatValueInput = useUSDPrice( + parsedAmounts[Field.INPUT] ?? getSingleUnitAmount(currencies[Field.INPUT]), + currencies[Field.INPUT] + ) + const fiatValueOutput = useUSDPrice( + parsedAmounts[Field.OUTPUT] ?? getSingleUnitAmount(currencies[Field.OUTPUT]), + currencies[Field.OUTPUT] + ) const [routeNotFound, routeIsLoading, routeIsSyncing] = useMemo( () => [ @@ -632,7 +641,7 @@ export function Swap({ currency={currencies[Field.INPUT] ?? null} onUserInput={handleTypeInput} onMax={handleMaxInput} - fiatValue={showFiatValueInput ? fiatValueInput : undefined} + fiatValue={fiatValueInput} onCurrencySelect={handleInputSelect} otherCurrency={currencies[Field.OUTPUT]} showCommonBases @@ -673,7 +682,7 @@ export function Swap({ label={You receive} showMaxButton={false} hideBalance={false} - fiatValue={showFiatValueOutput ? fiatValueOutput : undefined} + fiatValue={fiatValueOutput} priceImpact={stablecoinPriceImpact} currency={currencies[Field.OUTPUT] ?? null} onCurrencySelect={handleOutputSelect} diff --git a/src/state/swap/hooks.tsx b/src/state/swap/hooks.tsx index 7ca5c89987..df5b46db6a 100644 --- a/src/state/swap/hooks.tsx +++ b/src/state/swap/hooks.tsx @@ -78,7 +78,7 @@ const BAD_RECIPIENT_ADDRESSES: { [address: string]: true } = { } export type SwapInfo = { - currencies: { [field in Field]?: Currency | null } + currencies: { [field in Field]?: Currency } currencyBalances: { [field in Field]?: CurrencyAmount } inputTax: Percent outputTax: Percent @@ -148,7 +148,7 @@ export function useDerivedSwapInfo(state: SwapState, chainId: ChainId | undefine [relevantTokenBalances] ) - const currencies: { [field in Field]?: Currency | null } = useMemo( + const currencies: { [field in Field]?: Currency } = useMemo( () => ({ [Field.INPUT]: inputCurrency, [Field.OUTPUT]: outputCurrency,