Refactor hook

dapp/src/constants/queryKeysFactory.ts

@@ -8,6 +8,7 @@ const userKeys = {
 const acreKeys = {
   all: ["acre"] as const,
   totalAssets: () => [...acreKeys.all, "total-assets"] as const,
+  statistics: () => [...acreKeys.all, "statistics"] as const,
   mats: () => [...acreKeys.all, "mats"] as const,
   pointsData: () => [...acreKeys.all, "points-data"] as const,
 }

dapp/src/hooks/index.ts

@@ -20,7 +20,7 @@ export * from "./usePagination"
 export * from "./useModal"
 export * from "./useTransactionModal"
 export * from "./useVerifyDepositAddress"
-export { default as useTVL } from "./useTVL"
+export { default as useStatistics } from "./useStatistics"
 export * from "./useDisconnectWallet"
 export * from "./useWalletConnectionError"
 export { default as useInvalidateQueries } from "./useInvalidateQueries"

dapp/src/hooks/useTVL.ts → dapp/src/hooks/useStatistics.ts

@@ -8,26 +8,30 @@ import { useQuery } from "@tanstack/react-query"
 
 const { acreKeys } = queryKeysFactory
 
-const useTVL = () => {
+const useStatistics = () => {
   const { data } = useQuery({
-    queryKey: [...acreKeys.totalAssets()],
+    queryKey: [...acreKeys.statistics()],
     queryFn: acreApi.getStatistics,
     refetchInterval: REFETCH_INTERVAL_IN_MILLISECONDS,
   })
 
-  const totalAssets = data?.btc ?? 0
+  const bitcoinTvl = data?.btc ?? 0
+  const usdTvl = data?.usd ?? 0
 
-  const isCapExceeded = totalAssets > TOTAL_VALUE_LOCKED_CAP
+  const isCapExceeded = bitcoinTvl > TOTAL_VALUE_LOCKED_CAP
 
   const progress = isCapExceeded
     ? 100
-    : Math.floor((totalAssets / TOTAL_VALUE_LOCKED_CAP) * 100)
+    : Math.floor((bitcoinTvl / TOTAL_VALUE_LOCKED_CAP) * 100)
 
   return {
-    progress,
-    value: totalAssets,
-    isCapExceeded,
+    tvl: {
+      progress,
+      value: bitcoinTvl,
+      usdValue: usdTvl,
+      isCapExceeded,
+    },
   }
 }
 
-export default useTVL
+export default useStatistics

dapp/src/pages/DashboardPage/AcreTVLProgress.tsx

@@ -7,7 +7,7 @@ import {
   Grid,
   Box,
 } from "@chakra-ui/react"
-import { useTVL } from "#/hooks"
+import { useStatistics } from "#/hooks"
 import { BitcoinIcon } from "#/assets/icons"
 import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
 import ProgressBar from "#/components/shared/ProgressBar"
@@ -26,7 +26,7 @@ const STEPS = Array(STEP_COUNT)
 
 export function AcreTVLProgress(props: AcreTVLProgressProps) {
   const styles = useMultiStyleConfig("AcreTVLProgress")
-  const totalValueLocked = useTVL()
+  const { tvl } = useStatistics()
 
   return (
     <Box sx={styles.container} {...props}>
@@ -36,7 +36,7 @@ export function AcreTVLProgress(props: AcreTVLProgressProps) {
 
           <CurrencyBalance
             size="3xl"
-            amount={totalValueLocked.value}
+            amount={tvl.value}
             shouldBeFormatted={false}
             currency="bitcoin"
             desiredDecimals={2}
@@ -54,10 +54,7 @@ export function AcreTVLProgress(props: AcreTVLProgressProps) {
             ))}
           </HStack>
 
-          <ProgressBar
-            value={totalValueLocked.progress}
-            withBoltIcon={totalValueLocked.progress > 2}
-          />
+          <ProgressBar value={tvl.progress} withBoltIcon={tvl.progress > 2} />
         </VStack>
       </HStack>
     </Box>