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