diff --git a/src/components/layouts/MobileNavigation.tsx b/src/components/layouts/MobileNavigation.tsx index a80f14b13..14f2f5e20 100644 --- a/src/components/layouts/MobileNavigation.tsx +++ b/src/components/layouts/MobileNavigation.tsx @@ -195,8 +195,13 @@ function NewMemeNotice() { return null } -const RedDot = () => ( -
+export const RedDot = ({ className }: { className?: string }) => ( +
) export default MobileNavigation diff --git a/src/components/referral/CustomLink.tsx b/src/components/referral/CustomLink.tsx index 8ea77ec1e..6c8338b43 100644 --- a/src/components/referral/CustomLink.tsx +++ b/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 @@ -31,7 +33,19 @@ export default function ProfileLinkCustomLink({ return } - return + return ( + { + if (pathname === href) { + e.stopPropagation() + e.preventDefault() + } + props.onClick?.(e) + }} + href={href} + /> + ) } function augmentLink(link: LinkProps['href'], refId: string) { diff --git a/src/modules/points/CheckInTaskPreview.tsx b/src/modules/points/CheckInTaskPreview.tsx new file mode 100644 index 000000000..d3157715a --- /dev/null +++ b/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 ( + { + e.stopPropagation() + }} + > +
+ + + {!isTodayRewardClaimed && ( + + )} + + + + {(todayRewardIndex || 0) + 1} + + /7 + +
+ + ) +} + +export default CheckInTaskPreview diff --git a/src/modules/points/PointsWidget.tsx b/src/modules/points/PointsWidget.tsx index 8481168c7..6775479a8 100644 --- a/src/modules/points/PointsWidget.tsx +++ b/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
+
- +
diff --git a/src/modules/telegram/TapPage/PointsClicker.tsx b/src/modules/telegram/TapPage/PointsClicker.tsx index 024899b9e..8e4fe6cc4 100644 --- a/src/modules/telegram/TapPage/PointsClicker.tsx +++ b/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) => { }} />
- @@ -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 ( -
- { - const { day } = getDayAndWeekTimestamp() - - likeMemesInfoMessageStorage.set(day.toString()) - sendEvent('tooltip_like_memes_clicked') - }} - > - 💡 -
- - Like memes and earn more - - - Each like on a meme brings{' '} - { - - }{' '} - points - -
-
- -
- -
- ) + 💡 +
+ + Like memes and earn more + + + Each like on a meme brings{' '} + { + + }{' '} + points + +
+
+ +
+ + , + document.getElementById('tap-page-container')! + ) + : null } +const LikeMemesInfoMessageMemo = memo(LikeMemesInfoMessage) + export default PointsClicker diff --git a/src/modules/telegram/TapPage/index.tsx b/src/modules/telegram/TapPage/index.tsx index e1779be22..008fae3a3 100644 --- a/src/modules/telegram/TapPage/index.tsx +++ b/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 ( -
- +
+
+ + +
) } +const PointsPreview = () => { + return ( +
+ + + + +
+ ) +} + const EnergyState = () => { const myAddress = useMyMainAddress()