fix: use general sort rank instead of only volume rank for row numbers (#5955)

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -424,12 +424,12 @@ interface LoadedRowProps {
   tokenListLength: number
   token: NonNullable<TopToken>
   sparklineMap: SparklineMap
-  volumeRank: number
+  sortRank: number
 }
 
 /* Loaded State: row component with token information */
 export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HTMLDivElement>) => {
-  const { tokenListIndex, tokenListLength, token, volumeRank } = props
+  const { tokenListIndex, tokenListLength, token, sortRank } = props
   const filterString = useAtomValue(filterStringAtom)
 
   const lowercaseChainName = useParams<{ chainName?: string }>().chainName?.toUpperCase() ?? 'ethereum'
@@ -446,7 +446,7 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
     token_address: token.address,
     token_symbol: token.symbol,
     token_list_index: tokenListIndex,
-    token_list_rank: volumeRank,
+    token_list_rank: sortRank,
     token_list_length: tokenListLength,
     time_frame: timePeriod,
     search_token_address_input: filterString,
@@ -463,7 +463,7 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
       >
         <TokenRow
           header={false}
-          listNumber={volumeRank}
+          listNumber={sortRank}
           tokenInfo={
             <ClickableName>
               <QueryTokenLogo token={token} />

src/components/Tokens/TokenTable/TokenTable.tsx

@@ -77,7 +77,7 @@ function LoadingTokenTable({ rowCount = PAGE_SIZE }: { rowCount?: number }) {
 
 export default function TokenTable() {
   const chainName = validateUrlChainParam(useParams<{ chainName?: string }>().chainName)
-  const { tokens, tokenVolumeRank, loadingTokens, sparklines } = useTopTokens(chainName)
+  const { tokens, tokenSortRank, loadingTokens, sparklines } = useTopTokens(chainName)
 
   /* loading and error state */
   if (loadingTokens && !tokens) {
@@ -109,7 +109,7 @@ export default function TokenTable() {
                   tokenListLength={tokens.length}
                   token={token}
                   sparklineMap={sparklines}
-                  volumeRank={tokenVolumeRank[token.address]}
+                  sortRank={tokenSortRank[token.address]}
                 />
               )
           )}

src/graphql/data/TopTokens.ts

@@ -139,7 +139,7 @@ export type TopToken = NonNullable<NonNullable<TopTokens100Query>['topTokens']>[
 
 interface UseTopTokensReturnValue {
   tokens: TopToken[] | undefined
-  tokenVolumeRank: Record<string, number>
+  tokenSortRank: Record<string, number>
   loadingTokens: boolean
   sparklines: SparklineMap
 }
@@ -172,26 +172,21 @@ export function useTopTokens(chain: Chain): UseTopTokensReturnValue {
   )
 
   const unwrappedTokens = useMemo(() => data?.topTokens?.map((token) => unwrapToken(chainId, token)), [chainId, data])
-  const tokenVolumeRank = useMemo(
+  const sortedTokens = useSortedTokens(unwrappedTokens)
+  const tokenSortRank = useMemo(
     () =>
-      unwrappedTokens
-        ?.sort((a, b) => {
-          if (!a.market?.volume || !b.market?.volume) return 0
-          return a.market.volume.value > b.market.volume.value ? -1 : 1
-        })
-        .reduce((acc, cur, i) => {
+      sortedTokens?.reduce((acc, cur, i) => {
         if (!cur.address) return acc
         return {
           ...acc,
           [cur.address]: i + 1,
         }
       }, {}) ?? {},
-    [unwrappedTokens]
+    [sortedTokens]
   )
-  const filteredTokens = useFilteredTokens(unwrappedTokens)
-  const sortedTokens = useSortedTokens(filteredTokens)
+  const filteredTokens = useFilteredTokens(sortedTokens)
   return useMemo(
-    () => ({ tokens: sortedTokens, tokenVolumeRank, loadingTokens, sparklines }),
-    [loadingTokens, tokenVolumeRank, sortedTokens, sparklines]
+    () => ({ tokens: filteredTokens, tokenSortRank, loadingTokens, sparklines }),
+    [filteredTokens, tokenSortRank, loadingTokens, sparklines]
   )
 }