From 787ba8bf306d4d758f8d907cc8cddb59c7e58177 Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Tue, 6 Feb 2024 21:58:06 +0700 Subject: [PATCH 1/4] feat: show not staked alert when commenting --- src/components/comments/CommentEditor.tsx | 30 ++++++++++++++++++++--- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/src/components/comments/CommentEditor.tsx b/src/components/comments/CommentEditor.tsx index 48a0cf4cf..4b890c904 100644 --- a/src/components/comments/CommentEditor.tsx +++ b/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,22 @@ export const CommentEditor = (props: Props) => { + {totalStake?.hasStakedEnough === false && ( + + + This comment could earn SUB rewards. + + Learn How + + + } + type='warning' + className='RoundedLarge mt-2.5' + style={{ border: 'none' }} + /> + )}
{toolbar && renderTxButton()} {withCancel && !isLoading && ( From db592c05b9fdf5e73974a521d839635600ebffbc Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Tue, 6 Feb 2024 22:30:35 +0700 Subject: [PATCH 2/4] feat: show alert for comment owner if the comment is not monetizable --- src/components/comments/CommentEditor.tsx | 12 +++--- src/components/comments/ViewComment.tsx | 44 ++++++++++++++++++++-- src/components/posts/view-post/helpers.tsx | 14 ++++++- 3 files changed, 59 insertions(+), 11 deletions(-) diff --git a/src/components/comments/CommentEditor.tsx b/src/components/comments/CommentEditor.tsx index 4b890c904..c8fd5652b 100644 --- a/src/components/comments/CommentEditor.tsx +++ b/src/components/comments/CommentEditor.tsx @@ -150,11 +150,13 @@ export const CommentEditor = (props: Props) => { - - This comment could earn SUB rewards. - - Learn How - + + + This comment could earn SUB rewards. + + Learn How + +
} type='warning' diff --git a/src/components/comments/ViewComment.tsx b/src/components/comments/ViewComment.tsx index df38131c8..6ad5e3758 100644 --- a/src/components/comments/ViewComment.tsx +++ b/src/components/comments/ViewComment.tsx @@ -1,10 +1,10 @@ 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 { useSelectProfile } from 'src/rtk/app/hooks' import { asCommentData, @@ -14,6 +14,8 @@ import { PostWithSomeDetails, SpaceStruct, } from 'src/types' +import { activeStakingLinks } from 'src/utils/links' +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,6 +53,7 @@ export const InnerViewComment: FC = props => { } = props const { post: comment } = commentDetails + const shouldRenderAlert = useShouldRenderMinStakeAlert(comment.struct) const commentStruct = asCommentStruct(comment.struct) const commentContent = comment.content as CommentContent @@ -164,8 +167,11 @@ export const InnerViewComment: FC = props => { )} -
-
+
+
= props => {
+ {shouldRenderAlert && ( + + This comment could earn SUB rewards. + + + Learn How + + + + } + > +
+ + Not monetized +
+ + } + /> + )}
diff --git a/src/components/posts/view-post/helpers.tsx b/src/components/posts/view-post/helpers.tsx index 9c3bd37a4..92b818efd 100644 --- a/src/components/posts/view-post/helpers.tsx +++ b/src/components/posts/view-post/helpers.tsx @@ -506,19 +506,29 @@ export const MaintenancePage = () => ( ) -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 (
From 040f1ee29c0326ea95bd0a99d7ae63c75dcbfb9f Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Tue, 6 Feb 2024 22:40:21 +0700 Subject: [PATCH 3/4] chore: update tooltip --- src/components/comments/ViewComment.tsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/components/comments/ViewComment.tsx b/src/components/comments/ViewComment.tsx index 6ad5e3758..7a169a35f 100644 --- a/src/components/comments/ViewComment.tsx +++ b/src/components/comments/ViewComment.tsx @@ -5,7 +5,9 @@ import dayjs from 'dayjs' import Link from 'next/link' import { FC, useEffect, useState } from 'react' 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, @@ -15,6 +17,8 @@ import { 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' @@ -59,6 +63,9 @@ export const InnerViewComment: FC = props => { 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) @@ -199,7 +206,15 @@ export const InnerViewComment: FC = props => { - This comment could earn SUB rewards. + + Lock{' '} + {' '} + in order to earn rewards for this comment + Date: Tue, 6 Feb 2024 22:42:44 +0700 Subject: [PATCH 4/4] chore: show alert only if toolbar should show --- src/components/comments/CommentEditor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/comments/CommentEditor.tsx b/src/components/comments/CommentEditor.tsx index c8fd5652b..921c68937 100644 --- a/src/components/comments/CommentEditor.tsx +++ b/src/components/comments/CommentEditor.tsx @@ -146,7 +146,7 @@ export const CommentEditor = (props: Props) => {
- {totalStake?.hasStakedEnough === false && ( + {totalStake?.hasStakedEnough === false && toolbar && (