feat: add rank tooltip

dappforce · Jan 25, 2024 · 18e732e · 18e732e
1 parent 74014ee
commit 18e732e
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 12 deletions.
diff --git a/src/components/leaderboard/UserLeaderboardPage.tsx b/src/components/leaderboard/UserLeaderboardPage.tsx
@@ -12,6 +12,7 @@ import RewardHistoryModal, { RewardHistoryPanel } from '../creators/RewardHistor
 import { PageContent } from '../main/PageWrapper'
 import { useIsMobileWidthOrDevice } from '../responsive'
 import DfCard from '../utils/cards/DfCard'
+import { LeaderboardRole } from '../utils/datahub/leaderboard'
 import { MutedSpan } from '../utils/MutedText'
 import LeaderboardTable from './common/LeaderboardTable'
 import LeaderboardTabs from './common/LeaderboardTabs'
@@ -24,7 +25,7 @@ type Stat = {
   value: (data: UserStatistics) => ReactNode
   tooltip: (isMyAddress: boolean) => string
 }
-const stats: Record<string, Stat[]> = {
+const stats: Record<LeaderboardRole, Stat[]> = {
   creator: [
     {
       title: isMyAddress =>
@@ -33,7 +34,7 @@ const stats: Record<string, Stat[]> = {
       tooltip: isMyAddress =>
         isMyAddress
           ? 'The amount of likes that all of your posts received this week'
-          : "The amount of likes that all of this creator's posts received this week",
+          : "The amount of likes that all of this user's posts received this week",
     },
     {
       title: () => 'SUB earned this week',
@@ -49,7 +50,7 @@ const stats: Record<string, Stat[]> = {
       tooltip: isMyAddress =>
         isMyAddress
           ? 'The amount of SUB rewards you have earned this week from Active Staking rewards'
-          : 'The amount of SUB rewards this creator has earned this week from Active Staking rewards',
+          : 'The amount of SUB rewards this user has earned this week from Active Staking rewards',
     },
     {
       title: isMyAddress =>
@@ -58,7 +59,7 @@ const stats: Record<string, Stat[]> = {
       tooltip: isMyAddress =>
         isMyAddress
           ? 'The amount of individual stakers that liked at least one of your posts this week'
-          : "The amount of individual stakers that liked at least one of this creator's posts this week",
+          : "The amount of individual stakers that liked at least one of this user's posts this week",
     },
     {
       title: () => 'SUB earned in total',
@@ -74,7 +75,7 @@ const stats: Record<string, Stat[]> = {
       tooltip: isMyAddress =>
         isMyAddress
           ? 'The total amount of SUB rewards you have earned from Active Staking rewards'
-          : 'The total amount of SUB rewards this creator has earned from Active Staking rewards',
+          : 'The total amount of SUB rewards this user has earned from Active Staking rewards',
     },
   ],
   staker: [
@@ -84,7 +85,7 @@ const stats: Record<string, Stat[]> = {
       tooltip: isMyAddress =>
         isMyAddress
           ? 'The number of individual posts that you liked this week'
-          : 'The number of individual posts this staker liked this week',
+          : 'The number of individual posts this user liked this week',
     },
     {
       title: () => 'SUB earned this week',
@@ -100,7 +101,7 @@ const stats: Record<string, Stat[]> = {
       tooltip: isMyAddress =>
         isMyAddress
           ? 'The amount of SUB rewards you have earned this week from Active Staking rewards'
-          : 'The amount of SUB rewards this staker has earned this week from Active Staking rewards',
+          : 'The amount of SUB rewards this user has earned this week from Active Staking rewards',
     },
     {
       title: isMyAddress =>
@@ -109,7 +110,7 @@ const stats: Record<string, Stat[]> = {
       tooltip: isMyAddress =>
         isMyAddress
           ? 'The number of individual creators that you supported this week by liking at least one of their posts'
-          : 'The number of individual creators that this staker supported this week by liking at least one of their posts',
+          : 'The number of individual creators that this user supported this week by liking at least one of their posts',
     },
     {
       title: () => 'SUB earned in total',
@@ -125,19 +126,30 @@ const stats: Record<string, Stat[]> = {
       tooltip: isMyAddress =>
         isMyAddress
           ? 'The total amount of SUB rewards you have earned this week from Active Staking rewards'
-          : 'The total amount of SUB rewards this staker has earned from Active Staking rewards',
+          : 'The total amount of SUB rewards this user has earned from Active Staking rewards',
     },
   ],
 }
 
+const rankTooltip: Record<LeaderboardRole, (isMyAddress: boolean) => string> = {
+  staker: isMyAddress =>
+    isMyAddress
+      ? 'Your position on the staker leaderboard'
+      : "This user's position on the staker leaderboard",
+  creator: isMyAddress =>
+    isMyAddress
+      ? 'Your position on the creator leaderboard'
+      : "This user's position on the creator leaderboard",
+}
+
 export type UserLeaderboardPageProps = {
   address: string
 }
 export default function UserLeaderboardPage({ address }: UserLeaderboardPageProps) {
   const myAddress = useMyAddress()
 
   const { query } = useRouter()
-  let tabState = query.role as 'staker' | 'creator'
+  let tabState = query.role as LeaderboardRole
   if (tabState !== 'staker' && tabState !== 'creator') {
     tabState = 'staker'
   }
@@ -157,6 +169,7 @@ export default function UserLeaderboardPage({ address }: UserLeaderboardPageProp
         <div className={clsx(styles.Statistics)}>
           <ProfileCard
             rank={data[tabState]?.rank}
+            rankTooltip={rankTooltip[tabState]?.(isMyAddress)}
             variant={tabState === 'creator' ? 'pink' : 'blue'}
             address={address}
             detail={

diff --git a/src/components/leaderboard/common/ProfileCard.tsx b/src/components/leaderboard/common/ProfileCard.tsx
@@ -1,3 +1,4 @@
+import { Tooltip } from 'antd'
 import clsx from 'clsx'
 import { IoPeople } from 'react-icons/io5'
 import { ReactNode } from 'react-markdown'
@@ -14,9 +15,17 @@ export type ProfileCardProps = DfCardProps & {
   title?: string
   detail?: ReactNode
   rank?: number
+  rankTooltip?: string
 }
 
-export default function ProfileCard({ address, rank, title, detail, ...props }: ProfileCardProps) {
+export default function ProfileCard({
+  address,
+  rank,
+  title,
+  detail,
+  rankTooltip,
+  ...props
+}: ProfileCardProps) {
   const isMobile = useIsMobileWidthOrDevice()
   const profile = useSelectProfile(address)
 
@@ -42,7 +51,14 @@ export default function ProfileCard({ address, rank, title, detail, ...props }:
       size='small'
       withShadow={false}
     >
-      {typeof rank === 'number' && <span className={clsx(styles.Rank)}>#{rank + 1}</span>}
+      {typeof rank === 'number' &&
+        (rankTooltip ? (
+          <Tooltip title={rankTooltip}>
+            <span className={clsx(styles.Rank)}>#{rank + 1}</span>
+          </Tooltip>
+        ) : (
+          <span className={clsx(styles.Rank)}>#{rank + 1}</span>
+        ))}
       {address ? (
         profile?.struct ? (
           <ViewSpaceLink space={profile?.struct} title={avatar} />