Add threshold for posting memes

dappforce · Jun 18, 2024 · 5114e6f · 5114e6f
1 parent 9ef2e78
commit 5114e6f
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 12 deletions.
diff --git a/src/components/modals/PostMemeThresholdModal.tsx b/src/components/modals/PostMemeThresholdModal.tsx
@@ -0,0 +1,61 @@
+import Diamond from '@/assets/emojis/diamond.png'
+import Pointup from '@/assets/emojis/pointup.png'
+import Thumbsup from '@/assets/emojis/thumbsup.png'
+import { POINTS_THRESHOLD } from '@/constants/chat-rules'
+import { formatNumber } from '@/utils/strings'
+import Image from 'next/image'
+import Button from '../Button'
+import Modal, { ModalFunctionalityProps } from './Modal'
+
+export default function PostMemeThresholdModal(props: ModalFunctionalityProps) {
+  const thresholdPoints = formatNumber(POINTS_THRESHOLD, { shorten: true })
+  return (
+    <Modal
+      {...props}
+      title={`Reach ${thresholdPoints} points to post`}
+      titleClassName='font-medium'
+      closeModal={() => undefined}
+    >
+      <div className='flex flex-col gap-6'>
+        <div className='flex flex-col items-center justify-center gap-1.5 rounded-2xl bg-background-lighter p-4'>
+          <span className='font-medium text-text-muted'>
+            To post your own memes, you need to reach:
+          </span>
+          <div className='-ml-2 flex items-center gap-2.5'>
+            <Image src={Diamond} alt='' className='h-12 w-12' />
+            <span className='flex items-center text-3xl font-bold'>
+              {thresholdPoints} points
+            </span>
+          </div>
+        </div>
+        <div className='flex flex-col gap-4 text-text-muted'>
+          <div className='flex items-center gap-3'>
+            <span className='text-xl font-medium text-text-muted'>
+              You can easily get points by:
+            </span>
+          </div>
+          <div className='flex items-center gap-3'>
+            <Image src={Thumbsup} className='h-8 w-8 flex-shrink-0' alt='' />
+            <span className='font-medium text-text-muted'>
+              Liking fun memes from other users.
+            </span>
+          </div>
+          <div className='flex items-center gap-3'>
+            <Image src={Pointup} className='h-8 w-8 flex-shrink-0' alt='' />
+            <span className='font-medium text-text-muted'>
+              Tapping on meme cat.
+            </span>
+          </div>
+        </div>
+        <Button
+          size='lg'
+          onClick={() => {
+            props.closeModal()
+          }}
+        >
+          Got it!
+        </Button>
+      </div>
+    </Modal>
+  )
+}
diff --git a/src/constants/chat-rules.ts b/src/constants/chat-rules.ts
@@ -0,0 +1 @@
+export const POINTS_THRESHOLD = 200_000
diff --git a/src/modules/chat/HomePage/ChatContent.tsx b/src/modules/chat/HomePage/ChatContent.tsx
@@ -5,9 +5,13 @@ import Notice from '@/components/Notice'
 import ChatRoom from '@/components/chats/ChatRoom'
 import usePinnedMessage from '@/components/chats/hooks/usePinnedMessage'
 import Modal, { ModalFunctionalityProps } from '@/components/modals/Modal'
+import PostMemeThresholdModal from '@/components/modals/PostMemeThresholdModal'
+import { POINTS_THRESHOLD } from '@/constants/chat-rules'
 import PointsWidget from '@/modules/points/PointsWidget'
 import { getPostQuery } from '@/services/api/query'
+import { getBalanceQuery } from '@/services/datahub/leaderboard/points-balance/query'
 import { useExtensionData } from '@/stores/extension'
+import { useMyMainAddress } from '@/stores/my-account'
 import { cx } from '@/utils/class-names'
 import { useState } from 'react'
 import { LuPlusCircle } from 'react-icons/lu'
@@ -20,7 +24,6 @@ type Props = {
 
 export default function ChatContent({ chatId, hubId, className }: Props) {
   const [isOpenModal, setIsOpenModal] = useState(false)
-  const openExtensionModal = useExtensionData.use.openExtensionModal()
   const pinnedMessageId = usePinnedMessage(chatId)
   const { data: message } = getPostQuery.useQuery(pinnedMessageId ?? '', {
     enabled: !!pinnedMessageId,
@@ -60,23 +63,47 @@ export default function ChatContent({ chatId, hubId, className }: Props) {
               <Shield className='relative top-px text-text-muted' />
               <span className='text-text'>Rules</span>
             </Button>
-            <Button
-              type='button'
-              className='flex items-center justify-center gap-2'
-              size='lg'
-              onClick={() => {
-                openExtensionModal('subsocial-image', null)
-              }}
-            >
-              <LuPlusCircle className='relative top-px text-lg' />
-              <span>Post meme</span>
-            </Button>
+            <PostMemeButton />
           </div>
         }
       />
     </>
   )
 }
+function PostMemeButton() {
+  const openExtensionModal = useExtensionData.use.openExtensionModal()
+  const [isPostMemeThresholdModalOpen, setIsPostMemeThresholdModalOpen] =
+    useState(false)
+
+  const myAddress = useMyMainAddress()
+  const { data, isLoading } = getBalanceQuery.useQuery(myAddress || '')
+
+  const hasThreshold = !isLoading && data && data >= POINTS_THRESHOLD
+
+  return (
+    <>
+      <PostMemeThresholdModal
+        isOpen={isPostMemeThresholdModalOpen}
+        closeModal={() => setIsPostMemeThresholdModalOpen(false)}
+      />
+      <Button
+        disabled={isLoading}
+        type='button'
+        className='flex items-center justify-center gap-2'
+        size='lg'
+        variant='primaryOutline'
+        onClick={() => {
+          hasThreshold
+            ? openExtensionModal('subsocial-image', null)
+            : setIsPostMemeThresholdModalOpen(true)
+        }}
+      >
+        <LuPlusCircle className='relative top-px text-lg' />
+        <span className='text-text'>Post Meme</span>
+      </Button>
+    </>
+  )
+}
 
 function RulesModal(props: ModalFunctionalityProps) {
   return (