fix: persist volume ranking in token table rows instead of using index (#5819)

* fix: persist volume ranking in token table rows instead of using index

* pr feedback

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -434,16 +434,16 @@ interface LoadedRowProps {
   tokenListLength: number
   token: NonNullable<TopToken>
   sparklineMap: SparklineMap
+  volumeRank: number
 }
 
 /* Loaded State: row component with token information */
 export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HTMLDivElement>) => {
-  const { tokenListIndex, tokenListLength, token } = props
+  const { tokenListIndex, tokenListLength, token, volumeRank } = props
   const tokenAddress = token.address
   const tokenName = token.name
   const tokenSymbol = token.symbol
   const filterString = useAtomValue(filterStringAtom)
-  const sortAscending = useAtomValue(sortAscendingAtom)
 
   const lowercaseChainName = useParams<{ chainName?: string }>().chainName?.toUpperCase() ?? 'ethereum'
   const filterNetwork = lowercaseChainName.toUpperCase()
@@ -454,14 +454,13 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
   const arrow = getDeltaArrow(delta)
   const smallArrow = getDeltaArrow(delta, 14)
   const formattedDelta = formatDelta(delta)
-  const rank = sortAscending ? tokenListLength - tokenListIndex : tokenListIndex + 1
 
   const exploreTokenSelectedEventProperties = {
     chain_id: chainId,
     token_address: tokenAddress,
     token_symbol: tokenSymbol,
     token_list_index: tokenListIndex,
-    token_list_rank: rank,
+    token_list_rank: volumeRank,
     token_list_length: tokenListLength,
     time_frame: timePeriod,
     search_token_address_input: filterString,
@@ -478,7 +477,7 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
       >
         <TokenRow
           header={false}
-          listNumber={rank}
+          listNumber={volumeRank}
           tokenInfo={
             <ClickableName>
               <LogoContainer>

src/components/Tokens/TokenTable/TokenTable.tsx

@@ -78,7 +78,7 @@ function LoadingTokenTable({ rowCount = PAGE_SIZE }: { rowCount?: number }) {
 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 { tokens, loadingTokens, sparklines } = useTopTokens(chainName)
+  const { tokens, tokenVolumeRank, loadingTokens, sparklines } = useTopTokens(chainName)
 
   /* loading and error state */
   if (loadingTokens) {
@@ -103,13 +103,14 @@ export default function TokenTable() {
         <TokenDataContainer>
           {tokens.map(
             (token, index) =>
-              token && (
+              token?.address && (
                 <LoadedRow
-                  key={token?.address}
+                  key={token.address}
                   tokenListIndex={index}
                   tokenListLength={tokens.length}
                   token={token}
                   sparklineMap={sparklines}
+                  volumeRank={tokenVolumeRank[token.address]}
                 />
               )
           )}

src/graphql/data/TopTokens.ts

@@ -119,6 +119,7 @@ export type TopToken = NonNullable<NonNullable<TopTokens100Query>['topTokens']>[
 
 interface UseTopTokensReturnValue {
   tokens: TopToken[] | undefined
+  tokenVolumeRank: Record<string, number>
   loadingTokens: boolean
   sparklines: SparklineMap
 }
@@ -143,11 +144,30 @@ export function useTopTokens(chain: Chain): UseTopTokensReturnValue {
   const { data, loading: loadingTokens } = useTopTokens100Query({
     variables: { duration, chain },
   })
-  const mappedTokens = useMemo(
+  const unwrappedTokens = useMemo(
     () => data?.topTokens?.map((token) => unwrapToken(chainId, token)) ?? [],
     [chainId, data]
   )
-  const filteredTokens = useFilteredTokens(mappedTokens)
+  const tokenVolumeRank = 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) => {
+          if (!cur.address) return acc
+          return {
+            ...acc,
+            [cur.address]: i + 1,
+          }
+        }, {}),
+    [unwrappedTokens]
+  )
+  const filteredTokens = useFilteredTokens(unwrappedTokens)
   const sortedTokens = useSortedTokens(filteredTokens)
-  return useMemo(() => ({ tokens: sortedTokens, loadingTokens, sparklines }), [loadingTokens, sortedTokens, sparklines])
+  return useMemo(
+    () => ({ tokens: sortedTokens, tokenVolumeRank, loadingTokens, sparklines }),
+    [loadingTokens, tokenVolumeRank, sortedTokens, sparklines]
+  )
 }