feat: sort token list

src/hooks/useCoingecko.ts

@@ -11,7 +11,7 @@ import { CoinGeckoId } from '@oraichain/oraidex-common';
  */
 export const buildCoinGeckoPricesURL = (tokens: readonly string[]): string =>
   // `https://api.coingecko.com/api/v3/simple/price?ids=${tokens.join('%2C')}&vs_currencies=usd`;
-  `https://price.market.orai.io/simple/price?ids=${tokens.join('%2C')}&vs_currencies=usd`;
+  `https://price.market.orai.io/simple/price?ids=${tokens.join('%2C')}&vs_currencies=usd&include_24hr_vol=true`;
 
 /**
  * Prices of each token.
@@ -32,15 +32,17 @@ export const useCoinGeckoPrices = <T extends CoinGeckoId>(
 
   // use cached first then update by query, if is limited then return cached version
   const [cachePrices, setCachePrices] = useConfigReducer('coingecko');
+  const [tokenRank, setTokenRank] = useConfigReducer('tokenRank');
 
   return useQuery({
     initialData: cachePrices,
     ...options,
     // make unique
     queryKey: ['coinGeckoPrices', ...tokens],
     queryFn: async ({ signal }) => {
-      const prices = await getCoingeckoPrices(tokens, cachePrices, signal);
+      const { prices, ranks } = await getCoingeckoPrices(tokens, cachePrices, tokenRank, signal);
       setCachePrices(prices);
+      setTokenRank(ranks);
 
       return Object.fromEntries(tokens.map((token) => [token, prices[token]])) as CoinGeckoPrices<T>;
     }
@@ -50,27 +52,31 @@ export const useCoinGeckoPrices = <T extends CoinGeckoId>(
 export const getCoingeckoPrices = async <T extends CoinGeckoId>(
   tokens: string[],
   cachePrices?: CoinGeckoPrices<string>,
+  cacheRank?: CoinGeckoPrices<string>,
   signal?: AbortSignal
-): Promise<CoinGeckoPrices<string>> => {
+): Promise<{ prices: CoinGeckoPrices<string>; ranks: CoinGeckoPrices<string> }> => {
   const coingeckoPricesURL = buildCoinGeckoPricesURL(tokens);
 
   const prices = { ...cachePrices };
+  const ranks = { ...cacheRank };
 
   // by default not return data then use cached version
   try {
     const resp = await fetch(coingeckoPricesURL, { signal });
     const rawData = (await resp.json()) as {
       [C in T]?: {
         usd: number;
+        usd_24h_vol: number;
       };
     };
     // update cached
     for (const key in rawData) {
       prices[key] = rawData[key].usd;
+      ranks[key] = rawData[key].usd_24h_vol;
     }
   } catch {
     // remain old cache
     console.log('error getting coingecko prices: ', prices);
   }
-  return prices;
+  return { prices, ranks };
 };

src/pages/UniversalSwap/Swap/components/SelectToken/SelectToken.tsx

@@ -12,6 +12,7 @@ import { toSumDisplay } from 'libs/utils';
 import { formatDisplayUsdt } from 'pages/Pools/helpers';
 import React, { useEffect, useState } from 'react';
 import { getSubAmountDetails } from 'rest/api';
+import useConfigReducer from 'hooks/useConfigReducer';
 
 const cx = cn.bind(styles);
 interface InputSwapProps {
@@ -65,6 +66,8 @@ export default function SelectToken({
   const [textChain, setTextChain] = useState('');
   const [textSearch, setTextSearch] = useState('');
   const isLightTheme = theme === 'light';
+  const [tokenRank = {}] = useConfigReducer('tokenRank');
+
   useEffect(() => {
     if (selectChain && selectChain !== textChain) setTextChain(selectChain);
   }, [selectChain]);
@@ -146,7 +149,12 @@ export default function SelectToken({
                 };
               })
               .sort((a, b) => {
-                return Number(b.usd) - Number(a.usd);
+                const balanceDelta = Number(b.usd) - Number(a.usd);
+
+                if (!balanceDelta) {
+                  return tokenRank[b.coinGeckoId] - tokenRank[a.coinGeckoId];
+                }
+                return balanceDelta;
               })
               .map(({ key, tokenIcon, networkIcon, balance, usd, ...token }) => {
                 return (

src/reducer/config.ts

@@ -38,6 +38,7 @@ export interface ConfigState {
   hideOraichainSmallAmount: boolean;
   theme: Themes;
   coingecko: CoinGeckoPrices<string>;
+  tokenRank: Record<string, number>;
   apr: {
     [key: string]: number;
   };
@@ -83,6 +84,7 @@ const initialState: ConfigState = {
   hideOraichainSmallAmount: false,
   theme: 'dark',
   coingecko: {},
+  tokenRank: {},
   apr: {},
   rewardPools: [],
   liquidityPools: {},

src/store/constants.ts

@@ -1,5 +1,5 @@
 // change version when update, add state redux-persist storage
-export const PERSIST_VER = 2.4;
+export const PERSIST_VER = 2.5;
 
 export const PERSIST_CONFIG_KEY = 'root';
 export const ADDRESS_BOOK_KEY_BACKUP = 'addressBookBackup';