[C-4282] Add cooldown summary table to individual reward modals on web (

#8177) Co-authored-by: Saliou Diallo <saliou@audius.co>
AudiusProject · Apr 22, 2024 · 64937c6 · 64937c6
1 parent 1cc2cd6
commit 64937c6
Show file tree

Hide file tree

Showing 5 changed files with 285 additions and 406 deletions.
diff --git a/packages/common/src/store/challenges/selectors/optimistic-challenges.ts b/packages/common/src/store/challenges/selectors/optimistic-challenges.ts
@@ -111,11 +111,10 @@ const toOptimisticChallenge = (
     claimableAmount = undisbursed
       .filter(isCooldownChallengeClaimable)
       .reduce((acc, val) => acc + val.amount, 0)
-  } else if (
-    challengeOverridden.challenge_type !== 'aggregate' &&
-    state === 'completed'
-  ) {
-    claimableAmount = totalAmount
+  } else if (challenge.challenge_type === 'aggregate') {
+    claimableAmount = undisbursed.reduce((acc, val) => acc + val.amount, 0)
+  } else if (state === 'completed') {
+    claimableAmount = challenge.amount
   }
 
   const undisbursedSpecifiers = undisbursed.reduce(

diff --git a/...rewards-page/components/modals/ChallengeRewardsModal/AudioMatchingRewardsModalContent.tsx b/...rewards-page/components/modals/ChallengeRewardsModal/AudioMatchingRewardsModalContent.tsx
@@ -143,6 +143,22 @@ export const AudioMatchingRewardsModalContent = ({
     onNavigateAway()
   }, [challengeName, onNavigateAway, navigateToPage])
 
+  const formatLabel = useCallback((item: any) => {
+    const { label, claimableDate, isClose } = item
+    const formattedLabel = isClose ? (
+      label
+    ) : (
+      <Text>
+        {label}&nbsp;
+        <Text color='subdued'>{claimableDate.format('(M/D)')}</Text>
+      </Text>
+    )
+    return {
+      ...item,
+      label: formattedLabel
+    }
+  }, [])
+
   return (
     <div className={wm(cn(styles.container, styles.audioMatchingContainer))}>
       {isMobile ? (
@@ -165,7 +181,9 @@ export const AudioMatchingRewardsModalContent = ({
           {!isCooldownChallengesEmpty ? (
             <SummaryTable
               title={messages.upcomingRewards}
-              items={formatCooldownChallenges(cooldownChallenges)}
+              items={formatCooldownChallenges(cooldownChallenges).map(
+                formatLabel
+              )}
               summaryItem={summary}
               secondaryTitle={messages.audio}
               summaryLabelColor='accent'