Add check in task link to points widget

src/components/layouts/MobileNavigation.tsx

@@ -195,8 +195,13 @@ function NewMemeNotice() {
   return null
 }
 
-const RedDot = () => (
-  <div className='absolute right-0 top-0 h-2 w-2 translate-x-[150%] rounded-full bg-red-500' />
+export const RedDot = ({ className }: { className?: string }) => (
+  <div
+    className={cx(
+      'absolute right-0 top-0 h-2 w-2 translate-x-[150%] rounded-full bg-red-500',
+      className
+    )}
+  />
 )
 
 export default MobileNavigation

src/components/referral/CustomLink.tsx

@@ -1,4 +1,5 @@
 import Link, { LinkProps } from 'next/link'
+import { useRouter } from 'next/router'
 import urlJoin from 'url-join'
 import { useReferralId } from './ReferralUrlChanger'
 
@@ -14,6 +15,7 @@ export default function ProfileLinkCustomLink({
 }) {
   const refId = useReferralId()
   const { href, as } = props
+  const { pathname } = useRouter()
 
   if (!href) {
     return <span {...props} />
@@ -31,7 +33,19 @@ export default function ProfileLinkCustomLink({
     return <a {...props} href={props.href} />
   }
 
-  return <Link {...props} href={href} />
+  return (
+    <Link
+      {...props}
+      onClick={(e) => {
+        if (pathname === href) {
+          e.stopPropagation()
+          e.preventDefault()
+        }
+        props.onClick?.(e)
+      }}
+      href={href}
+    />
+  )
 }
 
 function augmentLink(link: LinkProps['href'], refId: string) {

src/modules/points/CheckInTaskPreview.tsx

@@ -0,0 +1,57 @@
+import CalendarImage from '@/assets/graphics/tasks/calendar.png'
+import { RedDot } from '@/components/layouts/MobileNavigation'
+import SkeletonFallback from '@/components/SkeletonFallback'
+import { getServerDayQuery } from '@/services/api/query'
+import { getDailyRewardQuery } from '@/services/datahub/content-staking/query'
+import { useMyMainAddress } from '@/stores/my-account'
+import { cx } from '@/utils/class-names'
+import Image from 'next/image'
+import CustomLink from 'src/components/referral/CustomLink'
+
+const CheckInTaskPreview = () => {
+  const myAddress = useMyMainAddress()
+
+  const { data: serverDay, isLoading: loadingServerDay } =
+    getServerDayQuery.useQuery(null)
+  const { data: dailyReward, isLoading: loadingDailyReward } =
+    getDailyRewardQuery.useQuery(myAddress ?? '')
+  const todayRewardIndex = dailyReward?.claims.findIndex(
+    (claim) => Number(claim.claimValidDay) === serverDay?.day
+  )
+
+  const todayReward = dailyReward?.claims[todayRewardIndex || 0]
+  const isTodayRewardClaimed = !!todayReward && !todayReward.openToClaim
+
+  return (
+    <CustomLink
+      href='/tg/tasks'
+      onClick={(e) => {
+        e.stopPropagation()
+      }}
+    >
+      <div className='flex items-center gap-2'>
+        <span className='relative'>
+          <Image src={CalendarImage} alt='' className='h-8 w-8' />
+          {!isTodayRewardClaimed && (
+            <RedDot className='!bottom-0 !right-0 -translate-x-0.5 translate-y-[22px]' />
+          )}
+        </span>
+        <span
+          className={cx('flex items-center text-xl font-bold leading-[22px]', {
+            ['text-slate-500']: !isTodayRewardClaimed,
+          })}
+        >
+          <SkeletonFallback
+            isLoading={loadingServerDay || loadingDailyReward}
+            className='w-fit min-w-[30px]'
+          >
+            {(todayRewardIndex || 0) + 1}
+          </SkeletonFallback>
+          /7
+        </span>
+      </div>
+    </CustomLink>
+  )
+}
+
+export default CheckInTaskPreview

src/modules/points/PointsWidget.tsx

@@ -36,6 +36,7 @@ import { MdContentCopy } from 'react-icons/md'
 import { RiPencilFill } from 'react-icons/ri'
 import { toast } from 'sonner'
 import { LeaderboardContent } from '../telegram/StatsPage/LeaderboardSection'
+import CheckInTaskPreview from './CheckInTaskPreview'
 import LikeCount from './LikePreview'
 import Points from './PointsPreview'
 
@@ -84,10 +85,11 @@ export default function PointsWidget({
             /10
           </span>
         </div>
+        <CheckInTaskPreview />
         <div className='flex items-center gap-2'>
           <Image className='h-7 w-7' src={Diamond} alt='' />
           <span className='flex items-center text-xl font-bold'>
-            <Points withPointsAnimation={withPointsAnimation} />
+            <Points withPointsAnimation={withPointsAnimation} shorten />
           </span>
           <FaChevronDown className='relative' />
         </div>

src/modules/telegram/TapPage/PointsClicker.tsx

@@ -22,7 +22,8 @@ import BN from 'bignumber.js'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import Link from 'next/link'
-import { TouchEvent, TouchList, useEffect, useRef, useState } from 'react'
+import { TouchEvent, TouchList, memo, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
 import { HiXMark } from 'react-icons/hi2'
 import {
   getEnergyStateStore,
@@ -230,7 +231,7 @@ const PointsClicker = ({ className }: PointsClickerProps) => {
           }}
         />
       </div>
-      <LikeMemesInfoMessage
+      <LikeMemesInfoMessageMemo
         showMemesInfoMessage={showMemeMessage}
         setShowMemesInfoMessage={setShowMemeMessage}
       />
@@ -247,11 +248,16 @@ const LikeMemesInfoMessage = ({
   showMemesInfoMessage,
   setShowMemesInfoMessage,
 }: LikeMemesInfoMessageProps) => {
+  const [domReady, setDomReady] = useState(false)
   const { data: tokenomicMetadata, isLoading: isTokenomicMetadataLoading } =
     getActiveStakingTokenomicMetadataQuery.useQuery({})
 
   const sendEvent = useSendEvent()
 
+  useEffect(() => {
+    setDomReady(true)
+  }, [])
+
   if (!showMemesInfoMessage) return null
 
   const userLikeWeight =
@@ -266,59 +272,64 @@ const LikeMemesInfoMessage = ({
           .toString()
       : '0'
 
-  return (
-    <div className='absolute bottom-[75px] w-full animate-fade px-2 pb-2'>
-      <Link
-        href='/tg'
-        className='flex items-center gap-[10px] rounded-[20px] bg-slate-800 p-[10px] pr-4'
-        onClick={() => {
-          const { day } = getDayAndWeekTimestamp()
-
-          likeMemesInfoMessageStorage.set(day.toString())
-          sendEvent('tooltip_like_memes_clicked')
-        }}
-      >
-        <span className='text-[40px]'>💡</span>
-        <div className='flex flex-col gap-[10px]'>
-          <span className='text-base font-bold leading-none'>
-            Like memes and earn more
-          </span>
-          <span
-            className={cx(
-              mutedTextColorStyles,
-              'text-sm font-medium leading-none'
-            )}
-          >
-            Each like on a meme brings{' '}
-            {
-              <FormatBalance
-                value={userLikeWeight}
-                loading={isTokenomicMetadataLoading}
-              />
-            }{' '}
-            points
-          </span>
-        </div>
-        <div className='flex min-w-fit flex-1 items-center justify-end'>
-          <Button
-            className='m-0 justify-self-end p-0 text-2xl text-text-muted'
-            variant='transparent'
-            onClick={(e) => {
-              e.preventDefault()
-              e.stopPropagation()
-
+  return domReady
+    ? createPortal(
+        <div className='absolute bottom-0 w-full animate-fade px-2 pb-2'>
+          <Link
+            href='/tg'
+            className='flex items-center gap-[10px] rounded-[20px] bg-slate-800 p-[10px] pr-4'
+            onClick={() => {
               const { day } = getDayAndWeekTimestamp()
+
               likeMemesInfoMessageStorage.set(day.toString())
-              sendEvent('tooltip_like_memes_closed')
-              setShowMemesInfoMessage(false)
+              sendEvent('tooltip_like_memes_clicked')
             }}
           >
-            <HiXMark />
-          </Button>
-        </div>
-      </Link>
-    </div>
-  )
+            <span className='text-[40px]'>💡</span>
+            <div className='flex flex-col gap-[10px]'>
+              <span className='text-base font-bold leading-none'>
+                Like memes and earn more
+              </span>
+              <span
+                className={cx(
+                  mutedTextColorStyles,
+                  'text-sm font-medium leading-none'
+                )}
+              >
+                Each like on a meme brings{' '}
+                {
+                  <FormatBalance
+                    value={userLikeWeight}
+                    loading={isTokenomicMetadataLoading}
+                  />
+                }{' '}
+                points
+              </span>
+            </div>
+            <div className='flex min-w-fit flex-1 items-center justify-end'>
+              <Button
+                className='m-0 justify-self-end p-0 text-2xl text-text-muted'
+                variant='transparent'
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+
+                  const { day } = getDayAndWeekTimestamp()
+                  likeMemesInfoMessageStorage.set(day.toString())
+                  sendEvent('tooltip_like_memes_closed')
+                  setShowMemesInfoMessage(false)
+                }}
+              >
+                <HiXMark />
+              </Button>
+            </div>
+          </Link>
+        </div>,
+        document.getElementById('tap-page-container')!
+      )
+    : null
 }
 
+const LikeMemesInfoMessageMemo = memo(LikeMemesInfoMessage)
+
 export default PointsClicker

src/modules/telegram/TapPage/index.tsx

@@ -1,7 +1,9 @@
+import Diamond from '@/assets/emojis/diamond.png'
 import TapFromMobileImage from '@/assets/graphics/tap-from-mobile.png'
 import SkeletonFallback from '@/components/SkeletonFallback'
 import LayoutWithBottomNavigation from '@/components/layouts/LayoutWithBottomNavigation'
 import useTgNoScroll from '@/hooks/useTgNoScroll'
+import Points from '@/modules/points/PointsPreview'
 import PointsWidget from '@/modules/points/PointsWidget'
 import {
   FULL_ENERGY_VALUE,
@@ -40,13 +42,30 @@ const TapPageContent = () => {
   }
 
   return (
-    <div className='grid flex-1 grid-rows-[2fr,0.5fr] items-center justify-items-center'>
-      <PointsClicker className='h-full justify-self-center' />
+    <div
+      id='tap-page-container'
+      className='relative grid flex-1 grid-rows-[2fr,0.2fr] items-center justify-items-center'
+    >
+      <div className='relative w-full'>
+        <PointsPreview />
+        <PointsClicker className='h-full justify-self-center' />
+      </div>
       <EnergyState />
     </div>
   )
 }
 
+const PointsPreview = () => {
+  return (
+    <div className='absolute left-0 right-0 top-8 mx-auto flex w-fit items-center gap-2'>
+      <Image className='h-[67px] w-[67px]' src={Diamond} alt='' />
+      <span className='text-[40px] font-bold'>
+        <Points withPointsAnimation={false} />
+      </span>
+    </div>
+  )
+}
+
 const EnergyState = () => {
   const myAddress = useMyMainAddress()