dApp: Points - implement claim function debounce

dapp/src/hooks/useDebounce.ts

@@ -0,0 +1,23 @@
+import { useCallback, useRef } from "react"
+
+/**
+ * Debounce a function
+ * @param callback The function to debounce
+ * @param delay The delay in ms
+ * @returns A debounced function
+ */
+export default function useDebounce(callback: VoidFunction, delay = 250) {
+  const latestTimeout = useRef<NodeJS.Timeout>()
+
+  const memoizedCallback = useCallback(callback, [callback])
+
+  return () => {
+    if (latestTimeout.current) {
+      clearTimeout(latestTimeout.current)
+    }
+
+    latestTimeout.current = setTimeout(() => {
+      memoizedCallback()
+    }, delay)
+  }
+}

dapp/src/pages/DashboardPage/AcrePointsCard.tsx

@@ -18,6 +18,7 @@ import { useAcrePoints } from "#/hooks"
 import Spinner from "#/components/shared/Spinner"
 import { IconInfoCircle } from "@tabler/icons-react"
 import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
+import useDebounce from "#/hooks/useDebounce"
 
 export default function AcrePointsCard(props: CardProps) {
   const {
@@ -30,6 +31,8 @@ export default function AcrePointsCard(props: CardProps) {
     isCalculationInProgress,
   } = useAcrePoints()
 
+  const debouncedClaimPoints = useDebounce(claimPoints, 1000)
+
   const formattedTotalPointsAmount = numberToLocaleString(totalBalance)
   const formattedClaimablePointsAmount = numberToLocaleString(claimableBalance)
 
@@ -101,7 +104,7 @@ export default function AcrePointsCard(props: CardProps) {
               {claimableBalance && (
                 <Button
                   mt={3}
-                  onClick={claimPoints}
+                  onClick={debouncedClaimPoints}
                   w="full"
                   colorScheme="green"
                   color="gold.200"