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('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()

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 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>
   )
 }

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

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TokenDescription copy address button hidden when flagged 1`] = `
-<DocumentFragment>
-  .c2 {
-  box-sizing: border-box;
-  margin: 0;
-  min-width: 0;
-}
-
-.c3 {
-  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;
-}
-
-.c7 {
-  color: #222222;
-}
-
-.c9 {
-  color: #7D7D7D;
-}
-
-.c11 {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  -webkit-transition-duration: 125ms;
-  transition-duration: 125ms;
-  color: #FC72FF;
-  stroke: #FC72FF;
-  font-weight: 500;
-}
-
-.c11:hover {
-  opacity: 0.6;
-}
-
-.c11:active {
-  opacity: 0.4;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
-.c6 {
-  --size: 20px;
-  border-radius: 100px;
-  color: #222222;
-  background-color: #22222212;
-  font-size: calc(var(--size) / 3);
-  font-weight: 535;
-  height: 20px;
-  line-height: 20px;
-  text-align: center;
-  width: 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c5 {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c16 {
-  color: #7D7D7D;
-  font-weight: 485;
-  font-size: 0.85em;
-  padding-top: 0.5em;
-}
-
-.c16:hover,
-.c16:focus {
-  color: #636363;
-  cursor: pointer;
-}
-
-.c1 {
-  gap: 12px;
-  width: 100%;
-}
-
-.c4 {
-  gap: 8px;
-  width: 100%;
-}
-
-.c8 {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c10 {
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.c12 {
-  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;
-}
-
-.c12:hover {
-  opacity: 0.6;
-}
-
-.c12:active {
-  opacity: 0.4;
-}
-
-.c13 {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  line-height: 24px;
-  white-space: pre-wrap;
-}
-
-.c14 {
-  display: none;
-}
-
-.c15 {
-  display: inline;
-}
-
-@media (max-width:1023px) and (min-width:640px) {
-  .c1 {
-    max-width: 45%;
-  }
-}
-
-<div
-    class="c0 c1"
-  >
-    <div
-      class="c2 c3 c4"
-    >
-      <div
-        class="c5"
-        style="height: 20px; width: 20px;"
-      >
-        <div
-          class="c6"
-        >
-          USD
-        </div>
-      </div>
-      <div
-        class="c7 c8 css-1urox24"
-      >
-        USDCoin
-      </div>
-      <div
-        class="c9 css-1urox24"
-      >
-        USDC
-      </div>
-    </div>
-    <div
-      class="c2 c3 c4 c10"
-    >
-      <a
-        class="c11"
-        href="https://etherscan.io/token/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        <div
-          class="c2 c3 c12"
-        >
-          <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>
-      <a
-        class="c11"
-        href="https://www.circle.com/en/usdc"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        <div
-          class="c2 c3 c12"
-        >
-          <svg
-            fill="#FC72FF"
-            height="18px"
-            stroke="transparent"
-            viewBox="0 0 18 18"
-            width="18px"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M5.12245 9.5625C5.23495 11.8725 6.01495 14.2275 7.37245 16.32C4.19245 15.615 1.76996 12.8925 1.52246 9.5625H5.12245ZM7.37245 1.67999C4.19245 2.38499 1.76996 5.1075 1.52246 8.4375H5.12245C5.23495 6.1275 6.01495 3.77249 7.37245 1.67999ZM9.14997 1.5H8.84995L8.62496 1.82249C7.19996 3.84749 6.36745 6.1725 6.24745 8.4375H11.7525C11.6325 6.1725 10.8 3.84749 9.37496 1.82249L9.14997 1.5ZM6.24745 9.5625C6.36745 11.8275 7.19996 14.1525 8.62496 16.1775L8.84995 16.5H9.14997L9.37496 16.1775C10.8 14.1525 11.6325 11.8275 11.7525 9.5625H6.24745ZM12.8775 9.5625C12.765 11.8725 11.985 14.2275 10.6275 16.32C13.8075 15.615 16.23 12.8925 16.4775 9.5625H12.8775ZM16.4775 8.4375C16.23 5.1075 13.8075 2.38499 10.6275 1.67999C11.985 3.77249 12.765 6.1275 12.8775 8.4375H16.4775Z"
-              fill="#FC72FF"
-            />
-          </svg>
-          Website
-        </div>
-      </a>
-      <a
-        class="c11"
-        href="https://x.com/circle"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        <div
-          class="c2 c3 c12"
-        >
-          <svg
-            fill="#FC72FF"
-            height="18px"
-            stroke="transparent"
-            viewBox="0 0 18 18"
-            width="18px"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M12.8761 3H14.9451L10.4251 8.16609L15.7425 15.196H11.579L8.31797 10.9324L4.58662 15.196H2.51644L7.35104 9.67026L2.25 3H6.51922L9.46689 6.89708L12.8761 3ZM12.15 13.9576H13.2964L5.89628 4.17332H4.66605L12.15 13.9576Z"
-              fill="#FC72FF"
-            />
-          </svg>
-          Twitter
-        </div>
-      </a>
-    </div>
-    <div
-      class="c7 c13 css-1urox24"
-    >
-      <span
-        class="c14"
-        data-testid="token-description-full"
-      >
-        USDC is a fully collateralized US dollar stablecoin. USDC is the bridge between dollars and trading on cryptocurrency exchanges. The technology behind CENTRE makes it possible to exchange value between people, businesses and financial institutions just like email between mail services and texts between SMS providers. We believe by removing artificial economic borders, we can create a more inclusive global economy.
-      </span>
-      <span
-        class="c15"
-        data-testid="token-description-truncated"
-      >
-        USDC is a fully collateralized US dollar stablecoin. USDC is the bridge...
-      </span>
-      <div
-        class="c16"
-        data-testid="token-description-show-more-button"
-      >
-        Show more
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
 exports[`TokenDescription no description or social buttons shown when not available 1`] = `
 <DocumentFragment>
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
 }
 
-.c3 {
+.c4 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -345,15 +25,11 @@ exports[`TokenDescription no description or social buttons shown when not availa
   justify-content: flex-start;
 }
 
-.c7 {
+.c2 {
   color: #222222;
 }
 
-.c9 {
-  color: #7D7D7D;
-}
-
-.c12 {
+.c8 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -364,11 +40,11 @@ exports[`TokenDescription no description or social buttons shown when not availa
   font-weight: 500;
 }
 
-.c12:hover {
+.c8:hover {
   opacity: 0.6;
 }
 
-.c12:active {
+.c8:active {
   opacity: 0.4;
 }
 
@@ -386,73 +62,34 @@ exports[`TokenDescription no description or social buttons shown when not availa
   justify-content: flex-start;
 }
 
-.c6 {
-  --size: 20px;
-  border-radius: 100px;
-  color: #222222;
-  background-color: #22222212;
-  font-size: calc(var(--size) / 3);
-  font-weight: 535;
-  height: 20px;
-  line-height: 20px;
-  text-align: center;
-  width: 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c5 {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c14 {
+.c10 {
   color: #CECECE;
   font-weight: 485;
   font-size: 16px;
 }
 
 .c1 {
-  gap: 12px;
+  gap: 16px;
   width: 100%;
 }
 
-.c4 {
+.c5 {
   gap: 8px;
   width: 100%;
 }
 
-.c8 {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c10 {
+.c6 {
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
 }
 
-.c11 {
+.c7 {
   gap: 8px;
   padding: 8px 12px;
   border-radius: 20px;
-  color: #FC72FF;
-  background-color: #FC72FF1f;
+  color: #222222;
+  background-color: #2222221f;
   font-size: 14px;
   font-weight: 535;
   line-height: 16px;
@@ -466,15 +103,15 @@ exports[`TokenDescription no description or social buttons shown when not availa
   transition-duration: 125ms;
 }
 
-.c11:hover {
+.c7:hover {
   opacity: 0.6;
 }
 
-.c11:active {
+.c7:active {
   opacity: 0.4;
 }
 
-.c13 {
+.c9 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -493,39 +130,20 @@ exports[`TokenDescription no description or social buttons shown when not availa
     class="c0 c1"
   >
     <div
-      class="c2 c3 c4"
+      class="c2 css-1jyz67g"
     >
-      <div
-        class="c5"
-        style="height: 20px; width: 20px;"
-      >
-        <div
-          class="c6"
-        >
-          USD
-        </div>
-      </div>
-      <div
-        class="c7 c8 css-1urox24"
-      >
-        USDCoin
-      </div>
-      <div
-        class="c9 css-1urox24"
-      >
-        USDC
-      </div>
+      Info
     </div>
     <div
-      class="c2 c3 c4 c10"
+      class="c3 c4 c5 c6"
     >
       <div
-        class="c2 c3 c11"
+        class="c3 c4 c7"
       >
         <svg
           fill="none"
           height="18px"
-          stroke="#FC72FF"
+          stroke="#222222"
           stroke-linecap="round"
           stroke-linejoin="round"
           stroke-width="2"
@@ -548,16 +166,16 @@ exports[`TokenDescription no description or social buttons shown when not availa
         0xA0b8...eB48
       </div>
       <a
-        class="c12"
+        class="c8"
         href="https://etherscan.io/token/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
         rel="noopener noreferrer"
         target="_blank"
       >
         <div
-          class="c2 c3 c11"
+          class="c3 c4 c7"
         >
           <svg
-            fill="#FC72FF"
+            fill="#222222"
             height="18px"
             stroke="transparent"
             viewBox="0 0 18 18"
@@ -566,11 +184,11 @@ exports[`TokenDescription no description or social buttons shown when not availa
           >
             <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"
+              fill="#222222"
             />
             <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"
+              fill="#222222"
             />
           </svg>
           Etherscan
@@ -578,10 +196,10 @@ exports[`TokenDescription no description or social buttons shown when not availa
       </a>
     </div>
     <div
-      class="c7 c13 css-1urox24"
+      class="c2 c9 css-1urox24"
     >
       <span
-        class="c14"
+        class="c10"
       >
         No token information available
       </span>
@@ -592,13 +210,13 @@ exports[`TokenDescription no description or social buttons shown when not availa
 
 exports[`TokenDescription renders token information correctly with defaults 1`] = `
 <DocumentFragment>
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
 }
 
-.c3 {
+.c4 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -615,15 +233,11 @@ exports[`TokenDescription renders token information correctly with defaults 1`]
   justify-content: flex-start;
 }
 
-.c7 {
+.c2 {
   color: #222222;
 }
 
-.c9 {
-  color: #7D7D7D;
-}
-
-.c12 {
+.c8 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -634,11 +248,11 @@ exports[`TokenDescription renders token information correctly with defaults 1`]
   font-weight: 500;
 }
 
-.c12:hover {
+.c8:hover {
   opacity: 0.6;
 }
 
-.c12:active {
+.c8:active {
   opacity: 0.4;
 }
 
@@ -656,80 +270,41 @@ exports[`TokenDescription renders token information correctly with defaults 1`]
   justify-content: flex-start;
 }
 
-.c6 {
-  --size: 20px;
-  border-radius: 100px;
-  color: #222222;
-  background-color: #22222212;
-  font-size: calc(var(--size) / 3);
-  font-weight: 535;
-  height: 20px;
-  line-height: 20px;
-  text-align: center;
-  width: 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c5 {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c16 {
+.c12 {
   color: #7D7D7D;
   font-weight: 485;
   font-size: 0.85em;
   padding-top: 0.5em;
 }
 
-.c16:hover,
-.c16:focus {
+.c12:hover,
+.c12:focus {
   color: #636363;
   cursor: pointer;
 }
 
 .c1 {
-  gap: 12px;
+  gap: 16px;
   width: 100%;
 }
 
-.c4 {
+.c5 {
   gap: 8px;
   width: 100%;
 }
 
-.c8 {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c10 {
+.c6 {
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
 }
 
-.c11 {
+.c7 {
   gap: 8px;
   padding: 8px 12px;
   border-radius: 20px;
-  color: #FC72FF;
-  background-color: #FC72FF1f;
+  color: #222222;
+  background-color: #2222221f;
   font-size: 14px;
   font-weight: 535;
   line-height: 16px;
@@ -743,15 +318,15 @@ exports[`TokenDescription renders token information correctly with defaults 1`]
   transition-duration: 125ms;
 }
 
-.c11:hover {
+.c7:hover {
   opacity: 0.6;
 }
 
-.c11:active {
+.c7:active {
   opacity: 0.4;
 }
 
-.c13 {
+.c9 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -760,11 +335,11 @@ exports[`TokenDescription renders token information correctly with defaults 1`]
   white-space: pre-wrap;
 }
 
-.c14 {
+.c10 {
   display: none;
 }
 
-.c15 {
+.c11 {
   display: inline;
 }
 
@@ -778,39 +353,20 @@ exports[`TokenDescription renders token information correctly with defaults 1`]
     class="c0 c1"
   >
     <div
-      class="c2 c3 c4"
+      class="c2 css-1jyz67g"
     >
-      <div
-        class="c5"
-        style="height: 20px; width: 20px;"
-      >
-        <div
-          class="c6"
-        >
-          USD
-        </div>
-      </div>
-      <div
-        class="c7 c8 css-1urox24"
-      >
-        USDCoin
-      </div>
-      <div
-        class="c9 css-1urox24"
-      >
-        USDC
-      </div>
+      Info
     </div>
     <div
-      class="c2 c3 c4 c10"
+      class="c3 c4 c5 c6"
     >
       <div
-        class="c2 c3 c11"
+        class="c3 c4 c7"
       >
         <svg
           fill="none"
           height="18px"
-          stroke="#FC72FF"
+          stroke="#222222"
           stroke-linecap="round"
           stroke-linejoin="round"
           stroke-width="2"
@@ -833,16 +389,16 @@ exports[`TokenDescription renders token information correctly with defaults 1`]
         0xA0b8...eB48
       </div>
       <a
-        class="c12"
+        class="c8"
         href="https://etherscan.io/token/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
         rel="noopener noreferrer"
         target="_blank"
       >
         <div
-          class="c2 c3 c11"
+          class="c3 c4 c7"
         >
           <svg
-            fill="#FC72FF"
+            fill="#222222"
             height="18px"
             stroke="transparent"
             viewBox="0 0 18 18"
@@ -851,27 +407,27 @@ exports[`TokenDescription renders token information correctly with defaults 1`]
           >
             <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"
+              fill="#222222"
             />
             <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"
+              fill="#222222"
             />
           </svg>
           Etherscan
         </div>
       </a>
       <a
-        class="c12"
+        class="c8"
         href="https://www.circle.com/en/usdc"
         rel="noopener noreferrer"
         target="_blank"
       >
         <div
-          class="c2 c3 c11"
+          class="c3 c4 c7"
         >
           <svg
-            fill="#FC72FF"
+            fill="#222222"
             height="18px"
             stroke="transparent"
             viewBox="0 0 18 18"
@@ -880,23 +436,23 @@ exports[`TokenDescription renders token information correctly with defaults 1`]
           >
             <path
               d="M5.12245 9.5625C5.23495 11.8725 6.01495 14.2275 7.37245 16.32C4.19245 15.615 1.76996 12.8925 1.52246 9.5625H5.12245ZM7.37245 1.67999C4.19245 2.38499 1.76996 5.1075 1.52246 8.4375H5.12245C5.23495 6.1275 6.01495 3.77249 7.37245 1.67999ZM9.14997 1.5H8.84995L8.62496 1.82249C7.19996 3.84749 6.36745 6.1725 6.24745 8.4375H11.7525C11.6325 6.1725 10.8 3.84749 9.37496 1.82249L9.14997 1.5ZM6.24745 9.5625C6.36745 11.8275 7.19996 14.1525 8.62496 16.1775L8.84995 16.5H9.14997L9.37496 16.1775C10.8 14.1525 11.6325 11.8275 11.7525 9.5625H6.24745ZM12.8775 9.5625C12.765 11.8725 11.985 14.2275 10.6275 16.32C13.8075 15.615 16.23 12.8925 16.4775 9.5625H12.8775ZM16.4775 8.4375C16.23 5.1075 13.8075 2.38499 10.6275 1.67999C11.985 3.77249 12.765 6.1275 12.8775 8.4375H16.4775Z"
-              fill="#FC72FF"
+              fill="#222222"
             />
           </svg>
           Website
         </div>
       </a>
       <a
-        class="c12"
+        class="c8"
         href="https://x.com/circle"
         rel="noopener noreferrer"
         target="_blank"
       >
         <div
-          class="c2 c3 c11"
+          class="c3 c4 c7"
         >
           <svg
-            fill="#FC72FF"
+            fill="#222222"
             height="18px"
             stroke="transparent"
             viewBox="0 0 18 18"
@@ -905,7 +461,7 @@ exports[`TokenDescription renders token information correctly with defaults 1`]
           >
             <path
               d="M12.8761 3H14.9451L10.4251 8.16609L15.7425 15.196H11.579L8.31797 10.9324L4.58662 15.196H2.51644L7.35104 9.67026L2.25 3H6.51922L9.46689 6.89708L12.8761 3ZM12.15 13.9576H13.2964L5.89628 4.17332H4.66605L12.15 13.9576Z"
-              fill="#FC72FF"
+              fill="#222222"
             />
           </svg>
           Twitter
@@ -913,22 +469,22 @@ exports[`TokenDescription renders token information correctly with defaults 1`]
       </a>
     </div>
     <div
-      class="c7 c13 css-1urox24"
+      class="c2 c9 css-1urox24"
     >
       <span
-        class="c14"
+        class="c10"
         data-testid="token-description-full"
       >
         USDC is a fully collateralized US dollar stablecoin. USDC is the bridge between dollars and trading on cryptocurrency exchanges. The technology behind CENTRE makes it possible to exchange value between people, businesses and financial institutions just like email between mail services and texts between SMS providers. We believe by removing artificial economic borders, we can create a more inclusive global economy.
       </span>
       <span
-        class="c15"
+        class="c11"
         data-testid="token-description-truncated"
       >
         USDC is a fully collateralized US dollar stablecoin. USDC is the bridge...
       </span>
       <div
-        class="c16"
+        class="c12"
         data-testid="token-description-show-more-button"
       >
         Show more
@@ -940,13 +496,13 @@ exports[`TokenDescription renders token information correctly with defaults 1`]
 
 exports[`TokenDescription truncates description and shows more 1`] = `
 <DocumentFragment>
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
 }
 
-.c3 {
+.c4 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -963,15 +519,11 @@ exports[`TokenDescription truncates description and shows more 1`] = `
   justify-content: flex-start;
 }
 
-.c7 {
+.c2 {
   color: #222222;
 }
 
-.c9 {
-  color: #7D7D7D;
-}
-
-.c12 {
+.c8 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -982,11 +534,11 @@ exports[`TokenDescription truncates description and shows more 1`] = `
   font-weight: 500;
 }
 
-.c12:hover {
+.c8:hover {
   opacity: 0.6;
 }
 
-.c12:active {
+.c8:active {
   opacity: 0.4;
 }
 
@@ -1004,80 +556,41 @@ exports[`TokenDescription truncates description and shows more 1`] = `
   justify-content: flex-start;
 }
 
-.c6 {
-  --size: 20px;
-  border-radius: 100px;
-  color: #222222;
-  background-color: #22222212;
-  font-size: calc(var(--size) / 3);
-  font-weight: 535;
-  height: 20px;
-  line-height: 20px;
-  text-align: center;
-  width: 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c5 {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c16 {
+.c12 {
   color: #7D7D7D;
   font-weight: 485;
   font-size: 0.85em;
   padding-top: 0.5em;
 }
 
-.c16:hover,
-.c16:focus {
+.c12:hover,
+.c12:focus {
   color: #636363;
   cursor: pointer;
 }
 
 .c1 {
-  gap: 12px;
+  gap: 16px;
   width: 100%;
 }
 
-.c4 {
+.c5 {
   gap: 8px;
   width: 100%;
 }
 
-.c8 {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c10 {
+.c6 {
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
 }
 
-.c11 {
+.c7 {
   gap: 8px;
   padding: 8px 12px;
   border-radius: 20px;
-  color: #FC72FF;
-  background-color: #FC72FF1f;
+  color: #222222;
+  background-color: #2222221f;
   font-size: 14px;
   font-weight: 535;
   line-height: 16px;
@@ -1091,15 +604,15 @@ exports[`TokenDescription truncates description and shows more 1`] = `
   transition-duration: 125ms;
 }
 
-.c11:hover {
+.c7:hover {
   opacity: 0.6;
 }
 
-.c11:active {
+.c7:active {
   opacity: 0.4;
 }
 
-.c13 {
+.c9 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1108,11 +621,11 @@ exports[`TokenDescription truncates description and shows more 1`] = `
   white-space: pre-wrap;
 }
 
-.c14 {
+.c10 {
   display: none;
 }
 
-.c15 {
+.c11 {
   display: inline;
 }
 
@@ -1126,39 +639,20 @@ exports[`TokenDescription truncates description and shows more 1`] = `
     class="c0 c1"
   >
     <div
-      class="c2 c3 c4"
+      class="c2 css-1jyz67g"
     >
-      <div
-        class="c5"
-        style="height: 20px; width: 20px;"
-      >
-        <div
-          class="c6"
-        >
-          USD
-        </div>
-      </div>
-      <div
-        class="c7 c8 css-1urox24"
-      >
-        USDCoin
-      </div>
-      <div
-        class="c9 css-1urox24"
-      >
-        USDC
-      </div>
+      Info
     </div>
     <div
-      class="c2 c3 c4 c10"
+      class="c3 c4 c5 c6"
     >
       <div
-        class="c2 c3 c11"
+        class="c3 c4 c7"
       >
         <svg
           fill="none"
           height="18px"
-          stroke="#FC72FF"
+          stroke="#222222"
           stroke-linecap="round"
           stroke-linejoin="round"
           stroke-width="2"
@@ -1181,16 +675,16 @@ exports[`TokenDescription truncates description and shows more 1`] = `
         0xA0b8...eB48
       </div>
       <a
-        class="c12"
+        class="c8"
         href="https://etherscan.io/token/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
         rel="noopener noreferrer"
         target="_blank"
       >
         <div
-          class="c2 c3 c11"
+          class="c3 c4 c7"
         >
           <svg
-            fill="#FC72FF"
+            fill="#222222"
             height="18px"
             stroke="transparent"
             viewBox="0 0 18 18"
@@ -1199,27 +693,27 @@ exports[`TokenDescription truncates description and shows more 1`] = `
           >
             <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"
+              fill="#222222"
             />
             <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"
+              fill="#222222"
             />
           </svg>
           Etherscan
         </div>
       </a>
       <a
-        class="c12"
+        class="c8"
         href="https://www.circle.com/en/usdc"
         rel="noopener noreferrer"
         target="_blank"
       >
         <div
-          class="c2 c3 c11"
+          class="c3 c4 c7"
         >
           <svg
-            fill="#FC72FF"
+            fill="#222222"
             height="18px"
             stroke="transparent"
             viewBox="0 0 18 18"
@@ -1228,23 +722,23 @@ exports[`TokenDescription truncates description and shows more 1`] = `
           >
             <path
               d="M5.12245 9.5625C5.23495 11.8725 6.01495 14.2275 7.37245 16.32C4.19245 15.615 1.76996 12.8925 1.52246 9.5625H5.12245ZM7.37245 1.67999C4.19245 2.38499 1.76996 5.1075 1.52246 8.4375H5.12245C5.23495 6.1275 6.01495 3.77249 7.37245 1.67999ZM9.14997 1.5H8.84995L8.62496 1.82249C7.19996 3.84749 6.36745 6.1725 6.24745 8.4375H11.7525C11.6325 6.1725 10.8 3.84749 9.37496 1.82249L9.14997 1.5ZM6.24745 9.5625C6.36745 11.8275 7.19996 14.1525 8.62496 16.1775L8.84995 16.5H9.14997L9.37496 16.1775C10.8 14.1525 11.6325 11.8275 11.7525 9.5625H6.24745ZM12.8775 9.5625C12.765 11.8725 11.985 14.2275 10.6275 16.32C13.8075 15.615 16.23 12.8925 16.4775 9.5625H12.8775ZM16.4775 8.4375C16.23 5.1075 13.8075 2.38499 10.6275 1.67999C11.985 3.77249 12.765 6.1275 12.8775 8.4375H16.4775Z"
-              fill="#FC72FF"
+              fill="#222222"
             />
           </svg>
           Website
         </div>
       </a>
       <a
-        class="c12"
+        class="c8"
         href="https://x.com/circle"
         rel="noopener noreferrer"
         target="_blank"
       >
         <div
-          class="c2 c3 c11"
+          class="c3 c4 c7"
         >
           <svg
-            fill="#FC72FF"
+            fill="#222222"
             height="18px"
             stroke="transparent"
             viewBox="0 0 18 18"
@@ -1253,7 +747,7 @@ exports[`TokenDescription truncates description and shows more 1`] = `
           >
             <path
               d="M12.8761 3H14.9451L10.4251 8.16609L15.7425 15.196H11.579L8.31797 10.9324L4.58662 15.196H2.51644L7.35104 9.67026L2.25 3H6.51922L9.46689 6.89708L12.8761 3ZM12.15 13.9576H13.2964L5.89628 4.17332H4.66605L12.15 13.9576Z"
-              fill="#FC72FF"
+              fill="#222222"
             />
           </svg>
           Twitter
@@ -1261,22 +755,22 @@ exports[`TokenDescription truncates description and shows more 1`] = `
       </a>
     </div>
     <div
-      class="c7 c13 css-1urox24"
+      class="c2 c9 css-1urox24"
     >
       <span
-        class="c14"
+        class="c10"
         data-testid="token-description-full"
       >
         USDC is a fully collateralized US dollar stablecoin. USDC is the bridge between dollars and trading on cryptocurrency exchanges. The technology behind CENTRE makes it possible to exchange value between people, businesses and financial institutions just like email between mail services and texts between SMS providers. We believe by removing artificial economic borders, we can create a more inclusive global economy.
       </span>
       <span
-        class="c15"
+        class="c11"
         data-testid="token-description-truncated"
       >
         USDC is a fully collateralized US dollar stablecoin. USDC is the bridge...
       </span>
       <div
-        class="c16"
+        class="c12"
         data-testid="token-description-show-more-button"
       >
         Show more

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

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

src/utils/getExplorerLink.ts

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