Add modal for notice

src/components/extensions/common/CommonChatItem.tsx

@@ -374,7 +374,7 @@ function ApproveButton({
         })
       }}
     >
-      Approve
+      Approve user
     </Button>
   )
 }

src/components/modals/GlobalModals.tsx

@@ -1,5 +1,6 @@
 import { useMessageData } from '@/stores/message'
 import BlockedModal from '../moderation/BlockedModal'
+import MemeOnReviewModal from './MemeOnReviewModal'
 import PostMemeThresholdModal from './PostMemeThresholdModal'
 
 export default function GlobalModals() {
@@ -14,6 +15,11 @@ export default function GlobalModals() {
         isOpen={isOpenMessageModal === 'not-enough-balance'}
         closeModal={() => setOpenMessageModal('')}
       />
+      <MemeOnReviewModal
+        chatId={currentChatId}
+        isOpen={isOpenMessageModal === 'on-review'}
+        closeModal={() => setOpenMessageModal('')}
+      />
       <BlockedModal
         isOpen={isOpenMessageModal === 'blocked'}
         closeModal={() => setOpenMessageModal('')}

src/components/modals/MemeOnReviewModal.tsx

@@ -0,0 +1,48 @@
+import Check from '@/assets/emojis/check.png'
+import Time from '@/assets/emojis/time.png'
+import { MIN_MEME_FOR_REVIEW } from '@/constants/chat'
+import { getTokenomicsMetadataQuery } from '@/services/datahub/content-staking/query'
+import { getUnapprovedMemesCountQuery } from '@/services/datahub/posts/query'
+import { useMyMainAddress } from '@/stores/my-account'
+import Image from 'next/image'
+import Button from '../Button'
+import Modal, { ModalFunctionalityProps } from './Modal'
+
+export default function MemeOnReviewModal({
+  chatId,
+  ...props
+}: ModalFunctionalityProps & { chatId: string }) {
+  const myAddress = useMyMainAddress() ?? ''
+  const { data: tokenomics } = getTokenomicsMetadataQuery.useQuery(null)
+  const { data: count } = getUnapprovedMemesCountQuery.useQuery(
+    { address: myAddress, chatId },
+    {
+      enabled: props.isOpen,
+    }
+  )
+  const remaining = MIN_MEME_FOR_REVIEW - (count ?? 0)
+
+  const description =
+    remaining > 0
+      ? `${tokenomics?.socialActionPrice.createCommentPoints} points have been used. We received your meme! We need at least ${remaining} more memes from you to mark you as a verified creator.`
+      : `${
+          tokenomics?.socialActionPrice.createCommentPoints
+        } points have been used. We received ${
+          count ?? 0
+        } meme from you! Now we need a bit of time to finish review you as a verified creator.`
+
+  return (
+    <Modal {...props} title='Under Review' description={description}>
+      <div className='flex flex-col items-center gap-6'>
+        <Image
+          src={remaining > 0 ? Time : Check}
+          alt=''
+          className='h-28 w-28'
+        />
+        <Button className='w-full' size='lg' onClick={() => props.closeModal()}>
+          Got it!
+        </Button>
+      </div>
+    </Modal>
+  )
+}

src/services/datahub/posts/subscription.tsx

@@ -2,10 +2,10 @@ import Toast from '@/components/Toast'
 import { MIN_MEME_FOR_REVIEW } from '@/constants/chat'
 import { getPostQuery } from '@/services/api/query'
 import { commentIdsOptimisticEncoder } from '@/services/subsocial/commentIds/optimistic'
+import { useMessageData } from '@/stores/message'
 import { getMyMainAddress, useMyMainAddress } from '@/stores/my-account'
 import { useSubscriptionState } from '@/stores/subscription'
 import { cx } from '@/utils/class-names'
-import { PostData } from '@subsocial/api/types'
 import { QueryClient, useQueryClient } from '@tanstack/react-query'
 import { gql } from 'graphql-request'
 import { useEffect, useRef } from 'react'
@@ -206,8 +206,8 @@ async function processMessage(
         }
       } else {
         // to not wait for another query to run the other synchronous actions below
-        processUnapprovedMeme(newPost)
-        async function processUnapprovedMeme(newPost: PostData) {
+        processUnapprovedMeme()
+        async function processUnapprovedMeme() {
           if (ownerId) {
             const cachedCount = getUnapprovedMemesCountQuery.getQueryData(
               queryClient,
@@ -235,25 +235,30 @@ async function processMessage(
               queryClient,
               { address: myAddress, chatId: rootPostId ?? '' }
             )
-            const remaining = Math.max(MIN_MEME_FOR_REVIEW - (count ?? 0), 0)
-            const title =
-              remaining > 0
-                ? `Your meme is under review (at least ${remaining} more memes required).`
-                : `Your meme is under review (${MIN_MEME_FOR_REVIEW} required memes submitted).`
-            const description =
-              remaining > 0
-                ? `${tokenomics.socialActionPrice.createCommentPoints} points have been used. We received your meme! Hang tight while we give it a quick review. But we need at least ${remaining} memes from you to start the process.`
-                : `${tokenomics.socialActionPrice.createCommentPoints} points have been used. We received your meme! Hang tight while we give it a quick review.`
-            toast.custom((t) => (
-              <Toast
-                t={t}
-                icon={(className) => (
-                  <span className={cx(className, 'text-base')}>⏳</span>
-                )}
-                title={title}
-                description={description}
-              />
-            ))
+            if (count === 1 || count === 3) {
+              useMessageData.getState().setOpenMessageModal('on-review')
+            } else {
+              const remaining = Math.max(MIN_MEME_FOR_REVIEW - (count ?? 0), 0)
+              const title = 'Under review'
+              const description =
+                remaining > 0
+                  ? `${tokenomics.socialActionPrice.createCommentPoints} points have been used. We received your meme! We need at least ${remaining} more memes from you to mark you as a verified creator.`
+                  : `${
+                      tokenomics.socialActionPrice.createCommentPoints
+                    } points have been used. We received ${
+                      count ?? 0
+                    } meme from you! Now we need a bit of time to finish review you as a verified creator.`
+              toast.custom((t) => (
+                <Toast
+                  t={t}
+                  icon={(className) => (
+                    <span className={cx(className, 'text-base')}>⏳</span>
+                  )}
+                  title={title}
+                  description={description}
+                />
+              ))
+            }
           }
         }
       }

src/stores/message.ts

@@ -23,7 +23,7 @@ type State = {
 
   unreadMessage: UnreadMessage
 
-  isOpenMessageModal: 'not-enough-balance' | 'blocked' | ''
+  isOpenMessageModal: 'not-enough-balance' | 'on-review' | 'blocked' | ''
   currentChatId: string
 }