From 7f0b690492fa0b7e31d29b908048c50f494d41d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Trung=20B=E1=BA=A1ch?= <66735837+trungbach@users.noreply.github.com> Date: Mon, 6 Jan 2025 17:08:56 +0700 Subject: [PATCH] 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 --- .../Pool-V3/components/PoolList/index.tsx | 44 ++----------------- src/pages/Pool-V3/hooks/useGetPoolList.ts | 10 ++--- .../components/OverviewPool/OverviewPool.tsx | 2 +- .../UniversalSwap/Component/AssetsTab.tsx | 5 +-- src/reducer/config.ts | 6 ++- src/rest/api.ts | 19 +------- src/store/constants.ts | 2 +- src/types/global.d.ts | 1 - 8 files changed, 19 insertions(+), 70 deletions(-) diff --git a/src/pages/Pool-V3/components/PoolList/index.tsx b/src/pages/Pool-V3/components/PoolList/index.tsx index 62fe53b9a..ea5031855 100644 --- 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: , @@ -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 (
- {/*
-

Total liquidity

- {totalLiquidity === 0 || totalLiquidity ? ( -

{formatDisplayUsdt(Number(totalLiquidity) || 0)}

- ) : ( - loading - )} -
-
-

24H volume

- {totalVolume ? ( -

{formatDisplayUsdt(Number(totalVolume))}

- ) : ( - loading - )} -
*/}
{liquidityData.map((e) => (
diff --git a/src/pages/Pool-V3/hooks/useGetPoolList.ts b/src/pages/Pool-V3/hooks/useGetPoolList.ts index c69764536..d298a95e0 100644 --- 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) => { - const theme = useTheme(); const [prices, setPrices] = useState>(coingeckoPrices); const [dataPool, setDataPool] = useState([...Array(0)]); const dispatch = useDispatch(); @@ -28,13 +27,12 @@ export const useGetPoolList = (coingeckoPrices: CoinGeckoPrices) => { 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) => { }, [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(); @@ -112,7 +110,7 @@ export const useGetPoolList = (coingeckoPrices: CoinGeckoPrices) => { }, [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 index 822a1eb59..09bb6dc7b 100644 --- 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 index a3cc8dfd9..181982e02 100644 --- 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 index 39424c0e8..861b5f9a3 100644 --- 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 index fe30453f9..75494c564 100644 --- 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 { 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 index a82caee3c..901a92101 100644 --- 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 index ac72ab1db..52fdf6b85 100644 --- 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]: {