Add red dot for tasks page button

- fix responsive of the clicker image
dappforce · Jun 28, 2024 · b34da37 · b34da37
1 parent 40009b0
commit b34da37
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 9 deletions.
diff --git a/src/components/CatClicker.tsx b/src/components/CatClicker.tsx
@@ -16,5 +16,12 @@ export default function CatClicker({ ...props }: HamsterLoadingProps) {
     },
   }
 
-  return <Lottie {...defaultOptions} isClickToPauseDisabled={true} />
+  return (
+    <Lottie
+      {...defaultOptions}
+      height={450}
+      width={450}
+      isClickToPauseDisabled={true}
+    />
+  )
 }
diff --git a/src/components/layouts/MobileNavigation.tsx b/src/components/layouts/MobileNavigation.tsx
@@ -7,15 +7,21 @@ import { env } from '@/env.mjs'
 import useIsMounted from '@/hooks/useIsMounted'
 import { getPostQuery } from '@/services/api/query'
 import { getPostMetadataQuery } from '@/services/datahub/posts/query'
+import { getDayAndWeekTimestamp } from '@/services/datahub/utils'
 import { useSendEvent } from '@/stores/analytics'
 import { cx } from '@/utils/class-names'
+import { LocalStorage } from '@/utils/storage'
 import { useHapticFeedbackRaw } from '@tma.js/sdk-react'
 import { useRouter } from 'next/router'
 import { ComponentProps } from 'react'
 import { IconType } from 'react-icons'
 import CustomLink from 'src/components/referral/CustomLink'
 import useLastReadTimeFromStorage from '../chats/hooks/useLastReadMessageTimeFromStorage'
 
+const tasksPageVisitedDateStore = new LocalStorage(
+  () => 'tasks-page-visited-date'
+)
+
 export type HomePageView = 'memes' | 'tasks' | 'airdrop' | 'friends' | 'tap'
 
 type MobileNavigationProps = {}
@@ -26,6 +32,7 @@ type Tab = {
   Icon: any
   href: string
   customClassName?: string
+  onClick?: () => void
 }
 
 const tabs: Tab[] = [
@@ -55,8 +62,23 @@ const tabs: Tab[] = [
   {
     id: 'tasks',
     text: 'Tasks',
-    Icon: Tasks,
+    Icon: (props: ComponentProps<'div'>) => (
+      <div {...props} className={cx('relative', props.className)}>
+        <Tasks />
+        <TasksPageDot />
+      </div>
+    ),
     href: '/tg/tasks',
+    onClick: () => {
+      const { day } = getDayAndWeekTimestamp()
+      const tasksPageVisitedDate = tasksPageVisitedDateStore.get() as string
+
+      console.log(day, tasksPageVisitedDate)
+
+      if (tasksPageVisitedDate !== day.toString()) {
+        tasksPageVisitedDateStore.set(day.toString())
+      }
+    },
   },
   {
     id: 'airdrop',
@@ -72,14 +94,15 @@ const MobileNavigation = ({}: MobileNavigationProps) => {
   return (
     <div className={cx('sticky bottom-0 z-20 mt-auto w-full p-2')}>
       <div className='flex items-center justify-around rounded-[20px] bg-background-light p-1'>
-        {tabs.map(({ id, text, Icon, href, customClassName }) => (
+        {tabs.map(({ id, text, Icon, href, customClassName, onClick }) => (
           <NavigationItem
             key={id}
             href={href}
             icon={Icon}
             title={text}
             id={id}
             className={customClassName}
+            onClick={onClick}
           />
         ))}
       </div>
@@ -95,6 +118,7 @@ function NavigationItem({
   iconClassName,
   className,
   id,
+  onClick,
 }: {
   icon: IconType
   title: string
@@ -103,6 +127,7 @@ function NavigationItem({
   iconClassName?: string
   className?: string
   id: string
+  onClick?: () => void
 }) {
   const { pathname } = useRouter()
   const sendEvent = useSendEvent()
@@ -111,6 +136,8 @@ function NavigationItem({
   const onButtonClick = () => {
     sendEvent('navbar_clicked', { value: id })
     haptic?.result?.impactOccurred('medium')
+
+    onClick?.()
   }
 
   return (
@@ -133,6 +160,15 @@ function NavigationItem({
   )
 }
 
+const TasksPageDot = () => {
+  const tasksPageVisitedDate = tasksPageVisitedDateStore.get() as string
+  const { day } = getDayAndWeekTimestamp()
+
+  if (tasksPageVisitedDate === day.toString()) return null
+
+  return <RedDot />
+}
+
 function NewMemeNotice() {
   const { pathname } = useRouter()
   const { data: postMetadata } = getPostMetadataQuery.useQuery(
@@ -156,11 +192,13 @@ function NewMemeNotice() {
     lastMessage &&
     getLastReadTime() < lastMessage.struct.createdAtTime
   ) {
-    return (
-      <div className='absolute right-0 top-0 h-2 w-2 translate-x-[150%] rounded-full bg-red-500' />
-    )
+    return <RedDot />
   }
   return null
 }
 
+const RedDot = () => (
+  <div className='absolute right-0 top-0 h-2 w-2 translate-x-[150%] rounded-full bg-red-500' />
+)
+
 export default MobileNavigation
diff --git a/src/modules/points/PointsWidget.tsx b/src/modules/points/PointsWidget.tsx
@@ -258,7 +258,7 @@ const UserStatsSection = ({
             <span className='text-text-muted'>LIKES LEFT TODAY:</span>
             <div className='flex items-center gap-3'>
               <Image src={Thumbsup} alt='' className='h-8 w-8' />
-              <span className='text-2xl font-bold'>
+              <span className='text-[22px] font-bold'>
                 <LikeCount />
                 /10
               </span>
@@ -276,7 +276,7 @@ const UserStatsSection = ({
               onClick={() => setOpenRewardModal(true)}
             >
               <Image src={Diamond} alt='' className='h-8 w-8' />
-              <span className='flex h-8 items-center text-2xl font-bold'>
+              <span className='flex h-8 items-center text-[22px] font-bold'>
                 <Points shortWhenValueTooBig />{' '}
                 <span className='ml-1 text-red-400'>*</span>
               </span>

diff --git a/src/modules/telegram/TapPage/PointsClicker.tsx b/src/modules/telegram/TapPage/PointsClicker.tsx
@@ -211,7 +211,7 @@ const PointsClicker = ({ className }: PointsClickerProps) => {
     <>
       <div
         ref={ref}
-        className={cx('relative pl-3', className)}
+        className={cx('relative flex pl-3', className)}
         onTouchStart={disableClicker ? undefined : onMouseDown}
         onTouchEnd={disableClicker ? undefined : onMouseUp}
       >
@@ -226,6 +226,7 @@ const PointsClicker = ({ className }: PointsClickerProps) => {
           isPaused={!startAnimation || disableClicker}
           style={{
             filter: disableClicker ? 'brightness(0.7) grayscale(0.8)' : '',
+            alignSelf: 'center',
           }}
         />
       </div>