Skip to content

Commit

Permalink
Merge pull request #243 from dappforce/improvement/notice
Browse files Browse the repository at this point in the history
Add min stake notice for comments
  • Loading branch information
teodorus-nathaniel authored Feb 6, 2024
2 parents bf8d484 + 62bff8b commit 5107ef4
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 10 deletions.
32 changes: 28 additions & 4 deletions src/components/comments/CommentEditor.tsx
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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 && (
Expand Down
59 changes: 55 additions & 4 deletions src/components/comments/ViewComment.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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'
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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}`}
Expand All @@ -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'>
Expand Down
14 changes: 12 additions & 2 deletions src/components/posts/view-post/helpers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'>
Expand Down

0 comments on commit 5107ef4

Please sign in to comment.