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

* 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

src/components/Tokens/TokenDetails/Skeleton.tsx

@@ -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) {

src/components/Tokens/TokenDetails/TokenDescription.test.tsx

@@ -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('Info')).toBeVisible()
-    expect(screen.getByText('USDCoin')).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()

src/components/Tokens/TokenDetails/TokenDescription.tsx

@@ -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 color = useTheme().neutral1
-  const theme = useTheme()
+  const chainName = chainIdToBackendName(chainId)
-  const color = useColor(currency?.wrapped, theme.surface1, theme.darkMode)
   const { data: tokenQuery } = useTokenProjectQuery({
     variables: {
-      address: tokenAddress,
+      address: isNative ? getNativeTokenDBAddress(chainName) : tokenAddress,
-      chain: chainIdToBackendName(chainId),
+      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 truncatedDescription = truncateDescription(description ?? '', characterCount)
-  const shouldTruncate = !!description && description.length > TRUNCATE_CHARACTER_COUNT
+  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>
+      <ThemedText.HeadlineSmall>
-        <CurrencyLogo currency={currency} size="20px" />
+        <Trans>Info</Trans>
-        <TokenName>{currency?.name}</TokenName>
+      </ThemedText.HeadlineSmall>
-        <ThemedText.BodySecondary>{currency?.symbol}</ThemedText.BodySecondary>
-      </TokenNameRow>
       <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>
   )
 }

src/components/Tokens/TokenDetails/index.tsx

@@ -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} />}
 

src/components/swap/SwapLineItem.tsx

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

src/pages/PoolDetails/__snapshots__/index.test.tsx.snap

@@ -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>

src/pages/PoolDetails/index.tsx

@@ -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>
-          ) : (
+          ) : null)}
-            <TokenDetailsWrapper>
+        {/* TODO(WEB-2985) replace with new Token Links component */}
-              <TokenDetailsHeader>
-                <Trans>Info</Trans>
-              </TokenDetailsHeader>
-              {token0 && <TokenDescription tokenAddress={token0.id} chainId={chainId} />}
-              {token1 && <TokenDescription tokenAddress={token1.id} chainId={chainId} />}
-            </TokenDetailsWrapper>
-          ))}
       </RightColumn>
     </PageWrapper>
   )

src/utils/getExplorerLink.ts

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