dApp: Points - implement claim function debounce (#783)

Closes: #739 

There was an issue user was able to click the button multiple times
before the modal was displayed causing the claim action to be executed
multiple times. it led to multiple points logs registered in the
database.

As the solution i applied debounce technique to limit calls of the
`claimPoints` function.

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"