Skip to content

I
interface
Commit 5e86cf7b authored by eddie's avatar eddie Committed by GitHub
Browse files
Options

fix: token img loading state (#6984) 

* fix: token img loading state

* fix: nits

* fix: update snapshots

* fix: token logos in MP and tests

* fix: really weird visibility / tooltip bug

* fix: update snapshots
parent 83172dc5
Show whitespace changes
Inline Side-by-side
Showing with 733 additions and 617 deletions
src/components/AccountDrawer/MiniPortfolio/PortfolioLogo.tsx
View file @ 5e86cf7b
import { ChainId, Currency } from '@uniswap/sdk-core'
import blankTokenUrl from 'assets/svg/blank_token.svg'
import { ReactComponent as UnknownStatus } from 'assets/svg/contract-interaction.svg'
import { LogoImage, MissingImageLogo } from 'components/Logo/AssetLogo'
import { MissingImageLogo } from 'components/Logo/AssetLogo'
import CurrencyLogo from 'components/Logo/CurrencyLogo'
import { Unicon } from 'components/Unicon'
import { getChainInfo } from 'constants/chainInfo'
import useTokenLogoSource from 'hooks/useAssetLogoSource'
......@@ -20,16 +21,16 @@ const DoubleLogoContainer = styled.div`
position: relative;
top: 0;
left: 0;
${LogoImage}:nth-child(n) {
img:nth-child(n) {
width: 19px;
height: 40px;
object-fit: cover;
}
${LogoImage}:nth-child(1) {
img:nth-child(1) {
border-radius: 20px 0 0 20px;
object-position: 0 0;
}
${LogoImage}:nth-child(2) {
img:nth-child(2) {
border-radius: 0 20px 20px 0;
object-position: 100% 0;
}
......@@ -66,6 +67,12 @@ const SquareChainLogo = styled.img`
width: 100%;
`
const CircleLogoImage = styled.img<{ size: string }>`
width: ${({ size }) => size};
height: ${({ size }) => size};
border-radius: 50%;
`
const L2LogoContainer = styled.div<{ $backgroundColor?: string }>`
background-color: ${({ $backgroundColor }) => $backgroundColor};
border-radius: 2px;
......@@ -109,18 +116,16 @@ export function PortfolioLogo({
<Unicon size={40} address={accountAddress} />
)
} else if (currencies && currencies.length) {
const logo1 = <LogoImage size={size} src={src ?? blankTokenUrl} onError={nextSrc} />
const logo2 = <LogoImage size={size} src={src2 ?? blankTokenUrl} onError={nextSrc2} />
const logo1 = <CircleLogoImage size={size} src={src ?? blankTokenUrl} onError={nextSrc} />
const logo2 = <CircleLogoImage size={size} src={src2 ?? blankTokenUrl} onError={nextSrc2} />
component =
currencies.length > 1 ? (
<DoubleLogoContainer style={style}>
{logo1}
{logo2}
</DoubleLogoContainer>
) : src ? (
logo1
) : currencies.length === 1 ? (
<CurrencyLogo currency={currencies[0]} size={size} />
) : (
<MissingImageLogo size={size}>
{currencies[0]?.symbol?.toUpperCase().replace('$', '').replace(/\s+/g, '').slice(0, 3)}
......@@ -130,11 +135,11 @@ export function PortfolioLogo({
component =
images.length > 1 ? (
<DoubleLogoContainer style={style}>
<LogoImage size={size} src={images[0]} />
<LogoImage size={size} src={images[images.length - 1]} />
<CircleLogoImage size={size} src={images[0]} />
<CircleLogoImage size={size} src={images[images.length - 1]} />
</DoubleLogoContainer>
) : (
<LogoImage size={size} src={images[0]} />
<CircleLogoImage size={size} src={images[0]} />
)
} else {
return <UnknownContract width={size} height={size} />
......
src/components/AccountDrawer/MiniPortfolio/__snapshots__/PortfolioLogo.test.tsx.snap
View file @ 5e86cf7b
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PortfolioLogo renders with L2 icon 1`] = `
.c3 {
width: 40px;
height: 40px;
border-radius: 50%;
}
.c1 {
display: -webkit-box;
display: -webkit-flex;
......@@ -21,18 +15,18 @@ exports[`PortfolioLogo renders with L2 icon 1`] = `
left: 0;
}
.c1 .c2:nth-child(n) {
.c1 img:nth-child(n) {
width: 19px;
height: 40px;
object-fit: cover;
}
.c1 .c2:nth-child(1) {
.c1 img:nth-child(1) {
border-radius: 20px 0 0 20px;
object-position: 0 0;
}
.c1 .c2:nth-child(2) {
.c1 img:nth-child(2) {
border-radius: 0 20px 20px 0;
object-position: 100% 0;
}
......@@ -43,12 +37,18 @@ exports[`PortfolioLogo renders with L2 icon 1`] = `
left: 0;
}
.c5 {
.c4 {
height: 14px;
width: 14px;
}
.c4 {
.c2 {
width: 40px;
height: 40px;
border-radius: 50%;
}
.c3 {
background-color: #0D111C;
border-radius: 2px;
height: 16px;
......@@ -79,20 +79,20 @@ exports[`PortfolioLogo renders with L2 icon 1`] = `
class="c1"
>
<img
class="c2 c3"
class="c2"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/arbitrum/assets/0xDA10009cBd5D07dd0CeCc66161FC93D7c9000da1/logo.png"
/>
<img
class="c2 c3"
class="c2"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/arbitrum/assets/0xFF970A61A04b1cA14834A43f5dE4533eBDDB5CC8/logo.png"
/>
</div>
<div
class="c4"
class="c3"
>
<img
alt="chainLogo"
class="c5"
class="c4"
src="arbitrum_logo.svg"
/>
</div>
......@@ -101,12 +101,6 @@ exports[`PortfolioLogo renders with L2 icon 1`] = `
`;
exports[`PortfolioLogo renders without L2 icon 1`] = `
.c3 {
width: 40px;
height: 40px;
border-radius: 50%;
}
.c1 {
display: -webkit-box;
display: -webkit-flex;
......@@ -121,18 +115,18 @@ exports[`PortfolioLogo renders without L2 icon 1`] = `
left: 0;
}
.c1 .c2:nth-child(n) {
.c1 img:nth-child(n) {
width: 19px;
height: 40px;
object-fit: cover;
}
.c1 .c2:nth-child(1) {
.c1 img:nth-child(1) {
border-radius: 20px 0 0 20px;
object-position: 0 0;
}
.c1 .c2:nth-child(2) {
.c1 img:nth-child(2) {
border-radius: 0 20px 20px 0;
object-position: 100% 0;
}
......@@ -143,6 +137,12 @@ exports[`PortfolioLogo renders without L2 icon 1`] = `
left: 0;
}
.c2 {
width: 40px;
height: 40px;
border-radius: 50%;
}
<div>
<div
class="c0"
......@@ -151,11 +151,11 @@ exports[`PortfolioLogo renders without L2 icon 1`] = `
class="c1"
>
<img
class="c2 c3"
class="c2"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6B175474E89094C44Da98b954EedeAC495271d0F/logo.png"
/>
<img
class="c2 c3"
class="c2"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
/>
</div>
......
src/components/Logo/AssetLogo.tsx
View file @ 5e86cf7b
import { ChainId } from '@uniswap/sdk-core'
import { getChainInfo } from 'constants/chainInfo'
import useTokenLogoSource from 'hooks/useAssetLogoSource'
import React from 'react'
import styled, { css } from 'styled-components/macro'
import React, { useState } from 'react'
import styled from 'styled-components/macro'
export const MissingImageLogo = styled.div<{ size?: string }>`
--size: ${({ size }) => size};
......@@ -17,17 +17,21 @@ export const MissingImageLogo = styled.div<{ size?: string }>`
width: ${({ size }) => size ?? '24px'};
`
export const LogoImage = styled.img<{ size: string; useBG?: boolean }>`
const LogoImage = styled.img<{ size: string; imgLoaded?: boolean }>`
opacity: ${({ imgLoaded }) => (imgLoaded ? 1 : 0)};
transition: opacity ${({ theme }) => `${theme.transition.duration.medium} ${theme.transition.timing.in}`};
width: ${({ size }) => size};
height: ${({ size }) => size};
border-radius: 50%;
`
${({ useBG }) =>
useBG &&
css`
background: radial-gradient(white 60%, #ffffff00 calc(70% + 1px));
const LogoImageWrapper = styled.div<{ size: string; imgLoaded?: boolean }>`
width: ${({ size }) => size};
height: ${({ size }) => size};
background: ${({ theme, imgLoaded }) => (imgLoaded ? 'none' : theme.backgroundInteractive)};
transition: background-color ${({ theme }) => `${theme.transition.duration.medium} ${theme.transition.timing.in}`};
box-shadow: 0 0 1px white;
`}
border-radius: 50%;
`
export type AssetLogoBaseProps = {
......@@ -70,18 +74,23 @@ export default function AssetLogo({
style,
hideL2Icon = false,
}: AssetLogoProps) {
const imageProps = {
alt: `${symbol ?? 'token'} logo`,
size,
}
const [src, nextSrc] = useTokenLogoSource(address, chainId, isNative, backupImg)
const L2Icon = getChainInfo(chainId)?.circleLogoUrl
const [imgLoaded, setImgLoaded] = useState(false)
return (
<LogoContainer style={style}>
{src ? (
<LogoImage {...imageProps} src={src} onError={nextSrc} useBG={true} />
<LogoImageWrapper size={size} imgLoaded={imgLoaded}>
<LogoImage
src={src}
alt={`${symbol ?? 'token'} logo`}
size={size}
onLoad={() => void setImgLoaded(true)}
onError={nextSrc}
imgLoaded={imgLoaded}
/>
</LogoImageWrapper>
) : (
<MissingImageLogo size={size}>
{/* use only first 3 characters of Symbol for design reasons */}
......
src/components/Tokens/TokenTable/__snapshots__/TokenRow.test.tsx.snap
View file @ 5e86cf7b
......@@ -2,15 +2,15 @@
exports[`LoadedRow.tsx renders a row 1`] = `
<DocumentFragment>
.c18 {
.c19 {
color: #40B66B;
}
.c19 {
.c20 {
color: #40B66B;
}
.c17 {
.c18 {
padding-right: 3px;
display: -webkit-box;
display: -webkit-flex;
......@@ -18,12 +18,23 @@ exports[`LoadedRow.tsx renders a row 1`] = `
display: flex;
}
.c8 {
.c9 {
opacity: 0;
-webkit-transition: opacity 250ms ease-in;
transition: opacity 250ms ease-in;
width: 24px;
height: 24px;
border-radius: 50%;
background: radial-gradient(white 60%,#ffffff00 calc(70% + 1px));
}
.c8 {
width: 24px;
height: 24px;
background: #E8ECFB;
-webkit-transition: background-color 250ms ease-in;
transition: background-color 250ms ease-in;
box-shadow: 0 0 1px white;
border-radius: 50%;
}
.c7 {
......@@ -34,7 +45,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
display: flex;
}
.c9 {
.c10 {
--size: calc(24px / 2);
width: var(--size);
height: var(--size);
......@@ -113,7 +124,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
font-size: 14px;
}
.c13 {
.c14 {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
......@@ -127,7 +138,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
transition: background-color 250ms ease;
}
.c21 {
.c22 {
padding-right: 8px;
}
......@@ -141,19 +152,19 @@ exports[`LoadedRow.tsx renders a row 1`] = `
gap: 8px;
}
.c14 {
.c15 {
padding-right: 8px;
}
.c20 {
.c21 {
padding-right: 8px;
}
.c16 {
.c17 {
display: none;
}
.c15 {
.c16 {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
......@@ -163,12 +174,12 @@ exports[`LoadedRow.tsx renders a row 1`] = `
flex: 1;
}
.c23 {
.c24 {
padding: 0px 24px;
min-width: 120px;
}
.c24 {
.c25 {
width: 124px;
height: 42px;
}
......@@ -178,7 +189,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
text-decoration: none;
}
.c10 {
.c11 {
gap: 8px;
line-height: 24px;
font-size: 16px;
......@@ -188,19 +199,19 @@ exports[`LoadedRow.tsx renders a row 1`] = `
white-space: nowrap;
}
.c11 {
.c12 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.c12 {
.c13 {
color: #98A1C0;
text-transform: uppercase;
}
.c22 {
.c23 {
padding-right: 8px;
}
......@@ -241,19 +252,19 @@ exports[`LoadedRow.tsx renders a row 1`] = `
}
@media only screen and (max-width:720px) {
.c21 {
.c22 {
display: none;
}
}
@media only screen and (max-width:540px) {
.c20 {
.c21 {
display: none;
}
}
@media only screen and (max-width:540px) {
.c16 {
.c17 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -269,7 +280,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
}
@media only screen and (max-width:540px) {
.c15 {
.c16 {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
......@@ -281,13 +292,13 @@ exports[`LoadedRow.tsx renders a row 1`] = `
}
@media only screen and (max-width:1200px) {
.c23 {
.c24 {
display: none;
}
}
@media only screen and (max-width:540px) {
.c10 {
.c11 {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
......@@ -304,7 +315,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
}
@media only screen and (max-width:540px) {
.c12 {
.c13 {
font-size: 12px;
height: 16px;
-webkit-box-pack: start;
......@@ -316,7 +327,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
}
@media only screen and (max-width:840px) {
.c22 {
.c23 {
display: none;
}
}
......@@ -345,27 +356,31 @@ exports[`LoadedRow.tsx renders a row 1`] = `
>
<div
class="c7"
>
<div
class="c8"
>
<img
alt="USDC logo"
class="c8"
class="c9"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
/>
</div>
<div
class="c9"
class="c10"
/>
</div>
<div
class="7 c2 c10"
class="7 c2 c11"
>
<div
class="8 c11"
class="8 c12"
data-cy="token-name"
>
USD Coin
</div>
<div
class="9 c2 c12"
class="9 c2 c13"
>
USDC
</div>
......@@ -373,25 +388,25 @@ exports[`LoadedRow.tsx renders a row 1`] = `
</div>
</div>
<div
class="c2 c13 c14"
class="c2 c14 c15"
data-testid="price-cell"
>
<div
class="c5"
>
<div
class="2 c2 c15"
class="2 c2 c16"
>
$1.00
<div
class="1 c2 c16"
class="1 c2 c17"
>
<div
class="c17"
class="c18"
>
<svg
aria-label="up"
class="c18"
class="c19"
fill="none"
height="14"
stroke="currentColor"
......@@ -414,7 +429,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
</svg>
</div>
<span
class="c19"
class="c20"
>
0.00%
</span>
......@@ -423,18 +438,18 @@ exports[`LoadedRow.tsx renders a row 1`] = `
</div>
</div>
<div
class="0 c2 c13 c20"
class="0 c2 c14 c21"
data-testid="percent-change-cell"
>
<div
class="c5"
>
<div
class="c17"
class="c18"
>
<svg
aria-label="up"
class="c18"
class="c19"
fill="none"
height="20"
stroke="currentColor"
......@@ -457,14 +472,14 @@ exports[`LoadedRow.tsx renders a row 1`] = `
</svg>
</div>
<span
class="c19"
class="c20"
>
0.00%
</span>
</div>
</div>
<div
class="c2 c13 c21"
class="c2 c14 c22"
data-testid="tvl-cell"
>
<div
......@@ -474,7 +489,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
</div>
</div>
<div
class="0 c2 c13 c22"
class="0 c2 c14 c23"
data-testid="volume-cell"
>
<div
......@@ -484,10 +499,10 @@ exports[`LoadedRow.tsx renders a row 1`] = `
</div>
</div>
<div
class="4 c2 c23"
class="4 c2 c24"
>
<div
class="5 c2 c24"
class="5 c2 c25"
>
<div
style="width: 100%; height: 100%;"
......
src/components/swap/__snapshots__/SwapModalHeader.test.tsx.snap
View file @ 5e86cf7b
......@@ -34,7 +34,7 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
color: #0D111C;
}
.c12 {
.c13 {
width: 100%;
height: 1px;
border-width: 0;
......@@ -78,12 +78,23 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
grid-row-gap: 8px;
}
.c11 {
.c12 {
opacity: 0;
-webkit-transition: opacity 250ms ease-in;
transition: opacity 250ms ease-in;
width: 36px;
height: 36px;
border-radius: 50%;
background: radial-gradient(white 60%,#ffffff00 calc(70% + 1px));
}
.c11 {
width: 36px;
height: 36px;
background: #E8ECFB;
-webkit-transition: background-color 250ms ease-in;
transition: background-color 250ms ease-in;
box-shadow: 0 0 1px white;
border-radius: 50%;
}
.c10 {
......@@ -105,7 +116,7 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
margin-right: 8px;
}
.c13 {
.c14 {
margin: 16px 2px 24px 2px;
}
......@@ -154,14 +165,18 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
</div>
<div
class="c10"
>
<div
class="c11"
>
<img
alt="ABC logo"
class="c11"
class="c12"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
/>
</div>
</div>
</div>
<div
class="c3 c4"
>
......@@ -197,17 +212,21 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
</div>
<div
class="c10"
>
<div
class="c11"
>
<img
alt="DEF logo"
class="c11"
class="c12"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
/>
</div>
</div>
</div>
</div>
<div
class="c12 c13"
class="c13 c14"
/>
</div>
</DocumentFragment>
......@@ -247,7 +266,7 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
color: #0D111C;
}
.c12 {
.c13 {
width: 100%;
height: 1px;
border-width: 0;
......@@ -291,12 +310,23 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
grid-row-gap: 8px;
}
.c11 {
.c12 {
opacity: 0;
-webkit-transition: opacity 250ms ease-in;
transition: opacity 250ms ease-in;
width: 36px;
height: 36px;
border-radius: 50%;
background: radial-gradient(white 60%,#ffffff00 calc(70% + 1px));
}
.c11 {
width: 36px;
height: 36px;
background: #E8ECFB;
-webkit-transition: background-color 250ms ease-in;
transition: background-color 250ms ease-in;
box-shadow: 0 0 1px white;
border-radius: 50%;
}
.c10 {
......@@ -318,7 +348,7 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
margin-right: 8px;
}
.c13 {
.c14 {
margin: 16px 2px 24px 2px;
}
......@@ -367,14 +397,18 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
</div>
<div
class="c10"
>
<div
class="c11"
>
<img
alt="ETH logo"
class="c11"
class="c12"
src="ethereum-logo.png"
/>
</div>
</div>
</div>
<div
class="c3 c4"
>
......@@ -410,17 +444,21 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
</div>
<div
class="c10"
>
<div
class="c11"
>
<img
alt="DEF logo"
class="c11"
class="c12"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
/>
</div>
</div>
</div>
</div>
<div
class="c12 c13"
class="c13 c14"
/>
</div>
</DocumentFragment>
......@@ -460,7 +498,7 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
color: #0D111C;
}
.c12 {
.c13 {
width: 100%;
height: 1px;
border-width: 0;
......@@ -504,12 +542,23 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
grid-row-gap: 8px;
}
.c11 {
.c12 {
opacity: 0;
-webkit-transition: opacity 250ms ease-in;
transition: opacity 250ms ease-in;
width: 36px;
height: 36px;
border-radius: 50%;
background: radial-gradient(white 60%,#ffffff00 calc(70% + 1px));
}
.c11 {
width: 36px;
height: 36px;
background: #E8ECFB;
-webkit-transition: background-color 250ms ease-in;
transition: background-color 250ms ease-in;
box-shadow: 0 0 1px white;
border-radius: 50%;
}
.c10 {
......@@ -531,7 +580,7 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
margin-right: 8px;
}
.c13 {
.c14 {
margin: 16px 2px 24px 2px;
}
......@@ -580,14 +629,18 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
</div>
<div
class="c10"
>
<div
class="c11"
>
<img
alt="ABC logo"
class="c11"
class="c12"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
/>
</div>
</div>
</div>
<div
class="c3 c4"
>
......@@ -623,17 +676,21 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
</div>
<div
class="c10"
>
<div
class="c11"
>
<img
alt="GHI logo"
class="c11"
class="c12"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000003/logo.png"
/>
</div>
</div>
</div>
</div>
<div
class="c12 c13"
class="c13 c14"
/>
</div>
</DocumentFragment>
......
src/pages/Landing/__snapshots__/index.test.tsx.snap
View file @ 5e86cf7b
......@@ -30,7 +30,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
border-radius: 4px;
}
.c41 {
.c42 {
box-sizing: border-box;
margin: 0;
min-width: 0;
......@@ -88,7 +88,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
color: #0D111C;
}
.c93 {
.c94 {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
......@@ -99,15 +99,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
font-weight: 500;
}
.c93:hover {
.c94:hover {
opacity: 0.6;
}
.c93:active {
.c94:active {
opacity: 0.4;
}
.c91 {
.c92 {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
......@@ -118,36 +118,36 @@ exports[`disable nft on landing page does not render nft information and card 1`
font-weight: 500;
}
.c91:hover {
.c92:hover {
opacity: 0.6;
}
.c91:active {
.c92:active {
opacity: 0.4;
}
.c84 {
.c85 {
height: 32px;
width: 32px;
fill: #98A1C0;
opacity: 1;
}
.c85 {
.c86 {
height: 32px;
width: 32px;
fill: #98A1C0;
opacity: 1;
}
.c86 {
.c87 {
height: 32px;
width: 32px;
fill: #98A1C0;
opacity: 1;
}
.c78 {
.c79 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -160,7 +160,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
max-width: 1440px;
}
.c79 {
.c80 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -170,24 +170,24 @@ exports[`disable nft on landing page does not render nft information and card 1`
flex-direction: column;
}
.c80 {
.c81 {
display: none;
}
.c95 {
.c96 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.c81 {
.c82 {
width: 72px;
height: 72px;
display: none;
}
.c82 {
.c83 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -200,20 +200,20 @@ exports[`disable nft on landing page does not render nft information and card 1`
margin: 20px 0 0 0;
}
.c83 {
.c84 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.c88 {
.c89 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.c89 {
.c90 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -226,32 +226,32 @@ exports[`disable nft on landing page does not render nft information and card 1`
margin: 20px 0 0 0;
}
.c90 {
.c91 {
font-size: 16px;
line-height: 20px;
font-weight: 700;
}
.c94 {
.c95 {
font-size: 16px;
line-height: 20px;
color: #7780A0;
}
.c92 {
.c93 {
font-size: 16px;
line-height: 20px;
color: #7780A0;
}
.c87 {
.c88 {
font-size: 16px;
line-height: 20px;
margin: 1rem 0 0 0;
color: #98A1C0;
}
.c61 {
.c62 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -280,11 +280,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: 250ms ease border;
}
.c61:hover {
.c62:hover {
border: 1px solid #98A1C0;
}
.c67 {
.c68 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -313,11 +313,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: 250ms ease border;
}
.c67:hover {
.c68:hover {
border: 1px solid #98A1C0;
}
.c62 {
.c63 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -332,13 +332,13 @@ exports[`disable nft on landing page does not render nft information and card 1`
justify-content: space-between;
}
.c63 {
.c64 {
font-size: 20px;
line-height: 28px;
font-weight: 600;
}
.c64 {
.c65 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -353,7 +353,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
max-width: 480px;
}
.c68 {
.c69 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -368,7 +368,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
max-width: 480px;
}
.c65 {
.c66 {
color: #FB118E;
font-weight: 500;
margin: 24px 0 0;
......@@ -377,18 +377,18 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: 250ms ease opacity;
}
.c65:hover {
.c66:hover {
opacity: 0.6;
}
.c69 {
.c70 {
min-width: 20px;
min-height: 20px;
max-height: 48px;
max-width: 48px;
}
.c44 {
.c45 {
background-color: transparent;
bottom: 0;
border-radius: inherit;
......@@ -458,7 +458,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
text-decoration: none;
}
.c75 {
.c76 {
padding: 16px;
width: 200px;
font-weight: 500;
......@@ -496,58 +496,58 @@ exports[`disable nft on landing page does not render nft information and card 1`
transform: perspective(1px) translateZ(0);
}
.c75:disabled {
.c76:disabled {
opacity: 50%;
cursor: auto;
pointer-events: none;
}
.c75 > * {
.c76 > * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.c75 > a {
.c76 > a {
-webkit-text-decoration: none;
text-decoration: none;
}
.c42 {
.c43 {
background-color: #FB118E1f;
color: #FB118E;
font-size: 20px;
font-weight: 600;
}
.c42:focus {
.c43:focus {
box-shadow: 0 0 0 1pt #FB118E1f;
background-color: #FB118E1f;
}
.c42:hover {
.c43:hover {
background-color: #FB118E1f;
}
.c42:active {
.c43:active {
box-shadow: 0 0 0 1pt #FB118E1f;
background-color: #FB118E1f;
}
.c42:hover .c43 {
.c43:hover .c44 {
background-color: #98A1C014;
}
.c42:active .c43 {
.c43:active .c44 {
background-color: #B8C0DC3d;
}
.c42:disabled {
.c43:disabled {
opacity: 0.4;
}
.c42:disabled:hover {
.c43:disabled:hover {
cursor: auto;
background-color: transparent;
box-shadow: none;
......@@ -570,7 +570,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
background-color: #bdc8f3;
}
.c76 {
.c77 {
background-color: transparent;
color: #FB118E;
display: -webkit-box;
......@@ -587,27 +587,27 @@ exports[`disable nft on landing page does not render nft information and card 1`
align-items: center;
}
.c76:focus {
.c77:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c76:hover {
.c77:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c76:active {
.c77:active {
-webkit-text-decoration: none;
text-decoration: none;
}
.c76:disabled {
.c77:disabled {
opacity: 50%;
cursor: auto;
}
.c70 {
.c71 {
height: 340px;
width: 100%;
border-radius: 32px;
......@@ -633,7 +633,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%);
}
.c71 {
.c72 {
color: white;
display: -webkit-box;
display: -webkit-flex;
......@@ -647,20 +647,20 @@ exports[`disable nft on landing page does not render nft information and card 1`
flex-direction: column;
}
.c72 {
.c73 {
font-weight: 700;
font-size: 28px;
line-height: 36px;
}
.c73 {
.c74 {
margin: 10px 10px 0 0;
font-weight: 500;
font-size: 16px;
line-height: 20px;
}
.c74 {
.c75 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
......@@ -674,22 +674,22 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: 250ms ease opacity;
}
.c74:hover {
.c75:hover {
opacity: 0.6;
}
.c77 {
.c78 {
color: white;
border: 1px solid white;
}
.c37 {
.c38 {
display: grid;
grid-auto-rows: auto;
grid-row-gap: 4px;
}
.c34 {
.c35 {
-webkit-filter: none;
filter: none;
opacity: 1;
......@@ -697,12 +697,23 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: opacity 0.2s ease-in-out;
}
.c29 {
.c30 {
opacity: 0;
-webkit-transition: opacity 250ms ease-in;
transition: opacity 250ms ease-in;
width: 24px;
height: 24px;
border-radius: 50%;
background: radial-gradient(white 60%,#ffffff00 calc(70% + 1px));
}
.c29 {
width: 24px;
height: 24px;
background: #E8ECFB;
-webkit-transition: background-color 250ms ease-in;
transition: background-color 250ms ease-in;
box-shadow: 0 0 1px white;
border-radius: 50%;
}
.c28 {
......@@ -840,7 +851,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
background-color: #B8C0DC3d;
}
.c39 {
.c40 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -871,12 +882,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
visibility: visible;
}
.c39:hover,
.c39:active {
.c40:hover,
.c40:active {
background-color: #FB118E;
}
.c39:before {
.c40:before {
background-size: 100%;
border-radius: inherit;
position: absolute;
......@@ -887,11 +898,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
content: '';
}
.c39:hover:before {
.c40:hover:before {
background-color: #98A1C014;
}
.c39:active:before {
.c40:active:before {
background-color: #B8C0DC3d;
}
......@@ -913,7 +924,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
justify-content: space-between;
}
.c32 {
.c33 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -930,12 +941,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
line-height: 1rem;
}
.c32 span:hover {
.c33 span:hover {
cursor: pointer;
color: #495068;
}
.c33 {
.c34 {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
......@@ -960,29 +971,29 @@ exports[`disable nft on landing page does not render nft information and card 1`
width: 100%;
}
.c31 {
.c32 {
margin: 0 0.25rem 0 0.35rem;
height: 35%;
margin-left: 8px;
}
.c31 path {
.c32 path {
stroke: #0D111C;
stroke-width: 2px;
}
.c40 {
.c41 {
margin: 0 0.25rem 0 0.35rem;
height: 35%;
margin-left: 8px;
}
.c40 path {
.c41 path {
stroke: #FFFFFF;
stroke-width: 2px;
}
.c30 {
.c31 {
margin: 0 0.25rem 0 0.25rem;
font-size: 20px;
font-weight: 600;
......@@ -1023,7 +1034,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
border: 1px solid #D2D9EE;
}
.c35 {
.c36 {
border-radius: 12px;
height: 40px;
width: 40px;
......@@ -1038,7 +1049,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
z-index: 2;
}
.c35:hover {
.c36:hover {
cursor: pointer;
opacity: 0.8;
}
......@@ -1084,7 +1095,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
gap: 16px;
}
.c36 {
.c37 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
......@@ -1134,7 +1145,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
border-color: #B8C0DC3d;
}
.c38 {
.c39 {
border-bottom: 1px solid #FFFFFF;
}
......@@ -1161,7 +1172,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
overflow-x: hidden;
}
.c45 {
.c46 {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
......@@ -1185,7 +1196,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
height: calc(100vh - 52px);
}
.c46 {
.c47 {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
......@@ -1206,7 +1217,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
height: calc(100vh - 52px);
}
.c47 {
.c48 {
position: absolute;
top: 68px;
bottom: 0;
......@@ -1219,7 +1230,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
height: 100%;
}
.c48 {
.c49 {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
......@@ -1247,11 +1258,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
pointer-events: none;
}
.c48 * {
.c49 * {
pointer-events: auto;
}
.c49 {
.c50 {
color: transparent;
font-size: 36px;
line-height: 44px;
......@@ -1263,7 +1274,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
-webkit-background-clip: text;
}
.c51 {
.c52 {
color: #7780A0;
font-size: 16px;
line-height: 24px;
......@@ -1273,7 +1284,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
margin: 0 0 32px;
}
.c50 {
.c51 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -1284,12 +1295,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
justify-content: center;
}
.c53 {
.c54 {
padding: 16px 0px;
border-radius: 24px;
}
.c54 {
.c55 {
background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%);
border: none;
color: #FFFFFF;
......@@ -1297,24 +1308,24 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: all 250ms ease;
}
.c54:hover {
.c55:hover {
box-shadow: 0px 0px 16px 0px #ff00c7;
}
.c55 {
.c56 {
margin: 0px;
font-size: 16px;
font-weight: 600;
white-space: nowrap;
}
.c52 {
.c53 {
max-width: 300px;
width: 100%;
pointer-events: auto;
}
.c56 {
.c57 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -1334,16 +1345,16 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: 250ms ease opacity;
}
.c56:hover {
.c57:hover {
opacity: 0.6;
}
.c57 {
.c58 {
margin-left: 14px;
size: 20px;
}
.c59 {
.c60 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -1360,7 +1371,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%);
}
.c60 {
.c61 {
display: grid;
gap: 12px;
width: 100%;
......@@ -1373,7 +1384,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
grid-template-columns: 1fr;
}
.c66 {
.c67 {
display: grid;
gap: 12px;
width: 100%;
......@@ -1427,7 +1438,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
width: 100%;
}
.c58 {
.c59 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
......@@ -1442,12 +1453,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
text-align: center;
}
.c58:hover {
.c59:hover {
color: #98A1C0;
}
@media screen and (min-width:1024px) {
.c78 {
.c79 {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
......@@ -1459,7 +1470,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
}
@media screen and (min-width:1024px) {
.c80 {
.c81 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -1468,63 +1479,63 @@ exports[`disable nft on landing page does not render nft information and card 1`
}
@media screen and (min-width:1024px) {
.c95 {
.c96 {
display: none;
}
}
@media screen and (min-width:1024px) {
.c81 {
.c82 {
display: block;
}
}
@media screen and (min-width:1280px) {
.c88 {
.c89 {
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 24px;
}
}
@media screen and (min-width:1280px) {
.c89 {
.c90 {
margin: 0;
}
}
@media screen and (min-width:640px) {
.c61 {
.c62 {
height: 360px;
}
}
@media screen and (min-width:1280px) {
.c61 {
.c62 {
padding: 32px;
}
}
@media screen and (min-width:640px) {
.c67 {
.c68 {
height: 260px;
}
}
@media screen and (min-width:1280px) {
.c67 {
.c68 {
padding: 32px;
}
}
@media screen and (min-width:1024px) {
.c63 {
.c64 {
font-size: 28px;
line-height: 36px;
}
}
@media screen and (min-width:1280px) {
.c64 {
.c65 {
font-size: 20px;
line-height: 28px;
max-width: 480px;
......@@ -1532,7 +1543,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
}
@media screen and (min-width:1280px) {
.c68 {
.c69 {
font-size: 20px;
line-height: 28px;
max-width: 480px;
......@@ -1540,7 +1551,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
}
@media screen and (min-width:1024px) {
.c70 {
.c71 {
height: 140px;
-webkit-flex-direction: row;
-ms-flex-direction: row;
......@@ -1549,21 +1560,21 @@ exports[`disable nft on landing page does not render nft information and card 1`
}
@media screen and (min-width:1280px) {
.c72 {
.c73 {
font-size: 28px;
line-height: 36px;
}
}
@media screen and (min-width:1280px) {
.c73 {
.c74 {
font-size: 20px;
line-height: 28px;
}
}
@media screen and (min-width:1024px) {
.c74 {
.c75 {
width: auto;
}
}
......@@ -1581,79 +1592,79 @@ exports[`disable nft on landing page does not render nft information and card 1`
}
@media screen and (min-width:768px) {
.c45 {
.c46 {
height: 100vh;
}
}
@media screen and (min-width:768px) {
.c46 {
.c47 {
height: 100vh;
}
}
@media screen and (min-width:640px) {
.c49 {
.c50 {
font-size: 48px;
line-height: 56px;
}
}
@media screen and (min-width:768px) {
.c49 {
.c50 {
font-size: 64px;
line-height: 72px;
}
}
@media screen and (min-width:768px) {
.c51 {
.c52 {
font-size: 20px;
line-height: 28px;
}
}
@media screen and (min-width:640px) {
.c55 {
.c56 {
font-size: 20px;
}
}
@media screen and (min-width:640px) {
.c56 {
.c57 {
visibility: visible;
}
}
@media screen and (min-width:768px) {
.c59 {
.c60 {
padding: 0 96px 5rem;
}
}
@media screen and (min-width:640px) {
.c60 {
.c61 {
grid-template-columns: 1fr;
gap: 32px;
}
}
@media screen and (min-width:1024px) {
.c60 {
.c61 {
grid-template-columns: 1fr;
gap: 32px;
}
}
@media screen and (min-width:640px) {
.c66 {
.c67 {
grid-template-columns: 1fr;
gap: 32px;
}
}
@media screen and (min-width:1024px) {
.c66 {
.c67 {
grid-template-columns: 1fr 1fr 1fr;
gap: 32px;
}
......@@ -1774,21 +1785,25 @@ exports[`disable nft on landing page does not render nft information and card 1`
<div
class="c28"
style="margin-right: 2px;"
>
<div
class="c29"
>
<img
alt="ETH logo"
class="c29"
class="c30"
src="ethereum-logo.png"
/>
</div>
</div>
<span
class="c30 token-symbol-container"
class="c31 token-symbol-container"
>
ETH
</span>
</div>
<svg
class="c31"
class="c32"
>
dropdown.svg
</svg>
......@@ -1797,13 +1812,13 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div>
</div>
<div
class="c32 c33"
class="c33 c34"
>
<div
class="c6 c7 c8"
>
<div
class="c34"
class="c35"
/>
<span />
</div>
......@@ -1812,10 +1827,10 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div>
</div>
<div
class="c35"
class="c36"
>
<div
class="c36"
class="c37"
color="#0D111C"
data-testid="swap-currency-button"
>
......@@ -1844,11 +1859,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div>
</div>
<div
class="c37"
class="c38"
>
<div>
<div
class="c17 c38"
class="c17 c39"
>
<div
class="c18"
......@@ -1876,7 +1891,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
/>
<div>
<button
class="c23 c24 c25 c39 open-currency-select-button"
class="c23 c24 c25 c40 open-currency-select-button"
>
<span
class="c27"
......@@ -1885,13 +1900,13 @@ exports[`disable nft on landing page does not render nft information and card 1`
class="c6 c7 c10"
>
<span
class="c30 token-symbol-container"
class="c31 token-symbol-container"
>
Select token
</span>
</div>
<svg
class="c40"
class="c41"
>
dropdown.svg
</svg>
......@@ -1900,13 +1915,13 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div>
</div>
<div
class="c32 c33"
class="c33 c34"
>
<div
class="c6 c7 c8"
>
<div
class="c34"
class="c35"
/>
<span />
</div>
......@@ -1917,11 +1932,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div>
<div>
<button
class="c41 c24 c42"
class="c42 c24 c43"
font-weight="600"
>
<div
class="c43 c44"
class="c44 c45"
/>
Connect Wallet
</button>
......@@ -1932,52 +1947,52 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a>
</div>
<div
class="c45"
class="c46"
/>
<div
class="c46"
class="c47"
>
<div
class="c47"
class="c48"
/>
</div>
<div
class="c48"
class="c49"
>
<h1
class="c49"
class="c50"
>
Trade crypto with confidence
</h1>
<div
class="c50"
class="c51"
>
<div
class="c51"
class="c52"
>
Buy, sell, and explore tokens
</div>
</div>
<span
class="1 c52"
class="1 c53"
>
<a
class="c2 c24 c53 c54"
class="c2 c24 c54 c55"
href="#/swap"
>
<p
class="0 c55"
class="0 c56"
>
Get started
</p>
</a>
</span>
<div
class="2 c56"
class="2 c57"
>
Learn more
<svg
class="3 c57"
class="3 c58"
fill="none"
height="24"
stroke="currentColor"
......@@ -2005,7 +2020,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
</svg>
</div>
<a
class="9 c58"
class="9 c59"
href="https://wallet.uniswap.org/?utm_source=home_page&utm_medium=webapp&utm_campaign=wallet_microsite&utm_id=1"
>
<svg
......@@ -2022,32 +2037,32 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a>
</div>
<div
class="4 c59"
class="4 c60"
>
<div
class="5 c60"
class="5 c61"
cols="1"
>
<a
class="c61"
class="c62"
href="#/swap"
>
<div
class="c62"
class="c63"
>
<div
class="c63"
class="c64"
>
Swap tokens
</div>
</div>
<div
class="c64"
class="c65"
type="Primary"
>
Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more.
<div
class="c64 c65"
class="c65 c66"
type="Primary"
>
Trade Tokens
......@@ -2056,20 +2071,20 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a>
</div>
<div
class="5 c66"
class="5 c67"
cols="3"
>
<a
class="c67"
class="c68"
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="c62"
class="c63"
>
<div
class="c63"
class="c64"
>
Buy crypto
</div>
......@@ -2096,12 +2111,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
</svg>
</div>
<div
class="c68"
class="c69"
type="Secondary"
>
Buy crypto with your credit card or bank account at the best rates.
<div
class="c68 c65"
class="c69 c66"
type="Secondary"
>
Buy now
......@@ -2109,30 +2124,30 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div>
</a>
<a
class="c67"
class="c68"
href="#/pools"
>
<div
class="c62"
class="c63"
>
<div
class="c63"
class="c64"
>
Earn
</div>
<img
alt="Analytics"
class="c69"
class="c70"
src="aboutArrowLight.png"
/>
</div>
<div
class="c68"
class="c69"
type="Secondary"
>
Provide liquidity to pools on Uniswap and earn fees on swaps.
<div
class="c68 c65"
class="c69 c66"
type="Secondary"
>
Provide liquidity
......@@ -2140,16 +2155,16 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div>
</a>
<a
class="c67"
class="c68"
href="https://docs.uniswap.org"
rel="noopenener noreferrer"
target="_blank"
>
<div
class="c62"
class="c63"
>
<div
class="c63"
class="c64"
>
Build dApps
</div>
......@@ -2176,12 +2191,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
</svg>
</div>
<div
class="c68"
class="c69"
type="Secondary"
>
Build apps and tools on the largest DeFi protocol on Ethereum.
<div
class="c68 c65"
class="c69 c66"
type="Secondary"
>
Developer docs
......@@ -2189,28 +2204,28 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div>
</a>
</div>
<div
class="c70"
>
<div
class="c71"
>
<div
class="c72"
>
Powered by the Uniswap Protocol
</div>
<div
class="c73"
>
The leading decentralized crypto trading protocol, governed by a global community.
</div>
Powered by the Uniswap Protocol
</div>
<div
class="c74"
>
The leading decentralized crypto trading protocol, governed by a global community.
</div>
</div>
<div
class="c75"
>
<a
class="c75 c76 c77"
class="c76 c77 c78"
href="https://uniswap.org"
rel="noopener noreferrer"
target="_blank"
......@@ -2221,53 +2236,53 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div>
</div>
<div
class="c78"
class="c79"
>
<div
class="c79 c80"
class="c80 c81"
>
<img
alt="Uniswap Logo"
class="c81"
class="c82"
src="unicornEmbossLight.png"
/>
<div
class="c82"
class="c83"
>
<a
class="c83"
class="c84"
href="https://discord.gg/FCfyBSbCU5"
rel="noopener noreferrer"
target="_blank"
>
<svg
class="c84"
class="c85"
size="32"
>
discord.svg
</svg>
</a>
<a
class="c83"
class="c84"
href="https://twitter.com/uniswap"
rel="noopener noreferrer"
target="_blank"
>
<svg
class="c85"
class="c86"
size="32"
>
twitter-safe.svg
</svg>
</a>
<a
class="c83"
class="c84"
href="https://github.com/Uniswap"
rel="noopener noreferrer"
target="_blank"
>
<svg
class="c86"
class="c87"
size="32"
>
github.svg
......@@ -2275,7 +2290,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a>
</div>
<span
class="2 c87"
class="2 c88"
>
©
2023
......@@ -2283,45 +2298,45 @@ exports[`disable nft on landing page does not render nft information and card 1`
</span>
</div>
<div
class="c88"
class="c89"
>
<div
class="c89"
class="c90"
>
<span
class="c90"
class="c91"
>
App
</span>
<a
class="1 c91 c92"
class="1 c92 c93"
href="#/swap"
>
Swap
</a>
<a
class="1 c91 c92"
class="1 c92 c93"
href="#/tokens"
>
Tokens
</a>
<a
class="1 c91 c92"
class="1 c92 c93"
href="#/pools"
>
Pools
</a>
</div>
<div
class="c89"
class="c90"
>
<span
class="c90"
class="c91"
>
Protocol
</span>
<a
class="c93 0 c94"
class="c94 0 c95"
href="https://uniswap.org/community"
rel="noopener noreferrer"
target="_blank"
......@@ -2329,7 +2344,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
Community
</a>
<a
class="c93 0 c94"
class="c94 0 c95"
href="https://uniswap.org/governance"
rel="noopener noreferrer"
target="_blank"
......@@ -2337,7 +2352,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
Governance
</a>
<a
class="c93 0 c94"
class="c94 0 c95"
href="https://uniswap.org/developers"
rel="noopener noreferrer"
target="_blank"
......@@ -2346,15 +2361,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a>
</div>
<div
class="c89"
class="c90"
>
<span
class="c90"
class="c91"
>
Company
</span>
<a
class="c93 0 c94"
class="c94 0 c95"
href="https://boards.greenhouse.io/uniswaplabs"
rel="noopener noreferrer"
target="_blank"
......@@ -2362,7 +2377,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
Careers
</a>
<a
class="c93 0 c94"
class="c94 0 c95"
href="https://uniswap.org/blog"
rel="noopener noreferrer"
target="_blank"
......@@ -2371,15 +2386,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a>
</div>
<div
class="c89"
class="c90"
>
<span
class="c90"
class="c91"
>
Get Help
</span>
<a
class="c93 0 c94"
class="c94 0 c95"
href="https://support.uniswap.org/hc/en-us/requests/new"
rel="noopener noreferrer"
target="_blank"
......@@ -2387,7 +2402,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
Contact Us
</a>
<a
class="c93 0 c94"
class="c94 0 c95"
href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer"
target="_blank"
......@@ -2397,50 +2412,50 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div>
</div>
<div
class="c79 c95"
class="c80 c96"
>
<img
alt="Uniswap Logo"
class="c81"
class="c82"
src="unicornEmbossLight.png"
/>
<div
class="c82"
class="c83"
>
<a
class="c83"
class="c84"
href="https://discord.gg/FCfyBSbCU5"
rel="noopener noreferrer"
target="_blank"
>
<svg
class="c84"
class="c85"
size="32"
>
discord.svg
</svg>
</a>
<a
class="c83"
class="c84"
href="https://twitter.com/uniswap"
rel="noopener noreferrer"
target="_blank"
>
<svg
class="c85"
class="c86"
size="32"
>
twitter-safe.svg
</svg>
</a>
<a
class="c83"
class="c84"
href="https://github.com/Uniswap"
rel="noopener noreferrer"
target="_blank"
>
<svg
class="c86"
class="c87"
size="32"
>
github.svg
......@@ -2448,7 +2463,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a>
</div>
<span
class="2 c87"
class="2 c88"
>
©
2023
......@@ -2491,7 +2506,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
border-radius: 4px;
}
.c41 {
.c42 {
box-sizing: border-box;
margin: 0;
min-width: 0;
......@@ -2549,7 +2564,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
color: #0D111C;
}
.c94 {
.c95 {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
......@@ -2560,15 +2575,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
font-weight: 500;
}
.c94:hover {
.c95:hover {
opacity: 0.6;
}
.c94:active {
.c95:active {
opacity: 0.4;
}
.c92 {
.c93 {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
......@@ -2579,36 +2594,36 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
font-weight: 500;
}
.c92:hover {
.c93:hover {
opacity: 0.6;
}
.c92:active {
.c93:active {
opacity: 0.4;
}
.c85 {
.c86 {
height: 32px;
width: 32px;
fill: #98A1C0;
opacity: 1;
}
.c86 {
.c87 {
height: 32px;
width: 32px;
fill: #98A1C0;
opacity: 1;
}
.c87 {
.c88 {
height: 32px;
width: 32px;
fill: #98A1C0;
opacity: 1;
}
.c79 {
.c80 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -2621,7 +2636,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
max-width: 1440px;
}
.c80 {
.c81 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -2631,24 +2646,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
flex-direction: column;
}
.c81 {
.c82 {
display: none;
}
.c96 {
.c97 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.c82 {
.c83 {
width: 72px;
height: 72px;
display: none;
}
.c83 {
.c84 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -2661,20 +2676,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
margin: 20px 0 0 0;
}
.c84 {
.c85 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.c89 {
.c90 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.c90 {
.c91 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -2687,32 +2702,32 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
margin: 20px 0 0 0;
}
.c91 {
.c92 {
font-size: 16px;
line-height: 20px;
font-weight: 700;
}
.c95 {
.c96 {
font-size: 16px;
line-height: 20px;
color: #7780A0;
}
.c93 {
.c94 {
font-size: 16px;
line-height: 20px;
color: #7780A0;
}
.c88 {
.c89 {
font-size: 16px;
line-height: 20px;
margin: 1rem 0 0 0;
color: #98A1C0;
}
.c61 {
.c62 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -2741,11 +2756,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease border;
}
.c61:hover {
.c62:hover {
border: 1px solid #98A1C0;
}
.c66 {
.c67 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -2774,11 +2789,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease border;
}
.c66:hover {
.c67:hover {
border: 1px solid #98A1C0;
}
.c68 {
.c69 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -2807,11 +2822,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease border;
}
.c68:hover {
.c69:hover {
border: 1px solid #98A1C0;
}
.c62 {
.c63 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -2826,13 +2841,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
justify-content: space-between;
}
.c63 {
.c64 {
font-size: 20px;
line-height: 28px;
font-weight: 600;
}
.c64 {
.c65 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -2847,7 +2862,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
max-width: 480px;
}
.c69 {
.c70 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -2862,7 +2877,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
max-width: 480px;
}
.c65 {
.c66 {
color: #FB118E;
font-weight: 500;
margin: 24px 0 0;
......@@ -2871,18 +2886,18 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease opacity;
}
.c65:hover {
.c66:hover {
opacity: 0.6;
}
.c70 {
.c71 {
min-width: 20px;
min-height: 20px;
max-height: 48px;
max-width: 48px;
}
.c44 {
.c45 {
background-color: transparent;
bottom: 0;
border-radius: inherit;
......@@ -2952,7 +2967,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
text-decoration: none;
}
.c76 {
.c77 {
padding: 16px;
width: 200px;
font-weight: 500;
......@@ -2990,58 +3005,58 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transform: perspective(1px) translateZ(0);
}
.c76:disabled {
.c77:disabled {
opacity: 50%;
cursor: auto;
pointer-events: none;
}
.c76 > * {
.c77 > * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.c76 > a {
.c77 > a {
-webkit-text-decoration: none;
text-decoration: none;
}
.c42 {
.c43 {
background-color: #FB118E1f;
color: #FB118E;
font-size: 20px;
font-weight: 600;
}
.c42:focus {
.c43:focus {
box-shadow: 0 0 0 1pt #FB118E1f;
background-color: #FB118E1f;
}
.c42:hover {
.c43:hover {
background-color: #FB118E1f;
}
.c42:active {
.c43:active {
box-shadow: 0 0 0 1pt #FB118E1f;
background-color: #FB118E1f;
}
.c42:hover .c43 {
.c43:hover .c44 {
background-color: #98A1C014;
}
.c42:active .c43 {
.c43:active .c44 {
background-color: #B8C0DC3d;
}
.c42:disabled {
.c43:disabled {
opacity: 0.4;
}
.c42:disabled:hover {
.c43:disabled:hover {
cursor: auto;
background-color: transparent;
box-shadow: none;
......@@ -3064,7 +3079,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
background-color: #bdc8f3;
}
.c77 {
.c78 {
background-color: transparent;
color: #FB118E;
display: -webkit-box;
......@@ -3081,27 +3096,27 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
align-items: center;
}
.c77:focus {
.c78:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c77:hover {
.c78:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c77:active {
.c78:active {
-webkit-text-decoration: none;
text-decoration: none;
}
.c77:disabled {
.c78:disabled {
opacity: 50%;
cursor: auto;
}
.c71 {
.c72 {
height: 340px;
width: 100%;
border-radius: 32px;
......@@ -3127,7 +3142,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%);
}
.c72 {
.c73 {
color: white;
display: -webkit-box;
display: -webkit-flex;
......@@ -3141,20 +3156,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
flex-direction: column;
}
.c73 {
.c74 {
font-weight: 700;
font-size: 28px;
line-height: 36px;
}
.c74 {
.c75 {
margin: 10px 10px 0 0;
font-weight: 500;
font-size: 16px;
line-height: 20px;
}
.c75 {
.c76 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
......@@ -3168,22 +3183,22 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease opacity;
}
.c75:hover {
.c76:hover {
opacity: 0.6;
}
.c78 {
.c79 {
color: white;
border: 1px solid white;
}
.c37 {
.c38 {
display: grid;
grid-auto-rows: auto;
grid-row-gap: 4px;
}
.c34 {
.c35 {
-webkit-filter: none;
filter: none;
opacity: 1;
......@@ -3191,12 +3206,23 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: opacity 0.2s ease-in-out;
}
.c29 {
.c30 {
opacity: 0;
-webkit-transition: opacity 250ms ease-in;
transition: opacity 250ms ease-in;
width: 24px;
height: 24px;
border-radius: 50%;
background: radial-gradient(white 60%,#ffffff00 calc(70% + 1px));
}
.c29 {
width: 24px;
height: 24px;
background: #E8ECFB;
-webkit-transition: background-color 250ms ease-in;
transition: background-color 250ms ease-in;
box-shadow: 0 0 1px white;
border-radius: 50%;
}
.c28 {
......@@ -3334,7 +3360,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
background-color: #B8C0DC3d;
}
.c39 {
.c40 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -3365,12 +3391,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
visibility: visible;
}
.c39:hover,
.c39:active {
.c40:hover,
.c40:active {
background-color: #FB118E;
}
.c39:before {
.c40:before {
background-size: 100%;
border-radius: inherit;
position: absolute;
......@@ -3381,11 +3407,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
content: '';
}
.c39:hover:before {
.c40:hover:before {
background-color: #98A1C014;
}
.c39:active:before {
.c40:active:before {
background-color: #B8C0DC3d;
}
......@@ -3407,7 +3433,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
justify-content: space-between;
}
.c32 {
.c33 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -3424,12 +3450,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
line-height: 1rem;
}
.c32 span:hover {
.c33 span:hover {
cursor: pointer;
color: #495068;
}
.c33 {
.c34 {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
......@@ -3454,29 +3480,29 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
width: 100%;
}
.c31 {
.c32 {
margin: 0 0.25rem 0 0.35rem;
height: 35%;
margin-left: 8px;
}
.c31 path {
.c32 path {
stroke: #0D111C;
stroke-width: 2px;
}
.c40 {
.c41 {
margin: 0 0.25rem 0 0.35rem;
height: 35%;
margin-left: 8px;
}
.c40 path {
.c41 path {
stroke: #FFFFFF;
stroke-width: 2px;
}
.c30 {
.c31 {
margin: 0 0.25rem 0 0.25rem;
font-size: 20px;
font-weight: 600;
......@@ -3517,7 +3543,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
border: 1px solid #D2D9EE;
}
.c35 {
.c36 {
border-radius: 12px;
height: 40px;
width: 40px;
......@@ -3532,7 +3558,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
z-index: 2;
}
.c35:hover {
.c36:hover {
cursor: pointer;
opacity: 0.8;
}
......@@ -3578,7 +3604,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
gap: 16px;
}
.c36 {
.c37 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
......@@ -3628,7 +3654,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
border-color: #B8C0DC3d;
}
.c38 {
.c39 {
border-bottom: 1px solid #FFFFFF;
}
......@@ -3655,7 +3681,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
overflow-x: hidden;
}
.c45 {
.c46 {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
......@@ -3679,7 +3705,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
height: calc(100vh - 52px);
}
.c46 {
.c47 {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
......@@ -3700,7 +3726,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
height: calc(100vh - 52px);
}
.c47 {
.c48 {
position: absolute;
top: 68px;
bottom: 0;
......@@ -3713,7 +3739,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
height: 100%;
}
.c48 {
.c49 {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
......@@ -3741,11 +3767,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
pointer-events: none;
}
.c48 * {
.c49 * {
pointer-events: auto;
}
.c49 {
.c50 {
color: transparent;
font-size: 36px;
line-height: 44px;
......@@ -3757,7 +3783,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
-webkit-background-clip: text;
}
.c51 {
.c52 {
color: #7780A0;
font-size: 16px;
line-height: 24px;
......@@ -3767,7 +3793,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
margin: 0 0 32px;
}
.c50 {
.c51 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -3778,12 +3804,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
justify-content: center;
}
.c53 {
.c54 {
padding: 16px 0px;
border-radius: 24px;
}
.c54 {
.c55 {
background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%);
border: none;
color: #FFFFFF;
......@@ -3791,24 +3817,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: all 250ms ease;
}
.c54:hover {
.c55:hover {
box-shadow: 0px 0px 16px 0px #ff00c7;
}
.c55 {
.c56 {
margin: 0px;
font-size: 16px;
font-weight: 600;
white-space: nowrap;
}
.c52 {
.c53 {
max-width: 300px;
width: 100%;
pointer-events: auto;
}
.c56 {
.c57 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -3828,16 +3854,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease opacity;
}
.c56:hover {
.c57:hover {
opacity: 0.6;
}
.c57 {
.c58 {
margin-left: 14px;
size: 20px;
}
.c59 {
.c60 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -3854,7 +3880,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%);
}
.c60 {
.c61 {
display: grid;
gap: 12px;
width: 100%;
......@@ -3867,7 +3893,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
grid-template-columns: 1fr;
}
.c67 {
.c68 {
display: grid;
gap: 12px;
width: 100%;
......@@ -3921,7 +3947,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
width: 100%;
}
.c58 {
.c59 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
......@@ -3936,12 +3962,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
text-align: center;
}
.c58:hover {
.c59:hover {
color: #98A1C0;
}
@media screen and (min-width:1024px) {
.c79 {
.c80 {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
......@@ -3953,7 +3979,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
}
@media screen and (min-width:1024px) {
.c81 {
.c82 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -3962,75 +3988,75 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
}
@media screen and (min-width:1024px) {
.c96 {
.c97 {
display: none;
}
}
@media screen and (min-width:1024px) {
.c82 {
.c83 {
display: block;
}
}
@media screen and (min-width:1280px) {
.c89 {
.c90 {
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 24px;
}
}
@media screen and (min-width:1280px) {
.c90 {
.c91 {
margin: 0;
}
}
@media screen and (min-width:640px) {
.c61 {
.c62 {
height: 360px;
}
}
@media screen and (min-width:1280px) {
.c61 {
.c62 {
padding: 32px;
}
}
@media screen and (min-width:640px) {
.c66 {
.c67 {
height: 360px;
}
}
@media screen and (min-width:1280px) {
.c66 {
.c67 {
padding: 32px;
}
}
@media screen and (min-width:640px) {
.c68 {
.c69 {
height: 260px;
}
}
@media screen and (min-width:1280px) {
.c68 {
.c69 {
padding: 32px;
}
}
@media screen and (min-width:1024px) {
.c63 {
.c64 {
font-size: 28px;
line-height: 36px;
}
}
@media screen and (min-width:1280px) {
.c64 {
.c65 {
font-size: 20px;
line-height: 28px;
max-width: 480px;
......@@ -4038,7 +4064,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
}
@media screen and (min-width:1280px) {
.c69 {
.c70 {
font-size: 20px;
line-height: 28px;
max-width: 480px;
......@@ -4046,7 +4072,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
}
@media screen and (min-width:1024px) {
.c71 {
.c72 {
height: 140px;
-webkit-flex-direction: row;
-ms-flex-direction: row;
......@@ -4055,21 +4081,21 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
}
@media screen and (min-width:1280px) {
.c73 {
.c74 {
font-size: 28px;
line-height: 36px;
}
}
@media screen and (min-width:1280px) {
.c74 {
.c75 {
font-size: 20px;
line-height: 28px;
}
}
@media screen and (min-width:1024px) {
.c75 {
.c76 {
width: auto;
}
}
......@@ -4087,79 +4113,79 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
}
@media screen and (min-width:768px) {
.c45 {
.c46 {
height: 100vh;
}
}
@media screen and (min-width:768px) {
.c46 {
.c47 {
height: 100vh;
}
}
@media screen and (min-width:640px) {
.c49 {
.c50 {
font-size: 48px;
line-height: 56px;
}
}
@media screen and (min-width:768px) {
.c49 {
.c50 {
font-size: 64px;
line-height: 72px;
}
}
@media screen and (min-width:768px) {
.c51 {
.c52 {
font-size: 20px;
line-height: 28px;
}
}
@media screen and (min-width:640px) {
.c55 {
.c56 {
font-size: 20px;
}
}
@media screen and (min-width:640px) {
.c56 {
.c57 {
visibility: visible;
}
}
@media screen and (min-width:768px) {
.c59 {
.c60 {
padding: 0 96px 5rem;
}
}
@media screen and (min-width:640px) {
.c60 {
.c61 {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
}
@media screen and (min-width:1024px) {
.c60 {
.c61 {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
}
@media screen and (min-width:640px) {
.c67 {
.c68 {
grid-template-columns: 1fr;
gap: 32px;
}
}
@media screen and (min-width:1024px) {
.c67 {
.c68 {
grid-template-columns: 1fr 1fr 1fr;
gap: 32px;
}
......@@ -4280,21 +4306,25 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
<div
class="c28"
style="margin-right: 2px;"
>
<div
class="c29"
>
<img
alt="ETH logo"
class="c29"
class="c30"
src="ethereum-logo.png"
/>
</div>
</div>
<span
class="c30 token-symbol-container"
class="c31 token-symbol-container"
>
ETH
</span>
</div>
<svg
class="c31"
class="c32"
>
dropdown.svg
</svg>
......@@ -4303,13 +4333,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div>
</div>
<div
class="c32 c33"
class="c33 c34"
>
<div
class="c6 c7 c8"
>
<div
class="c34"
class="c35"
/>
<span />
</div>
......@@ -4318,10 +4348,10 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div>
</div>
<div
class="c35"
class="c36"
>
<div
class="c36"
class="c37"
color="#0D111C"
data-testid="swap-currency-button"
>
......@@ -4350,11 +4380,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div>
</div>
<div
class="c37"
class="c38"
>
<div>
<div
class="c17 c38"
class="c17 c39"
>
<div
class="c18"
......@@ -4382,7 +4412,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
/>
<div>
<button
class="c23 c24 c25 c39 open-currency-select-button"
class="c23 c24 c25 c40 open-currency-select-button"
>
<span
class="c27"
......@@ -4391,13 +4421,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
class="c6 c7 c10"
>
<span
class="c30 token-symbol-container"
class="c31 token-symbol-container"
>
Select token
</span>
</div>
<svg
class="c40"
class="c41"
>
dropdown.svg
</svg>
......@@ -4406,13 +4436,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div>
</div>
<div
class="c32 c33"
class="c33 c34"
>
<div
class="c6 c7 c8"
>
<div
class="c34"
class="c35"
/>
<span />
</div>
......@@ -4423,11 +4453,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div>
<div>
<button
class="c41 c24 c42"
class="c42 c24 c43"
font-weight="600"
>
<div
class="c43 c44"
class="c44 c45"
/>
Connect Wallet
</button>
......@@ -4438,52 +4468,52 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a>
</div>
<div
class="c45"
class="c46"
/>
<div
class="c46"
class="c47"
>
<div
class="c47"
class="c48"
/>
</div>
<div
class="c48"
class="c49"
>
<h1
class="c49"
class="c50"
>
Trade crypto and NFTs with confidence
</h1>
<div
class="c50"
class="c51"
>
<div
class="c51"
class="c52"
>
Buy, sell, and explore tokens and NFTs
</div>
</div>
<span
class="1 c52"
class="1 c53"
>
<a
class="c2 c24 c53 c54"
class="c2 c24 c54 c55"
href="#/swap"
>
<p
class="0 c55"
class="0 c56"
>
Get started
</p>
</a>
</span>
<div
class="2 c56"
class="2 c57"
>
Learn more
<svg
class="3 c57"
class="3 c58"
fill="none"
height="24"
stroke="currentColor"
......@@ -4511,7 +4541,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</svg>
</div>
<a
class="9 c58"
class="9 c59"
href="https://wallet.uniswap.org/?utm_source=home_page&utm_medium=webapp&utm_campaign=wallet_microsite&utm_id=1"
>
<svg
......@@ -4528,32 +4558,32 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a>
</div>
<div
class="4 c59"
class="4 c60"
>
<div
class="5 c60"
class="5 c61"
cols="2"
>
<a
class="c61"
class="c62"
href="#/swap"
>
<div
class="c62"
class="c63"
>
<div
class="c63"
class="c64"
>
Swap tokens
</div>
</div>
<div
class="c64"
class="c65"
type="Primary"
>
Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more.
<div
class="c64 c65"
class="c65 c66"
type="Primary"
>
Trade Tokens
......@@ -4561,25 +4591,25 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div>
</a>
<a
class="c66"
class="c67"
href="#/nfts"
>
<div
class="c62"
class="c63"
>
<div
class="c63"
class="c64"
>
Trade NFTs
</div>
</div>
<div
class="c64"
class="c65"
type="Primary"
>
Buy and sell NFTs across marketplaces to find more listings at better prices.
<div
class="c64 c65"
class="c65 c66"
type="Primary"
>
Explore NFTs
......@@ -4588,20 +4618,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a>
</div>
<div
class="5 c67"
class="5 c68"
cols="3"
>
<a
class="c68"
class="c69"
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="c62"
class="c63"
>
<div
class="c63"
class="c64"
>
Buy crypto
</div>
......@@ -4628,12 +4658,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</svg>
</div>
<div
class="c69"
class="c70"
type="Secondary"
>
Buy crypto with your credit card or bank account at the best rates.
<div
class="c69 c65"
class="c70 c66"
type="Secondary"
>
Buy now
......@@ -4641,30 +4671,30 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div>
</a>
<a
class="c68"
class="c69"
href="#/pools"
>
<div
class="c62"
class="c63"
>
<div
class="c63"
class="c64"
>
Earn
</div>
<img
alt="Analytics"
class="c70"
class="c71"
src="aboutArrowLight.png"
/>
</div>
<div
class="c69"
class="c70"
type="Secondary"
>
Provide liquidity to pools on Uniswap and earn fees on swaps.
<div
class="c69 c65"
class="c70 c66"
type="Secondary"
>
Provide liquidity
......@@ -4672,16 +4702,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div>
</a>
<a
class="c68"
class="c69"
href="https://docs.uniswap.org"
rel="noopenener noreferrer"
target="_blank"
>
<div
class="c62"
class="c63"
>
<div
class="c63"
class="c64"
>
Build dApps
</div>
......@@ -4708,12 +4738,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</svg>
</div>
<div
class="c69"
class="c70"
type="Secondary"
>
Build apps and tools on the largest DeFi protocol on Ethereum.
<div
class="c69 c65"
class="c70 c66"
type="Secondary"
>
Developer docs
......@@ -4721,28 +4751,28 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div>
</a>
</div>
<div
class="c71"
>
<div
class="c72"
>
<div
class="c73"
>
<div
class="c74"
>
Powered by the Uniswap Protocol
</div>
<div
class="c74"
class="c75"
>
The leading decentralized crypto trading protocol, governed by a global community.
</div>
</div>
<div
class="c75"
class="c76"
>
<a
class="c76 c77 c78"
class="c77 c78 c79"
href="https://uniswap.org"
rel="noopener noreferrer"
target="_blank"
......@@ -4753,53 +4783,53 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div>
</div>
<div
class="c79"
class="c80"
>
<div
class="c80 c81"
class="c81 c82"
>
<img
alt="Uniswap Logo"
class="c82"
class="c83"
src="unicornEmbossLight.png"
/>
<div
class="c83"
class="c84"
>
<a
class="c84"
class="c85"
href="https://discord.gg/FCfyBSbCU5"
rel="noopener noreferrer"
target="_blank"
>
<svg
class="c85"
class="c86"
size="32"
>
discord.svg
</svg>
</a>
<a
class="c84"
class="c85"
href="https://twitter.com/uniswap"
rel="noopener noreferrer"
target="_blank"
>
<svg
class="c86"
class="c87"
size="32"
>
twitter-safe.svg
</svg>
</a>
<a
class="c84"
class="c85"
href="https://github.com/Uniswap"
rel="noopener noreferrer"
target="_blank"
>
<svg
class="c87"
class="c88"
size="32"
>
github.svg
......@@ -4807,7 +4837,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a>
</div>
<span
class="2 c88"
class="2 c89"
>
©
2023
......@@ -4815,51 +4845,51 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</span>
</div>
<div
class="c89"
class="c90"
>
<div
class="c90"
class="c91"
>
<span
class="c91"
class="c92"
>
App
</span>
<a
class="1 c92 c93"
class="1 c93 c94"
href="#/swap"
>
Swap
</a>
<a
class="1 c92 c93"
class="1 c93 c94"
href="#/tokens"
>
Tokens
</a>
<a
class="1 c92 c93"
class="1 c93 c94"
href="#/nfts"
>
NFTs
</a>
<a
class="1 c92 c93"
class="1 c93 c94"
href="#/pools"
>
Pools
</a>
</div>
<div
class="c90"
class="c91"
>
<span
class="c91"
class="c92"
>
Protocol
</span>
<a
class="c94 0 c95"
class="c95 0 c96"
href="https://uniswap.org/community"
rel="noopener noreferrer"
target="_blank"
......@@ -4867,7 +4897,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Community
</a>
<a
class="c94 0 c95"
class="c95 0 c96"
href="https://uniswap.org/governance"
rel="noopener noreferrer"
target="_blank"
......@@ -4875,7 +4905,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Governance
</a>
<a
class="c94 0 c95"
class="c95 0 c96"
href="https://uniswap.org/developers"
rel="noopener noreferrer"
target="_blank"
......@@ -4884,15 +4914,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a>
</div>
<div
class="c90"
class="c91"
>
<span
class="c91"
class="c92"
>
Company
</span>
<a
class="c94 0 c95"
class="c95 0 c96"
href="https://boards.greenhouse.io/uniswaplabs"
rel="noopener noreferrer"
target="_blank"
......@@ -4900,7 +4930,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Careers
</a>
<a
class="c94 0 c95"
class="c95 0 c96"
href="https://uniswap.org/blog"
rel="noopener noreferrer"
target="_blank"
......@@ -4909,15 +4939,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a>
</div>
<div
class="c90"
class="c91"
>
<span
class="c91"
class="c92"
>
Get Help
</span>
<a
class="c94 0 c95"
class="c95 0 c96"
href="https://support.uniswap.org/hc/en-us/requests/new"
rel="noopener noreferrer"
target="_blank"
......@@ -4925,7 +4955,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Contact Us
</a>
<a
class="c94 0 c95"
class="c95 0 c96"
href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer"
target="_blank"
......@@ -4935,50 +4965,50 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div>
</div>
<div
class="c80 c96"
class="c81 c97"
>
<img
alt="Uniswap Logo"
class="c82"
class="c83"
src="unicornEmbossLight.png"
/>
<div
class="c83"
class="c84"
>
<a
class="c84"
class="c85"
href="https://discord.gg/FCfyBSbCU5"
rel="noopener noreferrer"
target="_blank"
>
<svg
class="c85"
class="c86"
size="32"
>
discord.svg
</svg>
</a>
<a
class="c84"
class="c85"
href="https://twitter.com/uniswap"
rel="noopener noreferrer"
target="_blank"
>
<svg
class="c86"
class="c87"
size="32"
>
twitter-safe.svg
</svg>
</a>
<a
class="c84"
class="c85"
href="https://github.com/Uniswap"
rel="noopener noreferrer"
target="_blank"
>
<svg
class="c87"
class="c88"
size="32"
>
github.svg
......@@ -4986,7 +5016,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a>
</div>
<span
class="2 c88"
class="2 c89"
>
©
2023
......
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