diff --git a/src/components/Tokens/TokenTable/TokenRow.tsx b/src/components/Tokens/TokenTable/TokenRow.tsx index 927c9c45f2..cd5f99700b 100644 --- a/src/components/Tokens/TokenTable/TokenRow.tsx +++ b/src/components/Tokens/TokenTable/TokenRow.tsx @@ -434,16 +434,16 @@ interface LoadedRowProps { tokenListLength: number token: NonNullable sparklineMap: SparklineMap + volumeRank: number } /* Loaded State: row component with token information */ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef) => { - 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 diff --git a/src/components/Tokens/TokenTable/TokenTable.tsx b/src/components/Tokens/TokenTable/TokenTable.tsx index b03b884908..9f277c3e1f 100644 --- a/src/components/Tokens/TokenTable/TokenTable.tsx +++ b/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() { {tokens.map( (token, index) => - token && ( + token?.address && ( ) )} diff --git a/src/graphql/data/TopTokens.ts b/src/graphql/data/TopTokens.ts index f3b5b5f3e4..3e571f264c 100644 --- a/src/graphql/data/TopTokens.ts +++ b/src/graphql/data/TopTokens.ts @@ -119,6 +119,7 @@ export type TopToken = NonNullable['topTokens']>[ interface UseTopTokensReturnValue { tokens: TopToken[] | undefined + tokenVolumeRank: Record 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] + ) }