From cace4a7f8931aa933f36a911e1f40b3f05754aee Mon Sep 17 00:00:00 2001 From: danilo neves cruz Date: Wed, 5 Jun 2024 19:48:44 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20global-utilization:=20extract=20?= =?UTF-8?q?and=20fix=20calculation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/asset/Header.tsx | 31 ++++++------------- .../charts/UtilizationRateChart/index.tsx | 26 +++------------- hooks/useGlobalUtilization.ts | 14 +++++++++ 3 files changed, 29 insertions(+), 42 deletions(-) create mode 100644 hooks/useGlobalUtilization.ts diff --git a/components/asset/Header.tsx b/components/asset/Header.tsx index b9b1ef864..f17ac3b6d 100644 --- 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 = ({ 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
(undefined); const { @@ -60,23 +62,10 @@ const AssetHeaderInfo: FC = ({ 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 = ({ symbol }) => { }, { label: t('Global Utilization'), - value: toPercentage(totalUti), + value: toPercentage(Number(globalUtilization) / 1e18), }, { label: t('Oracle Price'), @@ -140,15 +129,15 @@ const AssetHeaderInfo: FC = ({ 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 = ({ symbol }) => { ))} - {totalUtilization !== undefined && + {globalUtilization !== undefined && borrowableUtilization !== undefined && - totalUtilization > borrowableUtilization && ( + globalUtilization > borrowableUtilization && ( {t( diff --git a/components/charts/UtilizationRateChart/index.tsx b/components/charts/UtilizationRateChart/index.tsx index 76279dcb5..ef80d51c7 100644 --- 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(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 ( @@ -61,7 +45,7 @@ function UtilizationRateChart({ type, symbol }: Props) { - {loading || !data || !borrowAPR || !currentUtilization ? ( + {loading || !data || !borrowAPR || currentUtilization === undefined || globalUtilization === undefined ? ( ) : ( { + 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); +};