diff --git a/packages/mobile/src/components/challenge-rewards-drawer/ClaimAllRewardsDrawer.tsx b/packages/mobile/src/components/challenge-rewards-drawer/ClaimAllRewardsDrawer.tsx index eed1a63a111..993fd0816eb 100644 --- a/packages/mobile/src/components/challenge-rewards-drawer/ClaimAllRewardsDrawer.tsx +++ b/packages/mobile/src/components/challenge-rewards-drawer/ClaimAllRewardsDrawer.tsx @@ -79,14 +79,24 @@ export const ClaimAllRewardsDrawer = () => { const claimInProgress = claimStatus === ClaimStatus.CUMULATIVE_CLAIMING const hasClaimed = claimStatus === ClaimStatus.CUMULATIVE_SUCCESS - const [totalClaimable, setTotalClaimable] = useState(claimableAmount) - useEffect( - () => - setTotalClaimable((totalClaimable) => - Math.max(totalClaimable, claimableAmount) - ), - [claimableAmount, setTotalClaimable] + const [totalClaimableAmount, setTotalClaimableAmount] = + useState(claimableAmount) + const [totalClaimableCount, setTotalClaimableCount] = useState( + claimableChallenges.length ) + useEffect(() => { + setTotalClaimableAmount((totalClaimableAmount) => + Math.max(totalClaimableAmount, claimableAmount) + ) + setTotalClaimableCount((totalClaimableCount) => + Math.max(totalClaimableCount, claimableChallenges.length) + ) + }, [ + claimableAmount, + claimableChallenges.length, + setTotalClaimableAmount, + setTotalClaimableCount + ]) useEffect(() => { if (hasClaimed) { @@ -133,7 +143,7 @@ export const ClaimAllRewardsDrawer = () => { )} summaryItem={summary} /> - {claimInProgress && claimableAmount > 1 ? ( + {claimInProgress && totalClaimableCount > 1 ? ( { - {`${totalClaimable - claimableAmount}/${totalClaimable}`} + {`${ + totalClaimableAmount - claimableAmount + }/${totalClaimableAmount}`} @@ -156,8 +168,8 @@ export const ClaimAllRewardsDrawer = () => { style={{ root: styles.progressBar }} - max={totalClaimable} - progress={totalClaimable - claimableAmount} + max={totalClaimableAmount} + progress={totalClaimableAmount - claimableAmount} /> ) : null} diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ClaimAllRewardsModal.tsx b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ClaimAllRewardsModal.tsx index 5edeb1f50e0..e7864398446 100644 --- a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ClaimAllRewardsModal.tsx +++ b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ClaimAllRewardsModal.tsx @@ -62,14 +62,24 @@ export const ClaimAllRewardsModal = () => { const claimInProgress = claimStatus === ClaimStatus.CUMULATIVE_CLAIMING const hasClaimed = claimStatus === ClaimStatus.CUMULATIVE_SUCCESS - const [totalClaimable, setTotalClaimable] = useState(claimableAmount) - useEffect( - () => - setTotalClaimable((totalClaimable) => - Math.max(totalClaimable, claimableAmount) - ), - [claimableAmount, setTotalClaimable] + const [totalClaimableAmount, setTotalClaimableAmount] = + useState(claimableAmount) + const [totalClaimableCount, setTotalClaimableCount] = useState( + claimableChallenges.length ) + useEffect(() => { + setTotalClaimableAmount((totalClaimableAmount) => + Math.max(totalClaimableAmount, claimableAmount) + ) + setTotalClaimableCount((totalClaimableCount) => + Math.max(totalClaimableCount, claimableChallenges.length) + ) + }, [ + claimableAmount, + claimableChallenges.length, + setTotalClaimableAmount, + setTotalClaimableCount + ]) useEffect(() => { if (hasClaimed) { @@ -136,7 +146,7 @@ export const ClaimAllRewardsModal = () => { summaryLabelColor='accent' summaryValueColor='default' /> - {claimInProgress && claimableAmount > 1 ? ( + {claimInProgress && totalClaimableCount > 1 ? ( { - {`${totalClaimable - claimableAmount}/${totalClaimable}`} + {`${ + totalClaimableAmount - claimableAmount + }/${totalClaimableAmount}`} @@ -160,8 +172,8 @@ export const ClaimAllRewardsModal = () => { ) : null}