dApp: Deposit limit when TVL cap is exceeded (#826)

Closes: #827 Closes: #805 ### Changes: - Add information about the TVL cap excess - Add information about the remaining TVL - Disable the deposit button when the TVL cap is exceeded - Hide the withdrawal button for guests and first time users ### Preview: <img width="649" alt="image" src="https://github.com/user-attachments/assets/19928043-3a03-4466-8b18-b3986227da67"> <img width="651" alt="image" src="https://github.com/user-attachments/assets/120be7cd-da99-4695-8181-511b45ab3418"> ### Note: - ~~To start with latest TVL changes I set the origin branch to [`tvl-component`](https://github.com/thesis/acre/tree/tvl-component).~~ - If you'd like to test the functionality you can manually modify the cap value in [`src/constants/staking.ts`](https://github.com/thesis/acre/blob/tvl-cap-deposit-limit/dapp/src/constants/staking.ts#L4) file.
thesis · Nov 8, 2024 · d39606e · d39606e
2 parents 2460c6b + 5ce853f
commit d39606e
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 14 deletions.
diff --git a/dapp/src/hooks/useStatistics.ts b/dapp/src/hooks/useStatistics.ts
@@ -24,12 +24,15 @@ const useStatistics = () => {
     ? 100
     : Math.floor((bitcoinTvl / TOTAL_VALUE_LOCKED_CAP) * 100)
 
+  const remaining = isCapExceeded ? 0 : TOTAL_VALUE_LOCKED_CAP - bitcoinTvl
+
   return {
     tvl: {
       progress,
       value: bitcoinTvl,
       usdValue: usdTvl,
       isCapExceeded,
+      remaining,
     },
   }
 }

diff --git a/dapp/src/pages/DashboardPage/AcreTVLMessage.tsx b/dapp/src/pages/DashboardPage/AcreTVLMessage.tsx
@@ -0,0 +1,45 @@
+import React from "react"
+import { Box, HStack, StackProps, VStack } from "@chakra-ui/react"
+import { useAllActivitiesCount, 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 } = useStatistics()
+  const { isConnected } = useWallet()
+  const activitiesCount = useAllActivitiesCount()
+
+  const isFirstTimeUser = activitiesCount === 0
+
+  if (isConnected && !isFirstTimeUser && !tvl.isCapExceeded) {
+    return null
+  }
+
+  return (
+    <HStack align="start" spacing={1} color="grey.500" {...props}>
+      <BoltFilled color="orange.400" my={1} />
+      {tvl.isCapExceeded ? (
+        <VStack align="start" spacing={0}>
+          <TextMd fontWeight="semibold" color="grey.700">
+            Deposit cap reached!
+          </TextMd>
+          <TextMd>Stay tuned for the next deposit cycle.</TextMd>
+        </VStack>
+      ) : (
+        <TextMd as="div">
+          <CurrencyBalance
+            amount={tvl.remaining}
+            currency="bitcoin"
+            shouldBeFormatted={false}
+            desiredDecimals={2}
+            color="grey.700"
+          />
+          <Box as="span">&nbsp;remaining until deposit cap</Box>
+        </TextMd>
+      )}
+    </HStack>
+  )
+}
diff --git a/dapp/src/pages/DashboardPage/PositionDetails.tsx b/dapp/src/pages/DashboardPage/PositionDetails.tsx
@@ -1,6 +1,12 @@
 import React from "react"
 import { CurrencyBalanceWithConversion } from "#/components/shared/CurrencyBalanceWithConversion"
-import { useBitcoinPosition, useTransactionModal } from "#/hooks"
+import {
+  useAllActivitiesCount,
+  useBitcoinPosition,
+  useTransactionModal,
+  useStatistics,
+  useWallet,
+} from "#/hooks"
 import { ACTION_FLOW_TYPES } from "#/types"
 import {
   Button,
@@ -14,6 +20,7 @@ import ArrivingSoonTooltip from "#/components/ArrivingSoonTooltip"
 import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
 import { featureFlags } from "#/constants"
 import { TextMd } from "#/components/shared/Typography"
+import AcreTVLMessage from "./AcreTVLMessage"
 
 const isWithdrawalFlowEnabled = featureFlags.WITHDRAWALS_ENABLED
 
@@ -33,6 +40,11 @@ export default function PositionDetails() {
 
   const openDepositModal = useTransactionModal(ACTION_FLOW_TYPES.STAKE)
   const openWithdrawModal = useTransactionModal(ACTION_FLOW_TYPES.UNSTAKE)
+  const activitiesCount = useAllActivitiesCount()
+
+  const { tvl } = useStatistics()
+
+  const { isConnected } = useWallet()
 
   return (
     <Flex w="100%" flexDirection="column" gap={5}>
@@ -76,24 +88,33 @@ export default function PositionDetails() {
         </UserDataSkeleton>
       </VStack>
 
-      <HStack w="full" justify="start" flexWrap="wrap" spacing={2}>
+      <HStack w="full" justify="start" flexWrap="wrap" spacing={5}>
         <UserDataSkeleton>
-          <Button {...buttonStyles} onClick={openDepositModal}>
+          <Button
+            {...buttonStyles}
+            onClick={openDepositModal}
+            isDisabled={featureFlags.TVL_ENABLED && tvl.isCapExceeded}
+          >
             Deposit
           </Button>
         </UserDataSkeleton>
-        <UserDataSkeleton>
-          <ArrivingSoonTooltip shouldDisplayTooltip={!isWithdrawalFlowEnabled}>
-            <Button
-              variant="outline"
-              {...buttonStyles}
-              onClick={openWithdrawModal}
-              isDisabled={!isWithdrawalFlowEnabled}
+        {isConnected && activitiesCount > 0 && (
+          <UserDataSkeleton ml={-3}>
+            <ArrivingSoonTooltip
+              shouldDisplayTooltip={!isWithdrawalFlowEnabled}
             >
-              Withdraw
-            </Button>
-          </ArrivingSoonTooltip>
-        </UserDataSkeleton>
+              <Button
+                variant="outline"
+                {...buttonStyles}
+                onClick={openWithdrawModal}
+                isDisabled={!isWithdrawalFlowEnabled}
+              >
+                Withdraw
+              </Button>
+            </ArrivingSoonTooltip>
+          </UserDataSkeleton>
+        )}
+        {featureFlags.TVL_ENABLED && <AcreTVLMessage />}
       </HStack>
     </Flex>
   )