Split acre points logic into separate hooks

dapp/src/hooks/index.ts

@@ -29,7 +29,6 @@ export { default as useReferral } from "./useReferral"
 export { default as useIsEmbed } from "./useIsEmbed"
 export { default as useTriggerConnectWalletModal } from "./useTriggerConnectWalletModal"
 export { default as useLastUsedBtcAddress } from "./useLastUsedBtcAddress"
-export { default as useAggregatedAcrePointsData } from "./useAggregatedAcrePointsData"
 export { default as useSignMessageAndCreateSession } from "./useSignMessageAndCreateSession"
 export { default as useAccessCode } from "./useAccessCode"
 export { default as useFormField } from "./useFormField"
@@ -40,3 +39,6 @@ export { default as useActivities } from "./useActivities"
 export { default as useBitcoinBalance } from "./useBitcoinBalance"
 export { default as useBitcoinPosition } from "./useBitcoinPosition"
 export { default as useMats } from "./useMats"
+export { default as useAcrePointsData } from "./useAcrePointsData"
+export { default as useUserPointsData } from "./useUserPointsData"
+export { default as useClaimPoints } from "./useClaimPoints"

dapp/src/hooks/useClaimPoints.ts

@@ -0,0 +1,39 @@
+import { useMutation } from "@tanstack/react-query"
+import { acreApi } from "#/utils"
+import { MODAL_TYPES } from "#/types"
+import { PostHogEvent } from "#/posthog/events"
+import { useWallet } from "./useWallet"
+import { useModal } from "./useModal"
+import { usePostHogCapture } from "./posthog/usePostHogCapture"
+import useUserPointsData from "./useUserPointsData"
+
+export default function useClaimPoints() {
+  const { ethAddress = "" } = useWallet()
+  const { openModal } = useModal()
+  const { handleCapture, handleCaptureWithCause } = usePostHogCapture()
+  const { refetch: userPointsDataRefetch } = useUserPointsData()
+
+  return useMutation({
+    mutationFn: async () => acreApi.claimPoints(ethAddress),
+    onSettled: async () => {
+      await userPointsDataRefetch()
+    },
+    onSuccess: (data) => {
+      const claimedAmount = Number(data.claimed)
+      const totalAmount = Number(data.total)
+
+      openModal(MODAL_TYPES.ACRE_POINTS_CLAIM, {
+        claimedAmount,
+        totalAmount,
+      })
+
+      handleCapture(PostHogEvent.PointsClaimSuccess, {
+        claimedAmount,
+        totalAmount,
+      })
+    },
+    onError: (error) => {
+      handleCaptureWithCause(error, PostHogEvent.PointsClaimFailure)
+    },
+  })
+}

dapp/src/pages/DashboardPage/AcrePointsCard/AcrePointsLabel.tsx

@@ -3,7 +3,12 @@ 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 { useAggregatedAcrePointsData, useWallet } from "#/hooks"
+import {
+  useAcrePointsData,
+  useClaimPoints,
+  useUserPointsData,
+  useWallet,
+} from "#/hooks"
 import Spinner from "#/components/shared/Spinner"
 import TooltipIcon from "#/components/shared/TooltipIcon"
 import useDebounce from "#/hooks/useDebounce"
@@ -17,23 +22,24 @@ const COLOR_BUTTON_LABEL = "#FBF7EC"
 const COLOR_BUTTON_BACKGROUND = "#33A321"
 
 function NextDropTimestampLabel() {
-  const { nextDropTimestamp, updatePointsData, updateUserPointsData } =
-    useAggregatedAcrePointsData()
+  const { data: acrePointsData, refetch: acrePointsDataRefetch } =
+    useAcrePointsData()
+  const { refetch: userPointsDataRefetch } = useUserPointsData()
 
   const handleOnCountdownEnd = () => {
-    logPromiseFailure(updatePointsData())
-    logPromiseFailure(updateUserPointsData())
+    logPromiseFailure(acrePointsDataRefetch())
+    logPromiseFailure(userPointsDataRefetch())
   }
 
-  if (!nextDropTimestamp) return null
+  if (!acrePointsData?.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
+        timestamp={acrePointsData.nextDropTimestamp} // Timestamp presence already checked
         onCountdownEnd={handleOnCountdownEnd}
         size="md"
         ml={1}
@@ -44,9 +50,11 @@ function NextDropTimestampLabel() {
 }
 
 function ClaimableBalanceLabel() {
-  const { claimableBalance, claimPoints } = useAggregatedAcrePointsData()
+  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
@@ -68,18 +76,20 @@ function ClaimableBalanceLabel() {
 }
 
 function CalculationInProgressLabel() {
-  const { claimableBalance } = useAggregatedAcrePointsData()
+  const { data } = useUserPointsData()
 
   return (
     <VStack spacing={4}>
-      {!claimableBalance && <TextMd color="grey.500">Please wait...</TextMd>}
+      {!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. 
-            ${claimableBalance ? "You can still claim points from previous drops." : ""}
+            ${data?.claimableBalance ? "You can still claim points from previous drops." : ""}
           `}
           maxW={72}
         />
@@ -89,12 +99,12 @@ function CalculationInProgressLabel() {
 }
 
 export default function AcrePointsLabel() {
-  const { isCalculationInProgress } = useAggregatedAcrePointsData()
+  const { data } = useAcrePointsData()
   const { isConnected } = useWallet()
 
   if (!isConnected) return <NextDropTimestampLabel />
 
-  if (isCalculationInProgress)
+  if (data?.isCalculationInProgress)
     return (
       <>
         <CalculationInProgressLabel />

dapp/src/pages/DashboardPage/AcrePointsCard/index.tsx

@@ -10,18 +10,23 @@ import {
   VStack,
 } from "@chakra-ui/react"
 import { numberToLocaleString } from "#/utils"
-import { useAggregatedAcrePointsData, useWallet } from "#/hooks"
+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"
 
 export default function AcrePointsCard(props: CardProps) {
-  const { totalBalance, totalPoolBalance } = useAggregatedAcrePointsData()
+  const { data: acrePointsData } = useAcrePointsData()
+  const { data: userPointsData } = useUserPointsData()
   const { isConnected } = useWallet()
 
-  const formattedTotalPointsAmount = numberToLocaleString(totalBalance)
-  const formattedTotalPoolBalance = numberToLocaleString(totalPoolBalance)
+  const formattedUserTotalBalance = numberToLocaleString(
+    userPointsData?.totalBalance ?? 0,
+  )
+  const formattedTotalPoolBalance = numberToLocaleString(
+    acrePointsData?.totalPoolBalance ?? 0,
+  )
 
   return (
     <Card {...props}>
@@ -44,7 +49,7 @@ export default function AcrePointsCard(props: CardProps) {
         <UserDataSkeleton>
           <H4 fontWeight="semibold" mb={2}>
             {isConnected
-              ? formattedTotalPointsAmount
+              ? formattedUserTotalBalance
               : formattedTotalPoolBalance}
           </H4>
         </UserDataSkeleton>

dapp/src/utils/acreApi.ts

@@ -45,9 +45,9 @@ const getPointsData = async () => {
   const response = await axios.get<PointsDataResponse>(url)
 
   return {
-    dropAt: response.data.dropAt,
+    nextDropTimestamp: response.data.dropAt,
     isCalculationInProgress: response.data.isCalculationInProgress,
-    totalPool: Number(response.data.totalPool),
+    totalPoolBalance: Number(response.data.totalPool),
   }
 }
 
@@ -62,8 +62,8 @@ const getPointsDataByUser = async (address: string) => {
   const response = await axios.get<PointsDataByUserResponse>(url)
 
   return {
-    claimed: Number(response.data.claimed),
-    unclaimed: Number(response.data.unclaimed),
+    totalBalance: Number(response.data.claimed),
+    claimableBalance: Number(response.data.unclaimed),
     isEligible: response.data.isEligible,
   }
 }