Render acre point data only when fetched

thesis · Dec 12, 2024 · 99578ac · 99578ac
1 parent 199689b
commit 99578ac
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 82 deletions.
diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard/AcrePointsLabel.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard/AcrePointsLabel.tsx
@@ -1,27 +1,16 @@
 import React from "react"
 import { TextMd } from "#/components/shared/Typography"
-import { Button, HStack, VStack } from "@chakra-ui/react"
+import { HStack } from "@chakra-ui/react"
 import Countdown from "#/components/shared/Countdown"
-import { logPromiseFailure, numberToLocaleString } from "#/utils"
-import {
-  useAcrePointsData,
-  useClaimPoints,
-  useUserPointsData,
-  useWallet,
-} from "#/hooks"
-import Spinner from "#/components/shared/Spinner"
-import TooltipIcon from "#/components/shared/TooltipIcon"
-import useDebounce from "#/hooks/useDebounce"
-import { ONE_SEC_IN_MILLISECONDS } from "#/constants"
+import { logPromiseFailure } from "#/utils"
+import { useAcrePointsData, useUserPointsData } from "#/hooks"
+import LabelWrapper from "./LabelWrapper"
 
 // 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() {
+export function NextDropTimestampLabel() {
   const { data: acrePointsData, refetch: acrePointsDataRefetch } =
     useAcrePointsData()
   const { refetch: userPointsDataRefetch } = useUserPointsData()
@@ -49,73 +38,14 @@ function NextDropTimestampLabel() {
   )
 }
 
-function ClaimableBalanceLabel() {
-  const { mutate: claimPoints } = useClaimPoints()
-  const { data: userPointsData } = useUserPointsData()
-  const debouncedClaimPoints = useDebounce(claimPoints, ONE_SEC_IN_MILLISECONDS)
-
-  const claimableBalance = userPointsData?.claimableBalance || 0
-  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 { data } = useUserPointsData()
-
-  return (
-    <VStack spacing={4}>
-      {!data?.claimableBalance && (
-        <TextMd color="grey.500">Please wait...</TextMd>
-      )}
-      <HStack spacing={0}>
-        <Spinner mr={3} size="sm" />
-        <TextMd>Your drop is being prepared.</TextMd>
-        <TooltipIcon
-          label={`
-            We need some time to calculate your points. It may take up to 30 minutes. 
-            ${data?.claimableBalance ? "You can still claim points from previous drops." : ""}
-          `}
-          maxW={72}
-        />
-      </HStack>
-    </VStack>
-  )
-}
-
 export default function AcrePointsLabel() {
   const { data } = useAcrePointsData()
-  const { isConnected } = useWallet()
-
-  if (!isConnected) return <NextDropTimestampLabel />
 
-  if (data?.isCalculationInProgress)
-    return (
-      <>
-        <CalculationInProgressLabel />
-        <ClaimableBalanceLabel />
-      </>
-    )
+  if (!data) return null
 
   return (
-    <>
+    <LabelWrapper>
       <NextDropTimestampLabel />
-      <ClaimableBalanceLabel />
-    </>
+    </LabelWrapper>
   )
 }
diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard/LabelWrapper.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard/LabelWrapper.tsx
@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react"
+import { VStack } from "@chakra-ui/react"
+
+export default function LabelWrapper({ children }: { children: ReactNode }) {
+  return (
+    <VStack px={4} py={5} spacing={0} rounded="lg" bg="gold.100">
+      {children}
+    </VStack>
+  )
+}
diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx
@@ -0,0 +1,88 @@
+import React from "react"
+import { TextMd } from "#/components/shared/Typography"
+import { Button, HStack, VStack } from "@chakra-ui/react"
+import { numberToLocaleString } from "#/utils"
+import { useAcrePointsData, useClaimPoints, useUserPointsData } from "#/hooks"
+import Spinner from "#/components/shared/Spinner"
+import TooltipIcon from "#/components/shared/TooltipIcon"
+import useDebounce from "#/hooks/useDebounce"
+import { ONE_SEC_IN_MILLISECONDS } from "#/constants"
+import LabelWrapper from "./LabelWrapper"
+import { NextDropTimestampLabel } from "./AcrePointsLabel"
+
+// TODO: Update `Button` component theme
+const COLOR_BUTTON_LABEL = "#FBF7EC"
+const COLOR_BUTTON_BACKGROUND = "#33A321"
+
+function ClaimableBalanceLabel() {
+  const { mutate: claimPoints } = useClaimPoints()
+  const { data: userPointsData } = useUserPointsData()
+  const debouncedClaimPoints = useDebounce(claimPoints, ONE_SEC_IN_MILLISECONDS)
+
+  const claimableBalance = userPointsData?.claimableBalance || 0
+  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 { data } = useUserPointsData()
+
+  return (
+    <VStack spacing={4}>
+      {!data?.claimableBalance && (
+        <TextMd color="grey.500">Please wait...</TextMd>
+      )}
+      <HStack spacing={0}>
+        <Spinner mr={3} size="sm" />
+        <TextMd>Your drop is being prepared.</TextMd>
+        <TooltipIcon
+          label={`
+            We need some time to calculate your points. It may take up to 30 minutes. 
+            ${data?.claimableBalance ? "You can still claim points from previous drops." : ""}
+          `}
+          maxW={72}
+        />
+      </HStack>
+    </VStack>
+  )
+}
+
+export default function UserPointsLabel() {
+  const { data: acrePointsData } = useAcrePointsData()
+  const { data: userPointsData } = useUserPointsData()
+
+  if (acrePointsData || userPointsData?.isEligible) {
+    if (acrePointsData?.isCalculationInProgress)
+      return (
+        <LabelWrapper>
+          <CalculationInProgressLabel />
+          <ClaimableBalanceLabel />
+        </LabelWrapper>
+      )
+
+    return (
+      <LabelWrapper>
+        <NextDropTimestampLabel />
+        <ClaimableBalanceLabel />
+      </LabelWrapper>
+    )
+  }
+
+  return null
+}
diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard/index.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard/index.tsx
@@ -7,14 +7,14 @@ import {
   CardProps,
   HStack,
   Image,
-  VStack,
 } from "@chakra-ui/react"
 import { numberToLocaleString } from "#/utils"
 import { useAcrePointsData, useUserPointsData, useWallet } from "#/hooks"
 import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
 import TooltipIcon from "#/components/shared/TooltipIcon"
 import acrePointsIllustrationSrc from "#/assets/images/acre-points-illustration.png"
 import AcrePointsLabel from "./AcrePointsLabel"
+import UserPointsLabel from "./UserPointsLabel"
 
 export default function AcrePointsCard(props: CardProps) {
   const { data: acrePointsData } = useAcrePointsData()
@@ -57,9 +57,7 @@ export default function AcrePointsCard(props: CardProps) {
         <Image src={acrePointsIllustrationSrc} mt={6} />
 
         <UserDataSkeleton>
-          <VStack px={4} py={5} spacing={0} rounded="lg" bg="gold.100">
-            <AcrePointsLabel />
-          </VStack>
+          {isConnected ? <UserPointsLabel /> : <AcrePointsLabel />}
         </UserDataSkeleton>
       </CardBody>
     </Card>