Skip to content

Commit

Permalink
Merge pull request #170 from dappforce/improvement/fixes
Browse files Browse the repository at this point in the history 
Fixes and UI Improvements
  • Loading branch information
@olehmell
olehmell authored Jan 15, 2024
2 parents 52f774e + 7c575eb commit aa5f0c3
Show file tree
Hide file tree
Showing 24 changed files with 290 additions and 145 deletions.
157 changes: 92 additions & 65 deletions src/components/creators/creator-rewards/CreatorRewardInfoCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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)}
/>
</>
)
}
76 changes: 57 additions & 19 deletions src/components/creators/staker-rewards/StakerRewardHistoryModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'>
Expand All @@ -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>
)
}
23 changes: 9 additions & 14 deletions src/components/creators/staker-rewards/StakerRewardInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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>
)
Expand Down
8 changes: 4 additions & 4 deletions src/components/creators/staker-rewards/StakerRewardProgressBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
)
}
Loading

0 comments on commit aa5f0c3

Please sign in to comment.