Add post reward beside super like

dappforce · Mar 14, 2024 · c47359d · c47359d
1 parent e22588f
commit c47359d
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 9 deletions.
diff --git a/src/components/common/balances/Balance.tsx b/src/components/common/balances/Balance.tsx
@@ -44,6 +44,8 @@ export function formatBalanceToJsx({
   const balanceValue = value.toString().split('.')[0]
 
   try {
+    if (balanceValue === '0') return <>0&nbsp;{currency}</>
+
     const [prefix, postfix] = formatBalance(balanceValue, {
       forceUnit: '-',
       decimals,
@@ -63,7 +65,9 @@ export function formatBalanceToJsx({
 
     let afterDecimalPoint =
       precision || fixedDecimalsLength
-        ? parseFloat(`0.${postfix}`).toPrecision(precision).substring(2)
+        ? postfix
+          ? parseFloat(`0.${postfix}`).toPrecision(precision).substring(2)
+          : '0'
         : postfix || '0000'
     if (fixedDecimalsLength) {
       afterDecimalPoint = afterDecimalPoint

diff --git a/src/components/posts/view-post/PostRewardStat.tsx b/src/components/posts/view-post/PostRewardStat.tsx
@@ -1,8 +1,7 @@
-import { Tooltip } from 'antd'
-import BN from 'bignumber.js'
+import { Skeleton, Tooltip } from 'antd'
 import clsx from 'clsx'
 import capitalize from 'lodash/capitalize'
-import { ComponentProps } from 'react'
+import { ComponentProps, ReactNode } from 'react'
 import { TbCoins } from 'react-icons/tb'
 import { useIsMyAddress } from 'src/components/auth/MyAccountsContext'
 import { FormatBalance, formatBalanceToJsx } from 'src/components/common/balances'
@@ -53,6 +52,59 @@ function generateTooltip(
   )
 }
 
+export function PostRewardStatWrapper({
+  postId,
+  children,
+}: {
+  postId: string
+  children: (props: { tooltip: ReactNode; reward: ReactNode }) => ReactNode
+}) {
+  const reward = useSelectPostReward(postId)
+  const post = useSelectPost(postId)
+  const isComment = post?.post.struct.isComment
+  const owner = post?.post.struct.ownerId
+  const isMyPost = useIsMyAddress(post?.post.struct.ownerId)
+
+  const { data: totalStake } = useFetchTotalStake(owner || '')
+
+  let tooltip = null
+  if (!reward) {
+    tooltip = null
+  } else if (!totalStake?.hasStakedEnough && isMyPost) {
+    tooltip = (
+      <>
+        These are your potential SUB rewards for the week. Lock at least{' '}
+        <FormatBalance value={MINIMUM_LOCK.toString()} decimals={10} currency='SUB' precision={2} />{' '}
+        this week to be eligible to receive them
+      </>
+    )
+  } else {
+    tooltip = generateTooltip(reward.rewardsBySource, isComment ? 'comment' : 'post')
+  }
+
+  return (
+    <>
+      {children({
+        tooltip: reward?.isNotZero ? tooltip : null,
+        reward: !reward ? (
+          <>
+            <Skeleton className={styles.Skeleton} paragraph={false} round /> SUB
+          </>
+        ) : (
+          <FormatBalance
+            style={{ whiteSpace: 'nowrap' }}
+            currency='SUB'
+            decimals={10}
+            precision={2}
+            withMutedDecimals={false}
+            value={reward.reward}
+          />
+        ),
+      })}
+    </>
+  )
+}
+
 export default function PostRewardStat({ postId, ...props }: PostRewardStatProps) {
   const reward = useSelectPostReward(postId)
   const post = useSelectPost(postId)
@@ -63,12 +115,10 @@ export default function PostRewardStat({ postId, ...props }: PostRewardStatProps
   const { data: totalStake } = useFetchTotalStake(owner || '')
   if (!reward?.isNotZero) return null
 
-  const totalStakeAmount = new BN(totalStake?.amount || '0')
-
   return (
     <div {...props} className={clsx(props.className)}>
       <div className='d-flex align-items-center GapMini FontWeightMedium ColorMuted'>
-        {totalStakeAmount.isZero() && isMyPost ? (
+        {!totalStake?.hasStakedEnough && isMyPost ? (
           <Tooltip
             className='d-flex align-items-center GapMini'
             title={
@@ -167,7 +217,7 @@ export default function PostRewardStat({ postId, ...props }: PostRewardStatProps
                 />
               </span>
               <span className='d-flex align-items-center GapMini'>
-                {totalStakeAmount.isZero() ? 'could earn' : 'earned'}
+                {totalStake?.hasStakedEnough ? 'could earn' : 'earned'}
               </span>
             </Tooltip>
           </>

diff --git a/src/components/posts/view-post/helpers.module.sass b/src/components/posts/view-post/helpers.module.sass
@@ -60,4 +60,13 @@
   transform: rotate(45deg)
 
 .closeIcon:after
-  transform: rotate(-45deg)
+  transform: rotate(-45deg)
+
+.Skeleton
+  display: flex
+  align-items: center
+  width: 30px
+  *
+    width: 100%
+    margin: 0 !important
+    display: block
diff --git a/src/components/voting/SuperLike.tsx b/src/components/voting/SuperLike.tsx
@@ -33,6 +33,7 @@ import { getAmountRange } from 'src/utils/analytics'
 import { getContentStakingLink } from 'src/utils/links'
 import { redirectToLogin } from 'src/utils/url'
 import { useMyAddress } from '../auth/MyAccountsContext'
+import { PostRewardStatWrapper } from '../posts/view-post/PostRewardStat'
 import { IconWithLabel } from '../utils'
 import CustomModal from '../utils/CustomModal'
 import { createSuperLike } from '../utils/datahub/active-staking'
@@ -187,6 +188,17 @@ export default function SuperLike({ post, iconClassName, isComment, ...props }:
         disabled={isDisabled}
       >
         <IconWithLabel renderZeroCount icon={icon} count={count} />
+        <PostRewardStatWrapper postId={post.id}>
+          {({ reward, tooltip }) => (
+            <Tooltip title={tooltip} className='d-flex align-items-center'>
+              <div
+                className='mx-2.5'
+                style={{ height: '1em', width: '1px', background: '#CBD5E1' }}
+              />
+              <span className='ColorMuted d-flex align-items-center GapTiny'>{reward}</span>
+            </Tooltip>
+          )}
+        </PostRewardStatWrapper>
       </Button>
     </div>
   )