feat: [info] update token links (#7505)
* update pdp link styles * dynamic link text * move links to their own file * border width case * todo comments * add explorer icon * hide chain logos on other chain * remove quotes * clean up * unused style
This commit is contained in:
Charles Bachmeier
GitHub
parent
0fbc826581
commit
c2ca9ab93e
11
src/components/Icons/ExplorerIcon.tsx
Normal file
11
src/components/Icons/ExplorerIcon.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import { ComponentProps } from 'react'
|
||||
|
||||
export const ExplorerIcon = (props: ComponentProps<'svg'>) => (
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path
|
||||
id="box-search_2"
|
||||
d="M6.32064 7.43328C6.4873 7.50661 6.66065 7.55329 6.83398 7.59329V13.94C6.72732 13.9133 6.62067 13.8733 6.52067 13.8266L2.52067 12.0466C1.80067 11.7266 1.33398 11.0133 1.33398 10.2199V5.77996C1.33398 5.59996 1.36064 5.41995 1.40731 5.25329L6.32064 7.43328ZM12.754 4.37328C12.5807 4.19995 12.3806 4.05328 12.1473 3.95328L8.1473 2.17329C7.6273 1.93996 7.04067 1.93996 6.52067 2.17329L2.52067 3.95328C2.28734 4.05328 2.08731 4.19995 1.91398 4.37328L6.72062 6.51328C7.10729 6.68661 7.55401 6.68661 7.94735 6.51328L12.754 4.37328ZM11.1347 7.92862C11.8227 7.76662 12.4766 7.81863 13.0646 8.02129C13.1966 8.06663 13.334 7.97729 13.334 7.83729V5.77996C13.334 5.59996 13.3073 5.41995 13.2607 5.25329L8.34733 7.43328C8.18066 7.49995 8.00732 7.55329 7.83398 7.59329V13.94C7.84598 13.948 7.84599 13.9479 7.85799 13.9559L8.98665 13.452C9.10132 13.4006 9.13533 13.262 9.066 13.158C8.584 12.4373 8.37864 11.522 8.57397 10.5586C8.83464 9.27263 9.85802 8.22929 11.1347 7.92862ZM15.0207 14.3526C14.9233 14.4499 14.7953 14.4993 14.6673 14.4993C14.5393 14.4993 14.4113 14.4506 14.314 14.3526L13.2807 13.3193C12.896 13.5713 12.4386 13.7213 11.9453 13.7213C10.5973 13.7213 9.50065 12.6246 9.50065 11.2766C9.50065 9.92862 10.5973 8.83194 11.9453 8.83194C13.2926 8.83194 14.3893 9.92862 14.3893 11.2766C14.3893 11.77 14.24 12.228 13.988 12.6119L15.0213 13.6453C15.216 13.8406 15.216 14.1573 15.0207 14.3526ZM13.3893 11.2773C13.3893 10.4806 12.7413 9.83261 11.9453 9.83261C11.1486 9.83261 10.5007 10.4806 10.5007 11.2773C10.5007 12.0739 11.1486 12.722 11.9453 12.722C12.7413 12.7213 13.3893 12.0733 13.3893 11.2773Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
@ -125,7 +125,6 @@ const StyledLogoParentContainer = styled.div`
|
||||
top: 0;
|
||||
left: 0;
|
||||
`
|
||||
|
||||
function DoubleCurrencyAndChainLogo({
|
||||
chainId,
|
||||
currencies,
|
||||
@ -165,37 +164,45 @@ function SquareL2Logo({ chainId }: { chainId: ChainId }) {
|
||||
)
|
||||
}
|
||||
|
||||
function DoubleCurrencyLogo({ chainId, currencies }: { chainId: number; currencies: Array<Currency | undefined> }) {
|
||||
export function DoubleCurrencyLogo({
|
||||
chainId,
|
||||
currencies,
|
||||
small,
|
||||
}: {
|
||||
chainId: number
|
||||
currencies: Array<Currency | undefined>
|
||||
small?: boolean
|
||||
}) {
|
||||
const [src, nextSrc] = useTokenLogoSource(currencies?.[0]?.wrapped.address, chainId, currencies?.[0]?.isNative)
|
||||
const [src2, nextSrc2] = useTokenLogoSource(currencies?.[1]?.wrapped.address, chainId, currencies?.[1]?.isNative)
|
||||
|
||||
return <DoubleLogo logo1={src} onError1={nextSrc} logo2={src2} onError2={nextSrc2} />
|
||||
return <DoubleLogo logo1={src} onError1={nextSrc} logo2={src2} onError2={nextSrc2} small={small} />
|
||||
}
|
||||
|
||||
const DoubleLogoContainer = styled.div`
|
||||
const DoubleLogoContainer = styled.div<{ small?: boolean }>`
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
img {
|
||||
width: 16px;
|
||||
height: 32px;
|
||||
width: ${({ small }) => (small ? '10px' : '16px')};
|
||||
height: ${({ small }) => (small ? '20px' : '32px')};
|
||||
object-fit: cover;
|
||||
}
|
||||
img:first-child {
|
||||
border-radius: 16px 0 0 16px;
|
||||
border-radius: ${({ small }) => (small ? '10px 0 0 10px' : '16px 0 0 16px')};
|
||||
object-position: 0 0;
|
||||
}
|
||||
img:last-child {
|
||||
border-radius: 0 16px 16px 0;
|
||||
border-radius: ${({ small }) => (small ? '0 10px 10px 0' : '0 16px 16px 0')};
|
||||
object-position: 100% 0;
|
||||
}
|
||||
`
|
||||
|
||||
const CircleLogoImage = styled.img`
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
const CircleLogoImage = styled.img<{ small?: boolean }>`
|
||||
width: ${({ small }) => (small ? '10px' : '16px')};
|
||||
height: ${({ small }) => (small ? '20px' : '32px')};
|
||||
border-radius: 50%;
|
||||
`
|
||||
|
||||
@ -204,13 +211,14 @@ interface DoubleLogoProps {
|
||||
logo2?: string
|
||||
onError1?: () => void
|
||||
onError2?: () => void
|
||||
small?: boolean
|
||||
}
|
||||
|
||||
function DoubleLogo({ logo1, onError1, logo2, onError2 }: DoubleLogoProps) {
|
||||
function DoubleLogo({ logo1, onError1, logo2, onError2, small }: DoubleLogoProps) {
|
||||
return (
|
||||
<DoubleLogoContainer>
|
||||
<CircleLogoImage src={logo1 ?? blankTokenUrl} onError={onError1} />
|
||||
<CircleLogoImage src={logo2 ?? blankTokenUrl} onError={onError2} />
|
||||
<DoubleLogoContainer small={small}>
|
||||
<CircleLogoImage src={logo1 ?? blankTokenUrl} onError={onError1} small={small} />
|
||||
<CircleLogoImage src={logo2 ?? blankTokenUrl} onError={onError2} small={small} />
|
||||
</DoubleLogoContainer>
|
||||
)
|
||||
}
|
||||
|
||||
36
src/pages/PoolDetails/PoolDetailsLink.test.tsx
Normal file
36
src/pages/PoolDetails/PoolDetailsLink.test.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import { ChainId } from '@uniswap/sdk-core'
|
||||
import { USDC_MAINNET } from 'constants/tokens'
|
||||
import { usdcWethPoolAddress, validPoolToken0, validPoolToken1 } from 'test-utils/pools/fixtures'
|
||||
import { render, screen } from 'test-utils/render'
|
||||
|
||||
import { PoolDetailsLink } from './PoolDetailsLink'
|
||||
|
||||
describe('PoolDetailsHeader', () => {
|
||||
it('renders link for pool address', async () => {
|
||||
const { asFragment } = render(
|
||||
<PoolDetailsLink
|
||||
address={usdcWethPoolAddress}
|
||||
chainId={ChainId.MAINNET}
|
||||
tokens={[validPoolToken0, validPoolToken1]}
|
||||
/>
|
||||
)
|
||||
expect(asFragment()).toMatchSnapshot()
|
||||
|
||||
expect(screen.getByText('USDC / WETH')).toBeInTheDocument()
|
||||
expect(screen.getByTestId('pdp-pool-logo-USDC-WETH')).toBeInTheDocument()
|
||||
expect(screen.getByTestId(`copy-address-${usdcWethPoolAddress}`)).toBeInTheDocument()
|
||||
expect(screen.getByTestId(`explorer-url-https://etherscan.io/address/${usdcWethPoolAddress}`)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders link for token address', async () => {
|
||||
const { asFragment } = render(
|
||||
<PoolDetailsLink address={USDC_MAINNET.address} chainId={ChainId.MAINNET} tokens={[validPoolToken0]} />
|
||||
)
|
||||
expect(asFragment()).toMatchSnapshot()
|
||||
|
||||
expect(screen.getByText('USDC')).toBeInTheDocument()
|
||||
expect(screen.getByTestId('pdp-token-logo-USDC')).toBeInTheDocument()
|
||||
expect(screen.getByTestId(`copy-address-${USDC_MAINNET.address}`)).toBeInTheDocument()
|
||||
expect(screen.getByTestId(`explorer-url-https://etherscan.io/token/${USDC_MAINNET.address}`)).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
165
src/pages/PoolDetails/PoolDetailsLink.tsx
Normal file
165
src/pages/PoolDetails/PoolDetailsLink.tsx
Normal file
@ -0,0 +1,165 @@
|
||||
import { Trans } from '@lingui/macro'
|
||||
import { ChainId } from '@uniswap/sdk-core'
|
||||
import { EtherscanLogo } from 'components/Icons/Etherscan'
|
||||
import { ExplorerIcon } from 'components/Icons/ExplorerIcon'
|
||||
import CurrencyLogo from 'components/Logo/CurrencyLogo'
|
||||
import Row from 'components/Row'
|
||||
import { useInfoExplorePageEnabled } from 'featureFlags/flags/infoExplore'
|
||||
import { chainIdToBackendName, getTokenDetailsURL } from 'graphql/data/util'
|
||||
import { Token } from 'graphql/thegraph/__generated__/types-and-hooks'
|
||||
import { useCurrency } from 'hooks/Tokens'
|
||||
import useCopyClipboard from 'hooks/useCopyClipboard'
|
||||
import { useCallback } from 'react'
|
||||
import { ChevronRight, Copy } from 'react-feather'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import styled, { useTheme } from 'styled-components'
|
||||
import { BREAKPOINTS } from 'theme'
|
||||
import { ClickableStyle, EllipsisStyle, ExternalLink, ThemedText } from 'theme/components'
|
||||
import { shortenAddress } from 'utils'
|
||||
import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
|
||||
|
||||
import { DoubleCurrencyLogo } from './PoolDetailsHeader'
|
||||
import { DetailBubble, SmallDetailBubble } from './shared'
|
||||
|
||||
const TokenName = styled(ThemedText.BodyPrimary)`
|
||||
display: none;
|
||||
|
||||
@media (max-width: ${BREAKPOINTS.lg - 1}px) and (min-width: ${BREAKPOINTS.xs - 1}px) {
|
||||
display: block;
|
||||
}
|
||||
${EllipsisStyle}
|
||||
`
|
||||
|
||||
const TokenTextWrapper = styled(Row)<{ isClickable?: boolean }>`
|
||||
gap: 8px;
|
||||
margin-right: 12px;
|
||||
${({ isClickable }) => isClickable && ClickableStyle}
|
||||
`
|
||||
|
||||
const SymbolText = styled(ThemedText.BodyPrimary)`
|
||||
flex-shrink: 0;
|
||||
|
||||
@media (max-width: ${BREAKPOINTS.lg - 1}px) and (min-width: ${BREAKPOINTS.xs - 1}px) {
|
||||
color: ${({ theme }) => theme.neutral2};
|
||||
}
|
||||
${EllipsisStyle}
|
||||
`
|
||||
|
||||
const CopyAddress = styled(Row)`
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 20px;
|
||||
background-color: ${({ theme }) => theme.surface3};
|
||||
font-size: 14px;
|
||||
font-weight: 535;
|
||||
line-height: 16px;
|
||||
width: max-content;
|
||||
flex-shrink: 0;
|
||||
${ClickableStyle}
|
||||
`
|
||||
const StyledCopyIcon = styled(Copy)`
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: ${({ theme }) => theme.neutral2};
|
||||
flex-shrink: 0;
|
||||
`
|
||||
|
||||
const ExplorerWrapper = styled.div`
|
||||
padding: 8px;
|
||||
border-radius: 20px;
|
||||
background-color: ${({ theme }) => theme.surface3};
|
||||
display: flex;
|
||||
${ClickableStyle}
|
||||
`
|
||||
|
||||
const ButtonsRow = styled(Row)`
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
width: max-content;
|
||||
`
|
||||
|
||||
interface PoolDetailsLinkProps {
|
||||
address?: string
|
||||
chainId?: number
|
||||
tokens: (Token | undefined)[]
|
||||
loading?: boolean
|
||||
}
|
||||
|
||||
export function PoolDetailsLink({ address, chainId, tokens, loading }: PoolDetailsLinkProps) {
|
||||
const theme = useTheme()
|
||||
const currencies = [
|
||||
useCurrency(tokens[0]?.id, chainId) ?? undefined,
|
||||
useCurrency(tokens[1]?.id, chainId) ?? undefined,
|
||||
]
|
||||
const [, setCopied] = useCopyClipboard()
|
||||
const copy = useCallback(() => {
|
||||
address && setCopied(address)
|
||||
}, [address, setCopied])
|
||||
|
||||
const isPool = tokens.length === 2
|
||||
const explorerUrl =
|
||||
address && chainId && getExplorerLink(chainId, address, isPool ? ExplorerDataType.ADDRESS : ExplorerDataType.TOKEN)
|
||||
|
||||
const navigate = useNavigate()
|
||||
const isInfoExplorePageEnabled = useInfoExplorePageEnabled()
|
||||
const chainName = chainIdToBackendName(chainId)
|
||||
const handleTokenTextClick = useCallback(() => {
|
||||
if (!isPool) {
|
||||
navigate(getTokenDetailsURL({ address: tokens[0]?.id, chain: chainName, isInfoExplorePageEnabled }))
|
||||
}
|
||||
}, [navigate, tokens, isPool, chainName, isInfoExplorePageEnabled])
|
||||
|
||||
if (loading || !address || !chainId) {
|
||||
return (
|
||||
<Row gap="8px" padding="6px 0px">
|
||||
<SmallDetailBubble />
|
||||
<DetailBubble $width={117} />
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Row align="space-between">
|
||||
<TokenTextWrapper
|
||||
data-testid={
|
||||
isPool ? `pdp-pool-logo-${tokens[0]?.symbol}-${tokens[1]?.symbol}` : `pdp-token-logo-${tokens[0]?.symbol}`
|
||||
}
|
||||
isClickable={!isPool}
|
||||
onClick={handleTokenTextClick}
|
||||
>
|
||||
{isPool ? (
|
||||
<DoubleCurrencyLogo chainId={chainId} currencies={currencies} small />
|
||||
) : (
|
||||
<CurrencyLogo currency={currencies[0]} size="20px" />
|
||||
)}
|
||||
<TokenName>{isPool ? <Trans>Pool</Trans> : tokens[0]?.name}</TokenName>
|
||||
<SymbolText>
|
||||
{isPool ? (
|
||||
`${tokens[0]?.symbol} / ${tokens[1]?.symbol}`
|
||||
) : (
|
||||
<Row gap="4px">
|
||||
{tokens[0]?.symbol} <ChevronRight size={16} color={theme.neutral2} />
|
||||
</Row>
|
||||
)}
|
||||
</SymbolText>
|
||||
</TokenTextWrapper>
|
||||
<ButtonsRow>
|
||||
<CopyAddress data-testid={`copy-address-${address}`} onClick={copy}>
|
||||
{shortenAddress(address)}
|
||||
<StyledCopyIcon />
|
||||
</CopyAddress>
|
||||
{explorerUrl && (
|
||||
<ExternalLink href={explorerUrl} data-testid={`explorer-url-${explorerUrl}`}>
|
||||
<ExplorerWrapper>
|
||||
{chainId === ChainId.MAINNET ? (
|
||||
<EtherscanLogo width="16px" height="16px" fill={theme.neutral2} />
|
||||
) : (
|
||||
<ExplorerIcon width="16px" height="16px" stroke={theme.darkMode ? 'none' : theme.neutral2} />
|
||||
)}
|
||||
</ExplorerWrapper>
|
||||
</ExternalLink>
|
||||
)}
|
||||
</ButtonsRow>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
@ -287,7 +287,7 @@ exports[`PoolDetailsHeader renders header text correctly 1`] = `
|
||||
}
|
||||
|
||||
.c12 {
|
||||
width: 32px;
|
||||
width: 16px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@ -0,0 +1,646 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`PoolDetailsHeader renders link for pool address 1`] = `
|
||||
<DocumentFragment>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
-webkit-align-items: space-between;
|
||||
-webkit-box-align: space-between;
|
||||
-ms-flex-align: space-between;
|
||||
align-items: space-between;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
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;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-transition-duration: 125ms;
|
||||
transition-duration: 125ms;
|
||||
color: #FC72FF;
|
||||
stroke: #FC72FF;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.c12:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.c12:active {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.c4 img {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.c4 img:first-child {
|
||||
border-radius: 10px 0 0 10px;
|
||||
object-position: 0 0;
|
||||
}
|
||||
|
||||
.c4 img:last-child {
|
||||
border-radius: 0 10px 10px 0;
|
||||
object-position: 100% 0;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
display: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
gap: 8px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.c10 {
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 20px;
|
||||
background-color: #22222212;
|
||||
font-size: 14px;
|
||||
font-weight: 535;
|
||||
line-height: 16px;
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-transition-duration: 125ms;
|
||||
transition-duration: 125ms;
|
||||
}
|
||||
|
||||
.c10:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.c10:active {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #7D7D7D;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
padding: 8px;
|
||||
border-radius: 20px;
|
||||
background-color: #22222212;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-transition-duration: 125ms;
|
||||
transition-duration: 125ms;
|
||||
}
|
||||
|
||||
.c13:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.c13:active {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
gap: 8px;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
@media (max-width:1023px) and (min-width:395px) {
|
||||
.c7 {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1023px) and (min-width:395px) {
|
||||
.c8 {
|
||||
color: #7D7D7D;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
class="c0 c1"
|
||||
>
|
||||
<div
|
||||
class="c0 c2 c3"
|
||||
data-testid="pdp-pool-logo-USDC-WETH"
|
||||
>
|
||||
<div
|
||||
class="c4"
|
||||
>
|
||||
<img
|
||||
class="c5"
|
||||
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
|
||||
/>
|
||||
<img
|
||||
class="c5"
|
||||
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="c6 c7 css-1urox24"
|
||||
>
|
||||
Pool
|
||||
</div>
|
||||
<div
|
||||
class="c6 c8 css-1urox24"
|
||||
>
|
||||
USDC / WETH
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c0 c2 c9"
|
||||
>
|
||||
<div
|
||||
class="c0 c2 c10"
|
||||
data-testid="copy-address-0x88e6a0c2ddd26feeb64f039a2c41296fcb3f5640"
|
||||
>
|
||||
0x88e6...5640
|
||||
<svg
|
||||
class="c11"
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
height="13"
|
||||
rx="2"
|
||||
ry="2"
|
||||
width="13"
|
||||
x="9"
|
||||
y="9"
|
||||
/>
|
||||
<path
|
||||
d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<a
|
||||
class="c12"
|
||||
data-testid="explorer-url-https://etherscan.io/address/0x88e6a0c2ddd26feeb64f039a2c41296fcb3f5640"
|
||||
href="https://etherscan.io/address/0x88e6a0c2ddd26feeb64f039a2c41296fcb3f5640"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
class="c13"
|
||||
>
|
||||
<svg
|
||||
fill="#7D7D7D"
|
||||
height="16px"
|
||||
stroke="transparent"
|
||||
viewBox="0 0 18 18"
|
||||
width="16px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.08042 8.66148C5.08043 8.58693 5.09517 8.51313 5.12378 8.44429C5.1524 8.37546 5.19432 8.31297 5.24716 8.26038C5.30001 8.2078 5.3627 8.16617 5.43167 8.13788C5.50064 8.1096 5.57452 8.09522 5.64907 8.09557L6.59187 8.09865C6.74218 8.09865 6.88635 8.15836 6.99263 8.26465C7.09893 8.37094 7.15865 8.5151 7.15865 8.66543V12.2303C7.26478 12.1988 7.4011 12.1652 7.55026 12.1301C7.65387 12.1058 7.74621 12.0471 7.8123 11.9637C7.87839 11.8803 7.91434 11.777 7.91432 11.6705V7.24848C7.91432 7.09814 7.97403 6.95397 8.08032 6.84766C8.1866 6.74135 8.33077 6.68162 8.4811 6.68158H9.42577C9.57609 6.68162 9.72026 6.74135 9.82655 6.84766C9.93284 6.95397 9.99255 7.09814 9.99255 7.24848V11.3526C9.99255 11.3526 10.2291 11.2569 10.4595 11.1596C10.545 11.1234 10.6181 11.0629 10.6694 10.9854C10.7208 10.908 10.7482 10.8172 10.7483 10.7242V5.83152C10.7483 5.68122 10.808 5.53707 10.9143 5.43078C11.0206 5.32449 11.1647 5.26478 11.315 5.26474H12.2597C12.41 5.26474 12.5542 5.32445 12.6604 5.43075C12.7667 5.53704 12.8265 5.6812 12.8265 5.83152V9.86056C13.6455 9.267 14.4754 8.55315 15.1341 7.69474C15.2297 7.57015 15.2929 7.42383 15.3181 7.26887C15.3434 7.1139 15.3299 6.95509 15.2788 6.8066C14.9739 5.9294 14.4894 5.12551 13.856 4.44636C13.2226 3.76722 12.4544 3.22777 11.6005 2.86256C10.7467 2.49734 9.82602 2.31439 8.89742 2.32542C7.96882 2.33645 7.05275 2.54121 6.20783 2.9266C5.36291 3.31199 4.60774 3.86952 3.99066 4.56352C3.37358 5.25751 2.90817 6.07269 2.62422 6.95689C2.34027 7.84107 2.24403 8.7748 2.34166 9.69832C2.43929 10.6218 2.72863 11.5148 3.19118 12.3201C3.27176 12.459 3.39031 12.572 3.53289 12.6459C3.67548 12.7198 3.83618 12.7514 3.99614 12.7372C4.17482 12.7215 4.3973 12.6992 4.66181 12.6681C4.77695 12.655 4.88326 12.6001 4.96048 12.5137C5.0377 12.4273 5.08043 12.3155 5.08053 12.1996L5.08042 8.66148Z"
|
||||
fill="#7D7D7D"
|
||||
/>
|
||||
<path
|
||||
d="M5.05957 14.3792C6.05531 15.1036 7.23206 15.5384 8.45961 15.6356C9.68716 15.7326 10.9176 15.4883 12.0149 14.9294C13.1122 14.3705 14.0334 13.519 14.6768 12.4691C15.3201 11.4191 15.6605 10.2116 15.6601 8.98024C15.6601 8.82658 15.653 8.67457 15.6428 8.52344C13.2041 12.1605 8.70139 13.8609 5.05978 14.3786"
|
||||
fill="#7D7D7D"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`PoolDetailsHeader renders link for token address 1`] = `
|
||||
<DocumentFragment>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
-webkit-align-items: space-between;
|
||||
-webkit-box-align: space-between;
|
||||
-ms-flex-align: space-between;
|
||||
align-items: space-between;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
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;
|
||||
}
|
||||
|
||||
.c10 {
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.c14 {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-transition-duration: 125ms;
|
||||
transition-duration: 125ms;
|
||||
color: #FC72FF;
|
||||
stroke: #FC72FF;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.c14:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.c14:active {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 250ms ease-in;
|
||||
transition: opacity 250ms ease-in;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #22222212;
|
||||
-webkit-transition: background-color 250ms ease-in;
|
||||
transition: background-color 250ms ease-in;
|
||||
box-shadow: 0 0 1px white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
display: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
gap: 8px;
|
||||
margin-right: 12px;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-transition-duration: 125ms;
|
||||
transition-duration: 125ms;
|
||||
}
|
||||
|
||||
.c3:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.c3:active {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 20px;
|
||||
background-color: #22222212;
|
||||
font-size: 14px;
|
||||
font-weight: 535;
|
||||
line-height: 16px;
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-transition-duration: 125ms;
|
||||
transition-duration: 125ms;
|
||||
}
|
||||
|
||||
.c12:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.c12:active {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #7D7D7D;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.c15 {
|
||||
padding: 8px;
|
||||
border-radius: 20px;
|
||||
background-color: #22222212;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-transition-duration: 125ms;
|
||||
transition-duration: 125ms;
|
||||
}
|
||||
|
||||
.c15:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.c15:active {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
gap: 8px;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
@media (max-width:1023px) and (min-width:395px) {
|
||||
.c8 {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1023px) and (min-width:395px) {
|
||||
.c9 {
|
||||
color: #7D7D7D;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
class="c0 c1"
|
||||
>
|
||||
<div
|
||||
class="c0 c2 c3"
|
||||
data-testid="pdp-token-logo-USDC"
|
||||
>
|
||||
<div
|
||||
class="c4"
|
||||
style="height: 20px; width: 20px;"
|
||||
>
|
||||
<div
|
||||
class="c5"
|
||||
>
|
||||
<img
|
||||
alt="UNKNOWN logo"
|
||||
class="c6"
|
||||
loading="lazy"
|
||||
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c7 c8 css-1urox24"
|
||||
>
|
||||
USD Coin
|
||||
</div>
|
||||
<div
|
||||
class="c7 c9 css-1urox24"
|
||||
>
|
||||
<div
|
||||
class="c0 c10"
|
||||
>
|
||||
USDC
|
||||
<svg
|
||||
fill="none"
|
||||
height="16"
|
||||
stroke="#7D7D7D"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<polyline
|
||||
points="9 18 15 12 9 6"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c0 c2 c11"
|
||||
>
|
||||
<div
|
||||
class="c0 c2 c12"
|
||||
data-testid="copy-address-0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
|
||||
>
|
||||
0xA0b8...eB48
|
||||
<svg
|
||||
class="c13"
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
height="13"
|
||||
rx="2"
|
||||
ry="2"
|
||||
width="13"
|
||||
x="9"
|
||||
y="9"
|
||||
/>
|
||||
<path
|
||||
d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<a
|
||||
class="c14"
|
||||
data-testid="explorer-url-https://etherscan.io/token/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
|
||||
href="https://etherscan.io/token/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
class="c15"
|
||||
>
|
||||
<svg
|
||||
fill="#7D7D7D"
|
||||
height="16px"
|
||||
stroke="transparent"
|
||||
viewBox="0 0 18 18"
|
||||
width="16px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.08042 8.66148C5.08043 8.58693 5.09517 8.51313 5.12378 8.44429C5.1524 8.37546 5.19432 8.31297 5.24716 8.26038C5.30001 8.2078 5.3627 8.16617 5.43167 8.13788C5.50064 8.1096 5.57452 8.09522 5.64907 8.09557L6.59187 8.09865C6.74218 8.09865 6.88635 8.15836 6.99263 8.26465C7.09893 8.37094 7.15865 8.5151 7.15865 8.66543V12.2303C7.26478 12.1988 7.4011 12.1652 7.55026 12.1301C7.65387 12.1058 7.74621 12.0471 7.8123 11.9637C7.87839 11.8803 7.91434 11.777 7.91432 11.6705V7.24848C7.91432 7.09814 7.97403 6.95397 8.08032 6.84766C8.1866 6.74135 8.33077 6.68162 8.4811 6.68158H9.42577C9.57609 6.68162 9.72026 6.74135 9.82655 6.84766C9.93284 6.95397 9.99255 7.09814 9.99255 7.24848V11.3526C9.99255 11.3526 10.2291 11.2569 10.4595 11.1596C10.545 11.1234 10.6181 11.0629 10.6694 10.9854C10.7208 10.908 10.7482 10.8172 10.7483 10.7242V5.83152C10.7483 5.68122 10.808 5.53707 10.9143 5.43078C11.0206 5.32449 11.1647 5.26478 11.315 5.26474H12.2597C12.41 5.26474 12.5542 5.32445 12.6604 5.43075C12.7667 5.53704 12.8265 5.6812 12.8265 5.83152V9.86056C13.6455 9.267 14.4754 8.55315 15.1341 7.69474C15.2297 7.57015 15.2929 7.42383 15.3181 7.26887C15.3434 7.1139 15.3299 6.95509 15.2788 6.8066C14.9739 5.9294 14.4894 5.12551 13.856 4.44636C13.2226 3.76722 12.4544 3.22777 11.6005 2.86256C10.7467 2.49734 9.82602 2.31439 8.89742 2.32542C7.96882 2.33645 7.05275 2.54121 6.20783 2.9266C5.36291 3.31199 4.60774 3.86952 3.99066 4.56352C3.37358 5.25751 2.90817 6.07269 2.62422 6.95689C2.34027 7.84107 2.24403 8.7748 2.34166 9.69832C2.43929 10.6218 2.72863 11.5148 3.19118 12.3201C3.27176 12.459 3.39031 12.572 3.53289 12.6459C3.67548 12.7198 3.83618 12.7514 3.99614 12.7372C4.17482 12.7215 4.3973 12.6992 4.66181 12.6681C4.77695 12.655 4.88326 12.6001 4.96048 12.5137C5.0377 12.4273 5.08043 12.3155 5.08053 12.1996L5.08042 8.66148Z"
|
||||
fill="#7D7D7D"
|
||||
/>
|
||||
<path
|
||||
d="M5.05957 14.3792C6.05531 15.1036 7.23206 15.5384 8.45961 15.6356C9.68716 15.7326 10.9176 15.4883 12.0149 14.9294C13.1122 14.3705 14.0334 13.519 14.6768 12.4691C15.3201 11.4191 15.6605 10.2116 15.6601 8.98024C15.6601 8.82658 15.653 8.67457 15.6428 8.52344C13.2041 12.1605 8.70139 13.8609 5.05978 14.3786"
|
||||
fill="#7D7D7D"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
@ -102,6 +102,41 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the
|
||||
padding: 4px 0px;
|
||||
}
|
||||
|
||||
.c58 {
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
-webkit-align-items: space-between;
|
||||
-webkit-box-align: space-between;
|
||||
-ms-flex-align: space-between;
|
||||
align-items: space-between;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.c73 {
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
color: #7D7D7D;
|
||||
}
|
||||
@ -110,6 +145,25 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.c67 {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-transition-duration: 125ms;
|
||||
transition-duration: 125ms;
|
||||
color: #FC72FF;
|
||||
stroke: #FC72FF;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.c67:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.c67:active {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -230,6 +284,33 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the
|
||||
color: #FF5F52;
|
||||
}
|
||||
|
||||
.c72 {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 250ms ease-in;
|
||||
transition: opacity 250ms ease-in;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.c71 {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #22222212;
|
||||
-webkit-transition: background-color 250ms ease-in;
|
||||
transition: background-color 250ms ease-in;
|
||||
box-shadow: 0 0 1px white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.c70 {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.c18 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -383,12 +464,155 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the
|
||||
object-position: 100% 0;
|
||||
}
|
||||
|
||||
.c60 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.c60 img {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.c60 img:first-child {
|
||||
border-radius: 10px 0 0 10px;
|
||||
object-position: 0 0;
|
||||
}
|
||||
|
||||
.c60 img:last-child {
|
||||
border-radius: 0 10px 10px 0;
|
||||
object-position: 100% 0;
|
||||
}
|
||||
|
||||
.c15 {
|
||||
width: 32px;
|
||||
width: 16px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.c61 {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.c62 {
|
||||
display: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.c59 {
|
||||
gap: 8px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.c69 {
|
||||
gap: 8px;
|
||||
margin-right: 12px;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-transition-duration: 125ms;
|
||||
transition-duration: 125ms;
|
||||
}
|
||||
|
||||
.c69:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.c69:active {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.c63 {
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.c65 {
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 20px;
|
||||
background-color: #22222212;
|
||||
font-size: 14px;
|
||||
font-weight: 535;
|
||||
line-height: 16px;
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-transition-duration: 125ms;
|
||||
transition-duration: 125ms;
|
||||
}
|
||||
|
||||
.c65:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.c65:active {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.c66 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #7D7D7D;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.c68 {
|
||||
padding: 8px;
|
||||
border-radius: 20px;
|
||||
background-color: #22222212;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-transition-duration: 125ms;
|
||||
transition-duration: 125ms;
|
||||
}
|
||||
|
||||
.c68:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.c68:active {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.c64 {
|
||||
gap: 8px;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.c44 {
|
||||
font-weight: 485;
|
||||
font-size: 24px;
|
||||
@ -629,6 +853,35 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the
|
||||
min-width: 360px;
|
||||
}
|
||||
|
||||
.c55 {
|
||||
gap: 24px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.c56 {
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
font-weight: 485;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.c57 {
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width:1023px) and (min-width:395px) {
|
||||
.c62 {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1023px) and (min-width:395px) {
|
||||
.c63 {
|
||||
color: #7D7D7D;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1023px) {
|
||||
.c44 {
|
||||
width: 100%;
|
||||
@ -729,6 +982,24 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1023px) and (min-width:640px) {
|
||||
.c55 {
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
padding: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:639px) {
|
||||
.c55 {
|
||||
padding: unset;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
@ -1696,6 +1967,345 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c3 c55"
|
||||
>
|
||||
<div
|
||||
class="c56 css-vurnku"
|
||||
>
|
||||
Links
|
||||
</div>
|
||||
<div
|
||||
class="c3 c57"
|
||||
>
|
||||
<div
|
||||
class="c0 c58"
|
||||
>
|
||||
<div
|
||||
class="c0 c1 c59"
|
||||
data-testid="pdp-pool-logo-USDC-WETH"
|
||||
>
|
||||
<div
|
||||
class="c60"
|
||||
>
|
||||
<img
|
||||
class="c61"
|
||||
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
|
||||
/>
|
||||
<img
|
||||
class="c61"
|
||||
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="c9 c62 css-1urox24"
|
||||
>
|
||||
Pool
|
||||
</div>
|
||||
<div
|
||||
class="c9 c63 css-1urox24"
|
||||
>
|
||||
USDC / WETH
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c0 c1 c64"
|
||||
>
|
||||
<div
|
||||
class="c0 c1 c65"
|
||||
data-testid="copy-address-0x88e6a0c2ddd26feeb64f039a2c41296fcb3f5640"
|
||||
>
|
||||
0x88e6...5640
|
||||
<svg
|
||||
class="c66"
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
height="13"
|
||||
rx="2"
|
||||
ry="2"
|
||||
width="13"
|
||||
x="9"
|
||||
y="9"
|
||||
/>
|
||||
<path
|
||||
d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<a
|
||||
class="c67"
|
||||
data-testid="explorer-url-https://etherscan.io/address/0x88e6a0c2ddd26feeb64f039a2c41296fcb3f5640"
|
||||
href="https://etherscan.io/address/0x88e6a0c2ddd26feeb64f039a2c41296fcb3f5640"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
class="c68"
|
||||
>
|
||||
<svg
|
||||
fill="#7D7D7D"
|
||||
height="16px"
|
||||
stroke="transparent"
|
||||
viewBox="0 0 18 18"
|
||||
width="16px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.08042 8.66148C5.08043 8.58693 5.09517 8.51313 5.12378 8.44429C5.1524 8.37546 5.19432 8.31297 5.24716 8.26038C5.30001 8.2078 5.3627 8.16617 5.43167 8.13788C5.50064 8.1096 5.57452 8.09522 5.64907 8.09557L6.59187 8.09865C6.74218 8.09865 6.88635 8.15836 6.99263 8.26465C7.09893 8.37094 7.15865 8.5151 7.15865 8.66543V12.2303C7.26478 12.1988 7.4011 12.1652 7.55026 12.1301C7.65387 12.1058 7.74621 12.0471 7.8123 11.9637C7.87839 11.8803 7.91434 11.777 7.91432 11.6705V7.24848C7.91432 7.09814 7.97403 6.95397 8.08032 6.84766C8.1866 6.74135 8.33077 6.68162 8.4811 6.68158H9.42577C9.57609 6.68162 9.72026 6.74135 9.82655 6.84766C9.93284 6.95397 9.99255 7.09814 9.99255 7.24848V11.3526C9.99255 11.3526 10.2291 11.2569 10.4595 11.1596C10.545 11.1234 10.6181 11.0629 10.6694 10.9854C10.7208 10.908 10.7482 10.8172 10.7483 10.7242V5.83152C10.7483 5.68122 10.808 5.53707 10.9143 5.43078C11.0206 5.32449 11.1647 5.26478 11.315 5.26474H12.2597C12.41 5.26474 12.5542 5.32445 12.6604 5.43075C12.7667 5.53704 12.8265 5.6812 12.8265 5.83152V9.86056C13.6455 9.267 14.4754 8.55315 15.1341 7.69474C15.2297 7.57015 15.2929 7.42383 15.3181 7.26887C15.3434 7.1139 15.3299 6.95509 15.2788 6.8066C14.9739 5.9294 14.4894 5.12551 13.856 4.44636C13.2226 3.76722 12.4544 3.22777 11.6005 2.86256C10.7467 2.49734 9.82602 2.31439 8.89742 2.32542C7.96882 2.33645 7.05275 2.54121 6.20783 2.9266C5.36291 3.31199 4.60774 3.86952 3.99066 4.56352C3.37358 5.25751 2.90817 6.07269 2.62422 6.95689C2.34027 7.84107 2.24403 8.7748 2.34166 9.69832C2.43929 10.6218 2.72863 11.5148 3.19118 12.3201C3.27176 12.459 3.39031 12.572 3.53289 12.6459C3.67548 12.7198 3.83618 12.7514 3.99614 12.7372C4.17482 12.7215 4.3973 12.6992 4.66181 12.6681C4.77695 12.655 4.88326 12.6001 4.96048 12.5137C5.0377 12.4273 5.08043 12.3155 5.08053 12.1996L5.08042 8.66148Z"
|
||||
fill="#7D7D7D"
|
||||
/>
|
||||
<path
|
||||
d="M5.05957 14.3792C6.05531 15.1036 7.23206 15.5384 8.45961 15.6356C9.68716 15.7326 10.9176 15.4883 12.0149 14.9294C13.1122 14.3705 14.0334 13.519 14.6768 12.4691C15.3201 11.4191 15.6605 10.2116 15.6601 8.98024C15.6601 8.82658 15.653 8.67457 15.6428 8.52344C13.2041 12.1605 8.70139 13.8609 5.05978 14.3786"
|
||||
fill="#7D7D7D"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c0 c58"
|
||||
>
|
||||
<div
|
||||
class="c0 c1 c69"
|
||||
data-testid="pdp-token-logo-USDC"
|
||||
>
|
||||
<div
|
||||
class="c70"
|
||||
style="height: 20px; width: 20px;"
|
||||
>
|
||||
<div
|
||||
class="c71"
|
||||
>
|
||||
<img
|
||||
alt="UNKNOWN logo"
|
||||
class="c72"
|
||||
loading="lazy"
|
||||
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c9 c62 css-1urox24"
|
||||
>
|
||||
USD Coin
|
||||
</div>
|
||||
<div
|
||||
class="c9 c63 css-1urox24"
|
||||
>
|
||||
<div
|
||||
class="c0 c73"
|
||||
>
|
||||
USDC
|
||||
<svg
|
||||
fill="none"
|
||||
height="16"
|
||||
stroke="#7D7D7D"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<polyline
|
||||
points="9 18 15 12 9 6"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c0 c1 c64"
|
||||
>
|
||||
<div
|
||||
class="c0 c1 c65"
|
||||
data-testid="copy-address-0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48"
|
||||
>
|
||||
0xA0b8...eB48
|
||||
<svg
|
||||
class="c66"
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
height="13"
|
||||
rx="2"
|
||||
ry="2"
|
||||
width="13"
|
||||
x="9"
|
||||
y="9"
|
||||
/>
|
||||
<path
|
||||
d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<a
|
||||
class="c67"
|
||||
data-testid="explorer-url-https://etherscan.io/token/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48"
|
||||
href="https://etherscan.io/token/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
class="c68"
|
||||
>
|
||||
<svg
|
||||
fill="#7D7D7D"
|
||||
height="16px"
|
||||
stroke="transparent"
|
||||
viewBox="0 0 18 18"
|
||||
width="16px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.08042 8.66148C5.08043 8.58693 5.09517 8.51313 5.12378 8.44429C5.1524 8.37546 5.19432 8.31297 5.24716 8.26038C5.30001 8.2078 5.3627 8.16617 5.43167 8.13788C5.50064 8.1096 5.57452 8.09522 5.64907 8.09557L6.59187 8.09865C6.74218 8.09865 6.88635 8.15836 6.99263 8.26465C7.09893 8.37094 7.15865 8.5151 7.15865 8.66543V12.2303C7.26478 12.1988 7.4011 12.1652 7.55026 12.1301C7.65387 12.1058 7.74621 12.0471 7.8123 11.9637C7.87839 11.8803 7.91434 11.777 7.91432 11.6705V7.24848C7.91432 7.09814 7.97403 6.95397 8.08032 6.84766C8.1866 6.74135 8.33077 6.68162 8.4811 6.68158H9.42577C9.57609 6.68162 9.72026 6.74135 9.82655 6.84766C9.93284 6.95397 9.99255 7.09814 9.99255 7.24848V11.3526C9.99255 11.3526 10.2291 11.2569 10.4595 11.1596C10.545 11.1234 10.6181 11.0629 10.6694 10.9854C10.7208 10.908 10.7482 10.8172 10.7483 10.7242V5.83152C10.7483 5.68122 10.808 5.53707 10.9143 5.43078C11.0206 5.32449 11.1647 5.26478 11.315 5.26474H12.2597C12.41 5.26474 12.5542 5.32445 12.6604 5.43075C12.7667 5.53704 12.8265 5.6812 12.8265 5.83152V9.86056C13.6455 9.267 14.4754 8.55315 15.1341 7.69474C15.2297 7.57015 15.2929 7.42383 15.3181 7.26887C15.3434 7.1139 15.3299 6.95509 15.2788 6.8066C14.9739 5.9294 14.4894 5.12551 13.856 4.44636C13.2226 3.76722 12.4544 3.22777 11.6005 2.86256C10.7467 2.49734 9.82602 2.31439 8.89742 2.32542C7.96882 2.33645 7.05275 2.54121 6.20783 2.9266C5.36291 3.31199 4.60774 3.86952 3.99066 4.56352C3.37358 5.25751 2.90817 6.07269 2.62422 6.95689C2.34027 7.84107 2.24403 8.7748 2.34166 9.69832C2.43929 10.6218 2.72863 11.5148 3.19118 12.3201C3.27176 12.459 3.39031 12.572 3.53289 12.6459C3.67548 12.7198 3.83618 12.7514 3.99614 12.7372C4.17482 12.7215 4.3973 12.6992 4.66181 12.6681C4.77695 12.655 4.88326 12.6001 4.96048 12.5137C5.0377 12.4273 5.08043 12.3155 5.08053 12.1996L5.08042 8.66148Z"
|
||||
fill="#7D7D7D"
|
||||
/>
|
||||
<path
|
||||
d="M5.05957 14.3792C6.05531 15.1036 7.23206 15.5384 8.45961 15.6356C9.68716 15.7326 10.9176 15.4883 12.0149 14.9294C13.1122 14.3705 14.0334 13.519 14.6768 12.4691C15.3201 11.4191 15.6605 10.2116 15.6601 8.98024C15.6601 8.82658 15.653 8.67457 15.6428 8.52344C13.2041 12.1605 8.70139 13.8609 5.05978 14.3786"
|
||||
fill="#7D7D7D"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c0 c58"
|
||||
>
|
||||
<div
|
||||
class="c0 c1 c69"
|
||||
data-testid="pdp-token-logo-WETH"
|
||||
>
|
||||
<div
|
||||
class="c70"
|
||||
style="height: 20px; width: 20px;"
|
||||
>
|
||||
<div
|
||||
class="c71"
|
||||
>
|
||||
<img
|
||||
alt="WETH logo"
|
||||
class="c72"
|
||||
loading="lazy"
|
||||
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c9 c62 css-1urox24"
|
||||
>
|
||||
Wrapped Ether
|
||||
</div>
|
||||
<div
|
||||
class="c9 c63 css-1urox24"
|
||||
>
|
||||
<div
|
||||
class="c0 c73"
|
||||
>
|
||||
WETH
|
||||
<svg
|
||||
fill="none"
|
||||
height="16"
|
||||
stroke="#7D7D7D"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<polyline
|
||||
points="9 18 15 12 9 6"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c0 c1 c64"
|
||||
>
|
||||
<div
|
||||
class="c0 c1 c65"
|
||||
data-testid="copy-address-0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2"
|
||||
>
|
||||
0xC02a...6Cc2
|
||||
<svg
|
||||
class="c66"
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
height="13"
|
||||
rx="2"
|
||||
ry="2"
|
||||
width="13"
|
||||
x="9"
|
||||
y="9"
|
||||
/>
|
||||
<path
|
||||
d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<a
|
||||
class="c67"
|
||||
data-testid="explorer-url-https://etherscan.io/token/0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2"
|
||||
href="https://etherscan.io/token/0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
class="c68"
|
||||
>
|
||||
<svg
|
||||
fill="#7D7D7D"
|
||||
height="16px"
|
||||
stroke="transparent"
|
||||
viewBox="0 0 18 18"
|
||||
width="16px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.08042 8.66148C5.08043 8.58693 5.09517 8.51313 5.12378 8.44429C5.1524 8.37546 5.19432 8.31297 5.24716 8.26038C5.30001 8.2078 5.3627 8.16617 5.43167 8.13788C5.50064 8.1096 5.57452 8.09522 5.64907 8.09557L6.59187 8.09865C6.74218 8.09865 6.88635 8.15836 6.99263 8.26465C7.09893 8.37094 7.15865 8.5151 7.15865 8.66543V12.2303C7.26478 12.1988 7.4011 12.1652 7.55026 12.1301C7.65387 12.1058 7.74621 12.0471 7.8123 11.9637C7.87839 11.8803 7.91434 11.777 7.91432 11.6705V7.24848C7.91432 7.09814 7.97403 6.95397 8.08032 6.84766C8.1866 6.74135 8.33077 6.68162 8.4811 6.68158H9.42577C9.57609 6.68162 9.72026 6.74135 9.82655 6.84766C9.93284 6.95397 9.99255 7.09814 9.99255 7.24848V11.3526C9.99255 11.3526 10.2291 11.2569 10.4595 11.1596C10.545 11.1234 10.6181 11.0629 10.6694 10.9854C10.7208 10.908 10.7482 10.8172 10.7483 10.7242V5.83152C10.7483 5.68122 10.808 5.53707 10.9143 5.43078C11.0206 5.32449 11.1647 5.26478 11.315 5.26474H12.2597C12.41 5.26474 12.5542 5.32445 12.6604 5.43075C12.7667 5.53704 12.8265 5.6812 12.8265 5.83152V9.86056C13.6455 9.267 14.4754 8.55315 15.1341 7.69474C15.2297 7.57015 15.2929 7.42383 15.3181 7.26887C15.3434 7.1139 15.3299 6.95509 15.2788 6.8066C14.9739 5.9294 14.4894 5.12551 13.856 4.44636C13.2226 3.76722 12.4544 3.22777 11.6005 2.86256C10.7467 2.49734 9.82602 2.31439 8.89742 2.32542C7.96882 2.33645 7.05275 2.54121 6.20783 2.9266C5.36291 3.31199 4.60774 3.86952 3.99066 4.56352C3.37358 5.25751 2.90817 6.07269 2.62422 6.95689C2.34027 7.84107 2.24403 8.7748 2.34166 9.69832C2.43929 10.6218 2.72863 11.5148 3.19118 12.3201C3.27176 12.459 3.39031 12.572 3.53289 12.6459C3.67548 12.7198 3.83618 12.7514 3.99614 12.7372C4.17482 12.7215 4.3973 12.6992 4.66181 12.6681C4.77695 12.655 4.88326 12.6001 4.96048 12.5137C5.0377 12.4273 5.08043 12.3155 5.08053 12.1996L5.08042 8.66148Z"
|
||||
fill="#7D7D7D"
|
||||
/>
|
||||
<path
|
||||
d="M5.05957 14.3792C6.05531 15.1036 7.23206 15.5384 8.45961 15.6356C9.68716 15.7326 10.9176 15.4883 12.0149 14.9294C13.1122 14.3705 14.0334 13.519 14.6768 12.4691C15.3201 11.4191 15.6605 10.2116 15.6601 8.98024C15.6601 8.82658 15.653 8.67457 15.6428 8.52344C13.2041 12.1605 8.70139 13.8609 5.05978 14.3786"
|
||||
fill="#7D7D7D"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { Trans } from '@lingui/macro'
|
||||
import Column from 'components/Column'
|
||||
import Row from 'components/Row'
|
||||
import { LoadingBubble } from 'components/Tokens/loading'
|
||||
@ -7,15 +8,16 @@ import { usePoolData } from 'graphql/thegraph/PoolData'
|
||||
import NotFound from 'pages/NotFound'
|
||||
import { useReducer } from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { Text } from 'rebass'
|
||||
import styled from 'styled-components'
|
||||
import { BREAKPOINTS } from 'theme'
|
||||
import { isAddress } from 'utils'
|
||||
|
||||
import { PoolDetailsHeader } from './PoolDetailsHeader'
|
||||
import { PoolDetailsLink } from './PoolDetailsLink'
|
||||
import { PoolDetailsStats } from './PoolDetailsStats'
|
||||
import { PoolDetailsStatsButtons } from './PoolDetailsStatsButtons'
|
||||
import { PoolDetailsTableSkeleton } from './PoolDetailsTableSkeleton'
|
||||
import { DetailBubble, SmallDetailBubble } from './shared'
|
||||
|
||||
const PageWrapper = styled(Row)`
|
||||
padding: 48px;
|
||||
@ -55,11 +57,6 @@ const ChartHeaderBubble = styled(LoadingBubble)`
|
||||
height: 32px;
|
||||
`
|
||||
|
||||
const LinkColumn = styled(Column)`
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
`
|
||||
|
||||
const RightColumn = styled(Column)`
|
||||
gap: 24px;
|
||||
margin: 0 48px 0 auto;
|
||||
@ -73,6 +70,33 @@ const RightColumn = styled(Column)`
|
||||
}
|
||||
`
|
||||
|
||||
const TokenDetailsWrapper = styled(Column)`
|
||||
gap: 24px;
|
||||
padding: 20px;
|
||||
|
||||
@media (max-width: ${BREAKPOINTS.lg - 1}px) and (min-width: ${BREAKPOINTS.sm}px) {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: unset;
|
||||
}
|
||||
|
||||
@media (max-width: ${BREAKPOINTS.sm - 1}px) {
|
||||
padding: unset;
|
||||
}
|
||||
`
|
||||
|
||||
const TokenDetailsHeader = styled(Text)`
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
font-weight: 485;
|
||||
line-height: 32px;
|
||||
`
|
||||
|
||||
const LinksContainer = styled(Column)`
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
`
|
||||
|
||||
export default function PoolDetailsPage() {
|
||||
const { poolAddress, chainName } = useParams<{
|
||||
poolAddress: string
|
||||
@ -116,19 +140,16 @@ export default function PoolDetailsPage() {
|
||||
loading={loading}
|
||||
/>
|
||||
<PoolDetailsStats poolData={poolData} isReversed={isReversed} chainId={chainId} loading={loading} />
|
||||
{(token0 || token1 || loading) &&
|
||||
(loading ? (
|
||||
<LinkColumn data-testid="pdp-links-loading-skeleton">
|
||||
<DetailBubble $height={24} $width={116} />
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<Row gap="8px" key={`loading-link-row-${i}`}>
|
||||
<SmallDetailBubble />
|
||||
<DetailBubble $width={117} />
|
||||
</Row>
|
||||
))}
|
||||
</LinkColumn>
|
||||
) : null)}
|
||||
{/* TODO(WEB-2985) replace with new Token Links component */}
|
||||
<TokenDetailsWrapper>
|
||||
<TokenDetailsHeader>
|
||||
<Trans>Links</Trans>
|
||||
</TokenDetailsHeader>
|
||||
<LinksContainer>
|
||||
<PoolDetailsLink address={poolAddress} chainId={chainId} tokens={[token0, token1]} loading={loading} />
|
||||
<PoolDetailsLink address={token0?.id} chainId={chainId} tokens={[token0]} loading={loading} />
|
||||
<PoolDetailsLink address={token1?.id} chainId={chainId} tokens={[token1]} loading={loading} />
|
||||
</LinksContainer>
|
||||
</TokenDetailsWrapper>
|
||||
</RightColumn>
|
||||
</PageWrapper>
|
||||
)
|
||||
|
||||
@ -89,9 +89,11 @@ export const useMultiChainPositionsReturnValue = {
|
||||
loading: false,
|
||||
}
|
||||
|
||||
export const usdcWethPoolAddress = '0x88e6a0c2ddd26feeb64f039a2c41296fcb3f5640'
|
||||
|
||||
export const validPoolDataResponse = {
|
||||
data: {
|
||||
id: '0x88e6a0c2ddd26feeb64f039a2c41296fcb3f5640',
|
||||
id: usdcWethPoolAddress,
|
||||
feeTier: 500,
|
||||
liquidity: parseFloat('26414803986874770777'),
|
||||
sqrtPrice: parseFloat('1977320351696380862605029898750440'),
|
||||
@ -108,7 +110,7 @@ export const validPoolDataResponse = {
|
||||
totalValueLockedToken1: '130641.89297715763283183',
|
||||
totalValueLockedUSD: '399590762.8476702153638342035105795',
|
||||
__typename: 'Pool',
|
||||
address: '0x88e6a0c2ddd26feeb64f039a2c41296fcb3f5640',
|
||||
address: usdcWethPoolAddress,
|
||||
volumeUSDChange: -17.753809465717136,
|
||||
volumeUSDWeek: 1359911419.265625,
|
||||
tvlUSD: 223166198.4690675,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user