diff --git a/apps/frontend/src/components/InputDialog/index.tsx b/apps/frontend/src/components/InputDialog/index.tsx index 069438c8..5ca20019 100644 --- a/apps/frontend/src/components/InputDialog/index.tsx +++ b/apps/frontend/src/components/InputDialog/index.tsx @@ -53,7 +53,7 @@ export const InputDialog = () => { } = useMarketStore(); const { data: priceData } = usePrice(); - const marketBalanceOfBase = useMarketBalanceOfBase(); + const { data: marketBalanceOfBase } = useMarketBalanceOfBase(); const { mutate: supplyCollateral } = useSupplyCollateral({ actionTokenAssetId, diff --git a/apps/frontend/src/components/MarketsView/MarketOverview.tsx b/apps/frontend/src/components/MarketsView/MarketOverview.tsx index 41755ebb..3150a835 100644 --- a/apps/frontend/src/components/MarketsView/MarketOverview.tsx +++ b/apps/frontend/src/components/MarketsView/MarketOverview.tsx @@ -46,14 +46,14 @@ export default function MarketOverview({ }: MarketOverviewProps) { const { data: borrowRate } = useBorrowRate(baseAsset); const { data: supplyRate } = useSupplyRate(baseAsset); - const { data: totalReserves } = useTotalReserves(baseAsset); + const { data: totalReserves } = useTotalReserves(); const { data: collateralConfigurations } = useCollateralConfigurations(baseAsset); const { data: marketConfiguration } = useMarketConfiguration(baseAsset); const borrowApr = useMemo(() => getBorrowApr(borrowRate), [borrowRate]); const supplyApr = useMemo(() => getSupplyApr(supplyRate), [supplyRate]); - const availableLiquidity = useMarketBalanceOfBase(baseAsset); + const { data: availableLiquidity } = useMarketBalanceOfBase(baseAsset); const { data: totalCollateral } = useTotalCollateral(baseAsset); const { data: marketBasics } = useMarketBasics(baseAsset); @@ -195,7 +195,9 @@ export default function MarketOverview({ Available Liquidity
- {getFormattedPrice(availableLiquidity.formatted)} + {getFormattedPrice( + availableLiquidity?.formatted ?? BigNumber(0) + )}
diff --git a/apps/frontend/src/hooks/useMarketBalanceOfBase.ts b/apps/frontend/src/hooks/useMarketBalanceOfBase.ts index 4a1b486f..5a8c07e9 100644 --- a/apps/frontend/src/hooks/useMarketBalanceOfBase.ts +++ b/apps/frontend/src/hooks/useMarketBalanceOfBase.ts @@ -2,31 +2,40 @@ import { formatUnits } from '@/utils'; import BigNumber from 'bignumber.js'; import { useMarketBasics } from './useMarketBasics'; import { useMarketConfiguration } from './useMarketConfiguration'; +import { useQuery } from '@tanstack/react-query'; +import { useMarketStore } from '@/stores'; +import { useTotalReserves } from './useTotalReserves'; export const useMarketBalanceOfBase = (marketParam?: string) => { const { data: marketBasics } = useMarketBasics(marketParam); const { data: marketConfiguration } = useMarketConfiguration(marketParam); + const { data: totalReserves } = useTotalReserves(marketParam); + const { market: storeMarket } = useMarketStore(); + const market = marketParam ?? storeMarket; - if ( - !marketBasics || - !marketBasics.total_borrow_base || - !marketBasics.total_supply_base || - !marketConfiguration - ) - return { - raw: BigNumber(0), - formatted: BigNumber(0), - }; + return useQuery({ + queryKey: ['marketBalanceOfBase', market], + queryFn: async () => { + if (!marketBasics || !marketConfiguration || !totalReserves) { + return { + raw: BigNumber(0), + formatted: BigNumber(0), + }; + } - const balanceOfBase = BigNumber( - marketBasics.total_supply_base.toString() - ).minus(BigNumber(marketBasics.total_borrow_base.toString())); + const balanceOfBase = BigNumber(marketBasics.total_supply_base.toString()) + .minus(BigNumber(marketBasics.total_borrow_base.toString())) + .plus(totalReserves); - return { - raw: balanceOfBase, - formatted: formatUnits( - balanceOfBase, - marketConfiguration.baseTokenDecimals - ), - }; + return { + raw: balanceOfBase, + formatted: formatUnits( + balanceOfBase, + marketConfiguration.baseTokenDecimals + ), + }; + }, + refetchOnWindowFocus: false, + enabled: !!marketBasics && !!marketConfiguration && !!totalReserves, + }); }; diff --git a/apps/frontend/src/hooks/useTotalReserves.ts b/apps/frontend/src/hooks/useTotalReserves.ts index 77d465f9..f7bb52a9 100644 --- a/apps/frontend/src/hooks/useTotalReserves.ts +++ b/apps/frontend/src/hooks/useTotalReserves.ts @@ -6,7 +6,7 @@ import { useQuery } from '@tanstack/react-query'; import BigNumber from 'bignumber.js'; import { useProvider } from './useProvider'; -export const useTotalReserves = (assetId: string, marketParam?: string) => { +export const useTotalReserves = (marketParam?: string) => { const provider = useProvider(); const { market: storeMarket } = useMarketStore(); const market = marketParam ?? storeMarket; @@ -14,7 +14,7 @@ export const useTotalReserves = (assetId: string, marketParam?: string) => { return useQuery({ queryKey: ['totalReserves', market], queryFn: async () => { - if (!provider || !assetId) return BigNumber(0); + if (!provider) return BigNumber(0); const marketContract = new Market( appConfig.markets[market].marketAddress,