fix: include descriptions and links for native tokens (#5756)

cypress/e2e/token.test.ts

@@ -17,4 +17,18 @@ describe('Testing tokens on uniswap page', () => {
     cy.get(getTestSelector('token-details-return-button')).click()
     cy.get(getTestSelectorStartsWith('token-table')).its('length').should('be.gte', 25)
   })
+
+  it('should go to native token on ethereum and render description', () => {
+    cy.visit('/tokens/ethereum/NATIVE')
+    cy.get(getTestSelector('token-details-about-section')).should('exist')
+    cy.contains('Ethereum is a smart contract platform that enables developers').should('exist')
+    cy.contains('Etherscan').should('exist')
+  })
+
+  it('should go to native token on polygon and render description and links', () => {
+    cy.visit('/tokens/polygon/NATIVE')
+    cy.get(getTestSelector('token-details-about-section')).should('exist')
+    cy.contains('Wrapped Matic on Polygon').should('exist')
+    cy.contains('Block Explorer').should('exist')
+  })
 })

src/components/Tokens/TokenDetails/About.tsx

 import { Trans } from '@lingui/macro'
+import { SupportedChainId } from '@uniswap/sdk-core'
+import { getChainInfo } from 'constants/chainInfo'
 import { darken } from 'polished'
 import { useState } from 'react'
 import styled from 'styled-components/macro'
@@ -65,19 +67,22 @@ const ResourcesContainer = styled.div`
 
 type AboutSectionProps = {
   address: string
+  chainId: SupportedChainId
   description?: string | null | undefined
   homepageUrl?: string | null | undefined
   twitterName?: string | null | undefined
 }
 
-export function AboutSection({ address, description, homepageUrl, twitterName }: AboutSectionProps) {
+export function AboutSection({ address, chainId, description, homepageUrl, twitterName }: AboutSectionProps) {
   const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(true)
   const shouldTruncate = !!description && description.length > TRUNCATE_CHARACTER_COUNT
 
   const tokenDescription = shouldTruncate && isDescriptionTruncated ? truncateDescription(description) : description
 
+  const baseExplorerUrl = getChainInfo(chainId).explorer
+
   return (
-    <AboutContainer>
+    <AboutContainer data-testid="token-details-about-section">
       <AboutHeader>
         <Trans>About</Trans>
       </AboutHeader>
@@ -99,7 +104,11 @@ export function AboutSection({ address, description, homepageUrl, twitterName }:
         <Trans>Links</Trans>
       </ThemedText.SubHeaderSmall>
       <ResourcesContainer>
-        <Resource name="Etherscan" link={`https://etherscan.io/address/${address}`} />
+        <Resource
+          data-testid="token-details-about-section-explorer-link"
+          name={chainId === SupportedChainId.MAINNET ? 'Etherscan' : 'Block Explorer'}
+          link={`${baseExplorerUrl}${address === 'NATIVE' ? '' : 'address/' + address}`}
+        />
         <Resource name="More analytics" link={`https://info.uniswap.org/#/tokens/${address}`} />
         {homepageUrl && <Resource name="Website" link={homepageUrl} />}
         {twitterName && <Resource name="Twitter" link={`https://twitter.com/${twitterName}`} />}

src/components/Tokens/TokenDetails/Skeleton.tsx

@@ -25,7 +25,7 @@ export const TokenDetailsLayout = styled.div`
 
   @media screen and (min-width: ${({ theme }) => theme.breakpoint.sm}px) {
     gap: 16px;
-    padding: 0 16px;
+    padding: 0 16px 52px;
   }
   @media screen and (min-width: ${({ theme }) => theme.breakpoint.md}px) {
     gap: 40px;

src/components/Tokens/TokenDetails/index.tsx

@@ -206,18 +206,15 @@ export default function TokenDetails({
               priceHigh52W={tokenQueryData?.market?.priceHigh52W?.value}
               priceLow52W={tokenQueryData?.market?.priceLow52W?.value}
             />
-            {!token.isNative && (
-              <>
-                <Hr />
-                <AboutSection
-                  address={address}
-                  description={tokenQueryData?.project?.description}
-                  homepageUrl={tokenQueryData?.project?.homepageUrl}
-                  twitterName={tokenQueryData?.project?.twitterName}
-                />
-                <AddressSection address={address} />
-              </>
-            )}
+            <Hr />
+            <AboutSection
+              address={address}
+              chainId={pageChainId}
+              description={tokenQueryData?.project?.description}
+              homepageUrl={tokenQueryData?.project?.homepageUrl}
+              twitterName={tokenQueryData?.project?.twitterName}
+            />
+            {!token.isNative && <AddressSection address={address} />}
           </LeftPanel>
         ) : (
           <TokenDetailsSkeleton />

src/pages/TokenDetails/index.tsx

@@ -7,6 +7,7 @@ import { useAtom } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
 import { useMemo } from 'react'
 import { useParams } from 'react-router-dom'
+import { getNativeTokenDBAddress } from 'utils/nativeTokens'
 
 export const pageTimePeriodAtom = atomWithStorage<TimePeriod>('tokenDetailsTimePeriod', TimePeriod.DAY)
 
@@ -26,7 +27,7 @@ export default function TokenDetailsPage() {
 
   const { data: tokenQuery, loading: tokenQueryLoading } = useTokenQuery({
     variables: {
-      contract,
+      contract: isNative ? { address: getNativeTokenDBAddress(chain), chain } : contract,
     },
   })
 

src/utils/nativeTokens.ts

+import { nativeOnChain } from 'constants/tokens'
+import { Chain } from 'graphql/data/__generated__/types-and-hooks'
+import { CHAIN_NAME_TO_CHAIN_ID } from 'graphql/data/util'
+
+export function getNativeTokenDBAddress(chain: Chain): string {
+  const pageChainId = CHAIN_NAME_TO_CHAIN_ID[chain]
+  switch (chain) {
+    case Chain.Celo:
+    case Chain.Polygon:
+      return nativeOnChain(pageChainId).wrapped.address
+    case Chain.Ethereum:
+    case Chain.Arbitrum:
+    case Chain.EthereumGoerli:
+    case Chain.Optimism:
+      return 'ETH'
+  }
+}