Do not show drop message when user not connected

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 />
+    </>
+  )
+}

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>
+  )
+}