🐛 global-utilization: extract and fix calculation

exactly · Jun 5, 2024 · cace4a7 · cace4a7
1 parent dd87894
commit cace4a7
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 42 deletions.
diff --git a/components/asset/Header.tsx b/components/asset/Header.tsx
@@ -22,6 +22,7 @@ import { useWeb3 } from 'hooks/useWeb3';
 import Alert from '@mui/material/Alert';
 import { useFloatingBalances } from 'hooks/useFloatingBalances';
 import { useFixedBalances } from 'hooks/useFixedBalances';
+import useGlobalUtilization from 'hooks/useGlobalUtilization';
 import { mainnet } from 'wagmi';
 
 type Props = {
@@ -34,7 +35,8 @@ const AssetHeaderInfo: FC<Props> = ({ symbol }) => {
   const options = useAssets();
   const { push, query } = useRouter();
   const getContractAddress = useContractAddress();
-  const { floatingDeposits, floatingBorrows, backupBorrows } = useFloatingBalances(symbol);
+  const globalUtilization = useGlobalUtilization(symbol);
+  const { floatingDeposits, floatingBorrows } = useFloatingBalances(symbol);
   const { fixedDeposits, fixedBorrows } = useFixedBalances(symbol);
   const [priceFeedAddress, setPriceFeedAddress] = useState<Address | undefined>(undefined);
   const {
@@ -60,23 +62,10 @@ const AssetHeaderInfo: FC<Props> = ({ symbol }) => {
     fetchPriceFeedAddress();
   }, [getContractAddress, symbol]);
 
-  const { itemsInfo, totalUtilization } = useMemo((): {
-    itemsInfo: ItemInfoProps[];
-    totalUtilization: number | undefined;
-  } => {
+  const itemsInfo = useMemo(() => {
     const { decimals, usdPrice } = marketAccount ?? {};
 
-    const totalUti =
-      backupBorrows !== undefined &&
-      floatingBorrows !== undefined &&
-      floatingDeposits !== undefined &&
-      fixedDeposits !== undefined &&
-      floatingDeposits + fixedDeposits > 0n &&
-      decimals
-        ? Number(((floatingBorrows + backupBorrows) * WAD) / (floatingDeposits + fixedDeposits)) / 1e18
-        : undefined;
-
-    const items = [
+    const items: ItemInfoProps[] = [
       {
         label: t('Total Deposits'),
         value:
@@ -122,7 +111,7 @@ const AssetHeaderInfo: FC<Props> = ({ symbol }) => {
       },
       {
         label: t('Global Utilization'),
-        value: toPercentage(totalUti),
+        value: toPercentage(Number(globalUtilization) / 1e18),
       },
       {
         label: t('Oracle Price'),
@@ -140,15 +129,15 @@ const AssetHeaderInfo: FC<Props> = ({ symbol }) => {
         : []),
     ];
 
-    return { itemsInfo: items, totalUtilization: totalUti };
+    return items;
   }, [
     marketAccount,
-    backupBorrows,
     floatingBorrows,
     floatingDeposits,
     fixedDeposits,
     t,
     fixedBorrows,
+    globalUtilization,
     symbol,
     nativeAPR,
   ]);
@@ -222,9 +211,9 @@ const AssetHeaderInfo: FC<Props> = ({ symbol }) => {
           ))}
         </Grid>
       </Grid>
-      {totalUtilization !== undefined &&
+      {globalUtilization !== undefined &&
         borrowableUtilization !== undefined &&
-        totalUtilization > borrowableUtilization && (
+        globalUtilization > borrowableUtilization && (
           <Alert sx={{ width: '100%' }} severity="info">
             <Typography variant="body2">
               {t(

diff --git a/components/charts/UtilizationRateChart/index.tsx b/components/charts/UtilizationRateChart/index.tsx
@@ -1,15 +1,13 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useRef } from 'react';
 import dynamic from 'next/dynamic';
 import { Typography, Box, useTheme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import WAD from '@exactly/lib/esm/fixed-point-math/WAD';
 
 import useUtilizationRate, { useCurrentUtilizationRate } from 'hooks/useUtilizationRate';
 import LoadingChart from '../LoadingChart';
 import { formatEther } from 'viem';
 import useFloatingPoolAPR from 'hooks/useFloatingPoolAPR';
-import { useFloatingBalances } from 'hooks/useFloatingBalances';
-import { useFixedBalances } from 'hooks/useFixedBalances';
+import useGlobalUtilization from 'hooks/useGlobalUtilization';
 
 const Plot = dynamic(() => import('react-plotly.js'), { ssr: false });
 type Props = {
@@ -31,26 +29,12 @@ function UtilizationRateChart({ type, symbol }: Props) {
   const { t } = useTranslation();
   const { palette } = useTheme();
 
+  const globalUtilization = useGlobalUtilization(symbol);
   const { data, loading } = useUtilizationRate(symbol, 0n, 95n * 10n ** 16n);
   const { borrowAPR } = useFloatingPoolAPR(symbol);
   const currentUtilization = useCurrentUtilizationRate('floating', symbol);
-  const { floatingDeposits, floatingBorrows, backupBorrows } = useFloatingBalances(symbol);
-  const { fixedDeposits } = useFixedBalances(symbol);
   const ref = useRef<HTMLDivElement>(null);
 
-  const globalUtilization = useCallback(() => {
-    const globalUti =
-      backupBorrows !== undefined &&
-      floatingBorrows !== undefined &&
-      floatingDeposits !== undefined &&
-      fixedDeposits !== undefined &&
-      floatingDeposits + fixedDeposits > 0n
-        ? Number(((floatingBorrows + backupBorrows) * WAD) / (floatingDeposits + fixedDeposits)) / 1e18
-        : 0;
-
-    return globalUti;
-  }, [backupBorrows, fixedDeposits, floatingBorrows, floatingDeposits]);
-
   return (
     <Box display="flex" flexDirection="column" width="100%" height="100%">
       <Box display="flex" justifyContent="space-between">
@@ -61,7 +45,7 @@ function UtilizationRateChart({ type, symbol }: Props) {
         </Typography>
       </Box>
       <Box ref={ref} display="flex" alignSelf="center" width="100%" sx={{ height: 500 }}>
-        {loading || !data || !borrowAPR || !currentUtilization ? (
+        {loading || !data || !borrowAPR || currentUtilization === undefined || globalUtilization === undefined ? (
           <LoadingChart />
         ) : (
           <Plot
@@ -98,7 +82,7 @@ function UtilizationRateChart({ type, symbol }: Props) {
                 type: 'scatter3d',
                 mode: 'markers',
                 x: [formatEther(currentUtilization[0].utilization)],
-                y: [globalUtilization()],
+                y: [formatEther(globalUtilization)],
                 z: [borrowAPR],
                 marker: { symbol: 'cross', size: 8, color: palette.text.primary },
                 hovertemplate:

diff --git a/hooks/useGlobalUtilization.ts b/hooks/useGlobalUtilization.ts
@@ -0,0 +1,14 @@
+import globalUtilization from '@exactly/lib/esm/interest-rate-model/globalUtilization';
+import useAccountData from './useAccountData';
+
+export default (symbol: string) => {
+  const { marketAccount } = useAccountData(symbol);
+  if (!marketAccount) return undefined;
+
+  const { totalFloatingDepositAssets, totalFloatingBorrowAssets, floatingBackupBorrowed } = marketAccount;
+  if (totalFloatingDepositAssets == null || totalFloatingBorrowAssets == null || floatingBackupBorrowed == null) {
+    return undefined;
+  }
+
+  return globalUtilization(totalFloatingDepositAssets, totalFloatingBorrowAssets, floatingBackupBorrowed);
+};