Add min stake notice for comments

src/components/comments/CommentEditor.tsx

@@ -1,19 +1,22 @@
-import styles from './CommentEditor.module.sass'
-
-import { Button, Input } from 'antd'
+import { Alert, Button, Input } from 'antd'
 import BN from 'bn.js'
 import clsx from 'clsx'
+import Link from 'next/link'
 import { useState } from 'react'
 import { Controller, ErrorMessage, useForm } from 'react-hook-form'
+import { TbCoins } from 'react-icons/tb'
 import { useSubsocialApi } from 'src/components/substrate/SubstrateContext'
 import { TxCallback, TxFailedCallback } from 'src/components/substrate/SubstrateTxButton'
 import { useSendEvent } from 'src/providers/AnalyticContext'
+import { useFetchTotalStake } from 'src/rtk/features/creators/totalStakeHooks'
 import { CommentContent, IpfsCid } from 'src/types'
-import { useAmIBlocked } from '../auth/MyAccountsContext'
+import { activeStakingLinks } from 'src/utils/links'
+import { useAmIBlocked, useMyAddress } from '../auth/MyAccountsContext'
 import { buildSharePostValidationSchema } from '../posts/PostValidation'
 import { getNewIdFromEvent } from '../substrate'
 import { tmpClientId } from '../utils'
 import { MyAccountProps } from '../utils/MyAccount'
+import styles from './CommentEditor.module.sass'
 import { CommentTxButtonType } from './utils'
 
 // A height of EasyMDE toolbar with our custom styles. Can be changed
@@ -53,6 +56,9 @@ export const CommentEditor = (props: Props) => {
   const [fakeId] = useState(tmpClientId())
   const [toolbar, setToolbar] = useState(!asStub)
 
+  const myAddress = useMyAddress() ?? ''
+  const { data: totalStake } = useFetchTotalStake(myAddress)
+
   const sendEvent = useSendEvent()
 
   const [isLoading, setIsLoading] = useState(false)
@@ -140,6 +146,24 @@ export const CommentEditor = (props: Props) => {
           <ErrorMessage errors={errors} name={Fields.body} />
         </div>
       </form>
+      {totalStake?.hasStakedEnough === false && toolbar && (
+        <Alert
+          message={
+            <div className='d-flex align-items-center GapTiny' style={{ color: '#bd7d05' }}>
+              <TbCoins className='FontNormal' style={{ flexShrink: '0' }} />
+              <span>
+                <span>This comment could earn SUB rewards.</span>
+                <Link passHref href={activeStakingLinks.learnMore}>
+                  <a className='FontWeightMedium ml-1'>Learn How</a>
+                </Link>
+              </span>
+            </div>
+          }
+          type='warning'
+          className='RoundedLarge mt-2.5'
+          style={{ border: 'none' }}
+        />
+      )}
       <div className='DfActionButtonsBlock'>
         {toolbar && renderTxButton()}
         {withCancel && !isLoading && (

src/components/comments/ViewComment.tsx

@@ -1,11 +1,13 @@
 import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons'
-import { Button, Tag, Tooltip } from 'antd'
+import { Alert, Button, Tag, Tooltip } from 'antd'
 import clsx from 'clsx'
 import dayjs from 'dayjs'
 import Link from 'next/link'
 import { FC, useEffect, useState } from 'react'
-import { TbMessageCircle2 } from 'react-icons/tb'
+import { TbCoins, TbMessageCircle2 } from 'react-icons/tb'
+import { getNeededLock } from 'src/config/constants'
 import { useSelectProfile } from 'src/rtk/app/hooks'
+import { useFetchTotalStake } from 'src/rtk/features/creators/totalStakeHooks'
 import {
   asCommentData,
   asCommentStruct,
@@ -14,6 +16,10 @@ import {
   PostWithSomeDetails,
   SpaceStruct,
 } from 'src/types'
+import { activeStakingLinks } from 'src/utils/links'
+import { useMyAddress } from '../auth/MyAccountsContext'
+import { FormatBalance } from '../common/balances'
+import { useShouldRenderMinStakeAlert } from '../posts/view-post'
 import { PostDropDownMenu } from '../posts/view-post/PostDropDownMenu'
 import PostRewardStat from '../posts/view-post/PostRewardStat'
 import AuthorSpaceAvatar from '../profiles/address-views/AuthorSpaceAvatar'
@@ -51,11 +57,15 @@ export const InnerViewComment: FC<Props> = props => {
   } = props
 
   const { post: comment } = commentDetails
+  const shouldRenderAlert = useShouldRenderMinStakeAlert(comment.struct)
 
   const commentStruct = asCommentStruct(comment.struct)
   const commentContent = comment.content as CommentContent
   const { id, createdAtTime, ownerId } = commentStruct
 
+  const myAddress = useMyAddress() ?? ''
+  const { data: totalStake } = useFetchTotalStake(myAddress)
+
   const owner = useSelectProfile(ownerId)
 
   const [showEditForm, setShowEditForm] = useState(false)
@@ -164,8 +174,11 @@ export const InnerViewComment: FC<Props> = props => {
               <CommentBody comment={asCommentData(comment)} />
             )}
           </div>
-          <div className='d-flex align-items-center mt-1.5' style={{ flexWrap: 'wrap-reverse' }}>
-            <div className='d-flex align-items-center GapSmall mr-2'>
+          <div
+            className='d-flex align-items-center mt-1.5'
+            style={{ flexWrap: 'wrap-reverse', gap: '0 0.75rem' }}
+          >
+            <div className='d-flex align-items-center GapSmall'>
               <SuperLike
                 isComment
                 key={`voters-of-comments-${id}`}
@@ -184,6 +197,44 @@ export const InnerViewComment: FC<Props> = props => {
                 </span>
               </Button>
             </div>
+            {shouldRenderAlert && (
+              <Alert
+                style={{ border: 'none', padding: '0.125rem 0.5rem' }}
+                className='RoundedLarge'
+                type='warning'
+                message={
+                  <Tooltip
+                    title={
+                      <span>
+                        <span>
+                          Lock{' '}
+                          <FormatBalance
+                            currency='SUB'
+                            value={getNeededLock(totalStake?.amount).toString()}
+                            precision={2}
+                          />{' '}
+                          in order to earn rewards for this comment
+                        </span>
+                        <Link href={activeStakingLinks.learnMore}>
+                          <a
+                            target='_blank'
+                            className='FontWeightMedium ml-1'
+                            style={{ color: '#f759ab' }}
+                          >
+                            Learn How
+                          </a>
+                        </Link>
+                      </span>
+                    }
+                  >
+                    <div className='d-flex align-items-center GapTiny' style={{ color: '#bd7d05' }}>
+                      <TbCoins />
+                      <span>Not monetized</span>
+                    </div>
+                  </Tooltip>
+                }
+              />
+            )}
             <PostRewardStat postId={comment.id} style={{ marginLeft: 'auto' }} />
           </div>
           <div className='mt-1.5 d-flex flex-column'>

src/components/posts/view-post/helpers.tsx

@@ -506,19 +506,29 @@ export const MaintenancePage = () => (
   <Error statusCode={503} title={maintenanceMsg || messages.errors.maintenance} />
 )
 
-export default function PostNotEnoughMinStakeAlert({ post }: { post: PostStruct }) {
+export function useShouldRenderMinStakeAlert(post: PostStruct) {
   const { isExist, validByCreatorMinStake, validByCreationDate } = useCanPostSuperLiked(post.id)
   const isMyPost = useIsMyAddress(post.ownerId)
   const isMadeWithinOneMinute = Date.now() - post.createdAtTime < 60 * 1000
   const myAddress = useMyAddress() ?? ''
   const { data: totalStake } = useFetchTotalStake(myAddress)
 
-  if (!isMyPost) return null
+  if (!isMyPost) return false
 
   if (
     (isExist && !validByCreatorMinStake && validByCreationDate) ||
     (!isExist && isMadeWithinOneMinute && !totalStake?.hasStakedEnough)
   ) {
+    return true
+  }
+
+  return false
+}
+
+export default function PostNotEnoughMinStakeAlert({ post }: { post: PostStruct }) {
+  const shouldRenderAlert = useShouldRenderMinStakeAlert(post)
+
+  if (shouldRenderAlert) {
     return (
       <div className={styles.PostNotEnoughMinStakeAlert}>
         <div className='d-flex align-items-center GapTiny'>