Add hand point

dappforce · Jul 11, 2024 · 45b5fcc · 45b5fcc
1 parent 882089e
commit 45b5fcc
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 23 deletions.
diff --git a/src/assets/graphics/hand-point.svg b/src/assets/graphics/hand-point.svg
diff --git a/src/components/modals/LikeIntroModal.tsx b/src/components/modals/LikeIntroModal.tsx
@@ -1,4 +1,5 @@
 import Diamond from '@/assets/emojis/diamond.png'
+import HandPoint from '@/assets/graphics/hand-point.svg'
 import LikeButtonImage from '@/assets/graphics/like-button.png'
 import { getTokenomicsMetadataQuery } from '@/services/datahub/content-staking/query'
 import { useSendEvent } from '@/stores/analytics'
@@ -163,37 +164,41 @@ export default function LikeIntroModal() {
             onClick={() => {
               sendEvent('finish_like_intro_modal')
               setIsOpenModal(false)
+              hasOpenedModal.set('true')
             }}
           >
             See More Memes
           </Button>
         </div>
       ) : (
         <>
-          <ImageChatItem
-            message={current.message}
-            chatId='0x123'
-            hubId='0x123'
-            className='max-w-none'
-            bg='background-lighter'
-            dummySuperLike={{
-              className: 'outline-none',
-              disabled: !tokenomics,
-              hasILiked,
-              superLikeCount: current.superLikeCount + (hasILiked ? 1 : 0),
-              onClick: () => {
-                if (hasILiked) return
+          <div className='relative'>
+            <ImageChatItem
+              message={current.message}
+              chatId='0x123'
+              hubId='0x123'
+              className='max-w-none'
+              bg='background-lighter'
+              dummySuperLike={{
+                className: 'outline-none',
+                disabled: !tokenomics,
+                hasILiked,
+                superLikeCount: current.superLikeCount + (hasILiked ? 1 : 0),
+                onClick: () => {
+                  if (hasILiked) return
 
-                sendEvent('like_intro_modal_meme', { step: step + 1 })
-                setHasILiked(true)
-                setPointsEarned((prev) => prev + pointsPerLike)
-                setTimeout(() => {
-                  setStep((prev) => prev + 1)
-                  setHasILiked(false)
-                }, 1000)
-              },
-            }}
-          />
+                  sendEvent('like_intro_modal_meme', { step: step + 1 })
+                  setHasILiked(true)
+                  setPointsEarned((prev) => prev + pointsPerLike)
+                  setTimeout(() => {
+                    setStep((prev) => prev + 1)
+                    setHasILiked(false)
+                  }, 1000)
+                },
+              }}
+            />
+            <HandPoint className='pointer-events-none absolute -bottom-5 left-11 animate-pulse' />
+          </div>
           <div className='mt-6 flex flex-col items-center gap-2 text-center'>
             <span className='font-medium text-text-muted'>Points earned</span>
             <div className='flex items-center gap-2.5'>