-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #177 from dappforce/deploy/leaderboard-page
Leaderboard Page
- Loading branch information
Showing
59 changed files
with
1,939 additions
and
423 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -73,3 +73,5 @@ out | |
| # cypress videos | ||
| cypress/videos | ||
| cypress/screenshots | ||
|
|
||
| tsconfig.tsbuildinfo | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import { ModalProps, Skeleton } from 'antd' | ||
| import clsx from 'clsx' | ||
| import { ComponentProps, useMemo } from 'react' | ||
| 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' | ||
| import { RewardHistory } from 'src/rtk/features/activeStaking/rewardHistorySlice' | ||
|
|
||
| export type RewardHistoryModalProps = Pick<ModalProps, 'visible' | 'onCancel'> | ||
|
|
||
| export default function RewardHistoryModal({ onCancel, visible }: RewardHistoryModalProps) { | ||
| 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}> | ||
| <RewardHistoryPanel | ||
| title='Staker Rewards' | ||
| loading={loading} | ||
| rewardHistory={data} | ||
| rewardType='staker' | ||
| /> | ||
|
|
||
| {(creatorRewards?.length ?? 0) > 0 && ( | ||
| <RewardHistoryPanel | ||
| title='Creator Rewards' | ||
| rewardHistory={data} | ||
| loading={loading} | ||
| rewardType='creator' | ||
| /> | ||
| )} | ||
| </CustomModal> | ||
| ) | ||
| } | ||
|
|
||
| export function RewardHistoryPanel({ | ||
| loading, | ||
| rewardHistory, | ||
| rewardType, | ||
| title, | ||
| ...props | ||
| }: { | ||
| title: string | ||
| rewardHistory: RewardHistory | undefined | ||
| loading: boolean | undefined | ||
| rewardType: 'staker' | 'creator' | ||
| } & ComponentProps<'div'>) { | ||
| const rewards = useMemo(() => { | ||
| if (rewardType === 'staker') return rewardHistory?.rewards ?? [] | ||
| return rewardHistory?.rewards.filter(reward => BigInt(reward.creatorReward) > 0) ?? [] | ||
| }, [rewardHistory, rewardType]) | ||
|
|
||
| return ( | ||
| <div {...props} className={clsx('d-flex flex-column', props.className)}> | ||
| <MutedSpan className='mb-1 FontWeightSemibold'>{title}</MutedSpan> | ||
| <div className='d-flex flex-column GapTiny'> | ||
| {(() => { | ||
| if (loading) return <Skeleton /> | ||
| if (rewards.length === 0) return <span className='ColorMuted'>No rewards yet</span> | ||
|
|
||
| return rewards.map(reward => { | ||
| const usedRewardValue = rewardType === 'creator' ? reward.creatorReward : reward.reward | ||
| return ( | ||
| <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' style={{ whiteSpace: 'nowrap' }}> | ||
| +{' '} | ||
| <FormatBalance | ||
| currency='SUB' | ||
| decimals={10} | ||
| value={usedRewardValue} | ||
| precision={2} | ||
| /> | ||
| </span> | ||
| </div> | ||
| ) | ||
| }) | ||
| })()} | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,5 @@ | ||
| import { Skeleton } from 'antd' | ||
| import SpanSkeleton from 'src/components/utils/SpanSkeleton' | ||
|
|
||
| export default function NumberSkeleton() { | ||
| return ( | ||
| <div className='d-flex align-items-center'> | ||
| <Skeleton.Input | ||
| style={{ | ||
| height: '1em', | ||
| width: '3ch', | ||
| marginRight: '4px', | ||
| borderRadius: '20px', | ||
| position: 'relative', | ||
| top: '1px', | ||
| display: 'block', | ||
| }} | ||
| /> | ||
| </div> | ||
| ) | ||
| return <SpanSkeleton style={{ width: '3ch' }} /> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.