ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: [info] Add token description to TDP (#7504)

Browse Source 
* update token description for TDP

* add tooltip to fee

* show buy/sell fees

* remove token description from PDP

* remove unused styles

* update snapshots

* undo fee component testing

* isInfoTDPEnabled

* update explorer fn
This commit is contained in:
Charles Bachmeier 2023-11-02 08:32:58 -07:00 committed by GitHub
parent b995f4d671
commit f9a9469523
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 196 additions and 997 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Tokens/TokenDetails/Skeleton.tsx
View File

@ -41,10 +41,10 @@ export const LeftPanel = styled.div`
max-width: 780px;
overflow: hidden;
`
export const RightPanel = styled.div`
export const RightPanel = styled.div<{ isInfoTDPEnabled?: boolean }>`
display: none;
flex-direction: column;
gap: 20px;
gap: ${({ isInfoTDPEnabled }) => (isInfoTDPEnabled ? 40 : 20)}px;
width: ${SWAP_COMPONENT_WIDTH}px;
@media screen and (min-width: ${({ theme }) => theme.breakpoint.lg}px) {

16
src/components/Tokens/TokenDetails/TokenDescription.test.tsx
View File

@ -34,11 +34,10 @@ describe('TokenDescription', () => {
})
it('renders token information correctly with defaults', () => {
const { asFragment } = render(<TokenDescription tokenAddress={tokenAddress} showCopy />)
const { asFragment } = render(<TokenDescription tokenAddress={tokenAddress} />)
expect(asFragment()).toMatchSnapshot()
expect(screen.getByText('USDC')).toBeVisible()
expect(screen.getByText('USDCoin')).toBeVisible()
expect(screen.getByText('Info')).toBeVisible()
expect(screen.getByText('Website')).toBeVisible()
expect(screen.getByText('Twitter')).toBeVisible()
expect(screen.getByText('Etherscan')).toBeVisible()
@ -46,7 +45,7 @@ describe('TokenDescription', () => {
})
it('truncates description and shows more', async () => {
const { asFragment } = render(<TokenDescription tokenAddress={tokenAddress} showCopy />)
const { asFragment } = render(<TokenDescription tokenAddress={tokenAddress} />)
expect(asFragment()).toMatchSnapshot()
const truncatedDescription = screen.getByTestId('token-description-truncated')
@ -61,19 +60,12 @@ describe('TokenDescription', () => {
expect(screen.getByText('Hide')).toBeVisible()
})
it('copy address button hidden when flagged', async () => {
const { asFragment } = render(<TokenDescription tokenAddress={tokenAddress} />)
expect(asFragment()).toMatchSnapshot()
expect(screen.queryByText('0xA0b8...eB48')).toBeNull()
})
it('no description or social buttons shown when not available', async () => {
mocked(useTokenProjectQuery).mockReturnValue({ data: undefined } as unknown as QueryResult<
TokenProjectQuery,
Exact<{ chain: Chain; address?: string }>
>)
const { asFragment } = render(<TokenDescription tokenAddress={tokenAddress} showCopy />)
const { asFragment } = render(<TokenDescription tokenAddress={tokenAddress} />)
expect(asFragment()).toMatchSnapshot()
expect(screen.getByText('No token information available')).toBeVisible()

88
src/components/Tokens/TokenDetails/TokenDescription.tsx
View File

@ -4,14 +4,14 @@ import Column from 'components/Column'
import { EtherscanLogo } from 'components/Icons/Etherscan'
import { Globe } from 'components/Icons/Globe'
import { TwitterXLogo } from 'components/Icons/TwitterX'
import CurrencyLogo from 'components/Logo/CurrencyLogo'
import Row from 'components/Row'
import { FOTTooltipContent } from 'components/swap/SwapLineItem'
import { NoInfoAvailable, truncateDescription, TruncateDescriptionButton } from 'components/Tokens/TokenDetails/shared'
import { MouseoverTooltip, TooltipSize } from 'components/Tooltip'
import { useTokenProjectQuery } from 'graphql/data/__generated__/types-and-hooks'
import { chainIdToBackendName } from 'graphql/data/util'
import { useCurrency } from 'hooks/Tokens'
import { useColor } from 'hooks/useColor'
import useCopyClipboard from 'hooks/useCopyClipboard'
import { useSwapTaxes } from 'hooks/useSwapTaxes'
import { useCallback, useReducer } from 'react'
import { Copy } from 'react-feather'
import styled, { useTheme } from 'styled-components'
@ -19,10 +19,12 @@ import { BREAKPOINTS } from 'theme'
import { ClickableStyle, EllipsisStyle, ExternalLink, ThemedText } from 'theme/components'
import { opacify } from 'theme/utils'
import { shortenAddress } from 'utils'
import { useFormatter } from 'utils/formatNumbers'
import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
import { getNativeTokenDBAddress } from 'utils/nativeTokens'
const TokenInfoSection = styled(Column)`
gap: 12px;
gap: 16px;
width: 100%;
@media (max-width: ${BREAKPOINTS.lg - 1}px) and (min-width: ${BREAKPOINTS.sm}px) {
@ -35,10 +37,6 @@ const TokenNameRow = styled(Row)`
width: 100%;
`
const TokenName = styled(ThemedText.BodyPrimary)`
${EllipsisStyle}
`
const TokenButtonRow = styled(TokenNameRow)`
flex-wrap: wrap;
`
@ -73,25 +71,30 @@ const TRUNCATE_CHARACTER_COUNT = 75
export function TokenDescription({
tokenAddress,
chainId = ChainId.MAINNET,
showCopy = false,
isNative = false,
characterCount = TRUNCATE_CHARACTER_COUNT,
}: {
tokenAddress: string
chainId?: number
showCopy?: boolean
isNative?: boolean
characterCount?: number
}) {
const currency = useCurrency(tokenAddress, chainId)
const theme = useTheme()
const color = useColor(currency?.wrapped, theme.surface1, theme.darkMode)
const color = useTheme().neutral1
const chainName = chainIdToBackendName(chainId)
const { data: tokenQuery } = useTokenProjectQuery({
variables: {
address: tokenAddress,
chain: chainIdToBackendName(chainId),
address: isNative ? getNativeTokenDBAddress(chainName) : tokenAddress,
chain: chainName,
},
errorPolicy: 'all',
})
const tokenProject = tokenQuery?.token?.project
const description = tokenProject?.description
const explorerUrl = getExplorerLink(chainId, tokenAddress, ExplorerDataType.TOKEN)
const explorerUrl = getExplorerLink(
chainId,
tokenAddress,
isNative ? ExplorerDataType.NATIVE : ExplorerDataType.TOKEN
)
const [, setCopied] = useCopyClipboard()
const copy = useCallback(() => {
@ -99,19 +102,25 @@ export function TokenDescription({
}, [tokenAddress, setCopied])
const [isDescriptionTruncated, toggleIsDescriptionTruncated] = useReducer((x) => !x, true)
const truncatedDescription = truncateDescription(description ?? '', TRUNCATE_CHARACTER_COUNT)
const shouldTruncate = !!description && description.length > TRUNCATE_CHARACTER_COUNT
const truncatedDescription = truncateDescription(description ?? '', characterCount)
const shouldTruncate = !!description && description.length > characterCount
const showTruncatedDescription = shouldTruncate && isDescriptionTruncated
const { inputTax: sellFee, outputTax: buyFee } = useSwapTaxes(tokenAddress, tokenAddress)
const { formatPercent } = useFormatter()
const { sellFeeString, buyFeeString } = {
sellFeeString: formatPercent(sellFee),
buyFeeString: formatPercent(buyFee),
}
const hasFee = Boolean(parseFloat(sellFeeString)) || Boolean(parseFloat(buyFee.toFixed(2)))
const sameFee = sellFeeString === buyFeeString
return (
<TokenInfoSection>
<TokenNameRow>
<CurrencyLogo currency={currency} size="20px" />
<TokenName>{currency?.name}</TokenName>
<ThemedText.BodySecondary>{currency?.symbol}</ThemedText.BodySecondary>
</TokenNameRow>
<ThemedText.HeadlineSmall>
<Trans>Info</Trans>
</ThemedText.HeadlineSmall>
<TokenButtonRow>
{showCopy && (
{!isNative && (
<TokenInfoButton tokenColor={color} onClick={copy}>
<Copy width="18px" height="18px" color={color} />
{shortenAddress(tokenAddress)}
@ -165,6 +174,37 @@ export function TokenDescription({
</TruncateDescriptionButton>
)}
</TokenDescriptionContainer>
{hasFee && (
<MouseoverTooltip
placement="left"
size={TooltipSize.Small}
text={
<ThemedText.Caption color="neutral2">
<FOTTooltipContent />
</ThemedText.Caption>
}
>
<Column gap="sm">
{sameFee ? (
<ThemedText.BodyPrimary>
{tokenQuery?.token?.symbol}&nbsp;
<Trans>fee:</Trans>&nbsp;{sellFeeString}
</ThemedText.BodyPrimary>
) : (
<>
<ThemedText.BodyPrimary>
{tokenQuery?.token?.symbol}&nbsp;
<Trans>buy fee:</Trans>&nbsp;{buyFeeString}
</ThemedText.BodyPrimary>{' '}
<ThemedText.BodyPrimary>
{tokenQuery?.token?.symbol}&nbsp;
<Trans>sell fee:</Trans>&nbsp;{sellFeeString}
</ThemedText.BodyPrimary>{' '}
</>
)}
</Column>
</MouseoverTooltip>
)}
</TokenInfoSection>
)
}

730
src/components/Tokens/TokenDetails/__snapshots__/TokenDescription.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

11
src/components/Tokens/TokenDetails/index.tsx
View File

@ -43,6 +43,7 @@ import { addressesAreEquivalent } from 'utils/addressesAreEquivalent'
import { OnChangeTimePeriod } from './ChartSection'
import InvalidTokenDetails from './InvalidTokenDetails'
import { TokenDescription } from './TokenDescription'
const TokenSymbol = styled.span`
text-transform: uppercase;
@ -258,7 +259,7 @@ export default function TokenDetails({
<TokenDetailsSkeleton />
)}
<RightPanel onClick={() => isBlockedToken && setOpenTokenSafetyModal(true)}>
<RightPanel isInfoTDPEnabled={isInfoTDPEnabled} onClick={() => isBlockedToken && setOpenTokenSafetyModal(true)}>
<div style={{ pointerEvents: isBlockedToken ? 'none' : 'auto' }}>
<Swap
chainId={pageChainId}
@ -270,6 +271,14 @@ export default function TokenDetails({
</div>
{tokenWarning && <TokenSafetyMessage tokenAddress={address} warning={tokenWarning} />}
{!isInfoTDPEnabled && detailedToken && <BalanceSummary token={detailedToken} />}
{isInfoTDPEnabled && (
<TokenDescription
tokenAddress={address}
chainId={pageChainId}
isNative={detailedToken?.isNative}
characterCount={200}
/>
)}
</RightPanel>
{!isInfoTDPEnabled && detailedToken && <MobileBalanceSummaryFooter token={detailedToken} />}

2
src/components/swap/SwapLineItem.tsx
View File

@ -63,7 +63,7 @@ const AutoBadge = styled(ThemedText.LabelMicro).attrs({ fontWeight: 535 })`
}
`
function FOTTooltipContent() {
export function FOTTooltipContent() {
return (
<>
<Trans>

305
src/pages/PoolDetails/__snapshots__/index.test.tsx.snap
View File

@ -110,25 +110,6 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the
color: #222222;
}
.c64 {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-transition-duration: 125ms;
transition-duration: 125ms;
color: #FC72FF;
stroke: #FC72FF;
font-weight: 500;
}
.c64:hover {
opacity: 0.6;
}
.c64:active {
opacity: 0.4;
}
.c3 {
display: -webkit-box;
display: -webkit-flex;
@ -249,39 +230,6 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the
color: #FF5F52;
}
.c61 {
opacity: 0;
-webkit-transition: opacity 250ms ease-in;
transition: opacity 250ms ease-in;
width: 20px;
height: 20px;
border-radius: 50%;
}
.c60 {
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%;
}
.c59 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.c67 {
color: #CECECE;
font-weight: 485;
font-size: 16px;
}
.c18 {
display: -webkit-box;
display: -webkit-flex;
@ -347,64 +295,6 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the
height: 6px;
}
.c57 {
gap: 12px;
width: 100%;
}
.c58 {
gap: 8px;
width: 100%;
}
.c62 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.c63 {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.c65 {
gap: 8px;
padding: 8px 12px;
border-radius: 20px;
color: #FC72FF;
background-color: #FC72FF1f;
font-size: 14px;
font-weight: 535;
line-height: 16px;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
-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 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
line-height: 24px;
white-space: pre-wrap;
}
.c33 {
height: 16px;
width: 80px;
@ -739,24 +629,6 @@ 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;
}
@media (max-width:1023px) and (min-width:640px) {
.c57 {
max-width: 45%;
}
}
@media (max-width:1023px) {
.c44 {
width: 100%;
@ -857,24 +729,6 @@ 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"
>
@ -1842,165 +1696,6 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the
</div>
</div>
</div>
<div
class="c3 c55"
>
<div
class="c56 css-vurnku"
>
Info
</div>
<div
class="c3 c57"
>
<div
class="c0 c1 c58"
>
<div
class="c59"
style="height: 20px; width: 20px;"
>
<div
class="c60"
>
<img
alt="UNKNOWN logo"
class="c61"
loading="lazy"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
/>
</div>
</div>
<div
class="c9 c62 css-1urox24"
>
Unknown Token
</div>
<div
class="c8 css-1urox24"
>
UNKNOWN
</div>
</div>
<div
class="c0 c1 c58 c63"
>
<a
class="c64"
href="https://etherscan.io/token/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48"
rel="noopener noreferrer"
target="_blank"
>
<div
class="c0 c1 c65"
>
<svg
fill="#FC72FF"
height="18px"
stroke="transparent"
viewBox="0 0 18 18"
width="18px"
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="#FC72FF"
/>
<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="#FC72FF"
/>
</svg>
Etherscan
</div>
</a>
</div>
<div
class="c9 c66 css-1urox24"
>
<span
class="c67"
>
No token information available
</span>
</div>
</div>
<div
class="c3 c57"
>
<div
class="c0 c1 c58"
>
<div
class="c59"
style="height: 20px; width: 20px;"
>
<div
class="c60"
>
<img
alt="WETH logo"
class="c61"
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="c8 css-1urox24"
>
WETH
</div>
</div>
<div
class="c0 c1 c58 c63"
>
<a
class="c64"
href="https://etherscan.io/token/0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2"
rel="noopener noreferrer"
target="_blank"
>
<div
class="c0 c1 c65"
>
<svg
fill="#FC72FF"
height="18px"
stroke="transparent"
viewBox="0 0 18 18"
width="18px"
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="#FC72FF"
/>
<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="#FC72FF"
/>
</svg>
Etherscan
</div>
</a>
</div>
<div
class="c9 c66 css-1urox24"
>
<span
class="c67"
>
No token information available
</span>
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>

36
src/pages/PoolDetails/index.tsx
View File

@ -1,15 +1,12 @@
import { Trans } from '@lingui/macro'
import Column from 'components/Column'
import Row from 'components/Row'
import { LoadingBubble } from 'components/Tokens/loading'
import { LoadingChart } from 'components/Tokens/TokenDetails/Skeleton'
import { TokenDescription } from 'components/Tokens/TokenDetails/TokenDescription'
import { getValidUrlChainName, supportedChainIdFromGQLChain } from 'graphql/data/util'
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'
@ -76,28 +73,6 @@ 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;
`
export default function PoolDetailsPage() {
const { poolAddress, chainName } = useParams<{
poolAddress: string
@ -152,15 +127,8 @@ export default function PoolDetailsPage() {
</Row>
))}
</LinkColumn>
) : (
<TokenDetailsWrapper>
<TokenDetailsHeader>
<Trans>Info</Trans>
</TokenDetailsHeader>
{token0 && <TokenDescription tokenAddress={token0.id} chainId={chainId} />}
{token1 && <TokenDescription tokenAddress={token1.id} chainId={chainId} />}
</TokenDetailsWrapper>
))}
) : null)}
{/* TODO(WEB-2985) replace with new Token Links component */}
</RightColumn>
</PageWrapper>
)

1
src/utils/getExplorerLink.ts
View File

@ -20,6 +20,7 @@ export enum ExplorerDataType {
TOKEN = 'token',
ADDRESS = 'address',
BLOCK = 'block',
NATIVE = 'native',
}
/**