fix: claim button (#506)

* fix: claim button * feat: add correct claimed status * chore: add disabled state
lfglabs-dev · Feb 12, 2024 · 9ab18b0 · 9ab18b0
1 parent dd401d3
commit 9ab18b0
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 14 deletions.
diff --git a/app/quest-boost/[boostId]/page.tsx b/app/quest-boost/[boostId]/page.tsx
@@ -84,6 +84,8 @@ export default function Page({ params }: BoostQuestPageProps) {
     const chestOpened = getBoostClaimStatus(address, boost?.id);
     if (!isBoostExpired) {
       return "Boost in progress ⌛";
+    } else if (isBoostExpired && boost.winner === null) {
+      return "Raffle in Progress 🎩";
     } else if (!chestOpened) {
       return "See my reward 🎉";
     } else {
@@ -99,6 +101,21 @@ export default function Page({ params }: BoostQuestPageProps) {
     router.push(`/quest-boost/claim/${boost?.id}`);
   }, [boost, address, winnerList]);
 
+  const buttonDisabled = useMemo(() => {
+    if (!address) return true;
+
+    // check if boost is not expired
+    // check if user has already claimed the boost
+    // check if boost expired but no winners assigned
+
+    return (
+      boost &&
+      (!isBoostExpired ||
+        getBoostClaimStatus(address, boost.id) ||
+        (isBoostExpired && boost.winner === null))
+    );
+  }, [boost, address, isBoostExpired]);
+
   useEffect(() => {
     fetchPageData();
   }, []);
@@ -155,13 +172,7 @@ export default function Page({ params }: BoostQuestPageProps) {
             </div>
             {address ? (
               <div>
-                <Button
-                  disabled={
-                    boost &&
-                    (!isBoostExpired || getBoostClaimStatus(address, boost.id))
-                  }
-                  onClick={handleButtonClick}
-                >
+                <Button disabled={buttonDisabled} onClick={handleButtonClick}>
                   {getButtonText()}
                 </Button>
               </div>

diff --git a/app/quest-boost/claim/[boostId]/page.tsx b/app/quest-boost/claim/[boostId]/page.tsx
@@ -2,7 +2,11 @@
 
 import React, { useEffect, useMemo, useState } from "react";
 import styles from "@styles/questboost.module.css";
-import { getBoostById, getQuestBoostClaimParams } from "@services/apiService";
+import {
+  getBoostById,
+  getPendingBoostClaims,
+  getQuestBoostClaimParams,
+} from "@services/apiService";
 import { useAccount } from "@starknet-react/core";
 import Button from "@components/UI/button";
 import { useNotificationManager } from "@hooks/useNotificationManager";
@@ -15,7 +19,6 @@ import { hexToDecimal } from "@utils/feltService";
 import { boostClaimCall } from "@utils/callData";
 import { getTokenName } from "@utils/tokenService";
 import useBoost from "@hooks/useBoost";
-import { TOKEN_DECIMAL_MAP } from "@utils/constants";
 import { useRouter } from "next/navigation";
 import ModalMessage from "@components/UI/modalMessage";
 import verifiedLottie from "@public/visuals/verifiedLottie.json";
@@ -36,6 +39,7 @@ export default function Page({ params }: BoostQuestPageProps) {
   const [displayLottie, setDisplayLottie] = useState<boolean>(true);
   const [transactionHash, setTransactionHash] = useState<string>("");
   const [winnerList, setWinnerList] = useState<string[]>([]);
+  const [isUnclaimed, setIsUnclaimed] = useState<boolean>(false);
   const { updateBoostClaimStatus } = useBoost();
   const [displayAmount, setDisplayAmount] = useState<number>(0);
   const [modalTxOpen, setModalTxOpen] = useState(false);
@@ -44,15 +48,27 @@ export default function Page({ params }: BoostQuestPageProps) {
   const fetchPageData = async () => {
     try {
       const boostInfo = await getBoostById(boostId);
+      const pendingClaimStatus = await getPendingBoostClaims(
+        hexToDecimal(address)
+      );
+      // check if current boost is not claimed
+      if (pendingClaimStatus) {
+        setIsUnclaimed(
+          pendingClaimStatus.filter(
+            (claim: Boost) => claim.id === parseInt(boostId)
+          ).length > 0
+        );
+      }
       setBoost(boostInfo);
     } catch (err) {
       console.log("Error while fetching boost", err);
     }
   };
 
   useEffect(() => {
+    if (!address) return;
     fetchPageData();
-  }, []);
+  }, [address]);
 
   useEffect(() => {
     if (!boost) return;
@@ -206,10 +222,7 @@ export default function Page({ params }: BoostQuestPageProps) {
 
             <div className={styles.claim_button_animation}>
               {isUserWinner ? (
-                <Button
-                  disabled={(boost?.claimed && isUserWinner) || !isUserWinner}
-                  onClick={handleClaimClick}
-                >
+                <Button disabled={!isUnclaimed} onClick={handleClaimClick}>
                   Collect my reward
                 </Button>
               ) : (

diff --git a/components/quest-boost/boostCard.tsx b/components/quest-boost/boostCard.tsx
@@ -105,6 +105,11 @@ const BoostCard: FunctionComponent<BoostCardProps> = ({
                         <CheckIcon width="24" color="#6AFFAF" />
                       </>
                     ) : null
+                  ) : boost.winner === null ? (
+                    <>
+                      <p className="text-white">Done</p>
+                      <CheckIcon width="24" color="#6AFFAF" />
+                    </>
                   ) : isClickable ? (
                     <>
                       <p className="text-white">See my reward</p>