Create one hook for statistics

dapp/src/hooks/index.ts

@@ -17,7 +17,7 @@ export * from "./usePagination"
 export * from "./useModal"
 export * from "./useTransactionModal"
 export * from "./useVerifyDepositAddress"
-export { default as useEnhancedStatistics } from "./useEnhancedStatistics"
+export { default as useStatistics } from "./useStatistics"
 export * from "./useDisconnectWallet"
 export { default as useWalletConnectionAlert } from "./useWalletConnectionAlert"
 export { default as useResetWalletState } from "./useResetWalletState"

dapp/src/hooks/useStatistics.ts

@@ -1,13 +1,36 @@
-import { useQuery } from "@tanstack/react-query"
-import { REFETCH_INTERVAL_IN_MILLISECONDS, queryKeysFactory } from "#/constants"
+import { queryKeysFactory, REFETCH_INTERVAL_IN_MILLISECONDS } from "#/constants"
 import { acreApi } from "#/utils"
+import { useQuery } from "@tanstack/react-query"
 
 const { acreKeys } = queryKeysFactory
 
-export default function useStatistics() {
-  return useQuery({
+const useStatistics = () => {
+  const { data } = useQuery({
     queryKey: [...acreKeys.statistics()],
     queryFn: acreApi.getStatistics,
     refetchInterval: REFETCH_INTERVAL_IN_MILLISECONDS,
   })
+
+  const bitcoinTvl = data?.btc ?? 0
+  const usdTvl = data?.usd ?? 0
+  const tvlCap = data?.cap ?? 0
+
+  const isCapExceeded = bitcoinTvl > tvlCap
+
+  const progress = isCapExceeded ? 100 : Math.floor((bitcoinTvl / tvlCap) * 100)
+
+  const remaining = isCapExceeded ? 0 : tvlCap - bitcoinTvl
+
+  return {
+    tvl: {
+      progress,
+      value: bitcoinTvl,
+      usdValue: usdTvl,
+      isCapExceeded,
+      remaining,
+      cap: tvlCap,
+    },
+  }
 }
+
+export default useStatistics

dapp/src/pages/DashboardPage/AcreTVLMessage.tsx

@@ -1,14 +1,14 @@
 import React from "react"
 import { Box, HStack, StackProps, VStack } from "@chakra-ui/react"
-import { useActivitiesCount, useEnhancedStatistics, useWallet } from "#/hooks"
+import { useActivitiesCount, useStatistics, useWallet } from "#/hooks"
 import { BoltFilled } from "#/assets/icons"
 import { TextMd } from "#/components/shared/Typography"
 import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
 
 type AcreTVLMessageProps = Omit<StackProps, "children">
 
 export default function AcreTVLMessage(props: AcreTVLMessageProps) {
-  const { tvl } = useEnhancedStatistics()
+  const { tvl } = useStatistics()
   const { isConnected } = useWallet()
   const activitiesCount = useActivitiesCount()
 

dapp/src/pages/DashboardPage/AcreTVLProgress.tsx

@@ -7,7 +7,7 @@ import {
   Grid,
   Box,
 } from "@chakra-ui/react"
-import { useEnhancedStatistics } from "#/hooks"
+import { useStatistics } from "#/hooks"
 import { BitcoinIcon } from "#/assets/icons"
 import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
 import ProgressBar from "#/components/shared/ProgressBar"
@@ -19,7 +19,7 @@ const STEP_COUNT = 5
 
 export function AcreTVLProgress(props: AcreTVLProgressProps) {
   const styles = useMultiStyleConfig("AcreTVLProgress")
-  const { tvl } = useEnhancedStatistics()
+  const { tvl } = useStatistics()
 
   const steps = useMemo(
     () =>

dapp/src/pages/DashboardPage/PositionDetails.tsx

@@ -49,7 +49,7 @@ export default function PositionDetails() {
   const { data: activities } = useActivities()
   const isMobileMode = useMobileMode()
 
-  const { tvl } = useEnhancedStatistics()
+  const { tvl } = useStatistics()
 
   const { isConnected } = useWallet()