fix: error when hitting enter on search (#4721)

* fixed issue
* fixed comment

src/components/NavBar/SuggestionRow.tsx

 import clsx from 'clsx'
-import { useGlobalChainName } from 'graphql/data/util'
+import { getTokenDetailsURL } from 'graphql/data/util'
 import uriToHttp from 'lib/utils/uriToHttp'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
@@ -112,12 +112,13 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index
     toggleOpen()
   }, [addToSearchHistory, toggleOpen, token])
 
+  const tokenDetailsPath = getTokenDetailsURL(token.address, undefined, token.chainId)
   // Close the modal on escape
   useEffect(() => {
     const keyDownHandler = (event: KeyboardEvent) => {
       if (event.key === 'Enter' && isHovered) {
         event.preventDefault()
-        navigate(`/tokens/${token.address}`)
+        navigate(tokenDetailsPath)
         handleClick()
       }
     }
@@ -125,11 +126,11 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index
     return () => {
       document.removeEventListener('keydown', keyDownHandler)
     }
-  }, [toggleOpen, isHovered, token, navigate, handleClick])
+  }, [toggleOpen, isHovered, token, navigate, handleClick, tokenDetailsPath])
 
   return (
     <Link
-      to={`/tokens/${useGlobalChainName().toLowerCase()}/${token.address}`}
+      to={tokenDetailsPath}
       onClick={handleClick}
       onMouseEnter={() => !isHovered && setHoveredIndex(index)}
       onMouseLeave={() => isHovered && setHoveredIndex(undefined)}

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -7,7 +7,7 @@ import CurrencyLogo from 'components/CurrencyLogo'
 import { getChainInfo } from 'constants/chainInfo'
 import { FavoriteTokensVariant, useFavoriteTokensFlag } from 'featureFlags/flags/favoriteTokens'
 import { TokenSortMethod, TopToken } from 'graphql/data/TopTokens'
-import { CHAIN_NAME_TO_CHAIN_ID, TimePeriod } from 'graphql/data/util'
+import { CHAIN_NAME_TO_CHAIN_ID, getTokenDetailsURL, TimePeriod } from 'graphql/data/util'
 import { useAtomValue } from 'jotai/utils'
 import { ForwardedRef, forwardRef } from 'react'
 import { CSSProperties, ReactNode } from 'react'
@@ -488,7 +488,6 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
   const arrow = delta ? getDeltaArrow(delta) : null
   const formattedDelta = delta ? formatDelta(delta) : null
   const sortAscending = useAtomValue(sortAscendingAtom)
-  const { chainName } = useParams<{ chainName?: string }>()
 
   const exploreTokenSelectedEventProperties = {
     chain_id: filterNetwork,
@@ -504,7 +503,7 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
   return (
     <div ref={ref}>
       <StyledLink
-        to={`/tokens/${chainName}/${tokenAddress}`}
+        to={getTokenDetailsURL(token.address, token.chain)}
         onClick={() => sendAnalyticsEvent(EventName.EXPLORE_TOKEN_ROW_CLICKED, exploreTokenSelectedEventProperties)}
       >
         <TokenRow

src/graphql/data/Token.ts

@@ -38,10 +38,10 @@ The difference between Token and TokenProject:
 const tokenQuery = graphql`
   query TokenQuery($contract: ContractInput!, $duration: HistoryDuration!) {
     tokens(contracts: [$contract]) {
-      id
+      id @required(action: LOG)
       name
-      chain
-      address
+      chain @required(action: LOG)
+      address @required(action: LOG)
       symbol
       market(currency: USD) {
         totalValueLocked {

src/graphql/data/TopTokens.ts

@@ -27,10 +27,10 @@ export function usePrefetchTopTokens(duration: HistoryDuration, chain: Chain) {
 const topTokens100Query = graphql`
   query TopTokens100Query($duration: HistoryDuration!, $chain: Chain!) {
     topTokens(pageSize: 100, page: 1, chain: $chain) {
-      id
+      id @required(action: LOG)
       name
-      chain
-      address
+      chain @required(action: LOG)
+      address @required(action: LOG)
       symbol
       market(currency: USD) {
         totalValueLocked {
@@ -251,10 +251,10 @@ export function useTopTokens(chain: Chain): UseTopTokensReturnValue {
 export const tokensQuery = graphql`
   query TopTokens_TokensQuery($contracts: [ContractInput!]!, $duration: HistoryDuration!) {
     tokens(contracts: $contracts) {
-      id
+      id @required(action: LOG)
       name
-      chain
-      address
+      chain @required(action: LOG)
+      address @required(action: LOG)
       symbol
       market(currency: USD) {
         totalValueLocked {

src/graphql/data/util.ts

@@ -29,7 +29,7 @@ export function toHistoryDuration(timePeriod: TimePeriod): HistoryDuration {
   }
 }
 
-export const CHAIN_IDS_TO_BACKEND_NAME: { [key: number]: Chain } = {
+export const CHAIN_ID_TO_BACKEND_NAME: { [key: number]: Chain } = {
   [SupportedChainId.MAINNET]: 'ETHEREUM',
   [SupportedChainId.GOERLI]: 'ETHEREUM_GOERLI',
   [SupportedChainId.POLYGON]: 'POLYGON',
@@ -44,7 +44,7 @@ export const CHAIN_IDS_TO_BACKEND_NAME: { [key: number]: Chain } = {
 
 export function useGlobalChainName() {
   const chainId = useAppSelector((state) => state.application.chainId)
-  return chainId && CHAIN_IDS_TO_BACKEND_NAME[chainId] ? CHAIN_IDS_TO_BACKEND_NAME[chainId] : 'ETHEREUM'
+  return chainId && CHAIN_ID_TO_BACKEND_NAME[chainId] ? CHAIN_ID_TO_BACKEND_NAME[chainId] : 'ETHEREUM'
 }
 
 export const URL_CHAIN_PARAM_TO_BACKEND: { [key: string]: Chain } = {
@@ -76,3 +76,14 @@ export function isValidBackendChainName(chainName: string | undefined): chainNam
   }
   return false
 }
+
+export function getTokenDetailsURL(address: string, chainName?: Chain, chainId?: number) {
+  if (chainName) {
+    return `/tokens/${chainName.toLowerCase()}/${address}`
+  } else if (chainId) {
+    const chainName = CHAIN_ID_TO_BACKEND_NAME[chainId]
+    return chainName ? `/tokens/${chainName.toLowerCase()}/${address}` : ''
+  } else {
+    return ''
+  }
+}