Fix/pool info (#1120)

* refactor: remove unused variables and simplify getPairAmountInfo function * refactor: clean up PoolList component and improve state management * refactor: simplify icon assignment in AssetsTab component
oraidex · Jan 6, 2025 · 7f0b690 · 7f0b690
1 parent 6687d7e
commit 7f0b690
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 70 deletions.
diff --git a/src/pages/Pool-V3/components/PoolList/index.tsx b/src/pages/Pool-V3/components/PoolList/index.tsx
@@ -62,26 +62,22 @@ const PoolList = ({ search, filterType }: { search: string; filterType: POOL_TYP
   const [isOpenCreatePosition, setIsOpenCreatePosition] = useState(false);
   const [pairDenomsDeposit, setPairDenomsDeposit] = useState('');
 
-  // const [dataPool, setDataPool] = useState([...Array(0)]);
-  const [totalVolume, setTotalVolume] = useState(0);
-  const [totalLiquidity, setTotalLiquidity] = useState(0);
   const { feeDailyData } = useGetFeeDailyData();
   const { poolList: dataPool, poolPrice, loading } = useGetPoolList(price);
   const { poolLiquidities, poolVolume } = useGetPoolLiquidityVolume(poolPrice); // volumeV2, liquidityV2
   const { poolPositionInfo } = useGetPoolPositionInfo(poolPrice);
 
-  const isMobileMode = isMobile();
-  const [openChart, setOpenChart] = useState(false); // !isMobileMode
+  const [openChart, setOpenChart] = useState(false);
   const [filterDay, setFilterDay] = useState(FILTER_DAY.DAY);
-  const [liquidityDataChart, setLiquidityDataChart] = useState(0);
-  const [volumeDataChart, setVolumeDataChart] = useState(0);
+  const [liquidityDataChart, setLiquidityDataChart] = useConfigReducer('totalLiquidityDataChart');
+  const [volumeDataChart, setVolumeDataChart] = useConfigReducer('totalVolumeDataChart');
   const prioritizePool = '';
   const liquidityData = [
     {
       name: 'Total Liquidity',
       Icon: null,
       suffix: 5.25,
-      value: liquidityDataChart, // || statisticData.totalLiquidity,
+      value: liquidityDataChart,
       isNegative: false,
       decimal: 2,
       chart: <LiquidityChart filterDay={filterDay} onUpdateCurrentItem={setLiquidityDataChart} />,
@@ -123,10 +119,6 @@ const PoolList = ({ search, filterType }: { search: string; filterType: POOL_TYP
 
   useEffect(() => {
     if (Object.values(poolVolume).length > 0) {
-      const totalVolume24h = Object.values(poolVolume).reduce((acc, cur) => acc + cur, 0);
-
-      // const totalAllPoolVol = new BigDecimal(totalVolume24h).add(volumeV2).toNumber();
-      setTotalVolume(totalVolume24h);
       setVolumnePools(
         Object.keys(poolVolume).map((poolAddress) => {
           return {
@@ -147,7 +139,6 @@ const PoolList = ({ search, filterType }: { search: string; filterType: POOL_TYP
     if (Object.values(poolLiquidities).length > 0) {
       const totalLiqudity = Object.values(poolLiquidities).reduce((acc, cur) => acc + cur, 0);
       setLiquidityPools(poolLiquidities);
-      setTotalLiquidity(totalLiqudity);
     }
   }, [poolLiquidities, dataPool]);
 
@@ -194,10 +185,6 @@ const PoolList = ({ search, filterType }: { search: string; filterType: POOL_TYP
 
       switch (sortField) {
         case PoolColumnHeader.LIQUIDITY:
-          // return (
-          //   Number(CoefficientBySort[sortOrder]) *
-          //   ((poolLiquidities?.[a?.poolKey] || 0) - (poolLiquidities?.[b?.poolKey] || 0))
-          // );
           return Number(CoefficientBySort[sortOrder]) * ((a.showLiquidity || 0) - (b.showLiquidity || 0));
         case PoolColumnHeader.POOL_NAME:
           return CoefficientBySort[sortOrder] * (a?.tokenXinfo?.name || '').localeCompare(b.tokenXinfo?.name || '');
@@ -361,13 +348,6 @@ const PoolList = ({ search, filterType }: { search: string; filterType: POOL_TYP
             {filteredPool.slice(indexOfFirstItem, indexOfLastItem).map((item, index) => {
               const { showLiquidity, showVolume, showApr } = item || {};
 
-              // const { type, totalLiquidity: liquidityV2, volume24Hour: volumeV2, liquidityAddr, poolKey } = item || {};
-
-              // const showLiquidity =
-              //   type === POOL_TYPE.V3 ? poolLiquidities?.[item?.poolKey] : toDisplay(Math.trunc(liquidityV2 || 0).toString());
-              // const showVolume = type === POOL_TYPE.V3 ? volumeV3 : toDisplay(volumeV2 || 0);
-              // const showApr = aprInfo?.[poolKey] || aprInfo?.[liquidityAddr];
-
               return (
                 <tr className={styles.item} key={`${index}-pool-${item?.id}`}>
                   <PoolItemTData
@@ -399,22 +379,6 @@ const PoolList = ({ search, filterType }: { search: string; filterType: POOL_TYP
     <div className={styles.poolList}>
       <div className={styles.headerTable}>
         <div className={styles.headerInfo}>
-          {/* <div className={styles.total}>
-            <p>Total liquidity</p>
-            {totalLiquidity === 0 || totalLiquidity ? (
-              <h1>{formatDisplayUsdt(Number(totalLiquidity) || 0)}</h1>
-            ) : (
-              <img src={Loading} alt="loading" width={32} height={32} />
-            )}
-          </div>
-          <div className={styles.total}>
-            <p>24H volume</p>
-            {totalVolume ? (
-              <h1>{formatDisplayUsdt(Number(totalVolume))}</h1>
-            ) : (
-              <img src={Loading} alt="loading" width={32} height={32} />
-            )}
-          </div> */}
           <div className={styles.headerInfo}>
             {liquidityData.map((e) => (
               <div key={e.name} className={`${styles.headerInfo_item} ${openChart ? styles.activeChart : ''}`}>

diff --git a/src/pages/Pool-V3/hooks/useGetPoolList.ts b/src/pages/Pool-V3/hooks/useGetPoolList.ts
@@ -17,7 +17,6 @@ import { addToOraichainTokens } from 'reducer/token';
 import { RootState } from 'store/configure';
 
 export const useGetPoolList = (coingeckoPrices: CoinGeckoPrices<string>) => {
-  const theme = useTheme();
   const [prices, setPrices] = useState<CoinGeckoPrices<string>>(coingeckoPrices);
   const [dataPool, setDataPool] = useState([...Array(0)]);
   const dispatch = useDispatch();
@@ -28,13 +27,12 @@ export const useGetPoolList = (coingeckoPrices: CoinGeckoPrices<string>) => {
     refetch: refetchPoolList,
     isLoading: isLoadingGetPoolList
   } = useQuery<(PoolWithPoolKey | PoolInfoResponse)[]>(['pool-v3-pools', coingeckoPrices], () => getPoolList(), {
-    refetchOnWindowFocus: false,
-    placeholderData: []
+    refetchOnWindowFocus: false
     // cacheTime: 5 * 60 * 1000,
   });
 
   useEffect(() => {
-    if (poolList.length === 0 || Object.keys(coingeckoPrices).length === 0) return;
+    if (!poolList || poolList?.length === 0 || Object.keys(coingeckoPrices).length === 0) return;
 
     const newPrice = { ...coingeckoPrices };
 
@@ -68,7 +66,7 @@ export const useGetPoolList = (coingeckoPrices: CoinGeckoPrices<string>) => {
   }, [poolList]);
 
   useEffect(() => {
-    if (poolList.length === 0 || Object.keys(coingeckoPrices).length === 0) return;
+    if (!poolList || poolList.length === 0 || Object.keys(coingeckoPrices).length === 0) return;
 
     (async function formatListPools() {
       const tokenAddresses = new Set<string>();
@@ -112,7 +110,7 @@ export const useGetPoolList = (coingeckoPrices: CoinGeckoPrices<string>) => {
   }, [poolList, coingeckoPrices]);
 
   return {
-    poolList: dataPool,
+    poolList: dataPool || [],
     poolPrice: prices,
     isLoadingGetPoolList,
     refetchPoolList,

diff --git a/src/pages/Pools/components/OverviewPool/OverviewPool.tsx b/src/pages/Pools/components/OverviewPool/OverviewPool.tsx
@@ -18,7 +18,7 @@ import { DEFAULT_TOKEN_ICON_URL } from 'helper/constants';
 export const OverviewPool = ({ poolDetailData }: { poolDetailData: PoolDetail }) => {
   const theme = useTheme();
 
-  const { pairAmountInfoData, lpTokenInfoData } = useGetPairInfo(poolDetailData);
+  const { pairAmountInfoData } = useGetPairInfo(poolDetailData);
   const { token1, token2 } = poolDetailData;
 
   const [oraiBtcAllocation, setOraiBtcAllocation] = useState({

diff --git a/src/pages/UniversalSwap/Component/AssetsTab.tsx b/src/pages/UniversalSwap/Component/AssetsTab.tsx
@@ -95,12 +95,11 @@ export const AssetsTab: FC<{ networkFilter: string }> = ({ networkFilter }) => {
 
           if (checkShouldHide(value)) return result;
 
-          const tokenIcon = flattenTokensWithIcon.find((tIcon) => tIcon.coinGeckoId === token.coinGeckoId);
           result.push({
             asset: token.name,
             chain: token.org,
-            icon: tokenIcon?.icon,
-            iconLight: tokenIcon?.iconLight,
+            icon: token?.icon,
+            iconLight: token?.iconLight,
             price: tokenPrice,
             balance: toDisplay(totalAmount.toString(), token.decimals),
             denom: token.denom,

diff --git a/src/reducer/config.ts b/src/reducer/config.ts
@@ -68,6 +68,8 @@ export interface ConfigState {
     tvl: number;
     volume24: number;
   }[];
+  totalLiquidityDataChart: number;
+  totalVolumeDataChart: number;
 }
 
 const initialState: ConfigState = {
@@ -100,7 +102,9 @@ const initialState: ConfigState = {
   volumnePools: [],
   filterDefaultPool: KeyFilterPool.all_pool,
   persistVersion: PERSIST_VER,
-  AIRoute: true
+  AIRoute: true,
+  totalLiquidityDataChart: 0,
+  totalVolumeDataChart: 0
 };
 
 export const configSlice = createSlice({

diff --git a/src/rest/api.ts b/src/rest/api.ts
@@ -722,28 +722,13 @@ async function getPairAmountInfo(
   fromToken: TokenItemType,
   toToken: TokenItemType,
   cachedPairs?: PairDetails,
-  poolInfo?: PoolInfo,
-  oraiUsdtPoolInfo?: PoolInfo
+  poolInfo?: PoolInfo
 ): Promise<PairAmountInfo> {
   const poolData = poolInfo ?? (await fetchPoolInfoAmount(fromToken, toToken, cachedPairs));
-  // default is usdt
-  let tokenPrice = 0;
-
-  if (fromToken.denom === ORAI) {
-    const poolOraiUsdData =
-      oraiUsdtPoolInfo ?? (await fetchPoolInfoAmount(tokenMap[ORAI], tokenMap[STABLE_DENOM], cachedPairs));
-    // orai price
-    tokenPrice = toDecimal(poolOraiUsdData.askPoolAmount, poolOraiUsdData.offerPoolAmount);
-  } else {
-    // must be stable coin for ask pool amount
-    const poolUsdData = await fetchPairPriceWithStablecoin(fromToken, toToken);
-    tokenPrice = toDisplay(poolUsdData, toToken.decimals);
-  }
 
   return {
     token1Amount: poolData.offerPoolAmount.toString(),
-    token2Amount: poolData.askPoolAmount.toString(),
-    tokenUsd: 2 * toDisplay(poolData.offerPoolAmount, fromToken.decimals) * tokenPrice
+    token2Amount: poolData.askPoolAmount.toString()
   };
 }
 

diff --git a/src/store/constants.ts b/src/store/constants.ts
@@ -1,5 +1,5 @@
 // change version when update, add state redux-persist storage
-export const PERSIST_VER = 3;
+export const PERSIST_VER = 3.1;
 
 export const PERSIST_CONFIG_KEY = 'root';
 export const ADDRESS_BOOK_KEY_BACKUP = 'addressBookBackup';
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -30,7 +30,6 @@ declare global {
   type PairAmountInfo = {
     token1Amount: string;
     token2Amount: string;
-    tokenUsd: number;
   };
   type LpPoolDetails = {
     [key: string]: {