[PAY-3002] Make progress bars only show up with specifiers > 1 (#8461)

AudiusProject · May 14, 2024 · ac3a13d · ac3a13d
1 parent 42e3930
commit ac3a13d
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 22 deletions.
diff --git 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 ? (
             <Flex
               backgroundColor='surface1'
               gap='l'
@@ -147,7 +157,9 @@ export const ClaimAllRewardsDrawer = () => {
                 </Text>
                 <Flex direction='row' gap='l'>
                   <Text variant='label' size='s' color='default'>
-                    {`${totalClaimable - claimableAmount}/${totalClaimable}`}
+                    {`${
+                      totalClaimableAmount - claimableAmount
+                    }/${totalClaimableAmount}`}
                   </Text>
                   <LoadingSpinner style={styles.spinner} />
                 </Flex>
@@ -156,8 +168,8 @@ export const ClaimAllRewardsDrawer = () => {
                 style={{
                   root: styles.progressBar
                 }}
-                max={totalClaimable}
-                progress={totalClaimable - claimableAmount}
+                max={totalClaimableAmount}
+                progress={totalClaimableAmount - claimableAmount}
               />
             </Flex>
           ) : null}

diff --git a/...pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ClaimAllRewardsModal.tsx b/...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 ? (
             <Flex
               direction='column'
               backgroundColor='surface1'
@@ -151,7 +161,9 @@ export const ClaimAllRewardsModal = () => {
                 </Text>
                 <Flex gap='l'>
                   <Text variant='label' size='s' color='default'>
-                    {`${totalClaimable - claimableAmount}/${totalClaimable}`}
+                    {`${
+                      totalClaimableAmount - claimableAmount
+                    }/${totalClaimableAmount}`}
                   </Text>
                   <Box h='unit4' w='unit4'>
                     <LoadingSpinner />
@@ -160,8 +172,8 @@ export const ClaimAllRewardsModal = () => {
               </Flex>
               <ProgressBar
                 min={0}
-                max={totalClaimable}
-                value={totalClaimable - claimableAmount}
+                max={totalClaimableAmount}
+                value={totalClaimableAmount - claimableAmount}
               />
             </Flex>
           ) : null}