chore: available liquidity

.changeset/light-garlics-notice.md

@@ -0,0 +1,5 @@
+---
+"swaylend-dapp": patch
+---
+
+Fixes wrong calculation of available liquidity on the dapp

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,

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
               </div>
               <div className="text-xl font-semibold text-white mt-2">
-                {getFormattedPrice(availableLiquidity.formatted)}
+                {getFormattedPrice(
+                  availableLiquidity?.formatted ?? BigNumber(0)
+                )}
               </div>
             </div>
             <div>

apps/frontend/src/hooks/useMarketBalanceOfBase.ts

@@ -1,32 +1,41 @@
+import { useMarketStore } from '@/stores';
 import { formatUnits } from '@/utils';
+import { useQuery } from '@tanstack/react-query';
 import BigNumber from 'bignumber.js';
 import { useMarketBasics } from './useMarketBasics';
 import { useMarketConfiguration } from './useMarketConfiguration';
+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,
+  });
 };

apps/frontend/src/hooks/useTotalReserves.ts

@@ -6,15 +6,15 @@ 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;
 
   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,