Skip to content

I
interface
Commit 52dc441e authored by eddie's avatar eddie Committed by GitHub
Browse files
Options

feat: swap component refactor limits (#7588) 

* feat: add limits tab, flag

* feat: add unit test

* fix: update snapshot
parent ff6d1cc5
Show whitespace changes
Inline Side-by-side
Showing with 1178 additions and 632 deletions
src/components/FeatureFlagModal/FeatureFlagModal.tsx
View file @ 52dc441e
...@@ -10,6 +10,7 @@ import { useInfoExploreFlag } from 'featureFlags/flags/infoExplore' ...@@ -10,6 +10,7 @@ import { useInfoExploreFlag } from 'featureFlags/flags/infoExplore'
import { useInfoLiveViewsFlag } from 'featureFlags/flags/infoLiveViews' import { useInfoLiveViewsFlag } from 'featureFlags/flags/infoLiveViews'
import { useInfoPoolPageFlag } from 'featureFlags/flags/infoPoolPage' import { useInfoPoolPageFlag } from 'featureFlags/flags/infoPoolPage'
import { useInfoTDPFlag } from 'featureFlags/flags/infoTDP' import { useInfoTDPFlag } from 'featureFlags/flags/infoTDP'
import { useLimitsEnabledFlag } from 'featureFlags/flags/limits'
import { useMultichainUXFlag } from 'featureFlags/flags/multichainUx' import { useMultichainUXFlag } from 'featureFlags/flags/multichainUx'
import { useProgressIndicatorV2Flag } from 'featureFlags/flags/progressIndicatorV2' import { useProgressIndicatorV2Flag } from 'featureFlags/flags/progressIndicatorV2'
import { useQuickRouteMainnetFlag } from 'featureFlags/flags/quickRouteMainnet' import { useQuickRouteMainnetFlag } from 'featureFlags/flags/quickRouteMainnet'
...@@ -274,6 +275,12 @@ export default function FeatureFlagModal() { ...@@ -274,6 +275,12 @@ export default function FeatureFlagModal() {
featureFlag={FeatureFlag.feesEnabled} featureFlag={FeatureFlag.feesEnabled}
label="Enable Swap Fees" label="Enable Swap Fees"
/> />
<FeatureFlagOption
variant={BaseVariant}
value={useLimitsEnabledFlag()}
featureFlag={FeatureFlag.limitsEnabled}
label="Enable Limits"
/>
<FeatureFlagOption <FeatureFlagOption
variant={BaseVariant} variant={BaseVariant}
value={useFallbackProviderEnabledFlag()} value={useFallbackProviderEnabledFlag()}
......
src/components/swap/SwapBuyFiatButton.tsx
View file @ 52dc441e
...@@ -29,12 +29,18 @@ const StyledTextButton = styled(ButtonText)` ...@@ -29,12 +29,18 @@ const StyledTextButton = styled(ButtonText)`
color: ${({ theme }) => theme.neutral2}; color: ${({ theme }) => theme.neutral2};
gap: 4px; gap: 4px;
font-weight: 485; font-weight: 485;
transition-duration: ${({ theme }) => theme.transition.duration.fast};
transition-timing-function: ease-in-out;
transition-property: opacity, color, background-color;
&:focus { &:focus {
text-decoration: none; text-decoration: none;
} }
&:active { &:active {
text-decoration: none; text-decoration: none;
} }
:hover {
opacity: ${({ theme }) => theme.opacity.hover};
}
` `
export default function SwapBuyFiatButton() { export default function SwapBuyFiatButton() {
......
src/components/swap/SwapHeader.test.tsx 0 → 100644
View file @ 52dc441e
import { TEST_ALLOWED_SLIPPAGE, TEST_TRADE_EXACT_INPUT } from 'test-utils/constants'
import { render, screen } from 'test-utils/render'
import SwapHeader, { SwapTab } from './SwapHeader'
jest.mock('../../featureFlags/flags/limits', () => ({ useLimitsEnabled: () => true }))
describe('SwapHeader.tsx', () => {
it('matches base snapshot', () => {
const { asFragment } = render(
<SwapHeader
trade={TEST_TRADE_EXACT_INPUT}
selectedTab={SwapTab.Swap}
autoSlippage={TEST_ALLOWED_SLIPPAGE}
onClickTab={jest.fn()}
/>
)
expect(asFragment()).toMatchSnapshot()
expect(screen.getByText('Swap')).toBeInTheDocument()
expect(screen.getByText('Buy')).toBeInTheDocument()
expect(screen.getByText('Limit')).toBeInTheDocument()
})
it('calls callback for switching tabs', () => {
const onClickTab = jest.fn()
render(
<SwapHeader
trade={TEST_TRADE_EXACT_INPUT}
selectedTab={SwapTab.Swap}
autoSlippage={TEST_ALLOWED_SLIPPAGE}
onClickTab={onClickTab}
/>
)
screen.getByText('Limit').click()
expect(onClickTab).toHaveBeenCalledWith(SwapTab.Limit)
})
})
src/components/swap/SwapHeader.tsx
View file @ 52dc441e
import { Trans } from '@lingui/macro' import { Trans } from '@lingui/macro'
import { Percent } from '@uniswap/sdk-core' import { Percent } from '@uniswap/sdk-core'
import { useLimitsEnabled } from 'featureFlags/flags/limits'
import { InterfaceTrade } from 'state/routing/types' import { InterfaceTrade } from 'state/routing/types'
import styled from 'styled-components' import styled from 'styled-components'
import { ThemedText } from 'theme/components' import { ButtonText } from 'theme/components'
import { RowBetween, RowFixed } from '../Row' import { RowBetween, RowFixed } from '../Row'
import SettingsTab from '../Settings' import SettingsTab from '../Settings'
...@@ -18,22 +19,49 @@ const HeaderButtonContainer = styled(RowFixed)` ...@@ -18,22 +19,49 @@ const HeaderButtonContainer = styled(RowFixed)`
gap: 16px; gap: 16px;
` `
const StyledTextButton = styled(ButtonText)<{ $isActive: boolean }>`
color: ${({ theme, $isActive }) => ($isActive ? theme.neutral1 : theme.neutral2)};
gap: 4px;
font-weight: 485;
&:focus {
text-decoration: none;
}
&:active {
text-decoration: none;
}
`
export enum SwapTab {
Swap = 'swap',
Limit = 'limit',
}
export default function SwapHeader({ export default function SwapHeader({
autoSlippage, autoSlippage,
chainId, chainId,
trade, trade,
selectedTab,
onClickTab,
}: { }: {
autoSlippage: Percent autoSlippage: Percent
chainId?: number chainId?: number
trade?: InterfaceTrade trade?: InterfaceTrade
selectedTab: SwapTab
onClickTab: (tab: SwapTab) => void
}) { }) {
const limitsEnabled = useLimitsEnabled()
return ( return (
<StyledSwapHeader> <StyledSwapHeader>
<HeaderButtonContainer> <HeaderButtonContainer>
<ThemedText.SubHeader> <StyledTextButton $isActive={selectedTab === SwapTab.Swap} onClick={() => onClickTab?.(SwapTab.Swap)}>
<Trans>Swap</Trans> <Trans>Swap</Trans>
</ThemedText.SubHeader> </StyledTextButton>
<SwapBuyFiatButton /> <SwapBuyFiatButton />
{limitsEnabled && (
<StyledTextButton $isActive={selectedTab === SwapTab.Limit} onClick={() => onClickTab?.(SwapTab.Limit)}>
<Trans>Limit</Trans>
</StyledTextButton>
)}
</HeaderButtonContainer> </HeaderButtonContainer>
<RowFixed> <RowFixed>
<SettingsTab autoSlippage={autoSlippage} chainId={chainId} trade={trade} /> <SettingsTab autoSlippage={autoSlippage} chainId={chainId} trade={trade} />
......
src/components/swap/__snapshots__/SwapBuyFiatButton.test.tsx.snap
View file @ 52dc441e
...@@ -120,6 +120,12 @@ exports[`SwapBuyFiatButton.tsx matches base snapshot 1`] = ` ...@@ -120,6 +120,12 @@ exports[`SwapBuyFiatButton.tsx matches base snapshot 1`] = `
color: #7D7D7D; color: #7D7D7D;
gap: 4px; gap: 4px;
font-weight: 485; font-weight: 485;
-webkit-transition-duration: 125ms;
transition-duration: 125ms;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-property: opacity,color,background-color;
transition-property: opacity,color,background-color;
} }
.c4:focus { .c4:focus {
...@@ -132,6 +138,10 @@ exports[`SwapBuyFiatButton.tsx matches base snapshot 1`] = ` ...@@ -132,6 +138,10 @@ exports[`SwapBuyFiatButton.tsx matches base snapshot 1`] = `
text-decoration: none; text-decoration: none;
} }
.c4:hover {
opacity: 0.6;
}
<div <div
class="c0" class="c0"
> >
......
src/components/swap/__snapshots__/SwapHeader.test.tsx.snap 0 → 100644
View file @ 52dc441e
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SwapHeader.tsx matches base snapshot 1`] = `
<DocumentFragment>
.c0 {
box-sizing: border-box;
margin: 0;
min-width: 0;
}
.c9 {
box-sizing: border-box;
margin: 0;
min-width: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
text-align: center;
line-height: inherit;
-webkit-text-decoration: none;
text-decoration: none;
font-size: inherit;
padding-left: 16px;
padding-right: 16px;
padding-top: 8px;
padding-bottom: 8px;
color: white;
background-color: primary;
border: 0;
border-radius: 4px;
}
.c1 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 0;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.c2 {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.c4 {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.c6 {
outline: none;
border: none;
font-size: inherit;
padding: 0;
margin: 0;
background: none;
cursor: pointer;
-webkit-transition-duration: 125ms;
transition-duration: 125ms;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-property: opacity,color,background-color;
transition-property: opacity,color,background-color;
}
.c6:hover {
opacity: 0.6;
}
.c6:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c10 {
padding: 16px;
width: 100%;
line-height: 24px;
font-weight: 535;
text-align: center;
border-radius: 16px;
outline: none;
border: 1px solid transparent;
color: #222222;
-webkit-text-decoration: none;
text-decoration: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
position: relative;
z-index: 1;
will-change: transform;
-webkit-transition: -webkit-transform 450ms ease;
-webkit-transition: transform 450ms ease;
transition: transform 450ms ease;
-webkit-transform: perspective(1px) translateZ(0);
-ms-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
}
.c10:disabled {
opacity: 50%;
cursor: auto;
pointer-events: none;
}
.c10 > * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.c10 > a {
-webkit-text-decoration: none;
text-decoration: none;
}
.c11 {
padding: 0;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
background: none;
-webkit-text-decoration: none;
text-decoration: none;
}
.c11:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c11:hover {
opacity: 0.9;
}
.c11:active {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c11:disabled {
opacity: 50%;
cursor: auto;
}
.c8 {
display: inline-block;
height: inherit;
}
.c17 {
height: 24px;
width: 24px;
}
.c17 > * {
fill: #7D7D7D;
}
.c15 {
border: none;
background-color: transparent;
margin: 0;
padding: 0;
cursor: pointer;
outline: none;
}
.c15:not([disabled]):hover {
opacity: 0.7;
}
.c16 {
padding: 6px 12px;
border-radius: 16px;
}
.c14 {
position: relative;
}
.c12 {
color: #7D7D7D;
gap: 4px;
font-weight: 485;
-webkit-transition-duration: 125ms;
transition-duration: 125ms;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-property: opacity,color,background-color;
transition-property: opacity,color,background-color;
}
.c12:focus {
-webkit-text-decoration: none;
text-decoration: none;
}
.c12:active {
-webkit-text-decoration: none;
text-decoration: none;
}
.c12:hover {
opacity: 0.6;
}
.c3 {
margin-bottom: 10px;
color: #7D7D7D;
}
.c5 {
padding: 0 12px;
gap: 16px;
}
.c7 {
color: #222222;
gap: 4px;
font-weight: 485;
}
.c7:focus {
-webkit-text-decoration: none;
text-decoration: none;
}
.c7:active {
-webkit-text-decoration: none;
text-decoration: none;
}
.c13 {
color: #7D7D7D;
gap: 4px;
font-weight: 485;
}
.c13:focus {
-webkit-text-decoration: none;
text-decoration: none;
}
.c13:active {
-webkit-text-decoration: none;
text-decoration: none;
}
<div
class="c0 c1 c2 c3"
>
<div
class="c0 c1 c4 c5"
>
<button
class="c6 c7"
>
Swap
</button>
<div
class="c8"
>
<div>
<button
class="c9 c10 c11 c12"
data-testid="buy-fiat-button"
>
Buy
</button>
</div>
</div>
<button
class="c6 c13"
>
Limit
</button>
</div>
<div
class="c0 c1 c4"
>
<div
class="c14"
>
<button
aria-label="Transaction Settings"
class="c15"
data-testid="open-settings-dialog-button"
disabled=""
id="open-settings-dialog-button"
>
<div
class="c0 c1 c16"
>
<svg
class="c17"
fill="none"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.83 14.6C19.9 14.06 19.33 13.07 19.33 12C19.33 10.93 19.9 9.93999 20.83 9.39999C20.99 9.29999 21.05 9.1 20.95 8.94L19.28 6.06C19.22 5.95 19.11 5.89001 19 5.89001C18.94 5.89001 18.88 5.91 18.83 5.94C18.37 6.2 17.85 6.34 17.33 6.34C16.8 6.34 16.28 6.19999 15.81 5.92999C14.88 5.38999 14.31 4.41 14.31 3.34C14.31 3.15 14.16 3 13.98 3H10.02C9.83999 3 9.69 3.15 9.69 3.34C9.69 4.41 9.12 5.38999 8.19 5.92999C7.72 6.19999 7.20001 6.34 6.67001 6.34C6.15001 6.34 5.63001 6.2 5.17001 5.94C5.01001 5.84 4.81 5.9 4.72 6.06L3.04001 8.94C3.01001 8.99 3 9.05001 3 9.10001C3 9.22001 3.06001 9.32999 3.17001 9.39999C4.10001 9.93999 4.67001 10.92 4.67001 11.99C4.67001 13.07 4.09999 14.06 3.17999 14.6H3.17001C3.01001 14.7 2.94999 14.9 3.04999 15.06L4.72 17.94C4.78 18.05 4.89 18.11 5 18.11C5.06 18.11 5.12001 18.09 5.17001 18.06C6.11001 17.53 7.26 17.53 8.19 18.07C9.11 18.61 9.67999 19.59 9.67999 20.66C9.67999 20.85 9.82999 21 10.02 21H13.98C14.16 21 14.31 20.85 14.31 20.66C14.31 19.59 14.88 18.61 15.81 18.07C16.28 17.8 16.8 17.66 17.33 17.66C17.85 17.66 18.37 17.8 18.83 18.06C18.99 18.16 19.19 18.1 19.28 17.94L20.96 15.06C20.99 15.01 21 14.95 21 14.9C21 14.78 20.94 14.67 20.83 14.6ZM12 15C10.34 15 9 13.66 9 12C9 10.34 10.34 9 12 9C13.66 9 15 10.34 15 12C15 13.66 13.66 15 12 15Z"
fill="currentColor"
/>
</svg>
</div>
</button>
</div>
</div>
</div>
</DocumentFragment>
`;
src/featureFlags/flags/limits.ts 0 → 100644
View file @ 52dc441e
import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
export function useLimitsEnabledFlag(): BaseVariant {
return useBaseFlag(FeatureFlag.limitsEnabled)
}
export function useLimitsEnabled(): boolean {
return useLimitsEnabledFlag() === BaseVariant.Enabled
}
src/featureFlags/index.tsx
View file @ 52dc441e
...@@ -23,6 +23,7 @@ export enum FeatureFlag { ...@@ -23,6 +23,7 @@ export enum FeatureFlag {
progressIndicatorV2 = 'progress_indicator_v2', progressIndicatorV2 = 'progress_indicator_v2',
feesEnabled = 'fees_enabled', feesEnabled = 'fees_enabled',
androidGALaunch = 'android_ga_launch', androidGALaunch = 'android_ga_launch',
limitsEnabled = 'limits_enabled',
} }
interface FeatureFlagsContextType { interface FeatureFlagsContextType {
......
src/pages/Landing/__snapshots__/index.test.tsx.snap
View file @ 52dc441e
...@@ -7,7 +7,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -7,7 +7,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
min-width: 0; min-width: 0;
} }
.c15 { .c16 {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
min-width: 0; min-width: 0;
...@@ -30,7 +30,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -30,7 +30,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
border-radius: 4px; border-radius: 4px;
} }
.c47 { .c48 {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
min-width: 0; min-width: 0;
...@@ -84,15 +84,36 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -84,15 +84,36 @@ exports[`disable nft on landing page does not render nft information and card 1`
width: fit-content; width: fit-content;
} }
.c27 {
color: #7D7D7D;
}
.c13 { .c13 {
color: #222222; outline: none;
border: none;
font-size: inherit;
padding: 0;
margin: 0;
background: none;
cursor: pointer;
-webkit-transition-duration: 125ms;
transition-duration: 125ms;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-property: opacity,color,background-color;
transition-property: opacity,color,background-color;
} }
.c26 { .c13:hover {
color: #7D7D7D; opacity: 0.6;
} }
.c98 { .c13:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c99 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -103,15 +124,15 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -103,15 +124,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
font-weight: 500; font-weight: 500;
} }
.c98:hover { .c99:hover {
opacity: 0.6; opacity: 0.6;
} }
.c98:active { .c99:active {
opacity: 0.4; opacity: 0.4;
} }
.c96 { .c97 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -122,36 +143,36 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -122,36 +143,36 @@ exports[`disable nft on landing page does not render nft information and card 1`
font-weight: 500; font-weight: 500;
} }
.c96:hover { .c97:hover {
opacity: 0.6; opacity: 0.6;
} }
.c96:active { .c97:active {
opacity: 0.4; opacity: 0.4;
} }
.c89 { .c90 {
height: 32px; height: 32px;
width: 32px; width: 32px;
fill: #98A1C0; fill: #98A1C0;
opacity: 1; opacity: 1;
} }
.c90 { .c91 {
height: 32px; height: 32px;
width: 32px; width: 32px;
fill: #98A1C0; fill: #98A1C0;
opacity: 1; opacity: 1;
} }
.c91 { .c92 {
height: 32px; height: 32px;
width: 32px; width: 32px;
fill: #98A1C0; fill: #98A1C0;
opacity: 1; opacity: 1;
} }
.c83 { .c84 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -164,7 +185,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -164,7 +185,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
max-width: 1440px; max-width: 1440px;
} }
.c84 { .c85 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -174,24 +195,24 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -174,24 +195,24 @@ exports[`disable nft on landing page does not render nft information and card 1`
flex-direction: column; flex-direction: column;
} }
.c85 { .c86 {
display: none; display: none;
} }
.c100 { .c101 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
} }
.c86 { .c87 {
width: 72px; width: 72px;
height: 72px; height: 72px;
display: none; display: none;
} }
.c87 { .c88 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -204,20 +225,20 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -204,20 +225,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;
} }
.c88 { .c89 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
} }
.c93 { .c94 {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 12px; gap: 12px;
} }
.c94 { .c95 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -230,32 +251,32 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -230,32 +251,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;
} }
.c95 { .c96 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
font-weight: 535; font-weight: 535;
} }
.c99 { .c100 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
color: #7D7D7D; color: #7D7D7D;
} }
.c97 { .c98 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
color: #7D7D7D; color: #7D7D7D;
} }
.c92 { .c93 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
margin: 1rem 0 0 0; margin: 1rem 0 0 0;
color: #CECECE; color: #CECECE;
} }
.c66 { .c67 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -283,11 +304,11 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -283,11 +304,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: 250ms ease border; transition: 250ms ease border;
} }
.c66:hover { .c67:hover {
border: 1px solid #CECECE; border: 1px solid #CECECE;
} }
.c72 { .c73 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -315,11 +336,11 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -315,11 +336,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: 250ms ease border; transition: 250ms ease border;
} }
.c72:hover { .c73:hover {
border: 1px solid #CECECE; border: 1px solid #CECECE;
} }
.c67 { .c68 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -334,13 +355,13 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -334,13 +355,13 @@ exports[`disable nft on landing page does not render nft information and card 1`
justify-content: space-between; justify-content: space-between;
} }
.c68 { .c69 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
font-weight: 535; font-weight: 535;
} }
.c69 { .c70 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -355,7 +376,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -355,7 +376,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
max-width: 480px; max-width: 480px;
} }
.c73 { .c74 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -370,7 +391,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -370,7 +391,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
max-width: 480px; max-width: 480px;
} }
.c70 { .c71 {
color: #FC72FF; color: #FC72FF;
font-weight: 535; font-weight: 535;
margin: 24px 0 0; margin: 24px 0 0;
...@@ -379,18 +400,18 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -379,18 +400,18 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: 250ms ease opacity; transition: 250ms ease opacity;
} }
.c70:hover { .c71:hover {
opacity: 0.6; opacity: 0.6;
} }
.c74 { .c75 {
min-width: 20px; min-width: 20px;
min-height: 20px; min-height: 20px;
max-height: 48px; max-height: 48px;
max-width: 48px; max-width: 48px;
} }
.c50 { .c51 {
background-color: transparent; background-color: transparent;
bottom: 0; bottom: 0;
border-radius: inherit; border-radius: inherit;
...@@ -404,7 +425,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -404,7 +425,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
width: 100%; width: 100%;
} }
.c16 { .c17 {
padding: 16px; padding: 16px;
width: 100%; width: 100%;
line-height: 24px; line-height: 24px;
...@@ -443,25 +464,25 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -443,25 +464,25 @@ exports[`disable nft on landing page does not render nft information and card 1`
transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
} }
.c16:disabled { .c17:disabled {
opacity: 50%; opacity: 50%;
cursor: auto; cursor: auto;
pointer-events: none; pointer-events: none;
} }
.c16 > * { .c17 > * {
-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;
} }
.c16 > a { .c17 > a {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c80 { .c81 {
padding: 16px; padding: 16px;
width: 200px; width: 200px;
line-height: 24px; line-height: 24px;
...@@ -500,58 +521,58 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -500,58 +521,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);
} }
.c80:disabled { .c81:disabled {
opacity: 50%; opacity: 50%;
cursor: auto; cursor: auto;
pointer-events: none; pointer-events: none;
} }
.c80 > * { .c81 > * {
-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;
} }
.c80 > a { .c81 > a {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c48 { .c49 {
background-color: #FFEFFF; background-color: #FFEFFF;
color: #FC72FF; color: #FC72FF;
font-size: 20px; font-size: 20px;
font-weight: 535; font-weight: 535;
} }
.c48:focus { .c49:focus {
box-shadow: 0 0 0 1pt #FFEFFF; box-shadow: 0 0 0 1pt #FFEFFF;
background-color: #FFEFFF; background-color: #FFEFFF;
} }
.c48:hover { .c49:hover {
background-color: #FFEFFF; background-color: #FFEFFF;
} }
.c48:active { .c49:active {
box-shadow: 0 0 0 1pt #FFEFFF; box-shadow: 0 0 0 1pt #FFEFFF;
background-color: #FFEFFF; background-color: #FFEFFF;
} }
.c48:hover .c49 { .c49:hover .c50 {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c48:active .c49 { .c49:active .c50 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c48:disabled { .c49:disabled {
opacity: 0.4; opacity: 0.4;
} }
.c48:disabled:hover { .c49:disabled:hover {
cursor: auto; cursor: auto;
background-color: transparent; background-color: transparent;
box-shadow: none; box-shadow: none;
...@@ -559,7 +580,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -559,7 +580,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
outline: none; outline: none;
} }
.c30 { .c31 {
background-color: #FFFFFF; background-color: #FFFFFF;
color: #7D7D7D; color: #7D7D7D;
border: 1px solid #22222212; border: 1px solid #22222212;
...@@ -567,15 +588,15 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -567,15 +588,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
font-weight: 535; font-weight: 535;
} }
.c30:hover { .c31:hover {
background-color: #ececec; background-color: #ececec;
} }
.c30:active { .c31:active {
background-color: #e0e0e0; background-color: #e0e0e0;
} }
.c81 { .c82 {
background-color: transparent; background-color: transparent;
color: #FC72FF; color: #FC72FF;
display: -webkit-box; display: -webkit-box;
...@@ -592,27 +613,27 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -592,27 +613,27 @@ exports[`disable nft on landing page does not render nft information and card 1`
align-items: center; align-items: center;
} }
.c81:focus { .c82:focus {
-webkit-text-decoration: underline; -webkit-text-decoration: underline;
text-decoration: underline; text-decoration: underline;
} }
.c81:hover { .c82:hover {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c81:active { .c82:active {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c81:disabled { .c82:disabled {
opacity: 50%; opacity: 50%;
cursor: auto; cursor: auto;
} }
.c17 { .c18 {
padding: 0; padding: 0;
width: -webkit-fit-content; width: -webkit-fit-content;
width: -moz-fit-content; width: -moz-fit-content;
...@@ -622,26 +643,26 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -622,26 +643,26 @@ exports[`disable nft on landing page does not render nft information and card 1`
text-decoration: none; text-decoration: none;
} }
.c17:focus { .c18:focus {
-webkit-text-decoration: underline; -webkit-text-decoration: underline;
text-decoration: underline; text-decoration: underline;
} }
.c17:hover { .c18:hover {
opacity: 0.9; opacity: 0.9;
} }
.c17:active { .c18:active {
-webkit-text-decoration: underline; -webkit-text-decoration: underline;
text-decoration: underline; text-decoration: underline;
} }
.c17:disabled { .c18:disabled {
opacity: 50%; opacity: 50%;
cursor: auto; cursor: auto;
} }
.c75 { .c76 {
height: 340px; height: 340px;
width: 100%; width: 100%;
border-radius: 32px; border-radius: 32px;
...@@ -667,7 +688,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -667,7 +688,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%);
} }
.c76 { .c77 {
color: white; color: white;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -681,20 +702,20 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -681,20 +702,20 @@ exports[`disable nft on landing page does not render nft information and card 1`
flex-direction: column; flex-direction: column;
} }
.c77 { .c78 {
font-weight: 535; font-weight: 535;
font-size: 28px; font-size: 28px;
line-height: 36px; line-height: 36px;
} }
.c78 { .c79 {
margin: 10px 10px 0 0; margin: 10px 10px 0 0;
font-weight: 535; font-weight: 535;
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
} }
.c79 { .c80 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -708,22 +729,22 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -708,22 +729,22 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: 250ms ease opacity; transition: 250ms ease opacity;
} }
.c79:hover { .c80:hover {
opacity: 0.6; opacity: 0.6;
} }
.c82 { .c83 {
color: white; color: white;
border: 1px solid white; border: 1px solid white;
} }
.c43 { .c44 {
display: grid; display: grid;
grid-auto-rows: auto; grid-auto-rows: auto;
grid-row-gap: 4px; grid-row-gap: 4px;
} }
.c40 { .c41 {
-webkit-filter: none; -webkit-filter: none;
filter: none; filter: none;
opacity: 1; opacity: 1;
...@@ -731,12 +752,12 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -731,12 +752,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: opacity 250ms ease-in-out; transition: opacity 250ms ease-in-out;
} }
.c14 { .c15 {
display: inline-block; display: inline-block;
height: inherit; height: inherit;
} }
.c35 { .c36 {
opacity: 0; opacity: 0;
-webkit-transition: opacity 250ms ease-in; -webkit-transition: opacity 250ms ease-in;
transition: opacity 250ms ease-in; transition: opacity 250ms ease-in;
...@@ -745,7 +766,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -745,7 +766,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
border-radius: 50%; border-radius: 50%;
} }
.c34 { .c35 {
width: 24px; width: 24px;
height: 24px; height: 24px;
background: #22222212; background: #22222212;
...@@ -755,7 +776,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -755,7 +776,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
border-radius: 50%; border-radius: 50%;
} }
.c33 { .c34 {
position: relative; position: relative;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -763,7 +784,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -763,7 +784,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
display: flex; display: flex;
} }
.c28 { .c29 {
color: #222222; color: #222222;
pointer-events: auto; pointer-events: auto;
width: 0; width: 0;
...@@ -784,36 +805,36 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -784,36 +805,36 @@ exports[`disable nft on landing page does not render nft information and card 1`
text-align: right; text-align: right;
} }
.c28::-webkit-search-decoration { .c29::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }
.c28 [type='number'] { .c29 [type='number'] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }
.c28::-webkit-outer-spin-button, .c29::-webkit-outer-spin-button,
.c28::-webkit-inner-spin-button { .c29::-webkit-inner-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
} }
.c28::-webkit-input-placeholder { .c29::-webkit-input-placeholder {
color: #CECECE; color: #CECECE;
} }
.c28::-moz-placeholder { .c29::-moz-placeholder {
color: #CECECE; color: #CECECE;
} }
.c28:-ms-input-placeholder { .c29:-ms-input-placeholder {
color: #CECECE; color: #CECECE;
} }
.c28::placeholder { .c29::placeholder {
color: #CECECE; color: #CECECE;
} }
.c24 { .c25 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -830,13 +851,13 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -830,13 +851,13 @@ exports[`disable nft on landing page does not render nft information and card 1`
will-change: height; will-change: height;
} }
.c25 { .c26 {
min-height: 44px; min-height: 44px;
border-radius: 20px; border-radius: 20px;
width: initial; width: initial;
} }
.c31 { .c32 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -869,12 +890,12 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -869,12 +890,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
animation: none; animation: none;
} }
.c31:hover, .c32:hover,
.c31:active { .c32:active {
background-color: #F9F9F9; background-color: #F9F9F9;
} }
.c31:before { .c32:before {
background-size: 100%; background-size: 100%;
border-radius: inherit; border-radius: inherit;
position: absolute; position: absolute;
...@@ -885,15 +906,15 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -885,15 +906,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
content: ''; content: '';
} }
.c31:hover:before { .c32:hover:before {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c31:active:before { .c32:active:before {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c45 { .c46 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -926,12 +947,12 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -926,12 +947,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
animation: none; animation: none;
} }
.c45:hover, .c46:hover,
.c45:active { .c46:active {
background-color: #FC72FF; background-color: #FC72FF;
} }
.c45:before { .c46:before {
background-size: 100%; background-size: 100%;
border-radius: inherit; border-radius: inherit;
position: absolute; position: absolute;
...@@ -942,15 +963,15 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -942,15 +963,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
content: ''; content: '';
} }
.c45:hover:before { .c46:hover:before {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c45:active:before { .c46:active:before {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c27 { .c28 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -968,7 +989,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -968,7 +989,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
justify-content: space-between; justify-content: space-between;
} }
.c38 { .c39 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -985,12 +1006,12 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -985,12 +1006,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
line-height: 1rem; line-height: 1rem;
} }
.c38 span:hover { .c39 span:hover {
cursor: pointer; cursor: pointer;
color: #4a4a4a; color: #4a4a4a;
} }
.c39 { .c40 {
-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;
...@@ -999,7 +1020,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -999,7 +1020,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
padding: 8px 0px 0px 0px; padding: 8px 0px 0px 0px;
} }
.c32 { .c33 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -1015,35 +1036,35 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1015,35 +1036,35 @@ exports[`disable nft on landing page does not render nft information and card 1`
width: 100%; width: 100%;
} }
.c37 { .c38 {
margin: 0 0.25rem 0 0.35rem; margin: 0 0.25rem 0 0.35rem;
height: 35%; height: 35%;
margin-left: 8px; margin-left: 8px;
} }
.c37 path { .c38 path {
stroke: #222222; stroke: #222222;
stroke-width: 2px; stroke-width: 2px;
} }
.c46 { .c47 {
margin: 0 0.25rem 0 0.35rem; margin: 0 0.25rem 0 0.35rem;
height: 35%; height: 35%;
margin-left: 8px; margin-left: 8px;
} }
.c46 path { .c47 path {
stroke: #FFFFFF; stroke: #FFFFFF;
stroke-width: 2px; stroke-width: 2px;
} }
.c36 { .c37 {
margin: 0 0.25rem 0 0.25rem; margin: 0 0.25rem 0 0.25rem;
font-size: 20px; font-size: 20px;
font-weight: 535; font-weight: 535;
} }
.c29 { .c30 {
-webkit-filter: none; -webkit-filter: none;
filter: none; filter: none;
opacity: 1; opacity: 1;
...@@ -1100,7 +1121,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1100,7 +1121,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
padding-top: 12px; padding-top: 12px;
} }
.c41 { .c42 {
border-radius: 12px; border-radius: 12px;
height: 40px; height: 40px;
width: 40px; width: 40px;
...@@ -1115,21 +1136,21 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1115,21 +1136,21 @@ exports[`disable nft on landing page does not render nft information and card 1`
z-index: 2; z-index: 2;
} }
.c41:hover { .c42:hover {
cursor: pointer; cursor: pointer;
opacity: 0.8; opacity: 0.8;
} }
.c22 { .c23 {
height: 24px; height: 24px;
width: 24px; width: 24px;
} }
.c22 > * { .c23 > * {
fill: #7D7D7D; fill: #7D7D7D;
} }
.c20 { .c21 {
border: none; border: none;
background-color: transparent; background-color: transparent;
margin: 0; margin: 0;
...@@ -1138,35 +1159,45 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1138,35 +1159,45 @@ exports[`disable nft on landing page does not render nft information and card 1`
outline: none; outline: none;
} }
.c20:not([disabled]):hover { .c21:not([disabled]):hover {
opacity: 0.7; opacity: 0.7;
} }
.c21 { .c22 {
padding: 6px 12px; padding: 6px 12px;
border-radius: 16px; border-radius: 16px;
} }
.c19 { .c20 {
position: relative; position: relative;
} }
.c18 { .c19 {
color: #7D7D7D; color: #7D7D7D;
gap: 4px; gap: 4px;
font-weight: 485; font-weight: 485;
-webkit-transition-duration: 125ms;
transition-duration: 125ms;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-property: opacity,color,background-color;
transition-property: opacity,color,background-color;
} }
.c18:focus { .c19:focus {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c18:active { .c19:active {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c19:hover {
opacity: 0.6;
}
.c10 { .c10 {
margin-bottom: 10px; margin-bottom: 10px;
color: #7D7D7D; color: #7D7D7D;
...@@ -1177,7 +1208,23 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1177,7 +1208,23 @@ exports[`disable nft on landing page does not render nft information and card 1`
gap: 16px; gap: 16px;
} }
.c42 { .c14 {
color: #222222;
gap: 4px;
font-weight: 485;
}
.c14:focus {
-webkit-text-decoration: none;
text-decoration: none;
}
.c14:active {
-webkit-text-decoration: none;
text-decoration: none;
}
.c43 {
display: -webkit-inline-box; display: -webkit-inline-box;
display: -webkit-inline-flex; display: -webkit-inline-flex;
display: -ms-inline-flexbox; display: -ms-inline-flexbox;
...@@ -1194,7 +1241,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1194,7 +1241,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
height: 100%; height: 100%;
} }
.c23 { .c24 {
background-color: #F9F9F9; background-color: #F9F9F9;
border-radius: 16px; border-radius: 16px;
color: #7D7D7D; color: #7D7D7D;
...@@ -1206,7 +1253,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1206,7 +1253,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
position: relative; position: relative;
} }
.c23:before { .c24:before {
box-sizing: border-box; box-sizing: border-box;
background-size: 100%; background-size: 100%;
border-radius: inherit; border-radius: inherit;
...@@ -1220,15 +1267,15 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1220,15 +1267,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
border: 1px solid #F9F9F9; border: 1px solid #F9F9F9;
} }
.c23:hover:before { .c24:hover:before {
border-color: #98A1C014; border-color: #98A1C014;
} }
.c23:focus-within:before { .c24:focus-within:before {
border-color: #B8C0DC3d; border-color: #B8C0DC3d;
} }
.c44 { .c45 {
border-bottom: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF;
} }
...@@ -1255,7 +1302,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1255,7 +1302,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
overflow-x: hidden; overflow-x: hidden;
} }
.c51 { .c52 {
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -1279,7 +1326,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1279,7 +1326,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
height: calc(100vh - 48px); height: calc(100vh - 48px);
} }
.c52 { .c53 {
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -1300,7 +1347,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1300,7 +1347,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
height: calc(100vh - 48px); height: calc(100vh - 48px);
} }
.c53 { .c54 {
position: absolute; position: absolute;
top: 68px; top: 68px;
bottom: 0; bottom: 0;
...@@ -1313,7 +1360,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1313,7 +1360,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
height: 100%; height: 100%;
} }
.c54 { .c55 {
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -1341,11 +1388,11 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1341,11 +1388,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
pointer-events: none; pointer-events: none;
} }
.c54 * { .c55 * {
pointer-events: auto; pointer-events: auto;
} }
.c63 { .c64 {
display: -webkit-inline-box; display: -webkit-inline-box;
display: -webkit-inline-flex; display: -webkit-inline-flex;
display: -ms-inline-flexbox; display: -ms-inline-flexbox;
...@@ -1365,11 +1412,11 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1365,11 +1412,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
align-items: center; align-items: center;
} }
.c63:hover { .c64:hover {
color: #CECECE; color: #CECECE;
} }
.c55 { .c56 {
color: transparent; color: transparent;
font-size: 36px; font-size: 36px;
line-height: 44px; line-height: 44px;
...@@ -1381,7 +1428,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1381,7 +1428,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
-webkit-background-clip: text; -webkit-background-clip: text;
} }
.c57 { .c58 {
color: #7D7D7D; color: #7D7D7D;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
...@@ -1391,7 +1438,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1391,7 +1438,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
margin: 0 0 32px; margin: 0 0 32px;
} }
.c56 { .c57 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -1402,12 +1449,12 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1402,12 +1449,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
justify-content: center; justify-content: center;
} }
.c59 { .c60 {
padding: 16px 0px; padding: 16px 0px;
border-radius: 24px; border-radius: 24px;
} }
.c60 { .c61 {
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;
...@@ -1415,24 +1462,24 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1415,24 +1462,24 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: all 250ms ease; transition: all 250ms ease;
} }
.c60:hover { .c61:hover {
box-shadow: 0px 0px 16px 0px #ff00c7; box-shadow: 0px 0px 16px 0px #ff00c7;
} }
.c61 { .c62 {
margin: 0px; margin: 0px;
font-size: 16px; font-size: 16px;
font-weight: 535; font-weight: 535;
white-space: nowrap; white-space: nowrap;
} }
.c58 { .c59 {
max-width: 300px; max-width: 300px;
width: 100%; width: 100%;
pointer-events: auto; pointer-events: auto;
} }
.c62 { .c63 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -1452,11 +1499,11 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1452,11 +1499,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: 250ms ease opacity; transition: 250ms ease opacity;
} }
.c62:hover { .c63:hover {
opacity: 0.6; opacity: 0.6;
} }
.c64 { .c65 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -1473,7 +1520,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1473,7 +1520,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%);
} }
.c65 { .c66 {
display: grid; display: grid;
gap: 12px; gap: 12px;
width: 100%; width: 100%;
...@@ -1486,7 +1533,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1486,7 +1533,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.c71 { .c72 {
display: grid; display: grid;
gap: 12px; gap: 12px;
width: 100%; width: 100%;
...@@ -1541,7 +1588,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1541,7 +1588,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) {
.c83 { .c84 {
-webkit-flex-direction: row; -webkit-flex-direction: row;
-ms-flex-direction: row; -ms-flex-direction: row;
flex-direction: row; flex-direction: row;
...@@ -1553,7 +1600,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1553,7 +1600,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) {
.c85 { .c86 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -1562,63 +1609,63 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1562,63 +1609,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) {
.c100 { .c101 {
display: none; display: none;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c86 { .c87 {
display: block; display: block;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c93 { .c94 {
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) {
.c94 { .c95 {
margin: 0; margin: 0;
} }
} }
@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) {
.c72 { .c73 {
height: 260px; height: 260px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c72 { .c73 {
padding: 32px; padding: 32px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c68 { .c69 {
font-size: 28px; font-size: 28px;
line-height: 36px; line-height: 36px;
} }
} }
@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;
...@@ -1626,7 +1673,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1626,7 +1673,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) {
.c73 { .c74 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
max-width: 480px; max-width: 480px;
...@@ -1634,7 +1681,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1634,7 +1681,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) {
.c75 { .c76 {
height: 140px; height: 140px;
-webkit-flex-direction: row; -webkit-flex-direction: row;
-ms-flex-direction: row; -ms-flex-direction: row;
...@@ -1643,21 +1690,21 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1643,21 +1690,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) {
.c77 { .c78 {
font-size: 28px; font-size: 28px;
line-height: 36px; line-height: 36px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c78 { .c79 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c79 { .c80 {
width: auto; width: auto;
} }
} }
...@@ -1675,79 +1722,79 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1675,79 +1722,79 @@ exports[`disable nft on landing page does not render nft information and card 1`
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c51 { .c52 {
height: 100vh; height: 100vh;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c52 { .c53 {
height: 100vh; height: 100vh;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c55 { .c56 {
font-size: 48px; font-size: 48px;
line-height: 56px; line-height: 56px;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c55 { .c56 {
font-size: 64px; font-size: 64px;
line-height: 72px; line-height: 72px;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c57 { .c58 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c61 { .c62 {
font-size: 20px; font-size: 20px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c62 { .c63 {
visibility: visible; visibility: visible;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c64 { .c65 {
padding: 0 96px 5rem; padding: 0 96px 5rem;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c65 { .c66 {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 32px; gap: 32px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c65 { .c66 {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 32px; gap: 32px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c71 { .c72 {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 32px; gap: 32px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c71 { .c72 {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
gap: 32px; gap: 32px;
} }
...@@ -1781,17 +1828,17 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1781,17 +1828,17 @@ exports[`disable nft on landing page does not render nft information and card 1`
<div <div
class="c7 c8 c11 c12" class="c7 c8 c11 c12"
> >
<div <button
class="c13 css-n8z49y" class="c13 c14"
> >
Swap Swap
</div> </button>
<div <div
class="c14" class="c15"
> >
<div> <div>
<button <button
class="c15 c16 c17 c18" class="c16 c17 c18 c19"
data-testid="buy-fiat-button" data-testid="buy-fiat-button"
> >
Buy Buy
...@@ -1803,19 +1850,19 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1803,19 +1850,19 @@ exports[`disable nft on landing page does not render nft information and card 1`
class="c7 c8 c11" class="c7 c8 c11"
> >
<div <div
class="c19" class="c20"
> >
<button <button
aria-label="Transaction Settings" aria-label="Transaction Settings"
class="c20" class="c21"
data-testid="open-settings-dialog-button" data-testid="open-settings-dialog-button"
id="open-settings-dialog-button" id="open-settings-dialog-button"
> >
<div <div
class="c7 c8 c21" class="c7 c8 c22"
> >
<svg <svg
class="c22" class="c23"
fill="none" fill="none"
height="24" height="24"
viewBox="0 0 24 24" viewBox="0 0 24 24"
...@@ -1836,23 +1883,23 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1836,23 +1883,23 @@ exports[`disable nft on landing page does not render nft information and card 1`
style="display: relative;" style="display: relative;"
> >
<div <div
class="c23" class="c24"
> >
<div <div
class="c24" class="c25"
id="swap-currency-input" id="swap-currency-input"
> >
<div <div
class="c25" class="c26"
> >
<div <div
class="c26 css-142zc9n" class="c27 css-142zc9n"
style="user-select: none;" style="user-select: none;"
> >
You pay You pay
</div> </div>
<div <div
class="c27" class="c28"
> >
<div <div
style="display: flex; flex-grow: 1;" style="display: flex; flex-grow: 1;"
...@@ -1860,7 +1907,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1860,7 +1907,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
<input <input
autocomplete="off" autocomplete="off"
autocorrect="off" autocorrect="off"
class="c28 c29 token-amount-input" class="c29 c30 token-amount-input"
id="swap-currency-input" id="swap-currency-input"
inputmode="decimal" inputmode="decimal"
maxlength="79" maxlength="79"
...@@ -1874,40 +1921,40 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1874,40 +1921,40 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
<div> <div>
<div <div
class="c14" class="c15"
> >
<button <button
class="c15 c16 c30 c31 open-currency-select-button" class="c16 c17 c31 c32 open-currency-select-button"
> >
<span <span
class="c32" class="c33"
> >
<div <div
class="c7 c8 c11" class="c7 c8 c11"
> >
<div <div
class="c33" class="c34"
style="height: 24px; width: 24px; margin-right: 2px;" style="height: 24px; width: 24px; margin-right: 2px;"
> >
<div <div
class="c34" class="c35"
> >
<img <img
alt="ETH logo" alt="ETH logo"
class="c35" class="c36"
loading="lazy" loading="lazy"
src="ethereum-logo.png" src="ethereum-logo.png"
/> />
</div> </div>
</div> </div>
<span <span
class="c36 token-symbol-container" class="c37 token-symbol-container"
> >
ETH ETH
</span> </span>
</div> </div>
<svg <svg
class="c37" class="c38"
> >
dropdown.svg dropdown.svg
</svg> </svg>
...@@ -1917,13 +1964,13 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1917,13 +1964,13 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
</div> </div>
<div <div
class="c38 c39" class="c39 c40"
> >
<div <div
class="c7 c8 c9" class="c7 c8 c9"
> >
<div <div
class="c40" class="c41"
/> />
<span /> <span />
</div> </div>
...@@ -1932,10 +1979,10 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1932,10 +1979,10 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
</div> </div>
<div <div
class="c41" class="c42"
> >
<div <div
class="c42" class="c43"
color="#222222" color="#222222"
data-testid="swap-currency-button" data-testid="swap-currency-button"
> >
...@@ -1964,27 +2011,27 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1964,27 +2011,27 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
</div> </div>
<div <div
class="c43" class="c44"
> >
<div> <div>
<div <div
class="c23 c44" class="c24 c45"
> >
<div <div
class="c24" class="c25"
id="swap-currency-output" id="swap-currency-output"
> >
<div <div
class="c25" class="c26"
> >
<div <div
class="c26 css-142zc9n" class="c27 css-142zc9n"
style="user-select: none;" style="user-select: none;"
> >
You receive You receive
</div> </div>
<div <div
class="c27" class="c28"
> >
<div <div
style="display: flex; flex-grow: 1;" style="display: flex; flex-grow: 1;"
...@@ -1992,7 +2039,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1992,7 +2039,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
<input <input
autocomplete="off" autocomplete="off"
autocorrect="off" autocorrect="off"
class="c28 c29 token-amount-input" class="c29 c30 token-amount-input"
id="swap-currency-output" id="swap-currency-output"
inputmode="decimal" inputmode="decimal"
maxlength="79" maxlength="79"
...@@ -2006,25 +2053,25 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2006,25 +2053,25 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
<div> <div>
<div <div
class="c14" class="c15"
> >
<button <button
class="c15 c16 c30 c45 open-currency-select-button" class="c16 c17 c31 c46 open-currency-select-button"
> >
<span <span
class="c32" class="c33"
> >
<div <div
class="c7 c8 c11" class="c7 c8 c11"
> >
<span <span
class="c36 token-symbol-container" class="c37 token-symbol-container"
> >
Select token Select token
</span> </span>
</div> </div>
<svg <svg
class="c46" class="c47"
> >
dropdown.svg dropdown.svg
</svg> </svg>
...@@ -2034,13 +2081,13 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2034,13 +2081,13 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
</div> </div>
<div <div
class="c38 c39" class="c39 c40"
> >
<div <div
class="c7 c8 c9" class="c7 c8 c9"
> >
<div <div
class="c40" class="c41"
/> />
<span /> <span />
</div> </div>
...@@ -2051,11 +2098,11 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2051,11 +2098,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
<div> <div>
<button <button
class="c47 c16 c48" class="c48 c17 c49"
font-weight="535" font-weight="535"
> >
<div <div
class="c49 c50" class="c50 c51"
/> />
Connect wallet Connect wallet
</button> </button>
...@@ -2067,53 +2114,53 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2067,53 +2114,53 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a> </a>
</div> </div>
<div <div
class="c51" class="c52"
/> />
<div <div
class="c52" class="c53"
> >
<div <div
class="c53" class="c54"
/> />
</div> </div>
<div <div
class="c54" class="c55"
> >
<h1 <h1
class="c55" class="c56"
> >
Trade crypto with confidence Trade crypto with confidence
</h1> </h1>
<div <div
class="c56" class="c57"
> >
<div <div
class="c57" class="c58"
> >
Buy, sell, and explore tokens Buy, sell, and explore tokens
</div> </div>
</div> </div>
<span <span
class="c58" class="c59"
> >
<a <a
class="c2 c16 c59 c60" class="c2 c17 c60 c61"
href="/swap" href="/swap"
> >
<p <p
class="c61" class="c62"
> >
Get started Get started
</p> </p>
</a> </a>
</span> </span>
<div <div
class="c62" class="c63"
> >
Learn more Learn more
</div> </div>
<a <a
class="c63" class="c64"
href="https://uniswapwallet.onelink.me/8q3y/79gveilz" href="https://uniswapwallet.onelink.me/8q3y/79gveilz"
> >
<svg <svg
...@@ -2130,32 +2177,32 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2130,32 +2177,32 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a> </a>
</div> </div>
<div <div
class="c64" class="c65"
> >
<div <div
class="c65" class="c66"
cols="1" cols="1"
> >
<a <a
class="c66" class="c67"
href="/swap" href="/swap"
> >
<div <div
class="c67" class="c68"
> >
<div <div
class="c68" class="c69"
> >
Swap tokens Swap tokens
</div> </div>
</div> </div>
<div <div
class="c69" class="c70"
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="c69 c70" class="c70 c71"
type="Primary" type="Primary"
> >
Trade Tokens Trade Tokens
...@@ -2164,20 +2211,20 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2164,20 +2211,20 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a> </a>
</div> </div>
<div <div
class="c71" class="c72"
cols="3" cols="3"
> >
<a <a
class="c72" class="c73"
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="c67" class="c68"
> >
<div <div
class="c68" class="c69"
> >
Buy crypto Buy crypto
</div> </div>
...@@ -2204,12 +2251,12 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2204,12 +2251,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
</svg> </svg>
</div> </div>
<div <div
class="c73" class="c74"
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="c73 c70" class="c74 c71"
type="Secondary" type="Secondary"
> >
Buy now Buy now
...@@ -2217,30 +2264,30 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2217,30 +2264,30 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
</a> </a>
<a <a
class="c72" class="c73"
href="/pools" href="/pools"
> >
<div <div
class="c67" class="c68"
> >
<div <div
class="c68" class="c69"
> >
Earn Earn
</div> </div>
<img <img
alt="Analytics" alt="Analytics"
class="c74" class="c75"
src="aboutArrowLight.png" src="aboutArrowLight.png"
/> />
</div> </div>
<div <div
class="c73" class="c74"
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="c73 c70" class="c74 c71"
type="Secondary" type="Secondary"
> >
Provide liquidity Provide liquidity
...@@ -2248,16 +2295,16 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2248,16 +2295,16 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
</a> </a>
<a <a
class="c72" class="c73"
href="https://docs.uniswap.org" href="https://docs.uniswap.org"
rel="noopenener noreferrer" rel="noopenener noreferrer"
target="_blank" target="_blank"
> >
<div <div
class="c67" class="c68"
> >
<div <div
class="c68" class="c69"
> >
Build dApps Build dApps
</div> </div>
...@@ -2284,12 +2331,12 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2284,12 +2331,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
</svg> </svg>
</div> </div>
<div <div
class="c73" class="c74"
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="c73 c70" class="c74 c71"
type="Secondary" type="Secondary"
> >
Developer docs Developer docs
...@@ -2297,28 +2344,28 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2297,28 +2344,28 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
</a> </a>
</div> </div>
<div
class="c75"
>
<div <div
class="c76" class="c76"
> >
<div <div
class="c77" class="c77"
>
<div
class="c78"
> >
Powered by the Uniswap Protocol Powered by the Uniswap Protocol
</div> </div>
<div <div
class="c78" class="c79"
> >
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="c79" class="c80"
> >
<a <a
class="c80 c81 c82" class="c81 c82 c83"
href="https://uniswap.org" href="https://uniswap.org"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2329,53 +2376,53 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2329,53 +2376,53 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
</div> </div>
<div <div
class="c83" class="c84"
> >
<div <div
class="c84 c85" class="c85 c86"
> >
<img <img
alt="Uniswap Logo" alt="Uniswap Logo"
class="c86" class="c87"
src="unicornEmbossLight.png" src="unicornEmbossLight.png"
/> />
<div <div
class="c87" class="c88"
> >
<a <a
class="c88" class="c89"
href="https://discord.gg/FCfyBSbCU5" href="https://discord.gg/FCfyBSbCU5"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c89" class="c90"
size="32" size="32"
> >
discord.svg discord.svg
</svg> </svg>
</a> </a>
<a <a
class="c88" class="c89"
href="https://twitter.com/uniswap" href="https://twitter.com/uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c90" class="c91"
size="32" size="32"
> >
twitter-safe.svg twitter-safe.svg
</svg> </svg>
</a> </a>
<a <a
class="c88" class="c89"
href="https://github.com/Uniswap" href="https://github.com/Uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c91" class="c92"
size="32" size="32"
> >
github.svg github.svg
...@@ -2383,7 +2430,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2383,7 +2430,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a> </a>
</div> </div>
<span <span
class="c92" class="c93"
> >
© ©
2023 2023
...@@ -2391,45 +2438,45 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2391,45 +2438,45 @@ exports[`disable nft on landing page does not render nft information and card 1`
</span> </span>
</div> </div>
<div <div
class="c93" class="c94"
> >
<div <div
class="c94" class="c95"
> >
<span <span
class="c95" class="c96"
> >
App App
</span> </span>
<a <a
class="c96 c97" class="c97 c98"
href="/swap" href="/swap"
> >
Swap Swap
</a> </a>
<a <a
class="c96 c97" class="c97 c98"
href="/tokens" href="/tokens"
> >
Tokens Tokens
</a> </a>
<a <a
class="c96 c97" class="c97 c98"
href="/pools" href="/pools"
> >
Pools Pools
</a> </a>
</div> </div>
<div <div
class="c94" class="c95"
> >
<span <span
class="c95" class="c96"
> >
Protocol Protocol
</span> </span>
<a <a
class="c98 c99" class="c99 c100"
href="https://uniswap.org/community" href="https://uniswap.org/community"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2437,7 +2484,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2437,7 +2484,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
Community Community
</a> </a>
<a <a
class="c98 c99" class="c99 c100"
href="https://uniswap.org/governance" href="https://uniswap.org/governance"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2445,7 +2492,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2445,7 +2492,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
Governance Governance
</a> </a>
<a <a
class="c98 c99" class="c99 c100"
href="https://uniswap.org/developers" href="https://uniswap.org/developers"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2454,15 +2501,15 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2454,15 +2501,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a> </a>
</div> </div>
<div <div
class="c94" class="c95"
> >
<span <span
class="c95" class="c96"
> >
Company Company
</span> </span>
<a <a
class="c98 c99" class="c99 c100"
href="https://boards.greenhouse.io/uniswaplabs" href="https://boards.greenhouse.io/uniswaplabs"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2470,7 +2517,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2470,7 +2517,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
Careers Careers
</a> </a>
<a <a
class="c98 c99" class="c99 c100"
href="https://uniswap.org/blog" href="https://uniswap.org/blog"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2479,15 +2526,15 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2479,15 +2526,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a> </a>
</div> </div>
<div <div
class="c94" class="c95"
> >
<span <span
class="c95" class="c96"
> >
Get Help Get Help
</span> </span>
<a <a
class="c98 c99" class="c99 c100"
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"
...@@ -2495,7 +2542,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2495,7 +2542,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
Contact Us Contact Us
</a> </a>
<a <a
class="c98 c99" class="c99 c100"
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"
...@@ -2505,50 +2552,50 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2505,50 +2552,50 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
</div> </div>
<div <div
class="c84 c100" class="c85 c101"
> >
<img <img
alt="Uniswap Logo" alt="Uniswap Logo"
class="c86" class="c87"
src="unicornEmbossLight.png" src="unicornEmbossLight.png"
/> />
<div <div
class="c87" class="c88"
> >
<a <a
class="c88" class="c89"
href="https://discord.gg/FCfyBSbCU5" href="https://discord.gg/FCfyBSbCU5"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c89" class="c90"
size="32" size="32"
> >
discord.svg discord.svg
</svg> </svg>
</a> </a>
<a <a
class="c88" class="c89"
href="https://twitter.com/uniswap" href="https://twitter.com/uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c90" class="c91"
size="32" size="32"
> >
twitter-safe.svg twitter-safe.svg
</svg> </svg>
</a> </a>
<a <a
class="c88" class="c89"
href="https://github.com/Uniswap" href="https://github.com/Uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c91" class="c92"
size="32" size="32"
> >
github.svg github.svg
...@@ -2556,7 +2603,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2556,7 +2603,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a> </a>
</div> </div>
<span <span
class="c92" class="c93"
> >
© ©
2023 2023
...@@ -2576,7 +2623,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2576,7 +2623,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
min-width: 0; min-width: 0;
} }
.c15 { .c16 {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
min-width: 0; min-width: 0;
...@@ -2599,7 +2646,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2599,7 +2646,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
border-radius: 4px; border-radius: 4px;
} }
.c47 { .c48 {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
min-width: 0; min-width: 0;
...@@ -2653,15 +2700,36 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2653,15 +2700,36 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
width: fit-content; width: fit-content;
} }
.c27 {
color: #7D7D7D;
}
.c13 { .c13 {
color: #222222; outline: none;
border: none;
font-size: inherit;
padding: 0;
margin: 0;
background: none;
cursor: pointer;
-webkit-transition-duration: 125ms;
transition-duration: 125ms;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-property: opacity,color,background-color;
transition-property: opacity,color,background-color;
} }
.c26 { .c13:hover {
color: #7D7D7D; opacity: 0.6;
} }
.c99 { .c13:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c100 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -2672,15 +2740,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2672,15 +2740,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
font-weight: 500; font-weight: 500;
} }
.c99:hover { .c100:hover {
opacity: 0.6; opacity: 0.6;
} }
.c99:active { .c100:active {
opacity: 0.4; opacity: 0.4;
} }
.c97 { .c98 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -2691,36 +2759,36 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2691,36 +2759,36 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
font-weight: 500; font-weight: 500;
} }
.c97:hover { .c98:hover {
opacity: 0.6; opacity: 0.6;
} }
.c97:active { .c98:active {
opacity: 0.4; opacity: 0.4;
} }
.c90 { .c91 {
height: 32px; height: 32px;
width: 32px; width: 32px;
fill: #98A1C0; fill: #98A1C0;
opacity: 1; opacity: 1;
} }
.c91 { .c92 {
height: 32px; height: 32px;
width: 32px; width: 32px;
fill: #98A1C0; fill: #98A1C0;
opacity: 1; opacity: 1;
} }
.c92 { .c93 {
height: 32px; height: 32px;
width: 32px; width: 32px;
fill: #98A1C0; fill: #98A1C0;
opacity: 1; opacity: 1;
} }
.c84 { .c85 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2733,7 +2801,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2733,7 +2801,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
max-width: 1440px; max-width: 1440px;
} }
.c85 { .c86 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2743,24 +2811,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2743,24 +2811,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
flex-direction: column; flex-direction: column;
} }
.c86 { .c87 {
display: none; display: none;
} }
.c101 { .c102 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
} }
.c87 { .c88 {
width: 72px; width: 72px;
height: 72px; height: 72px;
display: none; display: none;
} }
.c88 { .c89 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2773,20 +2841,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2773,20 +2841,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
margin: 20px 0 0 0; margin: 20px 0 0 0;
} }
.c89 { .c90 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
} }
.c94 { .c95 {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 12px; gap: 12px;
} }
.c95 { .c96 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2799,32 +2867,32 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2799,32 +2867,32 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
margin: 20px 0 0 0; margin: 20px 0 0 0;
} }
.c96 { .c97 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
font-weight: 535; font-weight: 535;
} }
.c100 { .c101 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
color: #7D7D7D; color: #7D7D7D;
} }
.c98 { .c99 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
color: #7D7D7D; color: #7D7D7D;
} }
.c93 { .c94 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
margin: 1rem 0 0 0; margin: 1rem 0 0 0;
color: #CECECE; color: #CECECE;
} }
.c66 { .c67 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2852,11 +2920,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2852,11 +2920,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 #CECECE; border: 1px solid #CECECE;
} }
.c71 { .c72 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2884,11 +2952,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2884,11 +2952,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease border; transition: 250ms ease border;
} }
.c71:hover { .c72:hover {
border: 1px solid #CECECE; border: 1px solid #CECECE;
} }
.c73 { .c74 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2916,11 +2984,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2916,11 +2984,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease border; transition: 250ms ease border;
} }
.c73:hover { .c74:hover {
border: 1px solid #CECECE; border: 1px solid #CECECE;
} }
.c67 { .c68 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2935,13 +3003,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2935,13 +3003,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
justify-content: space-between; justify-content: space-between;
} }
.c68 { .c69 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
font-weight: 535; font-weight: 535;
} }
.c69 { .c70 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2956,7 +3024,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2956,7 +3024,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
max-width: 480px; max-width: 480px;
} }
.c74 { .c75 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2971,7 +3039,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2971,7 +3039,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
max-width: 480px; max-width: 480px;
} }
.c70 { .c71 {
color: #FC72FF; color: #FC72FF;
font-weight: 535; font-weight: 535;
margin: 24px 0 0; margin: 24px 0 0;
...@@ -2980,18 +3048,18 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2980,18 +3048,18 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease opacity; transition: 250ms ease opacity;
} }
.c70:hover { .c71:hover {
opacity: 0.6; opacity: 0.6;
} }
.c75 { .c76 {
min-width: 20px; min-width: 20px;
min-height: 20px; min-height: 20px;
max-height: 48px; max-height: 48px;
max-width: 48px; max-width: 48px;
} }
.c50 { .c51 {
background-color: transparent; background-color: transparent;
bottom: 0; bottom: 0;
border-radius: inherit; border-radius: inherit;
...@@ -3005,7 +3073,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3005,7 +3073,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
width: 100%; width: 100%;
} }
.c16 { .c17 {
padding: 16px; padding: 16px;
width: 100%; width: 100%;
line-height: 24px; line-height: 24px;
...@@ -3044,25 +3112,25 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3044,25 +3112,25 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
} }
.c16:disabled { .c17:disabled {
opacity: 50%; opacity: 50%;
cursor: auto; cursor: auto;
pointer-events: none; pointer-events: none;
} }
.c16 > * { .c17 > * {
-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;
} }
.c16 > a { .c17 > a {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c81 { .c82 {
padding: 16px; padding: 16px;
width: 200px; width: 200px;
line-height: 24px; line-height: 24px;
...@@ -3101,58 +3169,58 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3101,58 +3169,58 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
} }
.c81:disabled { .c82:disabled {
opacity: 50%; opacity: 50%;
cursor: auto; cursor: auto;
pointer-events: none; pointer-events: none;
} }
.c81 > * { .c82 > * {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.c81 > a { .c82 > a {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c48 { .c49 {
background-color: #FFEFFF; background-color: #FFEFFF;
color: #FC72FF; color: #FC72FF;
font-size: 20px; font-size: 20px;
font-weight: 535; font-weight: 535;
} }
.c48:focus { .c49:focus {
box-shadow: 0 0 0 1pt #FFEFFF; box-shadow: 0 0 0 1pt #FFEFFF;
background-color: #FFEFFF; background-color: #FFEFFF;
} }
.c48:hover { .c49:hover {
background-color: #FFEFFF; background-color: #FFEFFF;
} }
.c48:active { .c49:active {
box-shadow: 0 0 0 1pt #FFEFFF; box-shadow: 0 0 0 1pt #FFEFFF;
background-color: #FFEFFF; background-color: #FFEFFF;
} }
.c48:hover .c49 { .c49:hover .c50 {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c48:active .c49 { .c49:active .c50 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c48:disabled { .c49:disabled {
opacity: 0.4; opacity: 0.4;
} }
.c48:disabled:hover { .c49:disabled:hover {
cursor: auto; cursor: auto;
background-color: transparent; background-color: transparent;
box-shadow: none; box-shadow: none;
...@@ -3160,7 +3228,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3160,7 +3228,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
outline: none; outline: none;
} }
.c30 { .c31 {
background-color: #FFFFFF; background-color: #FFFFFF;
color: #7D7D7D; color: #7D7D7D;
border: 1px solid #22222212; border: 1px solid #22222212;
...@@ -3168,15 +3236,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3168,15 +3236,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
font-weight: 535; font-weight: 535;
} }
.c30:hover { .c31:hover {
background-color: #ececec; background-color: #ececec;
} }
.c30:active { .c31:active {
background-color: #e0e0e0; background-color: #e0e0e0;
} }
.c82 { .c83 {
background-color: transparent; background-color: transparent;
color: #FC72FF; color: #FC72FF;
display: -webkit-box; display: -webkit-box;
...@@ -3193,27 +3261,27 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3193,27 +3261,27 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
align-items: center; align-items: center;
} }
.c82:focus { .c83:focus {
-webkit-text-decoration: underline; -webkit-text-decoration: underline;
text-decoration: underline; text-decoration: underline;
} }
.c82:hover { .c83:hover {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c82:active { .c83:active {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c82:disabled { .c83:disabled {
opacity: 50%; opacity: 50%;
cursor: auto; cursor: auto;
} }
.c17 { .c18 {
padding: 0; padding: 0;
width: -webkit-fit-content; width: -webkit-fit-content;
width: -moz-fit-content; width: -moz-fit-content;
...@@ -3223,26 +3291,26 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3223,26 +3291,26 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
text-decoration: none; text-decoration: none;
} }
.c17:focus { .c18:focus {
-webkit-text-decoration: underline; -webkit-text-decoration: underline;
text-decoration: underline; text-decoration: underline;
} }
.c17:hover { .c18:hover {
opacity: 0.9; opacity: 0.9;
} }
.c17:active { .c18:active {
-webkit-text-decoration: underline; -webkit-text-decoration: underline;
text-decoration: underline; text-decoration: underline;
} }
.c17:disabled { .c18:disabled {
opacity: 50%; opacity: 50%;
cursor: auto; cursor: auto;
} }
.c76 { .c77 {
height: 340px; height: 340px;
width: 100%; width: 100%;
border-radius: 32px; border-radius: 32px;
...@@ -3268,7 +3336,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3268,7 +3336,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%);
} }
.c77 { .c78 {
color: white; color: white;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -3282,20 +3350,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3282,20 +3350,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
flex-direction: column; flex-direction: column;
} }
.c78 { .c79 {
font-weight: 535; font-weight: 535;
font-size: 28px; font-size: 28px;
line-height: 36px; line-height: 36px;
} }
.c79 { .c80 {
margin: 10px 10px 0 0; margin: 10px 10px 0 0;
font-weight: 535; font-weight: 535;
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
} }
.c80 { .c81 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -3309,22 +3377,22 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3309,22 +3377,22 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease opacity; transition: 250ms ease opacity;
} }
.c80:hover { .c81:hover {
opacity: 0.6; opacity: 0.6;
} }
.c83 { .c84 {
color: white; color: white;
border: 1px solid white; border: 1px solid white;
} }
.c43 { .c44 {
display: grid; display: grid;
grid-auto-rows: auto; grid-auto-rows: auto;
grid-row-gap: 4px; grid-row-gap: 4px;
} }
.c40 { .c41 {
-webkit-filter: none; -webkit-filter: none;
filter: none; filter: none;
opacity: 1; opacity: 1;
...@@ -3332,12 +3400,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3332,12 +3400,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: opacity 250ms ease-in-out; transition: opacity 250ms ease-in-out;
} }
.c14 { .c15 {
display: inline-block; display: inline-block;
height: inherit; height: inherit;
} }
.c35 { .c36 {
opacity: 0; opacity: 0;
-webkit-transition: opacity 250ms ease-in; -webkit-transition: opacity 250ms ease-in;
transition: opacity 250ms ease-in; transition: opacity 250ms ease-in;
...@@ -3346,7 +3414,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3346,7 +3414,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
border-radius: 50%; border-radius: 50%;
} }
.c34 { .c35 {
width: 24px; width: 24px;
height: 24px; height: 24px;
background: #22222212; background: #22222212;
...@@ -3356,7 +3424,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3356,7 +3424,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
border-radius: 50%; border-radius: 50%;
} }
.c33 { .c34 {
position: relative; position: relative;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -3364,7 +3432,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3364,7 +3432,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
display: flex; display: flex;
} }
.c28 { .c29 {
color: #222222; color: #222222;
pointer-events: auto; pointer-events: auto;
width: 0; width: 0;
...@@ -3385,36 +3453,36 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3385,36 +3453,36 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
text-align: right; text-align: right;
} }
.c28::-webkit-search-decoration { .c29::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }
.c28 [type='number'] { .c29 [type='number'] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }
.c28::-webkit-outer-spin-button, .c29::-webkit-outer-spin-button,
.c28::-webkit-inner-spin-button { .c29::-webkit-inner-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
} }
.c28::-webkit-input-placeholder { .c29::-webkit-input-placeholder {
color: #CECECE; color: #CECECE;
} }
.c28::-moz-placeholder { .c29::-moz-placeholder {
color: #CECECE; color: #CECECE;
} }
.c28:-ms-input-placeholder { .c29:-ms-input-placeholder {
color: #CECECE; color: #CECECE;
} }
.c28::placeholder { .c29::placeholder {
color: #CECECE; color: #CECECE;
} }
.c24 { .c25 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -3431,13 +3499,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3431,13 +3499,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
will-change: height; will-change: height;
} }
.c25 { .c26 {
min-height: 44px; min-height: 44px;
border-radius: 20px; border-radius: 20px;
width: initial; width: initial;
} }
.c31 { .c32 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -3470,12 +3538,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3470,12 +3538,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
animation: none; animation: none;
} }
.c31:hover, .c32:hover,
.c31:active { .c32:active {
background-color: #F9F9F9; background-color: #F9F9F9;
} }
.c31:before { .c32:before {
background-size: 100%; background-size: 100%;
border-radius: inherit; border-radius: inherit;
position: absolute; position: absolute;
...@@ -3486,15 +3554,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3486,15 +3554,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
content: ''; content: '';
} }
.c31:hover:before { .c32:hover:before {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c31:active:before { .c32:active:before {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c45 { .c46 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -3527,12 +3595,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3527,12 +3595,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
animation: none; animation: none;
} }
.c45:hover, .c46:hover,
.c45:active { .c46:active {
background-color: #FC72FF; background-color: #FC72FF;
} }
.c45:before { .c46:before {
background-size: 100%; background-size: 100%;
border-radius: inherit; border-radius: inherit;
position: absolute; position: absolute;
...@@ -3543,15 +3611,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3543,15 +3611,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
content: ''; content: '';
} }
.c45:hover:before { .c46:hover:before {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c45:active:before { .c46:active:before {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c27 { .c28 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -3569,7 +3637,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3569,7 +3637,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
justify-content: space-between; justify-content: space-between;
} }
.c38 { .c39 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -3586,12 +3654,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3586,12 +3654,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
line-height: 1rem; line-height: 1rem;
} }
.c38 span:hover { .c39 span:hover {
cursor: pointer; cursor: pointer;
color: #4a4a4a; color: #4a4a4a;
} }
.c39 { .c40 {
-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;
...@@ -3600,7 +3668,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3600,7 +3668,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
padding: 8px 0px 0px 0px; padding: 8px 0px 0px 0px;
} }
.c32 { .c33 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -3616,35 +3684,35 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3616,35 +3684,35 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
width: 100%; width: 100%;
} }
.c37 { .c38 {
margin: 0 0.25rem 0 0.35rem; margin: 0 0.25rem 0 0.35rem;
height: 35%; height: 35%;
margin-left: 8px; margin-left: 8px;
} }
.c37 path { .c38 path {
stroke: #222222; stroke: #222222;
stroke-width: 2px; stroke-width: 2px;
} }
.c46 { .c47 {
margin: 0 0.25rem 0 0.35rem; margin: 0 0.25rem 0 0.35rem;
height: 35%; height: 35%;
margin-left: 8px; margin-left: 8px;
} }
.c46 path { .c47 path {
stroke: #FFFFFF; stroke: #FFFFFF;
stroke-width: 2px; stroke-width: 2px;
} }
.c36 { .c37 {
margin: 0 0.25rem 0 0.25rem; margin: 0 0.25rem 0 0.25rem;
font-size: 20px; font-size: 20px;
font-weight: 535; font-weight: 535;
} }
.c29 { .c30 {
-webkit-filter: none; -webkit-filter: none;
filter: none; filter: none;
opacity: 1; opacity: 1;
...@@ -3701,7 +3769,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3701,7 +3769,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
padding-top: 12px; padding-top: 12px;
} }
.c41 { .c42 {
border-radius: 12px; border-radius: 12px;
height: 40px; height: 40px;
width: 40px; width: 40px;
...@@ -3716,21 +3784,21 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3716,21 +3784,21 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
z-index: 2; z-index: 2;
} }
.c41:hover { .c42:hover {
cursor: pointer; cursor: pointer;
opacity: 0.8; opacity: 0.8;
} }
.c22 { .c23 {
height: 24px; height: 24px;
width: 24px; width: 24px;
} }
.c22 > * { .c23 > * {
fill: #7D7D7D; fill: #7D7D7D;
} }
.c20 { .c21 {
border: none; border: none;
background-color: transparent; background-color: transparent;
margin: 0; margin: 0;
...@@ -3739,35 +3807,45 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3739,35 +3807,45 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
outline: none; outline: none;
} }
.c20:not([disabled]):hover { .c21:not([disabled]):hover {
opacity: 0.7; opacity: 0.7;
} }
.c21 { .c22 {
padding: 6px 12px; padding: 6px 12px;
border-radius: 16px; border-radius: 16px;
} }
.c19 { .c20 {
position: relative; position: relative;
} }
.c18 { .c19 {
color: #7D7D7D; color: #7D7D7D;
gap: 4px; gap: 4px;
font-weight: 485; font-weight: 485;
-webkit-transition-duration: 125ms;
transition-duration: 125ms;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-property: opacity,color,background-color;
transition-property: opacity,color,background-color;
} }
.c18:focus { .c19:focus {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c18:active { .c19:active {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c19:hover {
opacity: 0.6;
}
.c10 { .c10 {
margin-bottom: 10px; margin-bottom: 10px;
color: #7D7D7D; color: #7D7D7D;
...@@ -3778,7 +3856,23 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3778,7 +3856,23 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
gap: 16px; gap: 16px;
} }
.c42 { .c14 {
color: #222222;
gap: 4px;
font-weight: 485;
}
.c14:focus {
-webkit-text-decoration: none;
text-decoration: none;
}
.c14:active {
-webkit-text-decoration: none;
text-decoration: none;
}
.c43 {
display: -webkit-inline-box; display: -webkit-inline-box;
display: -webkit-inline-flex; display: -webkit-inline-flex;
display: -ms-inline-flexbox; display: -ms-inline-flexbox;
...@@ -3795,7 +3889,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3795,7 +3889,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
height: 100%; height: 100%;
} }
.c23 { .c24 {
background-color: #F9F9F9; background-color: #F9F9F9;
border-radius: 16px; border-radius: 16px;
color: #7D7D7D; color: #7D7D7D;
...@@ -3807,7 +3901,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3807,7 +3901,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
position: relative; position: relative;
} }
.c23:before { .c24:before {
box-sizing: border-box; box-sizing: border-box;
background-size: 100%; background-size: 100%;
border-radius: inherit; border-radius: inherit;
...@@ -3821,15 +3915,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3821,15 +3915,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
border: 1px solid #F9F9F9; border: 1px solid #F9F9F9;
} }
.c23:hover:before { .c24:hover:before {
border-color: #98A1C014; border-color: #98A1C014;
} }
.c23:focus-within:before { .c24:focus-within:before {
border-color: #B8C0DC3d; border-color: #B8C0DC3d;
} }
.c44 { .c45 {
border-bottom: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF;
} }
...@@ -3856,7 +3950,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3856,7 +3950,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
overflow-x: hidden; overflow-x: hidden;
} }
.c51 { .c52 {
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -3880,7 +3974,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3880,7 +3974,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
height: calc(100vh - 48px); height: calc(100vh - 48px);
} }
.c52 { .c53 {
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -3901,7 +3995,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3901,7 +3995,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
height: calc(100vh - 48px); height: calc(100vh - 48px);
} }
.c53 { .c54 {
position: absolute; position: absolute;
top: 68px; top: 68px;
bottom: 0; bottom: 0;
...@@ -3914,7 +4008,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3914,7 +4008,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
height: 100%; height: 100%;
} }
.c54 { .c55 {
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -3942,11 +4036,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3942,11 +4036,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
pointer-events: none; pointer-events: none;
} }
.c54 * { .c55 * {
pointer-events: auto; pointer-events: auto;
} }
.c63 { .c64 {
display: -webkit-inline-box; display: -webkit-inline-box;
display: -webkit-inline-flex; display: -webkit-inline-flex;
display: -ms-inline-flexbox; display: -ms-inline-flexbox;
...@@ -3966,11 +4060,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3966,11 +4060,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
align-items: center; align-items: center;
} }
.c63:hover { .c64:hover {
color: #CECECE; color: #CECECE;
} }
.c55 { .c56 {
color: transparent; color: transparent;
font-size: 36px; font-size: 36px;
line-height: 44px; line-height: 44px;
...@@ -3982,7 +4076,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3982,7 +4076,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
-webkit-background-clip: text; -webkit-background-clip: text;
} }
.c57 { .c58 {
color: #7D7D7D; color: #7D7D7D;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
...@@ -3992,7 +4086,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3992,7 +4086,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
margin: 0 0 32px; margin: 0 0 32px;
} }
.c56 { .c57 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -4003,12 +4097,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4003,12 +4097,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
justify-content: center; justify-content: center;
} }
.c59 { .c60 {
padding: 16px 0px; padding: 16px 0px;
border-radius: 24px; border-radius: 24px;
} }
.c60 { .c61 {
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;
...@@ -4016,24 +4110,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4016,24 +4110,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: all 250ms ease; transition: all 250ms ease;
} }
.c60:hover { .c61:hover {
box-shadow: 0px 0px 16px 0px #ff00c7; box-shadow: 0px 0px 16px 0px #ff00c7;
} }
.c61 { .c62 {
margin: 0px; margin: 0px;
font-size: 16px; font-size: 16px;
font-weight: 535; font-weight: 535;
white-space: nowrap; white-space: nowrap;
} }
.c58 { .c59 {
max-width: 300px; max-width: 300px;
width: 100%; width: 100%;
pointer-events: auto; pointer-events: auto;
} }
.c62 { .c63 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -4053,11 +4147,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4053,11 +4147,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease opacity; transition: 250ms ease opacity;
} }
.c62:hover { .c63:hover {
opacity: 0.6; opacity: 0.6;
} }
.c64 { .c65 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -4074,7 +4168,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4074,7 +4168,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%);
} }
.c65 { .c66 {
display: grid; display: grid;
gap: 12px; gap: 12px;
width: 100%; width: 100%;
...@@ -4087,7 +4181,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4087,7 +4181,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.c72 { .c73 {
display: grid; display: grid;
gap: 12px; gap: 12px;
width: 100%; width: 100%;
...@@ -4142,7 +4236,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4142,7 +4236,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) {
.c84 { .c85 {
-webkit-flex-direction: row; -webkit-flex-direction: row;
-ms-flex-direction: row; -ms-flex-direction: row;
flex-direction: row; flex-direction: row;
...@@ -4154,7 +4248,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4154,7 +4248,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) {
.c86 { .c87 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -4163,75 +4257,75 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4163,75 +4257,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) {
.c101 { .c102 {
display: none; display: none;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c87 { .c88 {
display: block; display: block;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c94 { .c95 {
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 24px; gap: 24px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c95 { .c96 {
margin: 0; margin: 0;
} }
} }
@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) {
.c71 { .c72 {
height: 360px; height: 360px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c71 { .c72 {
padding: 32px; padding: 32px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c73 { .c74 {
height: 260px; height: 260px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c73 { .c74 {
padding: 32px; padding: 32px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c68 { .c69 {
font-size: 28px; font-size: 28px;
line-height: 36px; line-height: 36px;
} }
} }
@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;
...@@ -4239,7 +4333,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4239,7 +4333,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) {
.c74 { .c75 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
max-width: 480px; max-width: 480px;
...@@ -4247,7 +4341,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4247,7 +4341,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) {
.c76 { .c77 {
height: 140px; height: 140px;
-webkit-flex-direction: row; -webkit-flex-direction: row;
-ms-flex-direction: row; -ms-flex-direction: row;
...@@ -4256,21 +4350,21 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4256,21 +4350,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) {
.c78 { .c79 {
font-size: 28px; font-size: 28px;
line-height: 36px; line-height: 36px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c79 { .c80 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c80 { .c81 {
width: auto; width: auto;
} }
} }
...@@ -4288,79 +4382,79 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4288,79 +4382,79 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c51 { .c52 {
height: 100vh; height: 100vh;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c52 { .c53 {
height: 100vh; height: 100vh;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c55 { .c56 {
font-size: 48px; font-size: 48px;
line-height: 56px; line-height: 56px;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c55 { .c56 {
font-size: 64px; font-size: 64px;
line-height: 72px; line-height: 72px;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c57 { .c58 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c61 { .c62 {
font-size: 20px; font-size: 20px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c62 { .c63 {
visibility: visible; visibility: visible;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c64 { .c65 {
padding: 0 96px 5rem; padding: 0 96px 5rem;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c65 { .c66 {
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) {
.c65 { .c66 {
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) {
.c72 { .c73 {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 32px; gap: 32px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c72 { .c73 {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
gap: 32px; gap: 32px;
} }
...@@ -4394,17 +4488,17 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4394,17 +4488,17 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
<div <div
class="c7 c8 c11 c12" class="c7 c8 c11 c12"
> >
<div <button
class="c13 css-n8z49y" class="c13 c14"
> >
Swap Swap
</div> </button>
<div <div
class="c14" class="c15"
> >
<div> <div>
<button <button
class="c15 c16 c17 c18" class="c16 c17 c18 c19"
data-testid="buy-fiat-button" data-testid="buy-fiat-button"
> >
Buy Buy
...@@ -4416,19 +4510,19 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4416,19 +4510,19 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
class="c7 c8 c11" class="c7 c8 c11"
> >
<div <div
class="c19" class="c20"
> >
<button <button
aria-label="Transaction Settings" aria-label="Transaction Settings"
class="c20" class="c21"
data-testid="open-settings-dialog-button" data-testid="open-settings-dialog-button"
id="open-settings-dialog-button" id="open-settings-dialog-button"
> >
<div <div
class="c7 c8 c21" class="c7 c8 c22"
> >
<svg <svg
class="c22" class="c23"
fill="none" fill="none"
height="24" height="24"
viewBox="0 0 24 24" viewBox="0 0 24 24"
...@@ -4449,23 +4543,23 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4449,23 +4543,23 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
style="display: relative;" style="display: relative;"
> >
<div <div
class="c23" class="c24"
> >
<div <div
class="c24" class="c25"
id="swap-currency-input" id="swap-currency-input"
> >
<div <div
class="c25" class="c26"
> >
<div <div
class="c26 css-142zc9n" class="c27 css-142zc9n"
style="user-select: none;" style="user-select: none;"
> >
You pay You pay
</div> </div>
<div <div
class="c27" class="c28"
> >
<div <div
style="display: flex; flex-grow: 1;" style="display: flex; flex-grow: 1;"
...@@ -4473,7 +4567,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4473,7 +4567,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
<input <input
autocomplete="off" autocomplete="off"
autocorrect="off" autocorrect="off"
class="c28 c29 token-amount-input" class="c29 c30 token-amount-input"
id="swap-currency-input" id="swap-currency-input"
inputmode="decimal" inputmode="decimal"
maxlength="79" maxlength="79"
...@@ -4487,40 +4581,40 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4487,40 +4581,40 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
<div> <div>
<div <div
class="c14" class="c15"
> >
<button <button
class="c15 c16 c30 c31 open-currency-select-button" class="c16 c17 c31 c32 open-currency-select-button"
> >
<span <span
class="c32" class="c33"
> >
<div <div
class="c7 c8 c11" class="c7 c8 c11"
> >
<div <div
class="c33" class="c34"
style="height: 24px; width: 24px; margin-right: 2px;" style="height: 24px; width: 24px; margin-right: 2px;"
> >
<div <div
class="c34" class="c35"
> >
<img <img
alt="ETH logo" alt="ETH logo"
class="c35" class="c36"
loading="lazy" loading="lazy"
src="ethereum-logo.png" src="ethereum-logo.png"
/> />
</div> </div>
</div> </div>
<span <span
class="c36 token-symbol-container" class="c37 token-symbol-container"
> >
ETH ETH
</span> </span>
</div> </div>
<svg <svg
class="c37" class="c38"
> >
dropdown.svg dropdown.svg
</svg> </svg>
...@@ -4530,13 +4624,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4530,13 +4624,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</div> </div>
<div <div
class="c38 c39" class="c39 c40"
> >
<div <div
class="c7 c8 c9" class="c7 c8 c9"
> >
<div <div
class="c40" class="c41"
/> />
<span /> <span />
</div> </div>
...@@ -4545,10 +4639,10 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4545,10 +4639,10 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</div> </div>
<div <div
class="c41" class="c42"
> >
<div <div
class="c42" class="c43"
color="#222222" color="#222222"
data-testid="swap-currency-button" data-testid="swap-currency-button"
> >
...@@ -4577,27 +4671,27 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4577,27 +4671,27 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</div> </div>
<div <div
class="c43" class="c44"
> >
<div> <div>
<div <div
class="c23 c44" class="c24 c45"
> >
<div <div
class="c24" class="c25"
id="swap-currency-output" id="swap-currency-output"
> >
<div <div
class="c25" class="c26"
> >
<div <div
class="c26 css-142zc9n" class="c27 css-142zc9n"
style="user-select: none;" style="user-select: none;"
> >
You receive You receive
</div> </div>
<div <div
class="c27" class="c28"
> >
<div <div
style="display: flex; flex-grow: 1;" style="display: flex; flex-grow: 1;"
...@@ -4605,7 +4699,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4605,7 +4699,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
<input <input
autocomplete="off" autocomplete="off"
autocorrect="off" autocorrect="off"
class="c28 c29 token-amount-input" class="c29 c30 token-amount-input"
id="swap-currency-output" id="swap-currency-output"
inputmode="decimal" inputmode="decimal"
maxlength="79" maxlength="79"
...@@ -4619,25 +4713,25 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4619,25 +4713,25 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
<div> <div>
<div <div
class="c14" class="c15"
> >
<button <button
class="c15 c16 c30 c45 open-currency-select-button" class="c16 c17 c31 c46 open-currency-select-button"
> >
<span <span
class="c32" class="c33"
> >
<div <div
class="c7 c8 c11" class="c7 c8 c11"
> >
<span <span
class="c36 token-symbol-container" class="c37 token-symbol-container"
> >
Select token Select token
</span> </span>
</div> </div>
<svg <svg
class="c46" class="c47"
> >
dropdown.svg dropdown.svg
</svg> </svg>
...@@ -4647,13 +4741,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4647,13 +4741,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</div> </div>
<div <div
class="c38 c39" class="c39 c40"
> >
<div <div
class="c7 c8 c9" class="c7 c8 c9"
> >
<div <div
class="c40" class="c41"
/> />
<span /> <span />
</div> </div>
...@@ -4664,11 +4758,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4664,11 +4758,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
<div> <div>
<button <button
class="c47 c16 c48" class="c48 c17 c49"
font-weight="535" font-weight="535"
> >
<div <div
class="c49 c50" class="c50 c51"
/> />
Connect wallet Connect wallet
</button> </button>
...@@ -4680,53 +4774,53 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4680,53 +4774,53 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a> </a>
</div> </div>
<div <div
class="c51" class="c52"
/> />
<div <div
class="c52" class="c53"
> >
<div <div
class="c53" class="c54"
/> />
</div> </div>
<div <div
class="c54" class="c55"
> >
<h1 <h1
class="c55" class="c56"
> >
Trade crypto and NFTs with confidence Trade crypto and NFTs with confidence
</h1> </h1>
<div <div
class="c56" class="c57"
> >
<div <div
class="c57" class="c58"
> >
Buy, sell, and explore tokens and NFTs Buy, sell, and explore tokens and NFTs
</div> </div>
</div> </div>
<span <span
class="c58" class="c59"
> >
<a <a
class="c2 c16 c59 c60" class="c2 c17 c60 c61"
href="/swap" href="/swap"
> >
<p <p
class="c61" class="c62"
> >
Get started Get started
</p> </p>
</a> </a>
</span> </span>
<div <div
class="c62" class="c63"
> >
Learn more Learn more
</div> </div>
<a <a
class="c63" class="c64"
href="https://uniswapwallet.onelink.me/8q3y/79gveilz" href="https://uniswapwallet.onelink.me/8q3y/79gveilz"
> >
<svg <svg
...@@ -4743,32 +4837,32 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4743,32 +4837,32 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a> </a>
</div> </div>
<div <div
class="c64" class="c65"
> >
<div <div
class="c65" class="c66"
cols="2" cols="2"
> >
<a <a
class="c66" class="c67"
href="/swap" href="/swap"
> >
<div <div
class="c67" class="c68"
> >
<div <div
class="c68" class="c69"
> >
Swap tokens Swap tokens
</div> </div>
</div> </div>
<div <div
class="c69" class="c70"
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="c69 c70" class="c70 c71"
type="Primary" type="Primary"
> >
Trade Tokens Trade Tokens
...@@ -4776,25 +4870,25 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4776,25 +4870,25 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</a> </a>
<a <a
class="c71" class="c72"
href="/nfts" href="/nfts"
> >
<div <div
class="c67" class="c68"
> >
<div <div
class="c68" class="c69"
> >
Trade NFTs Trade NFTs
</div> </div>
</div> </div>
<div <div
class="c69" class="c70"
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="c69 c70" class="c70 c71"
type="Primary" type="Primary"
> >
Explore NFTs Explore NFTs
...@@ -4803,20 +4897,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4803,20 +4897,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a> </a>
</div> </div>
<div <div
class="c72" class="c73"
cols="3" cols="3"
> >
<a <a
class="c73" class="c74"
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="c67" class="c68"
> >
<div <div
class="c68" class="c69"
> >
Buy crypto Buy crypto
</div> </div>
...@@ -4843,12 +4937,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4843,12 +4937,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c74" class="c75"
type="Secondary" type="Secondary"
> >
Buy crypto with your credit card or bank account at the best rates. Buy crypto with your credit card or bank account at the best rates.
<div <div
class="c74 c70" class="c75 c71"
type="Secondary" type="Secondary"
> >
Buy now Buy now
...@@ -4856,30 +4950,30 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4856,30 +4950,30 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</a> </a>
<a <a
class="c73" class="c74"
href="/pools" href="/pools"
> >
<div <div
class="c67" class="c68"
> >
<div <div
class="c68" class="c69"
> >
Earn Earn
</div> </div>
<img <img
alt="Analytics" alt="Analytics"
class="c75" class="c76"
src="aboutArrowLight.png" src="aboutArrowLight.png"
/> />
</div> </div>
<div <div
class="c74" class="c75"
type="Secondary" type="Secondary"
> >
Provide liquidity to pools on Uniswap and earn fees on swaps. Provide liquidity to pools on Uniswap and earn fees on swaps.
<div <div
class="c74 c70" class="c75 c71"
type="Secondary" type="Secondary"
> >
Provide liquidity Provide liquidity
...@@ -4887,16 +4981,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4887,16 +4981,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</a> </a>
<a <a
class="c73" class="c74"
href="https://docs.uniswap.org" href="https://docs.uniswap.org"
rel="noopenener noreferrer" rel="noopenener noreferrer"
target="_blank" target="_blank"
> >
<div <div
class="c67" class="c68"
> >
<div <div
class="c68" class="c69"
> >
Build dApps Build dApps
</div> </div>
...@@ -4923,12 +5017,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4923,12 +5017,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c74" class="c75"
type="Secondary" type="Secondary"
> >
Build apps and tools on the largest DeFi protocol on Ethereum. Build apps and tools on the largest DeFi protocol on Ethereum.
<div <div
class="c74 c70" class="c75 c71"
type="Secondary" type="Secondary"
> >
Developer docs Developer docs
...@@ -4936,28 +5030,28 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4936,28 +5030,28 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</a> </a>
</div> </div>
<div
class="c76"
>
<div <div
class="c77" class="c77"
> >
<div <div
class="c78" class="c78"
>
<div
class="c79"
> >
Powered by the Uniswap Protocol Powered by the Uniswap Protocol
</div> </div>
<div <div
class="c79" class="c80"
> >
The leading decentralized crypto trading protocol, governed by a global community. The leading decentralized crypto trading protocol, governed by a global community.
</div> </div>
</div> </div>
<div <div
class="c80" class="c81"
> >
<a <a
class="c81 c82 c83" class="c82 c83 c84"
href="https://uniswap.org" href="https://uniswap.org"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -4968,53 +5062,53 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4968,53 +5062,53 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</div> </div>
<div <div
class="c84" class="c85"
> >
<div <div
class="c85 c86" class="c86 c87"
> >
<img <img
alt="Uniswap Logo" alt="Uniswap Logo"
class="c87" class="c88"
src="unicornEmbossLight.png" src="unicornEmbossLight.png"
/> />
<div <div
class="c88" class="c89"
> >
<a <a
class="c89" class="c90"
href="https://discord.gg/FCfyBSbCU5" href="https://discord.gg/FCfyBSbCU5"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c90" class="c91"
size="32" size="32"
> >
discord.svg discord.svg
</svg> </svg>
</a> </a>
<a <a
class="c89" class="c90"
href="https://twitter.com/uniswap" href="https://twitter.com/uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c91" class="c92"
size="32" size="32"
> >
twitter-safe.svg twitter-safe.svg
</svg> </svg>
</a> </a>
<a <a
class="c89" class="c90"
href="https://github.com/Uniswap" href="https://github.com/Uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c92" class="c93"
size="32" size="32"
> >
github.svg github.svg
...@@ -5022,7 +5116,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -5022,7 +5116,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a> </a>
</div> </div>
<span <span
class="c93" class="c94"
> >
© ©
2023 2023
...@@ -5030,51 +5124,51 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -5030,51 +5124,51 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</span> </span>
</div> </div>
<div <div
class="c94" class="c95"
> >
<div <div
class="c95" class="c96"
> >
<span <span
class="c96" class="c97"
> >
App App
</span> </span>
<a <a
class="c97 c98" class="c98 c99"
href="/swap" href="/swap"
> >
Swap Swap
</a> </a>
<a <a
class="c97 c98" class="c98 c99"
href="/tokens" href="/tokens"
> >
Tokens Tokens
</a> </a>
<a <a
class="c97 c98" class="c98 c99"
href="/nfts" href="/nfts"
> >
NFTs NFTs
</a> </a>
<a <a
class="c97 c98" class="c98 c99"
href="/pools" href="/pools"
> >
Pools Pools
</a> </a>
</div> </div>
<div <div
class="c95" class="c96"
> >
<span <span
class="c96" class="c97"
> >
Protocol Protocol
</span> </span>
<a <a
class="c99 c100" class="c100 c101"
href="https://uniswap.org/community" href="https://uniswap.org/community"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -5082,7 +5176,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -5082,7 +5176,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Community Community
</a> </a>
<a <a
class="c99 c100" class="c100 c101"
href="https://uniswap.org/governance" href="https://uniswap.org/governance"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -5090,7 +5184,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -5090,7 +5184,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Governance Governance
</a> </a>
<a <a
class="c99 c100" class="c100 c101"
href="https://uniswap.org/developers" href="https://uniswap.org/developers"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -5099,15 +5193,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -5099,15 +5193,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a> </a>
</div> </div>
<div <div
class="c95" class="c96"
> >
<span <span
class="c96" class="c97"
> >
Company Company
</span> </span>
<a <a
class="c99 c100" class="c100 c101"
href="https://boards.greenhouse.io/uniswaplabs" href="https://boards.greenhouse.io/uniswaplabs"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -5115,7 +5209,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -5115,7 +5209,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Careers Careers
</a> </a>
<a <a
class="c99 c100" class="c100 c101"
href="https://uniswap.org/blog" href="https://uniswap.org/blog"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -5124,15 +5218,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -5124,15 +5218,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a> </a>
</div> </div>
<div <div
class="c95" class="c96"
> >
<span <span
class="c96" class="c97"
> >
Get Help Get Help
</span> </span>
<a <a
class="c99 c100" class="c100 c101"
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"
...@@ -5140,7 +5234,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -5140,7 +5234,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Contact Us Contact Us
</a> </a>
<a <a
class="c99 c100" class="c100 c101"
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"
...@@ -5150,50 +5244,50 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -5150,50 +5244,50 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</div> </div>
<div <div
class="c85 c101" class="c86 c102"
> >
<img <img
alt="Uniswap Logo" alt="Uniswap Logo"
class="c87" class="c88"
src="unicornEmbossLight.png" src="unicornEmbossLight.png"
/> />
<div <div
class="c88" class="c89"
> >
<a <a
class="c89" class="c90"
href="https://discord.gg/FCfyBSbCU5" href="https://discord.gg/FCfyBSbCU5"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c90" class="c91"
size="32" size="32"
> >
discord.svg discord.svg
</svg> </svg>
</a> </a>
<a <a
class="c89" class="c90"
href="https://twitter.com/uniswap" href="https://twitter.com/uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c91" class="c92"
size="32" size="32"
> >
twitter-safe.svg twitter-safe.svg
</svg> </svg>
</a> </a>
<a <a
class="c89" class="c90"
href="https://github.com/Uniswap" href="https://github.com/Uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c92" class="c93"
size="32" size="32"
> >
github.svg github.svg
...@@ -5201,7 +5295,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -5201,7 +5295,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a> </a>
</div> </div>
<span <span
class="c93" class="c94"
> >
© ©
2023 2023
......
src/pages/Swap/index.tsx
View file @ 52dc441e
...@@ -26,7 +26,7 @@ import PriceImpactModal from 'components/swap/PriceImpactModal' ...@@ -26,7 +26,7 @@ import PriceImpactModal from 'components/swap/PriceImpactModal'
import PriceImpactWarning from 'components/swap/PriceImpactWarning' import PriceImpactWarning from 'components/swap/PriceImpactWarning'
import { ArrowWrapper, PageWrapper, SwapWrapper } from 'components/swap/styled' import { ArrowWrapper, PageWrapper, SwapWrapper } from 'components/swap/styled'
import SwapDetailsDropdown from 'components/swap/SwapDetailsDropdown' import SwapDetailsDropdown from 'components/swap/SwapDetailsDropdown'
import SwapHeader from 'components/swap/SwapHeader' import SwapHeader, { SwapTab } from 'components/swap/SwapHeader'
import { SwitchLocaleLink } from 'components/SwitchLocaleLink' import { SwitchLocaleLink } from 'components/SwitchLocaleLink'
import TokenSafetyModal from 'components/TokenSafety/TokenSafetyModal' import TokenSafetyModal from 'components/TokenSafety/TokenSafetyModal'
import { useConnectionReady } from 'connection/eagerlyConnect' import { useConnectionReady } from 'connection/eagerlyConnect'
...@@ -601,8 +601,10 @@ export function Swap({ ...@@ -601,8 +601,10 @@ export function Swap({
const isDark = useIsDarkMode() const isDark = useIsDarkMode()
const isUniswapXDefaultEnabled = useUniswapXDefaultEnabled() const isUniswapXDefaultEnabled = useUniswapXDefaultEnabled()
const [currentTab, setCurrentTab] = useState<SwapTab>(SwapTab.Swap)
const swapElement = ( const swapElement = (
<SwapWrapper isDark={isDark} className={className} id="swap-page"> <>
<TokenSafetyModal <TokenSafetyModal
isOpen={importTokensNotInDefault.length > 0 && !dismissTokenWarning} isOpen={importTokensNotInDefault.length > 0 && !dismissTokenWarning}
tokenAddress={importTokensNotInDefault[0]?.address} tokenAddress={importTokensNotInDefault[0]?.address}
...@@ -611,7 +613,6 @@ export function Swap({ ...@@ -611,7 +613,6 @@ export function Swap({
onCancel={handleDismissTokenWarning} onCancel={handleDismissTokenWarning}
showCancel={true} showCancel={true}
/> />
<SwapHeader trade={trade} autoSlippage={autoSlippage} chainId={chainId} />
{trade && showConfirm && ( {trade && showConfirm && (
<ConfirmSwapModal <ConfirmSwapModal
trade={trade} trade={trade}
...@@ -832,13 +833,23 @@ export function Swap({ ...@@ -832,13 +833,23 @@ export function Swap({
</div> </div>
</AutoColumn> </AutoColumn>
{!showOptInSmall && !isUniswapXDefaultEnabled && <UniswapXOptIn isSmall={false} swapInfo={swapInfo} />} {!showOptInSmall && !isUniswapXDefaultEnabled && <UniswapXOptIn isSmall={false} swapInfo={swapInfo} />}
</SwapWrapper> </>
) )
return ( return (
<> <SwapWrapper isDark={isDark} className={className} id="swap-page">
{swapElement} <SwapHeader
selectedTab={currentTab}
onClickTab={(tab) => {
setCurrentTab(tab)
}}
trade={trade}
autoSlippage={autoSlippage}
chainId={chainId}
/>
{/* todo: build Limit UI */}
{currentTab === SwapTab.Swap ? swapElement : undefined}
{showOptInSmall && !isUniswapXDefaultEnabled && <UniswapXOptIn isSmall swapInfo={swapInfo} />} {showOptInSmall && !isUniswapXDefaultEnabled && <UniswapXOptIn isSmall swapInfo={swapInfo} />}
</> </SwapWrapper>
) )
} }
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