From 329644ff7e09e3e11b2a84ce05e45fc8df4cfa1e Mon Sep 17 00:00:00 2001
From: Kamil Pyszkowski <kamil.pyszkowski@akena.co>
Date: Mon, 4 Nov 2024 14:39:40 +0100
Subject: [PATCH 1/6] Implement deposit limit when the TVL cap exceeds

---
 .../pages/DashboardPage/PositionDetails.tsx   | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/dapp/src/pages/DashboardPage/PositionDetails.tsx b/dapp/src/pages/DashboardPage/PositionDetails.tsx
index 0c9d6c2b8..02221c83b 100644
--- a/dapp/src/pages/DashboardPage/PositionDetails.tsx
+++ b/dapp/src/pages/DashboardPage/PositionDetails.tsx
@@ -4,6 +4,7 @@ import {
   useAllActivitiesCount,
   useBitcoinPosition,
   useTransactionModal,
+  useTVL,
 } from "#/hooks"
 import { ACTION_FLOW_TYPES } from "#/types"
 import {
@@ -18,6 +19,7 @@ import ArrivingSoonTooltip from "#/components/ArrivingSoonTooltip"
 import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
 import { featureFlags } from "#/constants"
 import { TextMd } from "#/components/shared/Typography"
+import { BoltFilled } from "#/assets/icons"
 
 const isWithdrawalFlowEnabled = featureFlags.WITHDRAWALS_ENABLED
 
@@ -39,6 +41,8 @@ export default function PositionDetails() {
   const openWithdrawModal = useTransactionModal(ACTION_FLOW_TYPES.UNSTAKE)
   const activitiesCount = useAllActivitiesCount()
 
+  const { isCapExceeded } = useTVL()
+
   return (
     <Flex w="100%" flexDirection="column" gap={5}>
       <VStack alignItems="start" spacing={0}>
@@ -83,7 +87,11 @@ export default function PositionDetails() {
 
       <HStack w="full" justify="start" flexWrap="wrap" spacing={2}>
         <UserDataSkeleton>
-          <Button {...buttonStyles} onClick={openDepositModal}>
+          <Button
+            {...buttonStyles}
+            onClick={openDepositModal}
+            isDisabled={isCapExceeded}
+          >
             {activitiesCount === 0 ? "Deposit" : "Deposit more"}
           </Button>
         </UserDataSkeleton>
@@ -99,6 +107,17 @@ export default function PositionDetails() {
             </Button>
           </ArrivingSoonTooltip>
         </UserDataSkeleton>
+        {isCapExceeded && (
+          <HStack align="start" spacing={1} mt={3}>
+            <BoltFilled color="orange.400" my={1} />
+            <VStack align="start" spacing={0}>
+              <TextMd fontWeight="semibold">Deposit cap reached!</TextMd>
+              <TextMd color="grey.500">
+                Stay tuned for the next deposit cycle.
+              </TextMd>
+            </VStack>
+          </HStack>
+        )}
       </HStack>
     </Flex>
   )

From 34b52599f00fc640d697f6012275f8cd15ba8ced Mon Sep 17 00:00:00 2001
From: Kamil Pyszkowski <kamil.pyszkowski@akena.co>
Date: Mon, 4 Nov 2024 16:36:30 +0100
Subject: [PATCH 2/6] Update hook

---
 dapp/src/pages/DashboardPage/PositionDetails.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/dapp/src/pages/DashboardPage/PositionDetails.tsx b/dapp/src/pages/DashboardPage/PositionDetails.tsx
index 02221c83b..bfcfae20c 100644
--- a/dapp/src/pages/DashboardPage/PositionDetails.tsx
+++ b/dapp/src/pages/DashboardPage/PositionDetails.tsx
@@ -4,7 +4,7 @@ import {
   useAllActivitiesCount,
   useBitcoinPosition,
   useTransactionModal,
-  useTVL,
+  useStatistics,
 } from "#/hooks"
 import { ACTION_FLOW_TYPES } from "#/types"
 import {
@@ -41,7 +41,7 @@ export default function PositionDetails() {
   const openWithdrawModal = useTransactionModal(ACTION_FLOW_TYPES.UNSTAKE)
   const activitiesCount = useAllActivitiesCount()
 
-  const { isCapExceeded } = useTVL()
+  const { tvl } = useStatistics()
 
   return (
     <Flex w="100%" flexDirection="column" gap={5}>
@@ -90,7 +90,7 @@ export default function PositionDetails() {
           <Button
             {...buttonStyles}
             onClick={openDepositModal}
-            isDisabled={isCapExceeded}
+            isDisabled={tvl.isCapExceeded}
           >
             {activitiesCount === 0 ? "Deposit" : "Deposit more"}
           </Button>
@@ -107,7 +107,7 @@ export default function PositionDetails() {
             </Button>
           </ArrivingSoonTooltip>
         </UserDataSkeleton>
-        {isCapExceeded && (
+        {tvl.isCapExceeded && (
           <HStack align="start" spacing={1} mt={3}>
             <BoltFilled color="orange.400" my={1} />
             <VStack align="start" spacing={0}>

From c1c3f1c61c80c529344735ac0009f67d40377b1e Mon Sep 17 00:00:00 2001
From: Kamil Pyszkowski <kamil.pyszkowski@akena.co>
Date: Mon, 4 Nov 2024 16:53:37 +0100
Subject: [PATCH 3/6] Implement `AcreTVLMessage` component

---
 dapp/src/hooks/useStatistics.ts               |  3 ++
 .../pages/DashboardPage/AcreTVLMessage.tsx    | 35 +++++++++++++++++++
 .../pages/DashboardPage/PositionDetails.tsx   | 14 ++------
 3 files changed, 40 insertions(+), 12 deletions(-)
 create mode 100644 dapp/src/pages/DashboardPage/AcreTVLMessage.tsx

diff --git a/dapp/src/hooks/useStatistics.ts b/dapp/src/hooks/useStatistics.ts
index e83fc41ed..fc22ae8c5 100644
--- 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 = 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
new file mode 100644
index 000000000..70e257524
--- /dev/null
+++ b/dapp/src/pages/DashboardPage/AcreTVLMessage.tsx
@@ -0,0 +1,35 @@
+import React from "react"
+import { Box, HStack, StackProps, VStack } from "@chakra-ui/react"
+import { useStatistics } 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()
+
+  return (
+    <HStack align="start" spacing={1} mt={3} color="grey.500" {...props}>
+      <BoltFilled color="orange.400" my={1} />
+      {tvl.isCapExceeded ? (
+        <VStack align="start" spacing={0}>
+          <TextMd fontWeight="semibold">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
index bfcfae20c..208b5c95e 100644
--- a/dapp/src/pages/DashboardPage/PositionDetails.tsx
+++ b/dapp/src/pages/DashboardPage/PositionDetails.tsx
@@ -19,7 +19,7 @@ import ArrivingSoonTooltip from "#/components/ArrivingSoonTooltip"
 import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
 import { featureFlags } from "#/constants"
 import { TextMd } from "#/components/shared/Typography"
-import { BoltFilled } from "#/assets/icons"
+import AcreTVLMessage from "./AcreTVLMessage"
 
 const isWithdrawalFlowEnabled = featureFlags.WITHDRAWALS_ENABLED
 
@@ -107,17 +107,7 @@ export default function PositionDetails() {
             </Button>
           </ArrivingSoonTooltip>
         </UserDataSkeleton>
-        {tvl.isCapExceeded && (
-          <HStack align="start" spacing={1} mt={3}>
-            <BoltFilled color="orange.400" my={1} />
-            <VStack align="start" spacing={0}>
-              <TextMd fontWeight="semibold">Deposit cap reached!</TextMd>
-              <TextMd color="grey.500">
-                Stay tuned for the next deposit cycle.
-              </TextMd>
-            </VStack>
-          </HStack>
-        )}
+        <AcreTVLMessage />
       </HStack>
     </Flex>
   )

From 963a7cd6ecb0a71d2242bdc753c3918d205070a5 Mon Sep 17 00:00:00 2001
From: Kamil Pyszkowski <kamil.pyszkowski@akena.co>
Date: Mon, 4 Nov 2024 17:26:11 +0100
Subject: [PATCH 4/6] Adjust `AcreTVLMessage` behavior

---
 .../pages/DashboardPage/AcreTVLMessage.tsx    | 17 ++++++++--
 .../pages/DashboardPage/PositionDetails.tsx   | 32 ++++++++++++-------
 2 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/dapp/src/pages/DashboardPage/AcreTVLMessage.tsx b/dapp/src/pages/DashboardPage/AcreTVLMessage.tsx
index 70e257524..c15981569 100644
--- a/dapp/src/pages/DashboardPage/AcreTVLMessage.tsx
+++ b/dapp/src/pages/DashboardPage/AcreTVLMessage.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { Box, HStack, StackProps, VStack } from "@chakra-ui/react"
-import { useStatistics } from "#/hooks"
+import { useAllActivitiesCount, useStatistics, useWallet } from "#/hooks"
 import { BoltFilled } from "#/assets/icons"
 import { TextMd } from "#/components/shared/Typography"
 import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
@@ -9,13 +9,24 @@ type AcreTVLMessageProps = Omit<StackProps, "children">
 
 export default function AcreTVLMessage(props: AcreTVLMessageProps) {
   const { tvl } = useStatistics()
+  const { address } = useWallet()
+  const activitiesCount = useAllActivitiesCount()
+
+  const isWalletConnected = !!address
+  const isFirstTimeUser = activitiesCount === 0
+
+  if (isWalletConnected && !isFirstTimeUser && !tvl.isCapExceeded) {
+    return null
+  }
 
   return (
-    <HStack align="start" spacing={1} mt={3} color="grey.500" {...props}>
+    <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">Deposit cap reached!</TextMd>
+          <TextMd fontWeight="semibold" color="grey.700">
+            Deposit cap reached!
+          </TextMd>
           <TextMd>Stay tuned for the next deposit cycle.</TextMd>
         </VStack>
       ) : (
diff --git a/dapp/src/pages/DashboardPage/PositionDetails.tsx b/dapp/src/pages/DashboardPage/PositionDetails.tsx
index 208b5c95e..85b65313c 100644
--- a/dapp/src/pages/DashboardPage/PositionDetails.tsx
+++ b/dapp/src/pages/DashboardPage/PositionDetails.tsx
@@ -5,6 +5,7 @@ import {
   useBitcoinPosition,
   useTransactionModal,
   useStatistics,
+  useWallet,
 } from "#/hooks"
 import { ACTION_FLOW_TYPES } from "#/types"
 import {
@@ -43,6 +44,9 @@ export default function PositionDetails() {
 
   const { tvl } = useStatistics()
 
+  const { address } = useWallet()
+  const isWalletConnected = !!address
+
   return (
     <Flex w="100%" flexDirection="column" gap={5}>
       <VStack alignItems="start" spacing={0}>
@@ -85,7 +89,7 @@ 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}
@@ -95,18 +99,22 @@ export default function PositionDetails() {
             {activitiesCount === 0 ? "Deposit" : "Deposit more"}
           </Button>
         </UserDataSkeleton>
-        <UserDataSkeleton>
-          <ArrivingSoonTooltip shouldDisplayTooltip={!isWithdrawalFlowEnabled}>
-            <Button
-              variant="outline"
-              {...buttonStyles}
-              onClick={openWithdrawModal}
-              isDisabled={!isWithdrawalFlowEnabled}
+        {isWalletConnected && activitiesCount > 0 && (
+          <UserDataSkeleton ml={-3}>
+            <ArrivingSoonTooltip
+              shouldDisplayTooltip={!isWithdrawalFlowEnabled}
             >
-              Withdraw
-            </Button>
-          </ArrivingSoonTooltip>
-        </UserDataSkeleton>
+              <Button
+                variant="outline"
+                {...buttonStyles}
+                onClick={openWithdrawModal}
+                isDisabled={!isWithdrawalFlowEnabled}
+              >
+                Withdraw
+              </Button>
+            </ArrivingSoonTooltip>
+          </UserDataSkeleton>
+        )}
         <AcreTVLMessage />
       </HStack>
     </Flex>

From 0b26a309e55331d204f810fbe09c884dd90b067c Mon Sep 17 00:00:00 2001
From: Kamil Pyszkowski <kamil.pyszkowski@akena.co>
Date: Tue, 5 Nov 2024 17:17:23 +0100
Subject: [PATCH 5/6] Use existing boolean

---
 dapp/src/pages/DashboardPage/AcreTVLMessage.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/dapp/src/pages/DashboardPage/AcreTVLMessage.tsx b/dapp/src/pages/DashboardPage/AcreTVLMessage.tsx
index c15981569..0960e95af 100644
--- a/dapp/src/pages/DashboardPage/AcreTVLMessage.tsx
+++ b/dapp/src/pages/DashboardPage/AcreTVLMessage.tsx
@@ -9,13 +9,12 @@ type AcreTVLMessageProps = Omit<StackProps, "children">
 
 export default function AcreTVLMessage(props: AcreTVLMessageProps) {
   const { tvl } = useStatistics()
-  const { address } = useWallet()
+  const { isConnected } = useWallet()
   const activitiesCount = useAllActivitiesCount()
 
-  const isWalletConnected = !!address
   const isFirstTimeUser = activitiesCount === 0
 
-  if (isWalletConnected && !isFirstTimeUser && !tvl.isCapExceeded) {
+  if (isConnected && !isFirstTimeUser && !tvl.isCapExceeded) {
     return null
   }
 

From cfae577e7e646fd02b6ed64170b2d6ae6c4696fb Mon Sep 17 00:00:00 2001
From: Kamil Pyszkowski <kamil.pyszkowski@akena.co>
Date: Thu, 7 Nov 2024 13:08:31 +0100
Subject: [PATCH 6/6] Minor improvements

---
 dapp/src/hooks/useStatistics.ts                  | 2 +-
 dapp/src/pages/DashboardPage/PositionDetails.tsx | 9 ++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/dapp/src/hooks/useStatistics.ts b/dapp/src/hooks/useStatistics.ts
index fc22ae8c5..4af7a8f04 100644
--- a/dapp/src/hooks/useStatistics.ts
+++ b/dapp/src/hooks/useStatistics.ts
@@ -24,7 +24,7 @@ const useStatistics = () => {
     ? 100
     : Math.floor((bitcoinTvl / TOTAL_VALUE_LOCKED_CAP) * 100)
 
-  const remaining = TOTAL_VALUE_LOCKED_CAP - bitcoinTvl
+  const remaining = isCapExceeded ? 0 : TOTAL_VALUE_LOCKED_CAP - bitcoinTvl
 
   return {
     tvl: {
diff --git a/dapp/src/pages/DashboardPage/PositionDetails.tsx b/dapp/src/pages/DashboardPage/PositionDetails.tsx
index 85b65313c..83108a5bf 100644
--- a/dapp/src/pages/DashboardPage/PositionDetails.tsx
+++ b/dapp/src/pages/DashboardPage/PositionDetails.tsx
@@ -44,8 +44,7 @@ export default function PositionDetails() {
 
   const { tvl } = useStatistics()
 
-  const { address } = useWallet()
-  const isWalletConnected = !!address
+  const { isConnected } = useWallet()
 
   return (
     <Flex w="100%" flexDirection="column" gap={5}>
@@ -94,12 +93,12 @@ export default function PositionDetails() {
           <Button
             {...buttonStyles}
             onClick={openDepositModal}
-            isDisabled={tvl.isCapExceeded}
+            isDisabled={featureFlags.TVL_ENABLED && tvl.isCapExceeded}
           >
             {activitiesCount === 0 ? "Deposit" : "Deposit more"}
           </Button>
         </UserDataSkeleton>
-        {isWalletConnected && activitiesCount > 0 && (
+        {isConnected && activitiesCount > 0 && (
           <UserDataSkeleton ml={-3}>
             <ArrivingSoonTooltip
               shouldDisplayTooltip={!isWithdrawalFlowEnabled}
@@ -115,7 +114,7 @@ export default function PositionDetails() {
             </ArrivingSoonTooltip>
           </UserDataSkeleton>
         )}
-        <AcreTVLMessage />
+        {featureFlags.TVL_ENABLED && <AcreTVLMessage />}
       </HStack>
     </Flex>
   )