Skip to content

I
interface
Commit 7cd72a70 authored by eddie's avatar eddie Committed by GitHub
Browse files
Options

feat: show usd price with no input amount (#7328) 

* feat: show usd price with no input amount

* fix: snapshots

* fix: make tokens undefined only - no null

* fix: readability

* fix: syntax improvements
parent 4f8956f7
Show whitespace changes
Inline Side-by-side
Showing with 579 additions and 452 deletions
src/hooks/Tokens.ts
View file @ 7cd72a70
...@@ -190,7 +190,7 @@ export function useToken(tokenAddress?: string | null): Token | null | undefined ...@@ -190,7 +190,7 @@ export function useToken(tokenAddress?: string | null): Token | null | undefined
return useTokenFromMapOrNetwork(tokens, tokenAddress) return useTokenFromMapOrNetwork(tokens, tokenAddress)
} }
export function useCurrency(currencyId: Maybe<string>, chainId?: ChainId): Currency | null | undefined { export function useCurrency(currencyId: Maybe<string>, chainId?: ChainId): Currency | undefined {
const { chainId: connectedChainId } = useWeb3React() const { chainId: connectedChainId } = useWeb3React()
const tokens = useDefaultActiveTokens(chainId ?? connectedChainId) const tokens = useDefaultActiveTokens(chainId ?? connectedChainId)
return useCurrencyFromMap(tokens, chainId ?? connectedChainId, currencyId) return useCurrencyFromMap(tokens, chainId ?? connectedChainId, currencyId)
......
src/lib/hooks/useCurrency.ts
View file @ 7cd72a70
...@@ -80,7 +80,7 @@ type TokenMap = { [address: string]: Token } ...@@ -80,7 +80,7 @@ type TokenMap = { [address: string]: Token }
* Returns null if token is loading or null was passed. * Returns null if token is loading or null was passed.
* Returns undefined if tokenAddress is invalid or token does not exist. * 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 address = isAddress(tokenAddress)
const token: Token | undefined = address ? tokens[address] : undefined const token: Token | undefined = address ? tokens[address] : undefined
const tokenFromNetwork = useTokenFromActiveNetwork(token ? undefined : address ? address : undefined) const tokenFromNetwork = useTokenFromActiveNetwork(token ? undefined : address ? address : undefined)
...@@ -106,7 +106,7 @@ export function useCurrencyFromMap( ...@@ -106,7 +106,7 @@ export function useCurrencyFromMap(
tokens: TokenMap, tokens: TokenMap,
chainId: ChainId | undefined, chainId: ChainId | undefined,
currencyId?: string | null currencyId?: string | null
): Currency | null | undefined { ): Currency | undefined {
const nativeCurrency = useNativeCurrency(chainId) const nativeCurrency = useNativeCurrency(chainId)
const isNative = Boolean(nativeCurrency && currencyId?.toUpperCase() === 'ETH') const isNative = Boolean(nativeCurrency && currencyId?.toUpperCase() === 'ETH')
const shorthandMatchAddress = useMemo(() => { const shorthandMatchAddress = useMemo(() => {
...@@ -116,7 +116,7 @@ export function useCurrencyFromMap( ...@@ -116,7 +116,7 @@ export function useCurrencyFromMap(
const token = useTokenFromMapOrNetwork(tokens, isNative ? undefined : shorthandMatchAddress ?? currencyId) 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 // this case so we use our builtin wrapped token instead of wrapped tokens on token lists
const wrappedNative = nativeCurrency?.wrapped const wrappedNative = nativeCurrency?.wrapped
......
src/pages/Landing/__snapshots__/index.test.tsx.snap
View file @ 7cd72a70
...@@ -30,7 +30,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -30,7 +30,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
border-radius: 4px; border-radius: 4px;
} }
.c47 { .c50 {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
min-width: 0; min-width: 0;
...@@ -71,6 +71,24 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -71,6 +71,24 @@ exports[`disable nft on landing page does not render nft information and card 1`
justify-content: flex-start; 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 { .c9 {
-webkit-box-pack: justify; -webkit-box-pack: justify;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
...@@ -92,7 +110,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -92,7 +110,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
color: #7D7D7D; color: #7D7D7D;
} }
.c99 { .c102 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -103,15 +121,15 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -103,15 +121,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
font-weight: 500; font-weight: 500;
} }
.c99:hover { .c102:hover {
opacity: 0.6; opacity: 0.6;
} }
.c99:active { .c102:active {
opacity: 0.4; opacity: 0.4;
} }
.c97 { .c100 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -122,36 +140,36 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -122,36 +140,36 @@ exports[`disable nft on landing page does not render nft information and card 1`
font-weight: 500; font-weight: 500;
} }
.c97:hover { .c100:hover {
opacity: 0.6; opacity: 0.6;
} }
.c97:active { .c100:active {
opacity: 0.4; opacity: 0.4;
} }
.c90 { .c93 {
height: 32px; height: 32px;
width: 32px; width: 32px;
fill: #98A1C0; fill: #98A1C0;
opacity: 1; opacity: 1;
} }
.c91 { .c94 {
height: 32px; height: 32px;
width: 32px; width: 32px;
fill: #98A1C0; fill: #98A1C0;
opacity: 1; opacity: 1;
} }
.c92 { .c95 {
height: 32px; height: 32px;
width: 32px; width: 32px;
fill: #98A1C0; fill: #98A1C0;
opacity: 1; opacity: 1;
} }
.c84 { .c87 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -164,7 +182,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -164,7 +182,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
max-width: 1440px; max-width: 1440px;
} }
.c85 { .c88 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -174,24 +192,24 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -174,24 +192,24 @@ exports[`disable nft on landing page does not render nft information and card 1`
flex-direction: column; flex-direction: column;
} }
.c86 { .c89 {
display: none; display: none;
} }
.c101 { .c104 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
} }
.c87 { .c90 {
width: 72px; width: 72px;
height: 72px; height: 72px;
display: none; display: none;
} }
.c88 { .c91 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -204,20 +222,20 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -204,20 +222,20 @@ exports[`disable nft on landing page does not render nft information and card 1`
margin: 20px 0 0 0; margin: 20px 0 0 0;
} }
.c89 { .c92 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
} }
.c94 { .c97 {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 12px; gap: 12px;
} }
.c95 { .c98 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -230,32 +248,32 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -230,32 +248,32 @@ exports[`disable nft on landing page does not render nft information and card 1`
margin: 20px 0 0 0; margin: 20px 0 0 0;
} }
.c96 { .c99 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
font-weight: 535; font-weight: 535;
} }
.c100 { .c103 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
color: #7D7D7D; color: #7D7D7D;
} }
.c98 { .c101 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
color: #7D7D7D; color: #7D7D7D;
} }
.c93 { .c96 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
margin: 1rem 0 0 0; margin: 1rem 0 0 0;
color: #CECECE; color: #CECECE;
} }
.c67 { .c70 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -283,11 +301,11 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -283,11 +301,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: 250ms ease border; transition: 250ms ease border;
} }
.c67:hover { .c70:hover {
border: 1px solid #CECECE; border: 1px solid #CECECE;
} }
.c73 { .c76 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -315,11 +333,11 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -315,11 +333,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: 250ms ease border; transition: 250ms ease border;
} }
.c73:hover { .c76:hover {
border: 1px solid #CECECE; border: 1px solid #CECECE;
} }
.c68 { .c71 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -334,13 +352,13 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -334,13 +352,13 @@ exports[`disable nft on landing page does not render nft information and card 1`
justify-content: space-between; justify-content: space-between;
} }
.c69 { .c72 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
font-weight: 535; font-weight: 535;
} }
.c70 { .c73 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -355,7 +373,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -355,7 +373,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
max-width: 480px; max-width: 480px;
} }
.c74 { .c77 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -370,7 +388,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -370,7 +388,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
max-width: 480px; max-width: 480px;
} }
.c71 { .c74 {
color: #FC72FF; color: #FC72FF;
font-weight: 535; font-weight: 535;
margin: 24px 0 0; margin: 24px 0 0;
...@@ -379,18 +397,18 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -379,18 +397,18 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: 250ms ease opacity; transition: 250ms ease opacity;
} }
.c71:hover { .c74:hover {
opacity: 0.6; opacity: 0.6;
} }
.c75 { .c78 {
min-width: 20px; min-width: 20px;
min-height: 20px; min-height: 20px;
max-height: 48px; max-height: 48px;
max-width: 48px; max-width: 48px;
} }
.c50 { .c53 {
background-color: transparent; background-color: transparent;
bottom: 0; bottom: 0;
border-radius: inherit; border-radius: inherit;
...@@ -461,7 +479,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -461,7 +479,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
text-decoration: none; text-decoration: none;
} }
.c81 { .c84 {
padding: 16px; padding: 16px;
width: 200px; width: 200px;
line-height: 24px; line-height: 24px;
...@@ -500,58 +518,58 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -500,58 +518,58 @@ exports[`disable nft on landing page does not render nft information and card 1`
transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
} }
.c81:disabled { .c84:disabled {
opacity: 50%; opacity: 50%;
cursor: auto; cursor: auto;
pointer-events: none; pointer-events: none;
} }
.c81 > * { .c84 > * {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.c81 > a { .c84 > a {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c48 { .c51 {
background-color: #FFEFFF; background-color: #FFEFFF;
color: #FC72FF; color: #FC72FF;
font-size: 20px; font-size: 20px;
font-weight: 535; font-weight: 535;
} }
.c48:focus { .c51:focus {
box-shadow: 0 0 0 1pt #FFEFFF; box-shadow: 0 0 0 1pt #FFEFFF;
background-color: #FFEFFF; background-color: #FFEFFF;
} }
.c48:hover { .c51:hover {
background-color: #FFEFFF; background-color: #FFEFFF;
} }
.c48:active { .c51:active {
box-shadow: 0 0 0 1pt #FFEFFF; box-shadow: 0 0 0 1pt #FFEFFF;
background-color: #FFEFFF; background-color: #FFEFFF;
} }
.c48:hover .c49 { .c51:hover .c52 {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c48:active .c49 { .c51:active .c52 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c48:disabled { .c51:disabled {
opacity: 0.4; opacity: 0.4;
} }
.c48:disabled:hover { .c51:disabled:hover {
cursor: auto; cursor: auto;
background-color: transparent; background-color: transparent;
box-shadow: none; box-shadow: none;
...@@ -575,7 +593,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -575,7 +593,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
background-color: #e0e0e0; background-color: #e0e0e0;
} }
.c82 { .c85 {
background-color: transparent; background-color: transparent;
color: #FC72FF; color: #FC72FF;
display: -webkit-box; display: -webkit-box;
...@@ -592,22 +610,22 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -592,22 +610,22 @@ exports[`disable nft on landing page does not render nft information and card 1`
align-items: center; align-items: center;
} }
.c82:focus { .c85:focus {
-webkit-text-decoration: underline; -webkit-text-decoration: underline;
text-decoration: underline; text-decoration: underline;
} }
.c82:hover { .c85:hover {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c82:active { .c85:active {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c82:disabled { .c85:disabled {
opacity: 50%; opacity: 50%;
cursor: auto; cursor: auto;
} }
...@@ -641,7 +659,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -641,7 +659,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
cursor: auto; cursor: auto;
} }
.c76 { .c79 {
height: 340px; height: 340px;
width: 100%; width: 100%;
border-radius: 32px; border-radius: 32px;
...@@ -667,7 +685,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -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%); background: url(Mesh.png),linear-gradient(93.06deg,#FF00C7 2.66%,#FF9FFB 98.99%);
} }
.c77 { .c80 {
color: white; color: white;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -681,20 +699,20 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -681,20 +699,20 @@ exports[`disable nft on landing page does not render nft information and card 1`
flex-direction: column; flex-direction: column;
} }
.c78 { .c81 {
font-weight: 535; font-weight: 535;
font-size: 28px; font-size: 28px;
line-height: 36px; line-height: 36px;
} }
.c79 { .c82 {
margin: 10px 10px 0 0; margin: 10px 10px 0 0;
font-weight: 535; font-weight: 535;
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
} }
.c80 { .c83 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -708,16 +726,16 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -708,16 +726,16 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: 250ms ease opacity; transition: 250ms ease opacity;
} }
.c80:hover { .c83:hover {
opacity: 0.6; opacity: 0.6;
} }
.c83 { .c86 {
color: white; color: white;
border: 1px solid white; border: 1px solid white;
} }
.c43 { .c45 {
display: grid; display: grid;
grid-auto-rows: auto; grid-auto-rows: auto;
grid-row-gap: 4px; grid-row-gap: 4px;
...@@ -731,6 +749,21 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -731,6 +749,21 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: opacity 250ms ease-in-out; 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 { .c14 {
display: inline-block; display: inline-block;
height: inherit; height: inherit;
...@@ -813,6 +846,12 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -813,6 +846,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
color: #CECECE; color: #CECECE;
} }
.c42 {
border-radius: 4px;
width: 4rem;
height: 1rem;
}
.c24 { .c24 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -893,7 +932,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -893,7 +932,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c45 { .c47 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -926,12 +965,12 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -926,12 +965,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
animation: none; animation: none;
} }
.c45:hover, .c47:hover,
.c45:active { .c47:active {
background-color: #FC72FF; background-color: #FC72FF;
} }
.c45:before { .c47:before {
background-size: 100%; background-size: 100%;
border-radius: inherit; border-radius: inherit;
position: absolute; position: absolute;
...@@ -942,11 +981,11 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -942,11 +981,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
content: ''; content: '';
} }
.c45:hover:before { .c47:hover:before {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c45:active:before { .c47:active:before {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
...@@ -1026,13 +1065,13 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1026,13 +1065,13 @@ exports[`disable nft on landing page does not render nft information and card 1`
stroke-width: 2px; stroke-width: 2px;
} }
.c46 { .c48 {
margin: 0 0.25rem 0 0.35rem; margin: 0 0.25rem 0 0.35rem;
height: 35%; height: 35%;
margin-left: 8px; margin-left: 8px;
} }
.c46 path { .c48 path {
stroke: #FFFFFF; stroke: #FFFFFF;
stroke-width: 2px; stroke-width: 2px;
} }
...@@ -1100,7 +1139,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1100,7 +1139,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
padding-top: 12px; padding-top: 12px;
} }
.c41 { .c43 {
border-radius: 12px; border-radius: 12px;
height: 40px; height: 40px;
width: 40px; width: 40px;
...@@ -1115,7 +1154,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1115,7 +1154,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
z-index: 2; z-index: 2;
} }
.c41:hover { .c43:hover {
cursor: pointer; cursor: pointer;
opacity: 0.8; opacity: 0.8;
} }
...@@ -1177,7 +1216,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1177,7 +1216,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
gap: 16px; gap: 16px;
} }
.c42 { .c44 {
display: -webkit-inline-box; display: -webkit-inline-box;
display: -webkit-inline-flex; display: -webkit-inline-flex;
display: -ms-inline-flexbox; display: -ms-inline-flexbox;
...@@ -1228,7 +1267,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1228,7 +1267,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
border-color: #B8C0DC3d; border-color: #B8C0DC3d;
} }
.c44 { .c46 {
border-bottom: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF;
} }
...@@ -1255,7 +1294,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1255,7 +1294,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
overflow-x: hidden; overflow-x: hidden;
} }
.c51 { .c54 {
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -1279,7 +1318,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1279,7 +1318,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
height: calc(100vh - 48px); height: calc(100vh - 48px);
} }
.c52 { .c55 {
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -1300,7 +1339,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1300,7 +1339,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
height: calc(100vh - 48px); height: calc(100vh - 48px);
} }
.c53 { .c56 {
position: absolute; position: absolute;
top: 68px; top: 68px;
bottom: 0; bottom: 0;
...@@ -1313,7 +1352,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1313,7 +1352,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
height: 100%; height: 100%;
} }
.c54 { .c57 {
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -1341,11 +1380,11 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1341,11 +1380,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
pointer-events: none; pointer-events: none;
} }
.c54 * { .c57 * {
pointer-events: auto; pointer-events: auto;
} }
.c55 { .c58 {
color: transparent; color: transparent;
font-size: 36px; font-size: 36px;
line-height: 44px; line-height: 44px;
...@@ -1357,7 +1396,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1357,7 +1396,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
-webkit-background-clip: text; -webkit-background-clip: text;
} }
.c57 { .c60 {
color: #7D7D7D; color: #7D7D7D;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
...@@ -1367,7 +1406,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1367,7 +1406,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
margin: 0 0 32px; margin: 0 0 32px;
} }
.c56 { .c59 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -1378,12 +1417,12 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1378,12 +1417,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
justify-content: center; justify-content: center;
} }
.c59 { .c62 {
padding: 16px 0px; padding: 16px 0px;
border-radius: 24px; border-radius: 24px;
} }
.c60 { .c63 {
background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%); background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%);
border: none; border: none;
color: #FFFFFF; color: #FFFFFF;
...@@ -1391,24 +1430,24 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1391,24 +1430,24 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: all 250ms ease; transition: all 250ms ease;
} }
.c60:hover { .c63:hover {
box-shadow: 0px 0px 16px 0px #ff00c7; box-shadow: 0px 0px 16px 0px #ff00c7;
} }
.c61 { .c64 {
margin: 0px; margin: 0px;
font-size: 16px; font-size: 16px;
font-weight: 535; font-weight: 535;
white-space: nowrap; white-space: nowrap;
} }
.c58 { .c61 {
max-width: 300px; max-width: 300px;
width: 100%; width: 100%;
pointer-events: auto; pointer-events: auto;
} }
.c62 { .c65 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -1428,16 +1467,16 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1428,16 +1467,16 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: 250ms ease opacity; transition: 250ms ease opacity;
} }
.c62:hover { .c65:hover {
opacity: 0.6; opacity: 0.6;
} }
.c63 { .c66 {
margin-left: 14px; margin-left: 14px;
size: 20px; size: 20px;
} }
.c65 { .c68 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -1454,7 +1493,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -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%); background: linear-gradient(179.82deg,rgba(255,255,255,0) 0.16%,#eaeaea 99.85%);
} }
.c66 { .c69 {
display: grid; display: grid;
gap: 12px; gap: 12px;
width: 100%; width: 100%;
...@@ -1467,7 +1506,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1467,7 +1506,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.c72 { .c75 {
display: grid; display: grid;
gap: 12px; gap: 12px;
width: 100%; width: 100%;
...@@ -1521,7 +1560,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1521,7 +1560,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
width: 100%; width: 100%;
} }
.c64 { .c67 {
display: -webkit-inline-box; display: -webkit-inline-box;
display: -webkit-inline-flex; display: -webkit-inline-flex;
display: -ms-inline-flexbox; display: -ms-inline-flexbox;
...@@ -1537,12 +1576,12 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1537,12 +1576,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
text-align: center; text-align: center;
} }
.c64:hover { .c67:hover {
color: #CECECE; color: #CECECE;
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c84 { .c87 {
-webkit-flex-direction: row; -webkit-flex-direction: row;
-ms-flex-direction: row; -ms-flex-direction: row;
flex-direction: row; flex-direction: row;
...@@ -1554,7 +1593,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1554,7 +1593,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c86 { .c89 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -1563,63 +1602,63 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1563,63 +1602,63 @@ exports[`disable nft on landing page does not render nft information and card 1`
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c101 { .c104 {
display: none; display: none;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c87 { .c90 {
display: block; display: block;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c94 { .c97 {
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 24px; gap: 24px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c95 { .c98 {
margin: 0; margin: 0;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c67 { .c70 {
height: 360px; height: 360px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c67 { .c70 {
padding: 32px; padding: 32px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c73 { .c76 {
height: 260px; height: 260px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c73 { .c76 {
padding: 32px; padding: 32px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c69 { .c72 {
font-size: 28px; font-size: 28px;
line-height: 36px; line-height: 36px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c70 { .c73 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
max-width: 480px; max-width: 480px;
...@@ -1627,7 +1666,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1627,7 +1666,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c74 { .c77 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
max-width: 480px; max-width: 480px;
...@@ -1635,7 +1674,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1635,7 +1674,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c76 { .c79 {
height: 140px; height: 140px;
-webkit-flex-direction: row; -webkit-flex-direction: row;
-ms-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` ...@@ -1644,21 +1683,21 @@ exports[`disable nft on landing page does not render nft information and card 1`
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c78 { .c81 {
font-size: 28px; font-size: 28px;
line-height: 36px; line-height: 36px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c79 { .c82 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c80 { .c83 {
width: auto; width: auto;
} }
} }
...@@ -1676,79 +1715,79 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1676,79 +1715,79 @@ exports[`disable nft on landing page does not render nft information and card 1`
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c51 { .c54 {
height: 100vh; height: 100vh;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c52 { .c55 {
height: 100vh; height: 100vh;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c55 { .c58 {
font-size: 48px; font-size: 48px;
line-height: 56px; line-height: 56px;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c55 { .c58 {
font-size: 64px; font-size: 64px;
line-height: 72px; line-height: 72px;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c57 { .c60 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c61 { .c64 {
font-size: 20px; font-size: 20px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c62 { .c65 {
visibility: visible; visibility: visible;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c65 { .c68 {
padding: 0 96px 5rem; padding: 0 96px 5rem;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c66 { .c69 {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 32px; gap: 32px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c66 { .c69 {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 32px; gap: 32px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c72 { .c75 {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 32px; gap: 32px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c72 { .c75 {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
gap: 32px; gap: 32px;
} }
...@@ -1924,7 +1963,11 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1924,7 +1963,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
> >
<div <div
class="c40" class="c40"
>
<div
class="c41 c42"
/> />
</div>
<span /> <span />
</div> </div>
</div> </div>
...@@ -1932,10 +1975,10 @@ 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`
</div> </div>
</div> </div>
<div <div
class="c41" class="c43"
> >
<div <div
class="c42" class="c44"
color="#222222" color="#222222"
data-testid="swap-currency-button" data-testid="swap-currency-button"
> >
...@@ -1964,11 +2007,11 @@ 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`
</div> </div>
</div> </div>
<div <div
class="c43" class="c45"
> >
<div> <div>
<div <div
class="c23 c44" class="c23 c46"
> >
<div <div
class="c24" class="c24"
...@@ -2009,7 +2052,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2009,7 +2052,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
class="c14" class="c14"
> >
<button <button
class="c15 c16 c30 c45 open-currency-select-button" class="c15 c16 c30 c47 open-currency-select-button"
> >
<span <span
class="c32" class="c32"
...@@ -2024,7 +2067,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2024,7 +2067,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
</span> </span>
</div> </div>
<svg <svg
class="c46" class="c48"
> >
dropdown.svg dropdown.svg
</svg> </svg>
...@@ -2041,7 +2084,23 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2041,7 +2084,23 @@ exports[`disable nft on landing page does not render nft information and card 1`
> >
<div <div
class="c40" class="c40"
/> >
<div
class="c7 c49"
>
<div
class="c26 css-142zc9n"
>
<div
class="c14"
>
<div>
-
</div>
</div>
</div>
</div>
</div>
<span /> <span />
</div> </div>
</div> </div>
...@@ -2051,11 +2110,11 @@ 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`
</div> </div>
<div> <div>
<button <button
class="c47 c16 c48" class="c50 c16 c51"
font-weight="535" font-weight="535"
> >
<div <div
class="c49 c50" class="c52 c53"
/> />
Connect Wallet Connect Wallet
</button> </button>
...@@ -2067,52 +2126,52 @@ 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`
</a> </a>
</div> </div>
<div <div
class="c51" class="c54"
/> />
<div <div
class="c52" class="c55"
> >
<div <div
class="c53" class="c56"
/> />
</div> </div>
<div <div
class="c54" class="c57"
> >
<h1 <h1
class="c55" class="c58"
> >
Trade crypto with confidence Trade crypto with confidence
</h1> </h1>
<div <div
class="c56" class="c59"
> >
<div <div
class="c57" class="c60"
> >
Buy, sell, and explore tokens Buy, sell, and explore tokens
</div> </div>
</div> </div>
<span <span
class="c58" class="c61"
> >
<a <a
class="c2 c16 c59 c60" class="c2 c16 c62 c63"
href="/swap" href="/swap"
> >
<p <p
class="c61" class="c64"
> >
Get started Get started
</p> </p>
</a> </a>
</span> </span>
<div <div
class="c62" class="c65"
> >
Learn more Learn more
<svg <svg
class="c63" class="c66"
fill="none" fill="none"
height="24" height="24"
stroke="currentColor" stroke="currentColor"
...@@ -2140,7 +2199,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2140,7 +2199,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
</svg> </svg>
</div> </div>
<a <a
class="c64" class="c67"
href="https://wallet.uniswap.org/?utm_source=home_page&utm_medium=webapp&utm_campaign=wallet_microsite&utm_id=1" href="https://wallet.uniswap.org/?utm_source=home_page&utm_medium=webapp&utm_campaign=wallet_microsite&utm_id=1"
> >
<svg <svg
...@@ -2157,32 +2216,32 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2157,32 +2216,32 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a> </a>
</div> </div>
<div <div
class="c65" class="c68"
> >
<div <div
class="c66" class="c69"
cols="1" cols="1"
> >
<a <a
class="c67" class="c70"
href="/swap" href="/swap"
> >
<div <div
class="c68" class="c71"
> >
<div <div
class="c69" class="c72"
> >
Swap tokens Swap tokens
</div> </div>
</div> </div>
<div <div
class="c70" class="c73"
type="Primary" type="Primary"
> >
Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more. Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more.
<div <div
class="c70 c71" class="c73 c74"
type="Primary" type="Primary"
> >
Trade Tokens Trade Tokens
...@@ -2191,20 +2250,20 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2191,20 +2250,20 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a> </a>
</div> </div>
<div <div
class="c72" class="c75"
cols="3" cols="3"
> >
<a <a
class="c73" class="c76"
href="https://support.uniswap.org/hc/en-us/articles/11306574799117-How-to-use-Moon-Pay-on-the-Uniswap-web-app-" href="https://support.uniswap.org/hc/en-us/articles/11306574799117-How-to-use-Moon-Pay-on-the-Uniswap-web-app-"
rel="noopenener noreferrer" rel="noopenener noreferrer"
target="_blank" target="_blank"
> >
<div <div
class="c68" class="c71"
> >
<div <div
class="c69" class="c72"
> >
Buy crypto Buy crypto
</div> </div>
...@@ -2231,12 +2290,12 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2231,12 +2290,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
</svg> </svg>
</div> </div>
<div <div
class="c74" class="c77"
type="Secondary" type="Secondary"
> >
Buy crypto with your credit card or bank account at the best rates. Buy crypto with your credit card or bank account at the best rates.
<div <div
class="c74 c71" class="c77 c74"
type="Secondary" type="Secondary"
> >
Buy now Buy now
...@@ -2244,30 +2303,30 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2244,30 +2303,30 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
</a> </a>
<a <a
class="c73" class="c76"
href="/pools" href="/pools"
> >
<div <div
class="c68" class="c71"
> >
<div <div
class="c69" class="c72"
> >
Earn Earn
</div> </div>
<img <img
alt="Analytics" alt="Analytics"
class="c75" class="c78"
src="aboutArrowLight.png" src="aboutArrowLight.png"
/> />
</div> </div>
<div <div
class="c74" class="c77"
type="Secondary" type="Secondary"
> >
Provide liquidity to pools on Uniswap and earn fees on swaps. Provide liquidity to pools on Uniswap and earn fees on swaps.
<div <div
class="c74 c71" class="c77 c74"
type="Secondary" type="Secondary"
> >
Provide liquidity Provide liquidity
...@@ -2275,16 +2334,16 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2275,16 +2334,16 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
</a> </a>
<a <a
class="c73" class="c76"
href="https://docs.uniswap.org" href="https://docs.uniswap.org"
rel="noopenener noreferrer" rel="noopenener noreferrer"
target="_blank" target="_blank"
> >
<div <div
class="c68" class="c71"
> >
<div <div
class="c69" class="c72"
> >
Build dApps Build dApps
</div> </div>
...@@ -2311,12 +2370,12 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2311,12 +2370,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
</svg> </svg>
</div> </div>
<div <div
class="c74" class="c77"
type="Secondary" type="Secondary"
> >
Build apps and tools on the largest DeFi protocol on Ethereum. Build apps and tools on the largest DeFi protocol on Ethereum.
<div <div
class="c74 c71" class="c77 c74"
type="Secondary" type="Secondary"
> >
Developer docs Developer docs
...@@ -2325,27 +2384,27 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2325,27 +2384,27 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a> </a>
</div> </div>
<div <div
class="c76" class="c79"
> >
<div <div
class="c77" class="c80"
> >
<div <div
class="c78" class="c81"
> >
Powered by the Uniswap Protocol Powered by the Uniswap Protocol
</div> </div>
<div <div
class="c79" class="c82"
> >
The leading decentralized crypto trading protocol, governed by a global community. The leading decentralized crypto trading protocol, governed by a global community.
</div> </div>
</div> </div>
<div <div
class="c80" class="c83"
> >
<a <a
class="c81 c82 c83" class="c84 c85 c86"
href="https://uniswap.org" href="https://uniswap.org"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2356,53 +2415,53 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2356,53 +2415,53 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
</div> </div>
<div <div
class="c84" class="c87"
> >
<div <div
class="c85 c86" class="c88 c89"
> >
<img <img
alt="Uniswap Logo" alt="Uniswap Logo"
class="c87" class="c90"
src="unicornEmbossLight.png" src="unicornEmbossLight.png"
/> />
<div <div
class="c88" class="c91"
> >
<a <a
class="c89" class="c92"
href="https://discord.gg/FCfyBSbCU5" href="https://discord.gg/FCfyBSbCU5"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c90" class="c93"
size="32" size="32"
> >
discord.svg discord.svg
</svg> </svg>
</a> </a>
<a <a
class="c89" class="c92"
href="https://twitter.com/uniswap" href="https://twitter.com/uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c91" class="c94"
size="32" size="32"
> >
twitter-safe.svg twitter-safe.svg
</svg> </svg>
</a> </a>
<a <a
class="c89" class="c92"
href="https://github.com/Uniswap" href="https://github.com/Uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c92" class="c95"
size="32" size="32"
> >
github.svg github.svg
...@@ -2410,7 +2469,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2410,7 +2469,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a> </a>
</div> </div>
<span <span
class="c93" class="c96"
> >
© ©
2023 2023
...@@ -2418,45 +2477,45 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2418,45 +2477,45 @@ exports[`disable nft on landing page does not render nft information and card 1`
</span> </span>
</div> </div>
<div <div
class="c94" class="c97"
> >
<div <div
class="c95" class="c98"
> >
<span <span
class="c96" class="c99"
> >
App App
</span> </span>
<a <a
class="c97 c98" class="c100 c101"
href="/swap" href="/swap"
> >
Swap Swap
</a> </a>
<a <a
class="c97 c98" class="c100 c101"
href="/tokens" href="/tokens"
> >
Tokens Tokens
</a> </a>
<a <a
class="c97 c98" class="c100 c101"
href="/pools" href="/pools"
> >
Pools Pools
</a> </a>
</div> </div>
<div <div
class="c95" class="c98"
> >
<span <span
class="c96" class="c99"
> >
Protocol Protocol
</span> </span>
<a <a
class="c99 c100" class="c102 c103"
href="https://uniswap.org/community" href="https://uniswap.org/community"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2464,7 +2523,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2464,7 +2523,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
Community Community
</a> </a>
<a <a
class="c99 c100" class="c102 c103"
href="https://uniswap.org/governance" href="https://uniswap.org/governance"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2472,7 +2531,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2472,7 +2531,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
Governance Governance
</a> </a>
<a <a
class="c99 c100" class="c102 c103"
href="https://uniswap.org/developers" href="https://uniswap.org/developers"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2481,15 +2540,15 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2481,15 +2540,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a> </a>
</div> </div>
<div <div
class="c95" class="c98"
> >
<span <span
class="c96" class="c99"
> >
Company Company
</span> </span>
<a <a
class="c99 c100" class="c102 c103"
href="https://boards.greenhouse.io/uniswaplabs" href="https://boards.greenhouse.io/uniswaplabs"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2497,7 +2556,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2497,7 +2556,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
Careers Careers
</a> </a>
<a <a
class="c99 c100" class="c102 c103"
href="https://uniswap.org/blog" href="https://uniswap.org/blog"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2506,15 +2565,15 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2506,15 +2565,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a> </a>
</div> </div>
<div <div
class="c95" class="c98"
> >
<span <span
class="c96" class="c99"
> >
Get Help Get Help
</span> </span>
<a <a
class="c99 c100" class="c102 c103"
href="https://support.uniswap.org/hc/en-us/requests/new" href="https://support.uniswap.org/hc/en-us/requests/new"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2522,7 +2581,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2522,7 +2581,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
Contact Us Contact Us
</a> </a>
<a <a
class="c99 c100" class="c102 c103"
href="https://support.uniswap.org/hc/en-us" href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2532,50 +2591,50 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2532,50 +2591,50 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
</div> </div>
<div <div
class="c85 c101" class="c88 c104"
> >
<img <img
alt="Uniswap Logo" alt="Uniswap Logo"
class="c87" class="c90"
src="unicornEmbossLight.png" src="unicornEmbossLight.png"
/> />
<div <div
class="c88" class="c91"
> >
<a <a
class="c89" class="c92"
href="https://discord.gg/FCfyBSbCU5" href="https://discord.gg/FCfyBSbCU5"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c90" class="c93"
size="32" size="32"
> >
discord.svg discord.svg
</svg> </svg>
</a> </a>
<a <a
class="c89" class="c92"
href="https://twitter.com/uniswap" href="https://twitter.com/uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c91" class="c94"
size="32" size="32"
> >
twitter-safe.svg twitter-safe.svg
</svg> </svg>
</a> </a>
<a <a
class="c89" class="c92"
href="https://github.com/Uniswap" href="https://github.com/Uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c92" class="c95"
size="32" size="32"
> >
github.svg github.svg
...@@ -2583,7 +2642,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2583,7 +2642,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a> </a>
</div> </div>
<span <span
class="c93" class="c96"
> >
© ©
2023 2023
...@@ -2626,7 +2685,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2626,7 +2685,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
border-radius: 4px; border-radius: 4px;
} }
.c47 { .c50 {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
min-width: 0; min-width: 0;
...@@ -2667,6 +2726,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2667,6 +2726,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
justify-content: flex-start; 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 { .c9 {
-webkit-box-pack: justify; -webkit-box-pack: justify;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
...@@ -2688,7 +2765,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2688,7 +2765,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
color: #7D7D7D; color: #7D7D7D;
} }
.c100 { .c103 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -2699,15 +2776,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2699,15 +2776,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
font-weight: 500; font-weight: 500;
} }
.c100:hover { .c103:hover {
opacity: 0.6; opacity: 0.6;
} }
.c100:active { .c103:active {
opacity: 0.4; opacity: 0.4;
} }
.c98 { .c101 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -2718,36 +2795,36 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2718,36 +2795,36 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
font-weight: 500; font-weight: 500;
} }
.c98:hover { .c101:hover {
opacity: 0.6; opacity: 0.6;
} }
.c98:active { .c101:active {
opacity: 0.4; opacity: 0.4;
} }
.c91 { .c94 {
height: 32px; height: 32px;
width: 32px; width: 32px;
fill: #98A1C0; fill: #98A1C0;
opacity: 1; opacity: 1;
} }
.c92 { .c95 {
height: 32px; height: 32px;
width: 32px; width: 32px;
fill: #98A1C0; fill: #98A1C0;
opacity: 1; opacity: 1;
} }
.c93 { .c96 {
height: 32px; height: 32px;
width: 32px; width: 32px;
fill: #98A1C0; fill: #98A1C0;
opacity: 1; opacity: 1;
} }
.c85 { .c88 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2760,7 +2837,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2760,7 +2837,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
max-width: 1440px; max-width: 1440px;
} }
.c86 { .c89 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2770,24 +2847,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2770,24 +2847,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
flex-direction: column; flex-direction: column;
} }
.c87 { .c90 {
display: none; display: none;
} }
.c102 { .c105 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
} }
.c88 { .c91 {
width: 72px; width: 72px;
height: 72px; height: 72px;
display: none; display: none;
} }
.c89 { .c92 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2800,20 +2877,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2800,20 +2877,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
margin: 20px 0 0 0; margin: 20px 0 0 0;
} }
.c90 { .c93 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
} }
.c95 { .c98 {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 12px; gap: 12px;
} }
.c96 { .c99 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2826,32 +2903,32 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2826,32 +2903,32 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
margin: 20px 0 0 0; margin: 20px 0 0 0;
} }
.c97 { .c100 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
font-weight: 535; font-weight: 535;
} }
.c101 { .c104 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
color: #7D7D7D; color: #7D7D7D;
} }
.c99 { .c102 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
color: #7D7D7D; color: #7D7D7D;
} }
.c94 { .c97 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
margin: 1rem 0 0 0; margin: 1rem 0 0 0;
color: #CECECE; color: #CECECE;
} }
.c67 { .c70 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2879,11 +2956,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2879,11 +2956,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease border; transition: 250ms ease border;
} }
.c67:hover { .c70:hover {
border: 1px solid #CECECE; border: 1px solid #CECECE;
} }
.c72 { .c75 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2911,11 +2988,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2911,11 +2988,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease border; transition: 250ms ease border;
} }
.c72:hover { .c75:hover {
border: 1px solid #CECECE; border: 1px solid #CECECE;
} }
.c74 { .c77 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2943,11 +3020,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2943,11 +3020,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease border; transition: 250ms ease border;
} }
.c74:hover { .c77:hover {
border: 1px solid #CECECE; border: 1px solid #CECECE;
} }
.c68 { .c71 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2962,13 +3039,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2962,13 +3039,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
justify-content: space-between; justify-content: space-between;
} }
.c69 { .c72 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
font-weight: 535; font-weight: 535;
} }
.c70 { .c73 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2983,7 +3060,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2983,7 +3060,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
max-width: 480px; max-width: 480px;
} }
.c75 { .c78 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2998,7 +3075,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2998,7 +3075,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
max-width: 480px; max-width: 480px;
} }
.c71 { .c74 {
color: #FC72FF; color: #FC72FF;
font-weight: 535; font-weight: 535;
margin: 24px 0 0; margin: 24px 0 0;
...@@ -3007,18 +3084,18 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3007,18 +3084,18 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease opacity; transition: 250ms ease opacity;
} }
.c71:hover { .c74:hover {
opacity: 0.6; opacity: 0.6;
} }
.c76 { .c79 {
min-width: 20px; min-width: 20px;
min-height: 20px; min-height: 20px;
max-height: 48px; max-height: 48px;
max-width: 48px; max-width: 48px;
} }
.c50 { .c53 {
background-color: transparent; background-color: transparent;
bottom: 0; bottom: 0;
border-radius: inherit; border-radius: inherit;
...@@ -3089,7 +3166,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3089,7 +3166,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
text-decoration: none; text-decoration: none;
} }
.c82 { .c85 {
padding: 16px; padding: 16px;
width: 200px; width: 200px;
line-height: 24px; line-height: 24px;
...@@ -3128,58 +3205,58 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3128,58 +3205,58 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
} }
.c82:disabled { .c85:disabled {
opacity: 50%; opacity: 50%;
cursor: auto; cursor: auto;
pointer-events: none; pointer-events: none;
} }
.c82 > * { .c85 > * {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.c82 > a { .c85 > a {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c48 { .c51 {
background-color: #FFEFFF; background-color: #FFEFFF;
color: #FC72FF; color: #FC72FF;
font-size: 20px; font-size: 20px;
font-weight: 535; font-weight: 535;
} }
.c48:focus { .c51:focus {
box-shadow: 0 0 0 1pt #FFEFFF; box-shadow: 0 0 0 1pt #FFEFFF;
background-color: #FFEFFF; background-color: #FFEFFF;
} }
.c48:hover { .c51:hover {
background-color: #FFEFFF; background-color: #FFEFFF;
} }
.c48:active { .c51:active {
box-shadow: 0 0 0 1pt #FFEFFF; box-shadow: 0 0 0 1pt #FFEFFF;
background-color: #FFEFFF; background-color: #FFEFFF;
} }
.c48:hover .c49 { .c51:hover .c52 {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c48:active .c49 { .c51:active .c52 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c48:disabled { .c51:disabled {
opacity: 0.4; opacity: 0.4;
} }
.c48:disabled:hover { .c51:disabled:hover {
cursor: auto; cursor: auto;
background-color: transparent; background-color: transparent;
box-shadow: none; box-shadow: none;
...@@ -3203,7 +3280,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3203,7 +3280,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
background-color: #e0e0e0; background-color: #e0e0e0;
} }
.c83 { .c86 {
background-color: transparent; background-color: transparent;
color: #FC72FF; color: #FC72FF;
display: -webkit-box; display: -webkit-box;
...@@ -3220,22 +3297,22 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3220,22 +3297,22 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
align-items: center; align-items: center;
} }
.c83:focus { .c86:focus {
-webkit-text-decoration: underline; -webkit-text-decoration: underline;
text-decoration: underline; text-decoration: underline;
} }
.c83:hover { .c86:hover {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c83:active { .c86:active {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c83:disabled { .c86:disabled {
opacity: 50%; opacity: 50%;
cursor: auto; cursor: auto;
} }
...@@ -3269,7 +3346,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3269,7 +3346,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
cursor: auto; cursor: auto;
} }
.c77 { .c80 {
height: 340px; height: 340px;
width: 100%; width: 100%;
border-radius: 32px; border-radius: 32px;
...@@ -3295,7 +3372,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -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%); background: url(Mesh.png),linear-gradient(93.06deg,#FF00C7 2.66%,#FF9FFB 98.99%);
} }
.c78 { .c81 {
color: white; color: white;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -3309,20 +3386,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3309,20 +3386,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
flex-direction: column; flex-direction: column;
} }
.c79 { .c82 {
font-weight: 535; font-weight: 535;
font-size: 28px; font-size: 28px;
line-height: 36px; line-height: 36px;
} }
.c80 { .c83 {
margin: 10px 10px 0 0; margin: 10px 10px 0 0;
font-weight: 535; font-weight: 535;
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
} }
.c81 { .c84 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -3336,16 +3413,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3336,16 +3413,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease opacity; transition: 250ms ease opacity;
} }
.c81:hover { .c84:hover {
opacity: 0.6; opacity: 0.6;
} }
.c84 { .c87 {
color: white; color: white;
border: 1px solid white; border: 1px solid white;
} }
.c43 { .c45 {
display: grid; display: grid;
grid-auto-rows: auto; grid-auto-rows: auto;
grid-row-gap: 4px; grid-row-gap: 4px;
...@@ -3359,6 +3436,21 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3359,6 +3436,21 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: opacity 250ms ease-in-out; 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 { .c14 {
display: inline-block; display: inline-block;
height: inherit; height: inherit;
...@@ -3441,6 +3533,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3441,6 +3533,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
color: #CECECE; color: #CECECE;
} }
.c42 {
border-radius: 4px;
width: 4rem;
height: 1rem;
}
.c24 { .c24 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -3521,7 +3619,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3521,7 +3619,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c45 { .c47 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -3554,12 +3652,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3554,12 +3652,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
animation: none; animation: none;
} }
.c45:hover, .c47:hover,
.c45:active { .c47:active {
background-color: #FC72FF; background-color: #FC72FF;
} }
.c45:before { .c47:before {
background-size: 100%; background-size: 100%;
border-radius: inherit; border-radius: inherit;
position: absolute; position: absolute;
...@@ -3570,11 +3668,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3570,11 +3668,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
content: ''; content: '';
} }
.c45:hover:before { .c47:hover:before {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c45:active:before { .c47:active:before {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
...@@ -3654,13 +3752,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3654,13 +3752,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
stroke-width: 2px; stroke-width: 2px;
} }
.c46 { .c48 {
margin: 0 0.25rem 0 0.35rem; margin: 0 0.25rem 0 0.35rem;
height: 35%; height: 35%;
margin-left: 8px; margin-left: 8px;
} }
.c46 path { .c48 path {
stroke: #FFFFFF; stroke: #FFFFFF;
stroke-width: 2px; stroke-width: 2px;
} }
...@@ -3728,7 +3826,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3728,7 +3826,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
padding-top: 12px; padding-top: 12px;
} }
.c41 { .c43 {
border-radius: 12px; border-radius: 12px;
height: 40px; height: 40px;
width: 40px; width: 40px;
...@@ -3743,7 +3841,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3743,7 +3841,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
z-index: 2; z-index: 2;
} }
.c41:hover { .c43:hover {
cursor: pointer; cursor: pointer;
opacity: 0.8; opacity: 0.8;
} }
...@@ -3805,7 +3903,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3805,7 +3903,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
gap: 16px; gap: 16px;
} }
.c42 { .c44 {
display: -webkit-inline-box; display: -webkit-inline-box;
display: -webkit-inline-flex; display: -webkit-inline-flex;
display: -ms-inline-flexbox; display: -ms-inline-flexbox;
...@@ -3856,7 +3954,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3856,7 +3954,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
border-color: #B8C0DC3d; border-color: #B8C0DC3d;
} }
.c44 { .c46 {
border-bottom: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF;
} }
...@@ -3883,7 +3981,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3883,7 +3981,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
overflow-x: hidden; overflow-x: hidden;
} }
.c51 { .c54 {
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -3907,7 +4005,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3907,7 +4005,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
height: calc(100vh - 48px); height: calc(100vh - 48px);
} }
.c52 { .c55 {
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -3928,7 +4026,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3928,7 +4026,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
height: calc(100vh - 48px); height: calc(100vh - 48px);
} }
.c53 { .c56 {
position: absolute; position: absolute;
top: 68px; top: 68px;
bottom: 0; bottom: 0;
...@@ -3941,7 +4039,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3941,7 +4039,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
height: 100%; height: 100%;
} }
.c54 { .c57 {
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -3969,11 +4067,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3969,11 +4067,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
pointer-events: none; pointer-events: none;
} }
.c54 * { .c57 * {
pointer-events: auto; pointer-events: auto;
} }
.c55 { .c58 {
color: transparent; color: transparent;
font-size: 36px; font-size: 36px;
line-height: 44px; line-height: 44px;
...@@ -3985,7 +4083,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3985,7 +4083,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
-webkit-background-clip: text; -webkit-background-clip: text;
} }
.c57 { .c60 {
color: #7D7D7D; color: #7D7D7D;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
...@@ -3995,7 +4093,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3995,7 +4093,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
margin: 0 0 32px; margin: 0 0 32px;
} }
.c56 { .c59 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -4006,12 +4104,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4006,12 +4104,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
justify-content: center; justify-content: center;
} }
.c59 { .c62 {
padding: 16px 0px; padding: 16px 0px;
border-radius: 24px; border-radius: 24px;
} }
.c60 { .c63 {
background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%); background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%);
border: none; border: none;
color: #FFFFFF; color: #FFFFFF;
...@@ -4019,24 +4117,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4019,24 +4117,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: all 250ms ease; transition: all 250ms ease;
} }
.c60:hover { .c63:hover {
box-shadow: 0px 0px 16px 0px #ff00c7; box-shadow: 0px 0px 16px 0px #ff00c7;
} }
.c61 { .c64 {
margin: 0px; margin: 0px;
font-size: 16px; font-size: 16px;
font-weight: 535; font-weight: 535;
white-space: nowrap; white-space: nowrap;
} }
.c58 { .c61 {
max-width: 300px; max-width: 300px;
width: 100%; width: 100%;
pointer-events: auto; pointer-events: auto;
} }
.c62 { .c65 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -4056,16 +4154,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4056,16 +4154,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease opacity; transition: 250ms ease opacity;
} }
.c62:hover { .c65:hover {
opacity: 0.6; opacity: 0.6;
} }
.c63 { .c66 {
margin-left: 14px; margin-left: 14px;
size: 20px; size: 20px;
} }
.c65 { .c68 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -4082,7 +4180,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -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%); background: linear-gradient(179.82deg,rgba(255,255,255,0) 0.16%,#eaeaea 99.85%);
} }
.c66 { .c69 {
display: grid; display: grid;
gap: 12px; gap: 12px;
width: 100%; width: 100%;
...@@ -4095,7 +4193,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4095,7 +4193,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.c73 { .c76 {
display: grid; display: grid;
gap: 12px; gap: 12px;
width: 100%; width: 100%;
...@@ -4149,7 +4247,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4149,7 +4247,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
width: 100%; width: 100%;
} }
.c64 { .c67 {
display: -webkit-inline-box; display: -webkit-inline-box;
display: -webkit-inline-flex; display: -webkit-inline-flex;
display: -ms-inline-flexbox; display: -ms-inline-flexbox;
...@@ -4165,12 +4263,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4165,12 +4263,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
text-align: center; text-align: center;
} }
.c64:hover { .c67:hover {
color: #CECECE; color: #CECECE;
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c85 { .c88 {
-webkit-flex-direction: row; -webkit-flex-direction: row;
-ms-flex-direction: row; -ms-flex-direction: row;
flex-direction: row; flex-direction: row;
...@@ -4182,7 +4280,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4182,7 +4280,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c87 { .c90 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -4191,75 +4289,75 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4191,75 +4289,75 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c102 { .c105 {
display: none; display: none;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c88 { .c91 {
display: block; display: block;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c95 { .c98 {
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 24px; gap: 24px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c96 { .c99 {
margin: 0; margin: 0;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c67 { .c70 {
height: 360px; height: 360px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c67 { .c70 {
padding: 32px; padding: 32px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c72 { .c75 {
height: 360px; height: 360px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c72 { .c75 {
padding: 32px; padding: 32px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c74 { .c77 {
height: 260px; height: 260px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c74 { .c77 {
padding: 32px; padding: 32px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c69 { .c72 {
font-size: 28px; font-size: 28px;
line-height: 36px; line-height: 36px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c70 { .c73 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
max-width: 480px; max-width: 480px;
...@@ -4267,7 +4365,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4267,7 +4365,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c75 { .c78 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
max-width: 480px; max-width: 480px;
...@@ -4275,7 +4373,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4275,7 +4373,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c77 { .c80 {
height: 140px; height: 140px;
-webkit-flex-direction: row; -webkit-flex-direction: row;
-ms-flex-direction: row; -ms-flex-direction: row;
...@@ -4284,21 +4382,21 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4284,21 +4382,21 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c79 { .c82 {
font-size: 28px; font-size: 28px;
line-height: 36px; line-height: 36px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c80 { .c83 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c81 { .c84 {
width: auto; width: auto;
} }
} }
...@@ -4316,79 +4414,79 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4316,79 +4414,79 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c51 { .c54 {
height: 100vh; height: 100vh;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c52 { .c55 {
height: 100vh; height: 100vh;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c55 { .c58 {
font-size: 48px; font-size: 48px;
line-height: 56px; line-height: 56px;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c55 { .c58 {
font-size: 64px; font-size: 64px;
line-height: 72px; line-height: 72px;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c57 { .c60 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c61 { .c64 {
font-size: 20px; font-size: 20px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c62 { .c65 {
visibility: visible; visibility: visible;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c65 { .c68 {
padding: 0 96px 5rem; padding: 0 96px 5rem;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c66 { .c69 {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 32px; gap: 32px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c66 { .c69 {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 32px; gap: 32px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c73 { .c76 {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 32px; gap: 32px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c73 { .c76 {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
gap: 32px; gap: 32px;
} }
...@@ -4564,7 +4662,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4564,7 +4662,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
> >
<div <div
class="c40" class="c40"
>
<div
class="c41 c42"
/> />
</div>
<span /> <span />
</div> </div>
</div> </div>
...@@ -4572,10 +4674,10 @@ 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`] = `
</div> </div>
</div> </div>
<div <div
class="c41" class="c43"
> >
<div <div
class="c42" class="c44"
color="#222222" color="#222222"
data-testid="swap-currency-button" data-testid="swap-currency-button"
> >
...@@ -4604,11 +4706,11 @@ 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`] = `
</div> </div>
</div> </div>
<div <div
class="c43" class="c45"
> >
<div> <div>
<div <div
class="c23 c44" class="c23 c46"
> >
<div <div
class="c24" class="c24"
...@@ -4649,7 +4751,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4649,7 +4751,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
class="c14" class="c14"
> >
<button <button
class="c15 c16 c30 c45 open-currency-select-button" class="c15 c16 c30 c47 open-currency-select-button"
> >
<span <span
class="c32" class="c32"
...@@ -4664,7 +4766,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4664,7 +4766,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</span> </span>
</div> </div>
<svg <svg
class="c46" class="c48"
> >
dropdown.svg dropdown.svg
</svg> </svg>
...@@ -4681,7 +4783,23 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4681,7 +4783,23 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
> >
<div <div
class="c40" class="c40"
/> >
<div
class="c7 c49"
>
<div
class="c26 css-142zc9n"
>
<div
class="c14"
>
<div>
-
</div>
</div>
</div>
</div>
</div>
<span /> <span />
</div> </div>
</div> </div>
...@@ -4691,11 +4809,11 @@ 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`] = `
</div> </div>
<div> <div>
<button <button
class="c47 c16 c48" class="c50 c16 c51"
font-weight="535" font-weight="535"
> >
<div <div
class="c49 c50" class="c52 c53"
/> />
Connect Wallet Connect Wallet
</button> </button>
...@@ -4707,52 +4825,52 @@ 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`] = `
</a> </a>
</div> </div>
<div <div
class="c51" class="c54"
/> />
<div <div
class="c52" class="c55"
> >
<div <div
class="c53" class="c56"
/> />
</div> </div>
<div <div
class="c54" class="c57"
> >
<h1 <h1
class="c55" class="c58"
> >
Trade crypto and NFTs with confidence Trade crypto and NFTs with confidence
</h1> </h1>
<div <div
class="c56" class="c59"
> >
<div <div
class="c57" class="c60"
> >
Buy, sell, and explore tokens and NFTs Buy, sell, and explore tokens and NFTs
</div> </div>
</div> </div>
<span <span
class="c58" class="c61"
> >
<a <a
class="c2 c16 c59 c60" class="c2 c16 c62 c63"
href="/swap" href="/swap"
> >
<p <p
class="c61" class="c64"
> >
Get started Get started
</p> </p>
</a> </a>
</span> </span>
<div <div
class="c62" class="c65"
> >
Learn more Learn more
<svg <svg
class="c63" class="c66"
fill="none" fill="none"
height="24" height="24"
stroke="currentColor" stroke="currentColor"
...@@ -4780,7 +4898,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4780,7 +4898,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</svg> </svg>
</div> </div>
<a <a
class="c64" class="c67"
href="https://wallet.uniswap.org/?utm_source=home_page&utm_medium=webapp&utm_campaign=wallet_microsite&utm_id=1" href="https://wallet.uniswap.org/?utm_source=home_page&utm_medium=webapp&utm_campaign=wallet_microsite&utm_id=1"
> >
<svg <svg
...@@ -4797,32 +4915,32 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4797,32 +4915,32 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a> </a>
</div> </div>
<div <div
class="c65" class="c68"
> >
<div <div
class="c66" class="c69"
cols="2" cols="2"
> >
<a <a
class="c67" class="c70"
href="/swap" href="/swap"
> >
<div <div
class="c68" class="c71"
> >
<div <div
class="c69" class="c72"
> >
Swap tokens Swap tokens
</div> </div>
</div> </div>
<div <div
class="c70" class="c73"
type="Primary" type="Primary"
> >
Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more. Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more.
<div <div
class="c70 c71" class="c73 c74"
type="Primary" type="Primary"
> >
Trade Tokens Trade Tokens
...@@ -4830,25 +4948,25 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4830,25 +4948,25 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</a> </a>
<a <a
class="c72" class="c75"
href="/nfts" href="/nfts"
> >
<div <div
class="c68" class="c71"
> >
<div <div
class="c69" class="c72"
> >
Trade NFTs Trade NFTs
</div> </div>
</div> </div>
<div <div
class="c70" class="c73"
type="Primary" type="Primary"
> >
Buy and sell NFTs across marketplaces to find more listings at better prices. Buy and sell NFTs across marketplaces to find more listings at better prices.
<div <div
class="c70 c71" class="c73 c74"
type="Primary" type="Primary"
> >
Explore NFTs Explore NFTs
...@@ -4857,20 +4975,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4857,20 +4975,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a> </a>
</div> </div>
<div <div
class="c73" class="c76"
cols="3" cols="3"
> >
<a <a
class="c74" class="c77"
href="https://support.uniswap.org/hc/en-us/articles/11306574799117-How-to-use-Moon-Pay-on-the-Uniswap-web-app-" href="https://support.uniswap.org/hc/en-us/articles/11306574799117-How-to-use-Moon-Pay-on-the-Uniswap-web-app-"
rel="noopenener noreferrer" rel="noopenener noreferrer"
target="_blank" target="_blank"
> >
<div <div
class="c68" class="c71"
> >
<div <div
class="c69" class="c72"
> >
Buy crypto Buy crypto
</div> </div>
...@@ -4897,12 +5015,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4897,12 +5015,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c75" class="c78"
type="Secondary" type="Secondary"
> >
Buy crypto with your credit card or bank account at the best rates. Buy crypto with your credit card or bank account at the best rates.
<div <div
class="c75 c71" class="c78 c74"
type="Secondary" type="Secondary"
> >
Buy now Buy now
...@@ -4910,30 +5028,30 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4910,30 +5028,30 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</a> </a>
<a <a
class="c74" class="c77"
href="/pools" href="/pools"
> >
<div <div
class="c68" class="c71"
> >
<div <div
class="c69" class="c72"
> >
Earn Earn
</div> </div>
<img <img
alt="Analytics" alt="Analytics"
class="c76" class="c79"
src="aboutArrowLight.png" src="aboutArrowLight.png"
/> />
</div> </div>
<div <div
class="c75" class="c78"
type="Secondary" type="Secondary"
> >
Provide liquidity to pools on Uniswap and earn fees on swaps. Provide liquidity to pools on Uniswap and earn fees on swaps.
<div <div
class="c75 c71" class="c78 c74"
type="Secondary" type="Secondary"
> >
Provide liquidity Provide liquidity
...@@ -4941,16 +5059,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4941,16 +5059,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</a> </a>
<a <a
class="c74" class="c77"
href="https://docs.uniswap.org" href="https://docs.uniswap.org"
rel="noopenener noreferrer" rel="noopenener noreferrer"
target="_blank" target="_blank"
> >
<div <div
class="c68" class="c71"
> >
<div <div
class="c69" class="c72"
> >
Build dApps Build dApps
</div> </div>
...@@ -4977,12 +5095,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4977,12 +5095,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c75" class="c78"
type="Secondary" type="Secondary"
> >
Build apps and tools on the largest DeFi protocol on Ethereum. Build apps and tools on the largest DeFi protocol on Ethereum.
<div <div
class="c75 c71" class="c78 c74"
type="Secondary" type="Secondary"
> >
Developer docs Developer docs
...@@ -4991,27 +5109,27 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4991,27 +5109,27 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a> </a>
</div> </div>
<div <div
class="c77" class="c80"
> >
<div <div
class="c78" class="c81"
> >
<div <div
class="c79" class="c82"
> >
Powered by the Uniswap Protocol Powered by the Uniswap Protocol
</div> </div>
<div <div
class="c80" class="c83"
> >
The leading decentralized crypto trading protocol, governed by a global community. The leading decentralized crypto trading protocol, governed by a global community.
</div> </div>
</div> </div>
<div <div
class="c81" class="c84"
> >
<a <a
class="c82 c83 c84" class="c85 c86 c87"
href="https://uniswap.org" href="https://uniswap.org"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -5022,53 +5140,53 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -5022,53 +5140,53 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</div> </div>
<div <div
class="c85" class="c88"
> >
<div <div
class="c86 c87" class="c89 c90"
> >
<img <img
alt="Uniswap Logo" alt="Uniswap Logo"
class="c88" class="c91"
src="unicornEmbossLight.png" src="unicornEmbossLight.png"
/> />
<div <div
class="c89" class="c92"
> >
<a <a
class="c90" class="c93"
href="https://discord.gg/FCfyBSbCU5" href="https://discord.gg/FCfyBSbCU5"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c91" class="c94"
size="32" size="32"
> >
discord.svg discord.svg
</svg> </svg>
</a> </a>
<a <a
class="c90" class="c93"
href="https://twitter.com/uniswap" href="https://twitter.com/uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c92" class="c95"
size="32" size="32"
> >
twitter-safe.svg twitter-safe.svg
</svg> </svg>
</a> </a>
<a <a
class="c90" class="c93"
href="https://github.com/Uniswap" href="https://github.com/Uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c93" class="c96"
size="32" size="32"
> >
github.svg github.svg
...@@ -5076,7 +5194,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -5076,7 +5194,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a> </a>
</div> </div>
<span <span
class="c94" class="c97"
> >
© ©
2023 2023
...@@ -5084,51 +5202,51 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -5084,51 +5202,51 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</span> </span>
</div> </div>
<div <div
class="c95" class="c98"
> >
<div <div
class="c96" class="c99"
> >
<span <span
class="c97" class="c100"
> >
App App
</span> </span>
<a <a
class="c98 c99" class="c101 c102"
href="/swap" href="/swap"
> >
Swap Swap
</a> </a>
<a <a
class="c98 c99" class="c101 c102"
href="/tokens" href="/tokens"
> >
Tokens Tokens
</a> </a>
<a <a
class="c98 c99" class="c101 c102"
href="/nfts" href="/nfts"
> >
NFTs NFTs
</a> </a>
<a <a
class="c98 c99" class="c101 c102"
href="/pools" href="/pools"
> >
Pools Pools
</a> </a>
</div> </div>
<div <div
class="c96" class="c99"
> >
<span <span
class="c97" class="c100"
> >
Protocol Protocol
</span> </span>
<a <a
class="c100 c101" class="c103 c104"
href="https://uniswap.org/community" href="https://uniswap.org/community"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -5136,7 +5254,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -5136,7 +5254,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Community Community
</a> </a>
<a <a
class="c100 c101" class="c103 c104"
href="https://uniswap.org/governance" href="https://uniswap.org/governance"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -5144,7 +5262,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -5144,7 +5262,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Governance Governance
</a> </a>
<a <a
class="c100 c101" class="c103 c104"
href="https://uniswap.org/developers" href="https://uniswap.org/developers"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -5153,15 +5271,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -5153,15 +5271,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a> </a>
</div> </div>
<div <div
class="c96" class="c99"
> >
<span <span
class="c97" class="c100"
> >
Company Company
</span> </span>
<a <a
class="c100 c101" class="c103 c104"
href="https://boards.greenhouse.io/uniswaplabs" href="https://boards.greenhouse.io/uniswaplabs"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -5169,7 +5287,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -5169,7 +5287,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Careers Careers
</a> </a>
<a <a
class="c100 c101" class="c103 c104"
href="https://uniswap.org/blog" href="https://uniswap.org/blog"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -5178,15 +5296,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -5178,15 +5296,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a> </a>
</div> </div>
<div <div
class="c96" class="c99"
> >
<span <span
class="c97" class="c100"
> >
Get Help Get Help
</span> </span>
<a <a
class="c100 c101" class="c103 c104"
href="https://support.uniswap.org/hc/en-us/requests/new" href="https://support.uniswap.org/hc/en-us/requests/new"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -5194,7 +5312,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -5194,7 +5312,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Contact Us Contact Us
</a> </a>
<a <a
class="c100 c101" class="c103 c104"
href="https://support.uniswap.org/hc/en-us" href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -5204,50 +5322,50 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -5204,50 +5322,50 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</div> </div>
<div <div
class="c86 c102" class="c89 c105"
> >
<img <img
alt="Uniswap Logo" alt="Uniswap Logo"
class="c88" class="c91"
src="unicornEmbossLight.png" src="unicornEmbossLight.png"
/> />
<div <div
class="c89" class="c92"
> >
<a <a
class="c90" class="c93"
href="https://discord.gg/FCfyBSbCU5" href="https://discord.gg/FCfyBSbCU5"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c91" class="c94"
size="32" size="32"
> >
discord.svg discord.svg
</svg> </svg>
</a> </a>
<a <a
class="c90" class="c93"
href="https://twitter.com/uniswap" href="https://twitter.com/uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c92" class="c95"
size="32" size="32"
> >
twitter-safe.svg twitter-safe.svg
</svg> </svg>
</a> </a>
<a <a
class="c90" class="c93"
href="https://github.com/Uniswap" href="https://github.com/Uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c93" class="c96"
size="32" size="32"
> >
github.svg github.svg
...@@ -5255,7 +5373,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -5255,7 +5373,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a> </a>
</div> </div>
<span <span
class="c94" class="c97"
> >
© ©
2023 2023
......
src/pages/Swap/index.tsx
View file @ 7cd72a70
...@@ -323,10 +323,19 @@ export function Swap({ ...@@ -323,10 +323,19 @@ export function Swap({
[independentField, parsedAmount, showWrap, trade] [independentField, parsedAmount, showWrap, trade]
) )
const fiatValueInput = useUSDPrice(parsedAmounts[Field.INPUT], currencies[Field.INPUT] ?? undefined) const getSingleUnitAmount = (currency?: Currency) => {
const fiatValueOutput = useUSDPrice(parsedAmounts[Field.OUTPUT], currencies[Field.OUTPUT] ?? undefined) if (!currency) return
const showFiatValueInput = Boolean(parsedAmounts[Field.INPUT]) return CurrencyAmount.fromRawAmount(currency, JSBI.BigInt(10 ** currency.decimals))
const showFiatValueOutput = Boolean(parsedAmounts[Field.OUTPUT]) }
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( const [routeNotFound, routeIsLoading, routeIsSyncing] = useMemo(
() => [ () => [
...@@ -632,7 +641,7 @@ export function Swap({ ...@@ -632,7 +641,7 @@ export function Swap({
currency={currencies[Field.INPUT] ?? null} currency={currencies[Field.INPUT] ?? null}
onUserInput={handleTypeInput} onUserInput={handleTypeInput}
onMax={handleMaxInput} onMax={handleMaxInput}
fiatValue={showFiatValueInput ? fiatValueInput : undefined} fiatValue={fiatValueInput}
onCurrencySelect={handleInputSelect} onCurrencySelect={handleInputSelect}
otherCurrency={currencies[Field.OUTPUT]} otherCurrency={currencies[Field.OUTPUT]}
showCommonBases showCommonBases
...@@ -673,7 +682,7 @@ export function Swap({ ...@@ -673,7 +682,7 @@ export function Swap({
label={<Trans>You receive</Trans>} label={<Trans>You receive</Trans>}
showMaxButton={false} showMaxButton={false}
hideBalance={false} hideBalance={false}
fiatValue={showFiatValueOutput ? fiatValueOutput : undefined} fiatValue={fiatValueOutput}
priceImpact={stablecoinPriceImpact} priceImpact={stablecoinPriceImpact}
currency={currencies[Field.OUTPUT] ?? null} currency={currencies[Field.OUTPUT] ?? null}
onCurrencySelect={handleOutputSelect} onCurrencySelect={handleOutputSelect}
......
src/state/swap/hooks.tsx
View file @ 7cd72a70
...@@ -78,7 +78,7 @@ const BAD_RECIPIENT_ADDRESSES: { [address: string]: true } = { ...@@ -78,7 +78,7 @@ const BAD_RECIPIENT_ADDRESSES: { [address: string]: true } = {
} }
export type SwapInfo = { export type SwapInfo = {
currencies: { [field in Field]?: Currency | null } currencies: { [field in Field]?: Currency }
currencyBalances: { [field in Field]?: CurrencyAmount<Currency> } currencyBalances: { [field in Field]?: CurrencyAmount<Currency> }
inputTax: Percent inputTax: Percent
outputTax: Percent outputTax: Percent
...@@ -148,7 +148,7 @@ export function useDerivedSwapInfo(state: SwapState, chainId: ChainId | undefine ...@@ -148,7 +148,7 @@ export function useDerivedSwapInfo(state: SwapState, chainId: ChainId | undefine
[relevantTokenBalances] [relevantTokenBalances]
) )
const currencies: { [field in Field]?: Currency | null } = useMemo( const currencies: { [field in Field]?: Currency } = useMemo(
() => ({ () => ({
[Field.INPUT]: inputCurrency, [Field.INPUT]: inputCurrency,
[Field.OUTPUT]: outputCurrency, [Field.OUTPUT]: outputCurrency,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment