feat: link to token details from /pool/{} (#6162)

* feat: link to token details from /pool/{}

* use backend chain names

* use fn

src/pages/Pool/PositionPage.tsx

@@ -6,6 +6,7 @@ import { InterfacePageName } from '@uniswap/analytics-events'
 import { formatPrice, NumberType } from '@uniswap/conedison/format'
 import { Currency, CurrencyAmount, Fraction, Percent, Price, Token } from '@uniswap/sdk-core'
 import { NonfungiblePositionManager, Pool, Position } from '@uniswap/v3-sdk'
+import { SupportedChainId } from '@uniswap/widgets'
 import { useWeb3React } from '@web3-react/core'
 import { sendEvent } from 'components/analytics'
 import Badge from 'components/Badge'
@@ -19,6 +20,7 @@ import { RowBetween, RowFixed } from 'components/Row'
 import { Dots } from 'components/swap/styleds'
 import Toggle from 'components/Toggle'
 import TransactionConfirmationModal, { ConfirmationModalContent } from 'components/TransactionConfirmationModal'
+import { CHAIN_ID_TO_BACKEND_NAME, isGqlSupportedChain } from 'graphql/data/util'
 import { useToken } from 'hooks/Tokens'
 import { useV3NFTPositionManagerContract } from 'hooks/useContract'
 import useIsTickAtLimit from 'hooks/useIsTickAtLimit'
@@ -50,6 +52,15 @@ import { calculateGasMargin } from '../../utils/calculateGasMargin'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { LoadingRows } from './styleds'
 
+const getTokenLink = (chainId: SupportedChainId, address: string) => {
+  if (isGqlSupportedChain(chainId)) {
+    const chainName = CHAIN_ID_TO_BACKEND_NAME[chainId]
+    return `${window.location.origin}/#/tokens/${chainName}/${address}`
+  } else {
+    return getExplorerLink(chainId, address, ExplorerDataType.TOKEN)
+  }
+}
+
 const PageWrapper = styled.div`
   padding: 68px 16px 16px 16px;
 
@@ -196,7 +207,7 @@ function LinkedCurrency({ chainId, currency }: { chainId?: number; currency?: Cu
 
   if (typeof chainId === 'number' && address) {
     return (
-      <ExternalLink href={getExplorerLink(chainId, address, ExplorerDataType.TOKEN)}>
+      <ExternalLink href={getTokenLink(chainId, address)}>
         <RowFixed>
           <CurrencyLogo currency={currency} size="20px" style={{ marginRight: '0.5rem' }} />
           <ThemedText.DeprecatedMain>{currency?.symbol} ↗</ThemedText.DeprecatedMain>