Adjust AcreTVLMessage behavior

thesis · Nov 4, 2024 · 963a7cd · 963a7cd
1 parent c1c3f1c
commit 963a7cd
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 15 deletions.
diff --git 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
@@ -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>