Fixes and UI Improvements

src/components/creators/creator-rewards/CreatorRewardInfoCard.tsx

@@ -1,6 +1,8 @@
 import { Tooltip } from 'antd'
 import clsx from 'clsx'
 import Link from 'next/link'
+import { useState } from 'react'
+import { RiHistoryFill } from 'react-icons/ri'
 import { SlQuestion } from 'react-icons/sl'
 import { useMyAddress } from 'src/components/auth/MyAccountsContext'
 import { FormatBalance } from 'src/components/common/balances'
@@ -11,88 +13,113 @@ import Segment from 'src/components/utils/Segment'
 import { CREATORS_CONSTANTS } from 'src/config/constants'
 import { useSendEvent } from 'src/providers/AnalyticContext'
 import { useFetchUserRewardReport } from 'src/rtk/features/activeStaking/hooks'
+import { useFetchTotalStake } from 'src/rtk/features/creators/totalStakeHooks'
+import { getAmountRange } from 'src/utils/analytics'
 import { activeStakingLinks } from 'src/utils/links'
 import NumberSkeleton from '../common/NumberSkeleton'
+import StakerRewardHistoryModal from '../staker-rewards/StakerRewardHistoryModal'
 import styles from './CreatorRewardInfoCard.module.sass'
 
 export default function CreatorRewardInfoCard() {
   const sendEvent = useSendEvent()
   const myAddress = useMyAddress() ?? ''
+  const { data: totalStake } = useFetchTotalStake(myAddress)
   const { data: rewardReport, loading } = useFetchUserRewardReport(myAddress)
+  const [isOpenRewardHistoryModal, setIsOpenRewardHistoryModal] = useState(false)
 
   if (loading || !rewardReport?.receivedLikes) return null
 
   return (
-    <Segment className={clsx(styles.CreatorRewardInfoCard)}>
-      <div className={styles.TopSection}>
-        <div className='d-flex align-items-center GapNormal justify-content-between'>
-          <p className={clsx(styles.Title, 'mb-0')}>Weekly Creator Rewards</p>
+    <>
+      <Segment className={clsx(styles.CreatorRewardInfoCard)}>
+        <div className={styles.TopSection}>
+          <div className='d-flex align-items-center GapNormal justify-content-between'>
+            <p className={clsx(styles.Title, 'mb-0')}>Weekly Creator Rewards</p>
+          </div>
+          <Link href={activeStakingLinks.learnMore} passHref>
+            <a
+              target='_blank'
+              className={styles.Link}
+              onClick={() => sendEvent('astake_banner_learn_more', { eventSource: 'rewardInfo' })}
+            >
+              How does this work?
+            </a>
+          </Link>
+          <DfImage preview={false} src='/images/databases.svg' className={styles.Image} />
         </div>
-        <Link href={activeStakingLinks.learnMore} passHref>
-          <a
-            target='_blank'
-            className={styles.Link}
-            onClick={() => sendEvent('astake_banner_learn_more', { eventSource: 'rewardInfo' })}
-          >
-            How does this work?
-          </a>
-        </Link>
-        <DfImage preview={false} src='/images/databases.svg' className={styles.Image} />
-      </div>
-      <div className={clsx(styles.BottomSection)}>
-        <div className='d-flex flex-column GapTiny FontSmall p-3'>
-          <div className='d-flex align-items-center justify-content-between'>
-            <div className='d-flex align-items-baseline GapMini'>
-              <MutedSpan>Received likes</MutedSpan>
-              <Tooltip title='The amount of times your posts have been superliked this week'>
-                <SlQuestion className='FontTiny ColorMuted' />
-              </Tooltip>
+        <div className={clsx(styles.BottomSection)}>
+          <div className='d-flex flex-column GapTiny FontSmall p-3'>
+            <div className='d-flex align-items-center justify-content-between'>
+              <div className='d-flex align-items-baseline GapMini'>
+                <MutedSpan>Received likes</MutedSpan>
+                <Tooltip title='The amount of times your posts have been superliked this week'>
+                  <SlQuestion className='FontTiny ColorMuted' />
+                </Tooltip>
+              </div>
+              <span className='FontWeightSemibold d-flex align-items-center GapMini'>
+                {loading ? <NumberSkeleton /> : <span>{rewardReport.receivedLikes}</span>}
+              </span>
             </div>
-            <span className='FontWeightSemibold d-flex align-items-center GapMini'>
-              {loading ? <NumberSkeleton /> : <span>{rewardReport.receivedLikes}</span>}
-            </span>
-          </div>
-          <div className='d-flex align-items-center justify-content-between'>
-            <div className='d-flex align-items-baseline GapMini'>
-              <MutedSpan>Earned from posts</MutedSpan>
-              <Tooltip title='The minimum amount of SUB that you will earn as a result of your posts being superliked this week'>
-                <SlQuestion className='FontTiny ColorMuted' />
-              </Tooltip>
+            <div className='d-flex align-items-center justify-content-between'>
+              <div className='d-flex align-items-baseline GapMini'>
+                <MutedSpan>Earned from posts</MutedSpan>
+                <Tooltip title='The minimum amount of SUB that you will earn as a result of your posts being superliked this week'>
+                  <SlQuestion className='FontTiny ColorMuted' />
+                </Tooltip>
+              </div>
+              <span className='FontWeightSemibold d-flex align-items-center GapMini'>
+                {loading ? (
+                  <NumberSkeleton />
+                ) : (
+                  <span>
+                    <MutedSpan>≥</MutedSpan>{' '}
+                    <FormatBalance
+                      withMutedDecimals={false}
+                      currency='SUB'
+                      decimals={10}
+                      value={rewardReport.creatorReward}
+                      precision={2}
+                    />
+                  </span>
+                )}
+              </span>
             </div>
-            <span className='FontWeightSemibold d-flex align-items-center GapMini'>
-              {loading ? (
-                <NumberSkeleton />
-              ) : (
-                <span>
-                  <MutedSpan>≥</MutedSpan>{' '}
-                  <FormatBalance
-                    withMutedDecimals={false}
-                    currency='SUB'
-                    decimals={10}
-                    value={rewardReport.creatorReward}
-                    precision={2}
-                  />
-                </span>
-              )}
-            </span>
-          </div>
-          <div className='d-flex align-items-center justify-content-between'>
-            <div className='d-flex align-items-baseline GapMini'>
-              <MutedSpan>Distribution in</MutedSpan>
-              <Tooltip title='The amount of time remaining until your bonus rewards for this week are deposited into your account'>
-                <SlQuestion className='FontTiny ColorMuted' />
-              </Tooltip>
+            <div className='d-flex align-items-center justify-content-between'>
+              <div className='d-flex align-items-baseline GapMini'>
+                <MutedSpan>Distribution in</MutedSpan>
+                <Tooltip title='The amount of time remaining until your bonus rewards for this week are deposited into your account'>
+                  <SlQuestion className='FontTiny ColorMuted' />
+                </Tooltip>
+              </div>
+              <span className='FontWeightSemibold'>
+                <Pluralize
+                  count={CREATORS_CONSTANTS.getDistributionDaysLeft()}
+                  singularText='day'
+                  pluralText='days'
+                />
+              </span>
+            </div>
+            <div
+              className='pt-2 px-3 d-flex justify-content-center align-items-center ColorPrimary FontWeightMedium GapMini'
+              onClick={() => {
+                sendEvent('astake_reward_history_opened', {
+                  amountRange: getAmountRange(totalStake?.amount),
+                })
+                setIsOpenRewardHistoryModal(true)
+              }}
+              style={{ cursor: 'pointer' }}
+            >
+              <RiHistoryFill />
+              <span className='FontSmall'>Rewards History</span>
             </div>
-            <span className='FontWeightSemibold'>
-              <Pluralize
-                count={CREATORS_CONSTANTS.getDistributionDaysLeft()}
-                singularText='day'
-                pluralText='days'
-              />
-            </span>
           </div>
         </div>
-      </div>
-    </Segment>
+      </Segment>
+
+      <StakerRewardHistoryModal
+        visible={isOpenRewardHistoryModal}
+        onCancel={() => setIsOpenRewardHistoryModal(false)}
+      />
+    </>
   )
 }

src/components/creators/staker-rewards/StakerRewardHistoryModal.tsx

@@ -2,6 +2,7 @@ import { ModalProps, Skeleton } from 'antd'
 import { FormatBalance } from 'src/components/common/balances'
 import { formatDate } from 'src/components/utils'
 import CustomModal from 'src/components/utils/CustomModal'
+import { MutedSpan } from 'src/components/utils/MutedText'
 import { useFetchUserRewardHistory } from 'src/rtk/features/activeStaking/hooks'
 
 export type StakerRewardHistoryModalProps = Pick<ModalProps, 'visible' | 'onCancel'>
@@ -11,28 +12,65 @@ export default function StakerRewardHistoryModal({
   visible,
 }: StakerRewardHistoryModalProps) {
   const { data, loading } = useFetchUserRewardHistory(undefined, { enabled: visible })
+
+  const creatorRewards = data?.rewards.filter(reward => BigInt(reward.creatorReward) > 0)
+
   return (
     <CustomModal title='Active Staking History' visible={visible} onCancel={onCancel}>
-      <div className='d-flex flex-column GapSmall'>
-        {(() => {
-          if (loading) return <Skeleton />
-          if (data?.rewards.length === 0) return <span className='ColorMuted'>No rewards yet</span>
-          return data?.rewards.map(reward => (
-            <div
-              className='d-flex align-items-center justify-content-between GapSmall'
-              key={reward.week}
-            >
-              <span className='ColorMuted FontSmall'>
-                {formatDate(reward.startDate, 'DD.MM.YY')} -{' '}
-                {formatDate(reward.endDate, 'DD.MM.YY')}
-              </span>
-              <span className='FontWeightSemibold'>
-                + <FormatBalance currency='SUB' decimals={10} value={reward.reward} precision={2} />
-              </span>
-            </div>
-          ))
-        })()}
+      <div className='d-flex flex-column'>
+        <MutedSpan className='mb-1 FontWeightSemibold'>Staker Rewards</MutedSpan>
+        <div className='d-flex flex-column GapTiny'>
+          {(() => {
+            if (loading) return <Skeleton />
+            if (data?.rewards.length === 0)
+              return <span className='ColorMuted'>No rewards yet</span>
+
+            return data?.rewards.map(reward => (
+              <div
+                className='d-flex align-items-center justify-content-between GapSmall'
+                key={reward.week}
+              >
+                <span className='ColorMuted FontSmall'>
+                  {formatDate(reward.startDate, 'DD.MM.YY')} -{' '}
+                  {formatDate(reward.endDate, 'DD.MM.YY')}
+                </span>
+                <span className='FontWeightSemibold'>
+                  +{' '}
+                  <FormatBalance currency='SUB' decimals={10} value={reward.reward} precision={2} />
+                </span>
+              </div>
+            ))
+          })()}
+        </div>
       </div>
+
+      {(creatorRewards?.length ?? 0) > 0 && (
+        <div className='d-flex flex-column mt-3'>
+          <MutedSpan className='mb-1 FontWeightSemibold'>Creator Rewards</MutedSpan>
+          <div className='d-flex flex-column GapTiny'>
+            {creatorRewards?.map(reward => (
+              <div
+                className='d-flex align-items-center justify-content-between GapSmall'
+                key={reward.week}
+              >
+                <span className='ColorMuted FontSmall'>
+                  {formatDate(reward.startDate, 'DD.MM.YY')} -{' '}
+                  {formatDate(reward.endDate, 'DD.MM.YY')}
+                </span>
+                <span className='FontWeightSemibold'>
+                  +{' '}
+                  <FormatBalance
+                    currency='SUB'
+                    decimals={10}
+                    value={reward.creatorReward}
+                    precision={2}
+                  />
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
     </CustomModal>
   )
 }

src/components/creators/staker-rewards/StakerRewardInfo.tsx

@@ -1,6 +1,5 @@
 import { Skeleton, Tooltip } from 'antd'
 import clsx from 'clsx'
-import Link from 'next/link'
 import { ComponentProps, useState } from 'react'
 import { RiHistoryFill } from 'react-icons/ri'
 import { SlQuestion } from 'react-icons/sl'
@@ -41,18 +40,6 @@ export default function StakerRewardInfo({ size, ...props }: StakerRewardInfoPro
   const todayReward = data?.currentRewardAmount ?? '0'
   const weekReward = data?.weeklyReward ?? '0'
 
-  if (!(BigInt(todayReward) || BigInt(weekReward))) {
-    return (
-      <p className='FontSmall p-3 mb-1'>
-        Like the posts on the &quot;
-        <Link href='/?tab=posts&type=suggested&date=week' passHref>
-          <a className='ColorPrimary FontWeightMedium'>Posts &gt; Active Staking</a>
-        </Link>
-        &quot; tab to increase your staking rewards by 50-200%.
-      </p>
-    )
-  }
-
   const likeCount = data?.superLikesCount ?? 0
   const likesToMaxReward = SUPER_LIKES_FOR_MAX_REWARD - likeCount
 
@@ -176,10 +163,18 @@ export function StakerSuperLikeCount() {
   const { data, loading } = useFetchUserRewardReport()
 
   const likeCount = data?.superLikesCount ?? 0
+  const surplusLikes = likeCount - SUPER_LIKES_FOR_MAX_REWARD
 
   return (
     <span className='FontWeightSemibold d-flex align-items-center'>
-      {loading ? <NumberSkeleton /> : <span>{likeCount}</span>}{' '}
+      {loading ? (
+        <NumberSkeleton />
+      ) : (
+        <>
+          <span>{Math.min(likeCount, SUPER_LIKES_FOR_MAX_REWARD)}</span>
+          {surplusLikes > 0 && <span>+{surplusLikes}</span>}
+        </>
+      )}{' '}
       <MutedSpan className='ml-1'>likes</MutedSpan>
     </span>
   )

src/components/creators/staker-rewards/StakerRewardProgressBar.tsx

@@ -31,8 +31,8 @@ export default function StakerRewardProgressBar({
       className={clsx(styles.StakerRewardProgressBar, props.className)}
       style={{
         ...props.style,
-        gridTemplateColumns: '1fr',
-        // gridTemplateColumns: progress <= 100 ? '1fr' : `1fr ${(progress - 100) / 100}fr`,
+        // gridTemplateColumns: '1fr',
+        gridTemplateColumns: progress <= 100 ? '1fr' : `1fr ${(progress - 100) / 100}fr`,
       }}
     >
       <Progress
@@ -42,15 +42,15 @@ export default function StakerRewardProgressBar({
         trailColor='#CBD5E1'
         size={size}
       />
-      {/* {progress > 100 && (
+      {progress > 100 && (
         <Progress
           showInfo={false}
           percent={100}
           strokeColor='#5089F8'
           trailColor='#CBD5E1'
           size={size}
         />
-      )} */}
+      )}
     </div>
   )
 }