feat: add tooltip for reward earned

dappforce · Jan 17, 2024 · 7fc1256 · 7fc1256
1 parent a40ca9b
commit 7fc1256
Showing 1 changed file with 19 additions and 16 deletions.
diff --git a/src/components/posts/view-post/PostRewardStat.tsx b/src/components/posts/view-post/PostRewardStat.tsx
@@ -1,3 +1,4 @@
+import { Tooltip } from 'antd'
 import clsx from 'clsx'
 import { ComponentProps } from 'react'
 import { TbCoins } from 'react-icons/tb'
@@ -11,22 +12,24 @@ export default function PostRewardStat({ postId, ...props }: PostRewardStatProps
   if (!reward?.isNotZero) return null
 
   return (
-    <div
-      {...props}
-      className={clsx('d-flex align-items-center GapMini FontWeightMedium', props.className)}
-    >
-      <TbCoins className='FontNormal' />
-      <span className='FontWeightSemibold'>
-        <FormatBalance
-          style={{ whiteSpace: 'nowrap' }}
-          currency='SUB'
-          decimals={10}
-          precision={2}
-          withMutedDecimals={false}
-          value={reward.amount}
-        />
-      </span>
-      <span className='d-flex align-items-center GapMini ColorMuted'>earned</span>
+    <div {...props} className={clsx(props.className)}>
+      <Tooltip
+        className='d-flex align-items-center GapMini FontWeightMedium'
+        title='Rewards earned depend on how many likes a post or comment gets, and how much SUB each liker has staked'
+      >
+        <TbCoins className='FontNormal' />
+        <span className='FontWeightSemibold'>
+          <FormatBalance
+            style={{ whiteSpace: 'nowrap' }}
+            currency='SUB'
+            decimals={10}
+            precision={2}
+            withMutedDecimals={false}
+            value={reward.amount}
+          />
+        </span>
+        <span className='d-flex align-items-center GapMini ColorMuted'>earned</span>
+      </Tooltip>
     </div>
   )
 }