From e7ab6af5903bb25c1e03cf2a757c88fa8b0ee6b1 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Thu, 5 Dec 2024 14:03:38 +0100
Subject: [PATCH] Do not show drop message when user not connected

---
 .../pages/DashboardPage/AcrePointsCard.tsx    | 141 ------------------
 .../AcrePointsCard/AcrePointsLabel.tsx        | 111 ++++++++++++++
 .../DashboardPage/AcrePointsCard/index.tsx    |  62 ++++++++
 3 files changed, 173 insertions(+), 141 deletions(-)
 delete mode 100644 dapp/src/pages/DashboardPage/AcrePointsCard.tsx
 create mode 100644 dapp/src/pages/DashboardPage/AcrePointsCard/AcrePointsLabel.tsx
 create mode 100644 dapp/src/pages/DashboardPage/AcrePointsCard/index.tsx

diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard.tsx
deleted file mode 100644
index 193c6c5d1..000000000
--- a/dapp/src/pages/DashboardPage/AcrePointsCard.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import React from "react"
-import { H4, TextMd } from "#/components/shared/Typography"
-import {
-  Button,
-  Card,
-  CardBody,
-  CardHeader,
-  CardProps,
-  HStack,
-  Image,
-  VStack,
-} from "@chakra-ui/react"
-import Countdown from "#/components/shared/Countdown"
-import { logPromiseFailure, numberToLocaleString } from "#/utils"
-import { useAcrePoints, useWallet } from "#/hooks"
-import Spinner from "#/components/shared/Spinner"
-import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
-import InfoTooltip from "#/components/shared/InfoTooltip"
-import useDebounce from "#/hooks/useDebounce"
-import { ONE_SEC_IN_MILLISECONDS } from "#/constants"
-import acrePointsIllustrationSrc from "#/assets/images/acre-points-illustration.png"
-
-// TODO: Define colors as theme value
-const COLOR_TEXT_LIGHT_PRIMARY = "#1C1A16"
-const COLOR_TEXT_LIGHT_TERTIARY = "#7D6A4B"
-// TODO: Update `Button` component theme
-const COLOR_BUTTON_LABEL = "#FBF7EC"
-const COLOR_BUTTON_BACKGROUND = "#33A321"
-
-export default function AcrePointsCard(props: CardProps) {
-  const {
-    claimableBalance,
-    nextDropTimestamp,
-    totalBalance,
-    claimPoints,
-    updateUserPointsData,
-    updatePointsData,
-    isCalculationInProgress,
-    totalPoolBalance,
-  } = useAcrePoints()
-  const { isConnected } = useWallet()
-
-  const debouncedClaimPoints = useDebounce(claimPoints, ONE_SEC_IN_MILLISECONDS)
-
-  const formattedTotalPointsAmount = numberToLocaleString(totalBalance)
-  const formattedClaimablePointsAmount = numberToLocaleString(claimableBalance)
-  const formattedTotalPoolBalance = numberToLocaleString(totalPoolBalance)
-
-  const handleOnCountdownEnd = () => {
-    logPromiseFailure(updatePointsData())
-    logPromiseFailure(updateUserPointsData())
-  }
-
-  const isDataReady =
-    isCalculationInProgress || !!nextDropTimestamp || !!claimableBalance
-
-  return (
-    <Card {...props}>
-      <CardHeader mb={2} as={HStack} justify="space-between">
-        <TextMd color="grey.700">
-          {isConnected ? "Your" : "Total"} Acre points
-        </TextMd>
-
-        <InfoTooltip
-          label={
-            isConnected
-              ? "Your current balance of Acre points collected so far. New points drop daily and are ready to be claimed. Unclaimed points roll over to the next day."
-              : "Total points distributed to Acre users so far. New points drop daily and can be claimed in each user's dashboard."
-          }
-          w={56}
-        />
-      </CardHeader>
-
-      <CardBody>
-        <UserDataSkeleton>
-          <H4 fontWeight="semibold" mb={2}>
-            {isConnected
-              ? formattedTotalPointsAmount
-              : formattedTotalPoolBalance}
-          </H4>
-        </UserDataSkeleton>
-
-        <Image src={acrePointsIllustrationSrc} mt={6} />
-
-        <UserDataSkeleton>
-          {isDataReady && (
-            <VStack px={4} py={5} spacing={0} rounded="lg" bg="gold.100">
-              {isCalculationInProgress ? (
-                <VStack spacing={4}>
-                  {!claimableBalance && (
-                    <TextMd color="grey.500">Please wait...</TextMd>
-                  )}
-
-                  <HStack spacing={0}>
-                    <Spinner mr={3} size="sm" />
-                    <TextMd>Your drop is being prepared.</TextMd>
-                    <InfoTooltip
-                      label={`
-                        We need some time to calculate your points. It may take up to 30 minutes. 
-                        ${claimableBalance ? "You can still claim points from previous drops." : ""}
-                      `}
-                      maxW={72}
-                    />
-                  </HStack>
-                </VStack>
-              ) : (
-                <HStack spacing={0}>
-                  <TextMd color={COLOR_TEXT_LIGHT_TERTIARY} textAlign="center">
-                    Next drop in
-                  </TextMd>
-                  <Countdown
-                    timestamp={nextDropTimestamp!} // Timestamp presence already checked
-                    onCountdownEnd={handleOnCountdownEnd}
-                    size="md"
-                    ml={1}
-                    color={COLOR_TEXT_LIGHT_PRIMARY}
-                  />
-                </HStack>
-              )}
-
-              {claimableBalance && (
-                <Button
-                  mt={5}
-                  onClick={debouncedClaimPoints}
-                  w="full"
-                  colorScheme="green"
-                  bgColor={COLOR_BUTTON_BACKGROUND}
-                  color={COLOR_BUTTON_LABEL}
-                  fontWeight="semibold"
-                  size="lg"
-                >
-                  Claim {formattedClaimablePointsAmount} PTS
-                </Button>
-              )}
-            </VStack>
-          )}
-        </UserDataSkeleton>
-      </CardBody>
-    </Card>
-  )
-}
diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard/AcrePointsLabel.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard/AcrePointsLabel.tsx
new file mode 100644
index 000000000..2cefe320e
--- /dev/null
+++ b/dapp/src/pages/DashboardPage/AcrePointsCard/AcrePointsLabel.tsx
@@ -0,0 +1,111 @@
+import React from "react"
+import { TextMd } from "#/components/shared/Typography"
+import { Button, HStack, VStack } from "@chakra-ui/react"
+import Countdown from "#/components/shared/Countdown"
+import { logPromiseFailure, numberToLocaleString } from "#/utils"
+import { useAcrePoints, useWallet } from "#/hooks"
+import Spinner from "#/components/shared/Spinner"
+import InfoTooltip from "#/components/shared/InfoTooltip"
+import useDebounce from "#/hooks/useDebounce"
+import { ONE_SEC_IN_MILLISECONDS } from "#/constants"
+
+// TODO: Define colors as theme value
+const COLOR_TEXT_LIGHT_PRIMARY = "#1C1A16"
+const COLOR_TEXT_LIGHT_TERTIARY = "#7D6A4B"
+// TODO: Update `Button` component theme
+const COLOR_BUTTON_LABEL = "#FBF7EC"
+const COLOR_BUTTON_BACKGROUND = "#33A321"
+
+function NextDropTimestampLabel() {
+  const { nextDropTimestamp, updatePointsData, updateUserPointsData } =
+    useAcrePoints()
+
+  const handleOnCountdownEnd = () => {
+    logPromiseFailure(updatePointsData())
+    logPromiseFailure(updateUserPointsData())
+  }
+
+  if (!nextDropTimestamp) return null
+
+  return (
+    <HStack spacing={0}>
+      <TextMd color={COLOR_TEXT_LIGHT_TERTIARY} textAlign="center">
+        Next drop in
+      </TextMd>
+      <Countdown
+        timestamp={nextDropTimestamp} // Timestamp presence already checked
+        onCountdownEnd={handleOnCountdownEnd}
+        size="md"
+        ml={1}
+        color={COLOR_TEXT_LIGHT_PRIMARY}
+      />
+    </HStack>
+  )
+}
+
+function ClaimableBalanceLabel() {
+  const { claimableBalance, claimPoints } = useAcrePoints()
+  const debouncedClaimPoints = useDebounce(claimPoints, ONE_SEC_IN_MILLISECONDS)
+
+  const formattedClaimablePointsAmount = numberToLocaleString(claimableBalance)
+
+  if (claimableBalance <= 0) return null
+
+  return (
+    <Button
+      mt={5}
+      onClick={debouncedClaimPoints}
+      w="full"
+      colorScheme="green"
+      bgColor={COLOR_BUTTON_BACKGROUND}
+      color={COLOR_BUTTON_LABEL}
+      fontWeight="semibold"
+      size="lg"
+    >
+      Claim {formattedClaimablePointsAmount} PTS
+    </Button>
+  )
+}
+
+function CalculationInProgressLabel() {
+  const { claimableBalance } = useAcrePoints()
+
+  return (
+    <VStack spacing={4}>
+      {!claimableBalance && <TextMd color="grey.500">Please wait...</TextMd>}
+      <HStack spacing={0}>
+        <Spinner mr={3} size="sm" />
+        <TextMd>Your drop is being prepared.</TextMd>
+        <InfoTooltip
+          label={`
+            We need some time to calculate your points. It may take up to 30 minutes. 
+            ${claimableBalance ? "You can still claim points from previous drops." : ""}
+          `}
+          maxW={72}
+        />
+      </HStack>
+    </VStack>
+  )
+}
+
+export default function AcrePointsLabel() {
+  const { isCalculationInProgress } = useAcrePoints()
+  const { isConnected } = useWallet()
+
+  if (!isConnected) return <NextDropTimestampLabel />
+
+  if (isCalculationInProgress)
+    return (
+      <>
+        <CalculationInProgressLabel />
+        <ClaimableBalanceLabel />
+      </>
+    )
+
+  return (
+    <>
+      <NextDropTimestampLabel />
+      <ClaimableBalanceLabel />
+    </>
+  )
+}
diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard/index.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard/index.tsx
new file mode 100644
index 000000000..3990e1297
--- /dev/null
+++ b/dapp/src/pages/DashboardPage/AcrePointsCard/index.tsx
@@ -0,0 +1,62 @@
+import React from "react"
+import { H4, TextMd } from "#/components/shared/Typography"
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  CardProps,
+  HStack,
+  Image,
+  VStack,
+} from "@chakra-ui/react"
+import { numberToLocaleString } from "#/utils"
+import { useAcrePoints, useWallet } from "#/hooks"
+import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
+import InfoTooltip from "#/components/shared/InfoTooltip"
+import acrePointsIllustrationSrc from "#/assets/images/acre-points-illustration.png"
+import AcrePointsLabel from "./AcrePointsLabel"
+
+export default function AcrePointsCard(props: CardProps) {
+  const { totalBalance, totalPoolBalance } = useAcrePoints()
+  const { isConnected } = useWallet()
+
+  const formattedTotalPointsAmount = numberToLocaleString(totalBalance)
+  const formattedTotalPoolBalance = numberToLocaleString(totalPoolBalance)
+
+  return (
+    <Card {...props}>
+      <CardHeader mb={2} as={HStack} justify="space-between">
+        <TextMd color="grey.700">
+          {isConnected ? "Your" : "Total"} Acre points
+        </TextMd>
+
+        <InfoTooltip
+          label={
+            isConnected
+              ? "Your current balance of Acre points collected so far. New points drop daily and are ready to be claimed. Unclaimed points roll over to the next day."
+              : "Total points distributed to Acre users so far. New points drop daily and can be claimed in each user's dashboard."
+          }
+          w={56}
+        />
+      </CardHeader>
+
+      <CardBody>
+        <UserDataSkeleton>
+          <H4 fontWeight="semibold" mb={2}>
+            {isConnected
+              ? formattedTotalPointsAmount
+              : formattedTotalPoolBalance}
+          </H4>
+        </UserDataSkeleton>
+
+        <Image src={acrePointsIllustrationSrc} mt={6} />
+
+        <UserDataSkeleton>
+          <VStack px={4} py={5} spacing={0} rounded="lg" bg="gold.100">
+            <AcrePointsLabel />
+          </VStack>
+        </UserDataSkeleton>
+      </CardBody>
+    </Card>
+  )
+}