dApp: Implement total Acre Points pool balance (#841)

Closes: #804 
Ref: thesis/acre-bots#51

This pull request introduces several enhancements to the Acre Points
feature, including the addition of a total pool balance, periodic data
refetching, and improved user interface elements.

### Changes

*
[`dapp/src/hooks/useAcrePoints.ts`](diffhunk://#diff-50509a2a9c5c760f8862e203441b351818ef1a74dcda1d67bd182dc28b8abafeL3-R3):
Added `totalPoolBalance` to the return type of `useAcrePoints` and
included a periodic data refetch interval using
`REFETCH_INTERVAL_IN_MILLISECONDS`.
*
[`dapp/src/pages/DashboardPage/AcrePointsCard.tsx`](diffhunk://#diff-fa83f2c138fd549157e83bc1a2f0febde516a577e3ac3d3a4680ac1084ae7acdR33-R41):
Updated `AcrePointsCard` to display the total pool balance when the
wallet is disconnected and modified the tooltip to provide
context-sensitive information.
*
[`dapp/src/utils/acreApi.ts`](diffhunk://#diff-0d8a6f1ae9db41b7ed6c24c22ae775fe1bf0f6c4c56ddcacf0aba716c2400becR40):
Modified `getPointsData` to include `totalPool` in the response.

### Preview

<img width="719" alt="image"
src="https://github.com/user-attachments/assets/4b850f08-a946-4baa-9da2-f3ce0af057bb">

<img width="719" alt="image"
src="https://github.com/user-attachments/assets/7a7c0c38-b727-46d5-bd83-c615a80666eb">

dapp/src/hooks/useAcrePoints.ts

@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@tanstack/react-query"
 import { acreApi } from "#/utils"
-import { queryKeysFactory } from "#/constants"
+import { queryKeysFactory, REFETCH_INTERVAL_IN_MILLISECONDS } from "#/constants"
 import { MODAL_TYPES } from "#/types"
 import { useWallet } from "./useWallet"
 import { useModal } from "./useModal"
@@ -15,6 +15,7 @@ type UseAcrePointsReturnType = {
   claimPoints: () => void
   updateUserPointsData: () => Promise<unknown>
   updatePointsData: () => Promise<unknown>
+  totalPoolBalance: number
 }
 
 export default function useAcrePoints(): UseAcrePointsReturnType {
@@ -30,6 +31,7 @@ export default function useAcrePoints(): UseAcrePointsReturnType {
   const pointsDataQuery = useQuery({
     queryKey: [...acreKeys.pointsData()],
     queryFn: async () => acreApi.getPointsData(),
+    refetchInterval: REFETCH_INTERVAL_IN_MILLISECONDS,
   })
 
   const { mutate: claimPoints } = useMutation({
@@ -51,12 +53,13 @@ export default function useAcrePoints(): UseAcrePointsReturnType {
   })
 
   return {
-    totalBalance: userPointsDataQuery.data?.claimed ?? 0,
-    claimableBalance: userPointsDataQuery.data?.unclaimed ?? 0,
+    totalBalance: userPointsDataQuery.data?.claimed || 0,
+    claimableBalance: userPointsDataQuery.data?.unclaimed || 0,
     nextDropTimestamp: pointsDataQuery.data?.dropAt,
     isCalculationInProgress: pointsDataQuery.data?.isCalculationInProgress,
     claimPoints,
     updateUserPointsData: userPointsDataQuery.refetch,
     updatePointsData: pointsDataQuery.refetch,
+    totalPoolBalance: pointsDataQuery.data?.totalPool || 0,
   }
 }

dapp/src/pages/DashboardPage/AcrePointsCard.tsx

@@ -17,6 +17,7 @@ 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
@@ -35,13 +36,15 @@ export default function AcrePointsCard(props: CardProps) {
     updateUserPointsData,
     updatePointsData,
     isCalculationInProgress,
+    totalPoolBalance,
   } = useAcrePoints()
   const { isConnected } = useWallet()
 
-  const debouncedClaimPoints = useDebounce(claimPoints, 1000)
+  const debouncedClaimPoints = useDebounce(claimPoints, ONE_SEC_IN_MILLISECONDS)
 
   const formattedTotalPointsAmount = numberToLocaleString(totalBalance)
   const formattedClaimablePointsAmount = numberToLocaleString(claimableBalance)
+  const formattedTotalPoolBalance = numberToLocaleString(totalPoolBalance)
 
   const handleOnCountdownEnd = () => {
     logPromiseFailure(updatePointsData())
@@ -54,21 +57,26 @@ export default function AcrePointsCard(props: CardProps) {
   return (
     <Card {...props}>
       <CardHeader mb={2} as={HStack} justify="space-between">
-        <TextMd>Total Acre points</TextMd>
+        <TextMd color="grey.700">
+          {isConnected ? "Your" : "Total"} Acre points
+        </TextMd>
 
-        {isConnected && (
-          <InfoTooltip
-            // TODO: Add alternative variant of label for disconnected wallet
-            label="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."
-            w={56}
-          />
-        )}
+        <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}>
-            {formattedTotalPointsAmount}
+            {isConnected
+              ? formattedTotalPointsAmount
+              : formattedTotalPoolBalance}
           </H4>
         </UserDataSkeleton>
 

dapp/src/utils/acreApi.ts

@@ -37,6 +37,7 @@ async function deleteSession() {
 type PointsDataResponse = {
   dropAt: number
   isCalculationInProgress: boolean
+  totalPool: string
 }
 
 const getPointsData = async () => {
@@ -46,6 +47,7 @@ const getPointsData = async () => {
   return {
     dropAt: response.data.dropAt,
     isCalculationInProgress: response.data.isCalculationInProgress,
+    totalPool: Number(response.data.totalPool),
   }
 }