fix: search crash and explore row numbering (#4715)

fixed

src/components/NavBar/SuggestionRow.tsx

 import clsx from 'clsx'
+import { useGlobalChainName } from 'graphql/data/util'
 import uriToHttp from 'lib/utils/uriToHttp'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
@@ -128,7 +129,7 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index
 
   return (
     <Link
-      to={`/tokens/${token.address}`}
+      to={`/tokens/${useGlobalChainName().toLowerCase()}/${token.address}`}
       onClick={handleClick}
       onMouseEnter={() => !isHovered && setHoveredIndex(index)}
       onMouseLeave={() => isHovered && setHoveredIndex(undefined)}

src/components/Tokens/TokenTable/TokenTable.tsx

@@ -72,7 +72,8 @@ export default function TokenTable() {
 
   // TODO: consider moving prefetched call into app.tsx and passing it here, use a preloaded call & updated on interval every 60s
   const chainName = validateUrlChainParam(useParams<{ chainName?: string }>().chainName)
-  const { loading, tokens, tokensWithoutPriceHistoryCount, hasMore, loadMoreTokens } = useTopTokens(chainName)
+  const { loading, tokens, tokensWithoutPriceHistoryCount, hasMore, loadMoreTokens, maxFetchable } =
+    useTopTokens(chainName)
   const showMoreLoadingRows = Boolean(loading && hasMore)
 
   const observer = useRef<IntersectionObserver>()
@@ -123,7 +124,7 @@ export default function TokenTable() {
                     <LoadedRow
                       key={token?.address}
                       tokenListIndex={index}
-                      tokenListLength={tokens?.length ?? 0}
+                      tokenListLength={maxFetchable}
                       token={token}
                       ref={index + 1 === tokens.length ? lastTokenRef : undefined}
                     />

src/graphql/data/TopTokens.ts

@@ -162,6 +162,7 @@ interface UseTopTokensReturnValue {
   tokensWithoutPriceHistoryCount: number
   hasMore: boolean
   loadMoreTokens: () => void
+  maxFetchable: number
 }
 export function useTopTokens(chain: Chain): UseTopTokensReturnValue {
   const duration = toHistoryDuration(useAtomValue(filterTimeAtom))
@@ -170,6 +171,10 @@ export function useTopTokens(chain: Chain): UseTopTokensReturnValue {
   const [page, setPage] = useState(0)
   const prefetchedData = usePrefetchTopTokens(duration, chain)
   const prefetchedSelectedTokensWithoutPriceHistory = useFilteredTokens(useSortedTokens(prefetchedData.topTokens))
+  const maxFetchable = useMemo(
+    () => prefetchedSelectedTokensWithoutPriceHistory.length,
+    [prefetchedSelectedTokensWithoutPriceHistory]
+  )
 
   const hasMore = !tokens || tokens.length < prefetchedSelectedTokensWithoutPriceHistory.length
 
@@ -239,6 +244,7 @@ export function useTopTokens(chain: Chain): UseTopTokensReturnValue {
     hasMore,
     tokensWithoutPriceHistoryCount: prefetchedSelectedTokensWithoutPriceHistory.length,
     loadMoreTokens,
+    maxFetchable,
   }
 }