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