dApp: AcreTVLProgress component (#823)

Closes: #822

### Changes:
- Removed the use of term `season` - we don't have seasons any more
- Implemented `AcreTVLProgress` component
- Updated the TVL hook
- Updated styles of `Progress` component

### Preview:

<img width="1081" alt="image"
src="https://github.com/user-attachments/assets/55e1cb95-eaab-471d-bfdc-67710f925d88">

### Note:
To start with latest layout changes I set the origin branch to
[`ledger-live-updates`](https://github.com/thesis/acre/tree/ledger-live-updates)

dapp/.env

@@ -25,6 +25,6 @@ VITE_FEATURE_FLAG_OKX_WALLET_ENABLED="false"
 VITE_FEATURE_FLAG_XVERSE_WALLET_ENABLED="false"
 VITE_FEATURE_FLAG_BEEHIVE_COMPONENT_ENABLED="false"
 VITE_FEATURE_FLAG_ACRE_POINTS_ENABLED="true"
-VITE_FEATURE_FLAG_TVL_ENABLED="false"
+VITE_FEATURE_FLAG_TVL_ENABLED="true"
 VITE_FEATURE_GATING_DAPP_ENABLED="true"
 

dapp/src/assets/icons/BoltFilled.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+import { createIcon } from "@chakra-ui/react"
+
+export default createIcon({
+  displayName: "BoltFilled",
+  viewBox: "0 0 24 24",
+  path: [
+    <path
+      fill="currentColor"
+      d="M13 2l.018 .001l.016 .001l.083 .005l.011 .002h.011l.038 .009l.052 .008l.016 .006l.011 .001l.029 .011l.052 .014l.019 .009l.015 .004l.028 .014l.04 .017l.021 .012l.022 .01l.023 .015l.031 .017l.034 .024l.018 .011l.013 .012l.024 .017l.038 .034l.022 .017l.008 .01l.014 .012l.036 .041l.026 .027l.006 .009c.12 .147 .196 .322 .218 .513l.001 .012l.002 .041l.004 .064v6h5a1 1 0 0 1 .868 1.497l-.06 .091l-8 11c-.568 .783 -1.808 .38 -1.808 -.588v-6h-5a1 1 0 0 1 -.868 -1.497l.06 -.091l8 -11l.01 -.013l.018 -.024l.033 -.038l.018 -.022l.009 -.008l.013 -.014l.04 -.036l.028 -.026l.008 -.006a1 1 0 0 1 .402 -.199l.011 -.001l.027 -.005l.074 -.013l.011 -.001l.041 -.002z"
+    />,
+  ],
+})

dapp/src/assets/icons/index.ts

@@ -9,3 +9,4 @@ export * from "./MezoSignIcon"
 export * from "./AcreSignIcon"
 export * from "./BitcoinsStackErrorIcon"
 export { default as MatsIcon } from "./MatsIcon"
+export { default as BoltFilled } from "./BoltFilled"

dapp/src/components/shared/ProgressBar.tsx

@@ -1,16 +1,32 @@
 import React from "react"
-import { Box, Progress, ProgressProps, ProgressLabel } from "@chakra-ui/react"
+import { Progress, ProgressProps, ProgressLabel, Icon } from "@chakra-ui/react"
+import { BoltFilled } from "#/assets/icons"
 
-function ProgressBar(props: ProgressProps) {
-  const { value, children, ...restProps } = props
+type ProgressBarProps = ProgressProps & {
+  withBoltIcon?: boolean
+}
+
+function ProgressBar(props: ProgressBarProps) {
+  const { value = 0, children, withBoltIcon = false, ...restProps } = props
 
   return (
     <Progress value={value} hasStripe {...restProps}>
-      <ProgressLabel>
-        {children}
+      <ProgressLabel>{children}</ProgressLabel>
 
-        <Box>{value}%</Box>
-      </ProgressLabel>
+      {withBoltIcon && (
+        <Icon
+          position="absolute"
+          top="50%"
+          left={`${value}%`}
+          color="grey.700"
+          boxSize={3}
+          transform="auto"
+          translateX="-100%"
+          translateY="-50%"
+          as={BoltFilled}
+          mx={-1}
+        />
+      )}
     </Progress>
   )
 }

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/constants/staking.ts

@@ -1,4 +1,4 @@
 // TODO: Read the value from the SDK, once we expose it
 export const MINIMUM_BALANCE = BigInt(String(5e6)) // 0.05 BTC
 
-export const SEASON_CAP = BigInt(String(5e10)) // 500 BTC
+export const TOTAL_VALUE_LOCKED_CAP = 1250 // 1250 BTC

dapp/src/hooks/index.ts

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

dapp/src/hooks/sdk/index.ts

@@ -3,5 +3,4 @@ export * from "./useFetchMinDepositAmount"
 export * from "./useInitDataFromSdk"
 export * from "./useFetchActivities"
 export * from "./useMinWithdrawAmount"
-export { default as useTotalAssets } from "./useTotalAssets"
 export { default as useBitcoinPosition } from "./useBitcoinPosition"

dapp/src/hooks/useStatistics.ts

@@ -0,0 +1,37 @@
+import {
+  queryKeysFactory,
+  REFETCH_INTERVAL_IN_MILLISECONDS,
+  TOTAL_VALUE_LOCKED_CAP,
+} from "#/constants"
+import { acreApi } from "#/utils"
+import { useQuery } from "@tanstack/react-query"
+
+const { acreKeys } = queryKeysFactory
+
+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 isCapExceeded = bitcoinTvl > TOTAL_VALUE_LOCKED_CAP
+
+  const progress = isCapExceeded
+    ? 100
+    : Math.floor((bitcoinTvl / TOTAL_VALUE_LOCKED_CAP) * 100)
+
+  return {
+    tvl: {
+      progress,
+      value: bitcoinTvl,
+      usdValue: usdTvl,
+      isCapExceeded,
+    },
+  }
+}
+
+export default useStatistics

dapp/src/pages/DashboardPage/AcreTVLProgress.tsx

@@ -0,0 +1,62 @@
+import React from "react"
+import {
+  StackProps,
+  useMultiStyleConfig,
+  HStack,
+  VStack,
+  Grid,
+  Box,
+} from "@chakra-ui/react"
+import { useStatistics } from "#/hooks"
+import { BitcoinIcon } from "#/assets/icons"
+import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
+import ProgressBar from "#/components/shared/ProgressBar"
+import { TextMd, TextXs } from "#/components/shared/Typography"
+import { TOTAL_VALUE_LOCKED_CAP } from "#/constants"
+
+type AcreTVLProgressProps = StackProps
+
+const STEP_COUNT = 5
+
+const STEPS = Array(STEP_COUNT)
+  .fill(0)
+  .map(
+    (_, index) => (index + 1) * Math.floor(TOTAL_VALUE_LOCKED_CAP / STEP_COUNT),
+  )
+
+export function AcreTVLProgress(props: AcreTVLProgressProps) {
+  const styles = useMultiStyleConfig("AcreTVLProgress")
+  const { tvl } = useStatistics()
+
+  return (
+    <Box sx={styles.container} {...props}>
+      <HStack sx={styles.wrapper}>
+        <Grid sx={styles.contentWrapper}>
+          <BitcoinIcon sx={styles.valueIcon} />
+
+          <CurrencyBalance
+            size="3xl"
+            amount={tvl.value}
+            shouldBeFormatted={false}
+            currency="bitcoin"
+            desiredDecimals={2}
+          />
+
+          <TextMd>Total value locked</TextMd>
+        </Grid>
+
+        <VStack sx={styles.progressWrapper}>
+          <HStack sx={styles.progressLabelsWrapper}>
+            {STEPS.map((value) => (
+              <TextXs key={value} sx={styles.progressLabel}>
+                {value}
+              </TextXs>
+            ))}
+          </HStack>
+
+          <ProgressBar value={tvl.progress} withBoltIcon={tvl.progress > 2} />
+        </VStack>
+      </HStack>
+    </Box>
+  )
+}

dapp/src/pages/DashboardPage/index.tsx

@@ -1,16 +1,16 @@
 import React from "react"
-import { useTriggerConnectWalletModal } from "#/hooks"
 import { featureFlags } from "#/constants"
+import { useTriggerConnectWalletModal } from "#/hooks"
 import { Grid } from "@chakra-ui/react"
 import DashboardCard from "./DashboardCard"
 // import GrantedSeasonPassCard from "./GrantedSeasonPassCard"
 import AcrePointsCard from "./AcrePointsCard"
-import { CurrentSeasonCard } from "./CurrentSeasonCard"
-import BeehiveCard from "./BeehiveCard"
 import AcrePointsTemplateCard from "./AcrePointsTemplateCard"
+import BeehiveCard from "./BeehiveCard"
+import { AcreTVLProgress } from "./AcreTVLProgress"
 
 const TEMPLATE_AREAS = `
-  ${featureFlags.TVL_ENABLED ? '"dashboard current-season"' : ""}
+  ${featureFlags.TVL_ENABLED ? '"tvl tvl"' : ""}
   "dashboard acre-points"
   ${featureFlags.BEEHIVE_COMPONENT_ENABLED ? '"dashboard beehive"' : ""}
   "dashboard useful-links"
@@ -32,17 +32,19 @@ export default function DashboardPage() {
       }}
       gridTemplateRows={GRID_TEMPLATE_ROWS}
     >
+      {featureFlags.TVL_ENABLED && <AcreTVLProgress gridArea="tvl" />}
+
       <DashboardCard gridArea="dashboard" h="fit-content" />
+
       {/* TODO: Uncomment in post-launch phases + add `gridArea` and update  `templateAreas` */}
       {/* <GrantedSeasonPassCard /> */}
-      {featureFlags.TVL_ENABLED && (
-        <CurrentSeasonCard showSeasonStats={false} gridArea="current-season" />
-      )}
+
       {featureFlags.ACRE_POINTS_ENABLED ? (
         <AcrePointsCard gridArea="acre-points" />
       ) : (
         <AcrePointsTemplateCard gridArea="acre-points" />
       )}
+
       {featureFlags.BEEHIVE_COMPONENT_ENABLED && (
         <BeehiveCard gridArea="beehive" />
       )}