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}