Leaderboard Page

.gitignore

@@ -73,3 +73,5 @@ out
 # cypress videos
 cypress/videos
 cypress/screenshots
+
+tsconfig.tsbuildinfo

src/components/creators/RewardHistoryModal.tsx

@@ -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>
+  )
+}

src/components/creators/TopUsersCard.tsx

@@ -1,8 +1,10 @@
-import { Skeleton } from 'antd'
+import { Button, Skeleton } from 'antd'
 import clsx from 'clsx'
 import { ComponentProps, CSSProperties, useMemo } from 'react'
+import { IoChevronForward } from 'react-icons/io5'
 import { useFetchProfileSpaces, useSelectProfileSpace, useSelectSpace } from 'src/rtk/app/hooks'
-import { useFetchTopUsers } from 'src/rtk/features/activeStaking/hooks'
+import { useFetchTopUsers } from 'src/rtk/features/leaderboard/hooks'
+import { useMyAddress } from '../auth/MyAccountsContext'
 import { useIsMobileWidthOrDevice } from '../responsive'
 import { SpaceAvatar } from '../spaces/helpers'
 import ViewSpaceLink from '../spaces/ViewSpaceLink'
@@ -12,6 +14,7 @@ import Segment from '../utils/Segment'
 export type TopUsersCardProps = ComponentProps<'div'>
 
 export default function TopUsersCard({ ...props }: TopUsersCardProps) {
+  const myAddress = useMyAddress()
   const { data, loading } = useFetchTopUsers()
   const isMobile = useIsMobileWidthOrDevice()
 
@@ -25,17 +28,18 @@ export default function TopUsersCard({ ...props }: TopUsersCardProps) {
 
   const isLoading = loading || !data || loadingSpaces
 
-  // const seeMoreButton = (
-  //   <Button
-  //     type='primary'
-  //     ghost
-  //     className='p-0 GapMini d-flex align-items-center'
-  //     style={{ height: 'auto', border: 'none', boxShadow: 'none' }}
-  //   >
-  //     <span>See more</span>
-  //     <IoChevronForward />
-  //   </Button>
-  // )
+  const seeMoreButton = (
+    <Button
+      type='primary'
+      ghost
+      className='p-0 GapMini d-flex align-items-center'
+      href={myAddress ? `/leaderboard/${myAddress}` : '/leaderboard'}
+      style={{ height: 'auto', border: 'none', boxShadow: 'none' }}
+    >
+      <span>See more</span>
+      <IoChevronForward />
+    </Button>
+  )
 
   const content = isLoading ? (
     <Skeleton />
@@ -45,7 +49,7 @@ export default function TopUsersCard({ ...props }: TopUsersCardProps) {
         <div className='d-flex align-items-center FontWeightSemibold GapMini'>
           <span className='FontSemilarge'>Top users (last 24h)</span>
         </div>
-        {/* {isMobile && seeMoreButton} */}
+        {isMobile && seeMoreButton}
       </div>
       <div
         className={clsx('mt-2', isMobile && 'GapNormal')}
@@ -71,7 +75,7 @@ export default function TopUsersCard({ ...props }: TopUsersCardProps) {
           </div>
         </div>
       </div>
-      {/* {!isMobile && <div className='d-flex justify-content-center mt-2'>{seeMoreButton}</div>} */}
+      {!isMobile && <div className='d-flex justify-content-center mt-2'>{seeMoreButton}</div>}
     </>
   )
 

src/components/creators/common/NumberSkeleton.tsx

@@ -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' }} />
 }

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

@@ -17,7 +17,7 @@ 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 RewardHistoryModal from '../RewardHistoryModal'
 import styles from './CreatorRewardInfoCard.module.sass'
 
 export default function CreatorRewardInfoCard() {
@@ -116,7 +116,7 @@ export default function CreatorRewardInfoCard() {
         </div>
       </Segment>
 
-      <StakerRewardHistoryModal
+      <RewardHistoryModal
         visible={isOpenRewardHistoryModal}
         onCancel={() => setIsOpenRewardHistoryModal(false)}
       />

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

@@ -13,7 +13,7 @@ import { useFetchUserRewardReport } from 'src/rtk/features/activeStaking/hooks'
 import { useFetchTotalStake } from 'src/rtk/features/creators/totalStakeHooks'
 import { getAmountRange } from 'src/utils/analytics'
 import NumberSkeleton from '../common/NumberSkeleton'
-import StakerRewardHistoryModal from './StakerRewardHistoryModal'
+import RewardHistoryModal from '../RewardHistoryModal'
 import styles from './StakerRewardInfo.module.sass'
 import StakerRewardProgressBar, { StakerRewardProgressBarProps } from './StakerRewardProgressBar'
 
@@ -151,7 +151,7 @@ export default function StakerRewardInfo({ size, ...props }: StakerRewardInfoPro
         </div>
       </div>
 
-      <StakerRewardHistoryModal
+      <RewardHistoryModal
         visible={isOpenRewardHistoryModal}
         onCancel={() => setIsOpenRewardHistoryModal(false)}
       />

src/components/leaderboard/GeneralLeaderboardPage.module.sass

@@ -0,0 +1,34 @@
+@import 'src/styles/subsocial-vars.scss'
+
+.Title
+  display: flex
+  align-items: baseline
+  justify-content: space-between
+  gap: $space_tiny
+
+  @media screen and (max-width: 768px)
+    &
+      align-items: stretch
+      flex-direction: column
+
+.Statistics
+  gap: $space_big
+  margin-top: $space_big
+  display: grid
+  grid-template-columns: 1fr 1fr 1fr
+
+  @media screen and (max-width: 768px)
+    &
+      grid-template-columns: 1fr 1fr
+      gap: $space_normal
+
+.Leaderboards
+  margin-top: $space_big
+  gap: $space_large
+  display: grid
+  grid-template-columns: 1fr 1fr
+  align-items: start
+
+  @media screen and (max-width: 768px)
+    &
+      grid-template-columns: 1fr