Skip to content

Commit

Permalink
Change points drawer to use manual because of issues with useTgNoScroll
Browse files Browse the repository at this point in the history
  • Loading branch information
@teodorus-nathaniel
teodorus-nathaniel committed Jun 12, 2024
1 parent 67bf540 commit dd97ff8
Show file tree
Hide file tree
Showing 2 changed files with 188 additions and 141 deletions.
321 changes: 180 additions & 141 deletions src/modules/points/PointsWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,184 +6,223 @@ import Thumbsup from '@/assets/emojis/thumbsup.png'
import Button from '@/components/Button'
import Card from '@/components/Card'
import { Skeleton } from '@/components/SkeletonFallback'
import useIsMounted from '@/hooks/useIsMounted'
import { getBalanceQuery } from '@/services/datahub/balances/query'
import { getTodaySuperLikeCountQuery } from '@/services/datahub/content-staking/query'
import { useSendEvent } from '@/stores/analytics'
import { useMyAccount, useMyMainAddress } from '@/stores/my-account'
import { cx } from '@/utils/class-names'
import { formatNumber } from '@/utils/strings'
import { allowWindowScroll, preventWindowScroll } from '@/utils/window'
import { Transition } from '@headlessui/react'
import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { ComponentProps } from 'react'
import { ComponentProps, useEffect, useState } from 'react'
import { createPortal } from 'react-dom'
import { useHotkeys } from 'react-hotkeys-hook'
import { FaChevronDown } from 'react-icons/fa'
import { HiChevronRight, HiXMark } from 'react-icons/hi2'
import SlotCounter from 'react-slot-counter'
import { Drawer } from 'vaul'

export default function PointsWidget(
props: ComponentProps<'div'> & { isNoTgScroll?: boolean }
) {
const [isOpen, setIsOpen] = useState(false)
const isMounted = useIsMounted()
const sendEvent = useSendEvent()

useHotkeys('esc', () => {
if (isOpen) {
setIsOpen(false)
}
})

useEffect(() => {
if (!props.isNoTgScroll) {
if (isOpen) preventWindowScroll()
else allowWindowScroll()
}
}, [props.isNoTgScroll, isOpen])

return (
<Drawer.Root
shouldScaleBackground
direction='top'
onOpenChange={(open) => {
// To make bottom menu still clickable when this drawer is open
setTimeout(() => {
if (open) {
document.body.style.pointerEvents = ''
} else if (props.isNoTgScroll) {
document.body.style.paddingTop = '500px'
}
}, 0)
}}
>
<Drawer.Trigger asChild>
<div
{...props}
className={cx(
'z-10 flex w-full cursor-pointer items-center justify-between rounded-b-2xl bg-black/50 px-4.5 py-3 backdrop-blur-xl',
props.className
)}
onClick={() => {
sendEvent('widget_expanded')
}}
<>
<div
{...props}
className={cx(
'z-10 flex w-full cursor-pointer items-center justify-between rounded-b-2xl bg-black/50 px-4.5 py-3 backdrop-blur-xl',
props.className
)}
onClick={() => {
setIsOpen(true)
sendEvent('widget_expanded')
}}
>
<div className='flex items-center gap-2'>
<Image className='h-6 w-6' src={Thumbsup} alt='' />
<span className='text-xl font-bold'>
<LikeCount />
/10
</span>
</div>
<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 shorten />
</span>
<FaChevronDown className='relative top-0.5' />
</div>
</div>
{isMounted && (
<PointsDrawerContent isOpen={isOpen} setIsOpen={setIsOpen} />
)}
</>
)
}

function PointsDrawerContent({
isOpen,
setIsOpen,
}: {
isOpen: boolean
setIsOpen: (open: boolean) => void
}) {
return createPortal(
<>
<Transition
appear
show={isOpen}
className='fixed inset-0 z-10 h-full w-full bg-black/50 backdrop-blur-md transition duration-300'
enterFrom={cx('opacity-0')}
enterTo='opacity-100'
leaveFrom='h-auto'
leaveTo='opacity-0 !duration-150'
/>
<Transition
appear
show={isOpen}
className='fixed inset-0 z-10 h-full w-full transition duration-300'
enterFrom={cx('opacity-0 -translate-y-48')}
enterTo='opacity-100 translate-y-0'
leaveFrom='h-auto'
leaveTo='opacity-0 -translate-y-24 !duration-150'
>
<Button
className='absolute right-4 top-4'
variant='transparent'
size='circleSm'
onClick={() => setIsOpen(false)}
>
<div className='flex items-center gap-2'>
<Image className='h-6 w-6' src={Thumbsup} alt='' />
<span className='text-xl font-bold'>
<LikeCount />
/10
</span>
<HiXMark className='text-3xl' />
</Button>
<div className='mx-auto flex h-full w-full max-w-screen-md flex-col items-center overflow-auto px-4 pt-24'>
<div className='mb-16 flex flex-col gap-2'>
<div className='mr-3 flex items-center justify-center gap-3'>
<Image src={Diamond} alt='' className='h-14 w-14' />
<span className='flex items-center text-4xl font-bold'>
<Points />
</span>
</div>
<div className='flex justify-center'>
<Button
href='/guide'
className='bg-[#6395FD]/10 px-5 py-2 text-text'
>
How it works
</Button>
</div>
</div>
<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 shorten />
<div className='flex w-full flex-1 flex-col gap-4 pb-8'>
<span className='text-center text-lg font-bold text-text-muted'>
How to earn Points:
</span>
<FaChevronDown className='relative top-0.5' />
</div>
</div>
</Drawer.Trigger>
<Drawer.Portal>
<Drawer.Overlay className='fixed inset-0 z-10 h-full w-full bg-black/50 backdrop-blur-lg' />
<Drawer.Content className='fixed inset-0 z-10 flex h-full w-full flex-col rounded-t-[10px] bg-transparent pb-20 outline-none'>
<Drawer.Close className='absolute right-4 top-4'>
<HiXMark className='text-3xl' />
</Drawer.Close>
<div className='mx-auto flex h-full w-full max-w-screen-md flex-col items-center overflow-auto px-4 pt-24'>
<div className='mb-16 flex flex-col gap-2'>
<div className='mr-3 flex items-center justify-center gap-3'>
<Image src={Diamond} alt='' className='h-14 w-14' />
<span className='flex items-center text-4xl font-bold'>
<Points />
</span>
</div>
<div className='flex justify-center'>
<LinkWrapper close={() => setIsOpen(false)} href='/tg/memes'>
<Card className='flex w-full items-center gap-4 bg-background-light'>
<Image src={Laugh} alt='' className='h-14 w-14 flex-shrink-0' />
<div className='flex flex-col gap-1'>
<div className='flex items-center gap-2'>
<span className='text-lg font-bold'>Meme2Earn</span>
</div>
<p className='text-sm text-text-muted'>
Post and like memes to earn even more Points.
</p>
</div>
<Button
href='/guide'
className='bg-[#6395FD]/10 px-5 py-2 text-text'
size='circle'
className='ml-auto flex-shrink-0 text-lg'
variant='transparent'
>
How it works
<HiChevronRight />
</Button>
</div>
</div>
<div className='flex w-full flex-1 flex-col gap-4 pb-8'>
<span className='text-center text-lg font-bold text-text-muted'>
How to earn Points:
</span>
<LinkWrapper href='/tg/memes'>
<Card className='flex w-full items-center gap-4 bg-background-light'>
<Image
src={Laugh}
alt=''
className='h-14 w-14 flex-shrink-0'
/>
<div className='flex flex-col gap-1'>
<div className='flex items-center gap-2'>
<span className='text-lg font-bold'>Meme2Earn</span>
</div>
<p className='text-sm text-text-muted'>
Post and like memes to earn even more Points.
</p>
</div>
<Button
size='circle'
className='ml-auto flex-shrink-0 text-lg'
variant='transparent'
>
<HiChevronRight />
</Button>
</Card>
</LinkWrapper>
<LinkWrapper href='/tg/friends'>
<Card className='flex w-full items-center gap-4 bg-background-light'>
<Image
src={Speaker}
alt=''
className='h-14 w-14 flex-shrink-0'
/>
<div className='flex flex-col gap-1'>
<div className='flex items-center gap-2'>
<span className='text-lg font-bold'>Invite2Earn</span>
</div>
<p className='text-sm text-text-muted'>
Invite your friends and earn 10% from their Points.
</p>
</Card>
</LinkWrapper>
<LinkWrapper close={() => setIsOpen(false)} href='/tg/friends'>
<Card className='flex w-full items-center gap-4 bg-background-light'>
<Image
src={Speaker}
alt=''
className='h-14 w-14 flex-shrink-0'
/>
<div className='flex flex-col gap-1'>
<div className='flex items-center gap-2'>
<span className='text-lg font-bold'>Invite2Earn</span>
</div>
<Button
size='circle'
className='ml-auto flex-shrink-0 text-lg'
variant='transparent'
>
<HiChevronRight />
</Button>
</Card>
</LinkWrapper>
<LinkWrapper href='/tg'>
<Card className='flex w-full items-center gap-4 bg-background-light'>
<Image
src={Pointup}
alt=''
className='h-14 w-14 flex-shrink-0'
/>
<div className='flex flex-col gap-1'>
<div className='flex items-center gap-2'>
<span className='text-lg font-bold'>Tap2Earn</span>
<div className='rounded-full bg-background px-2 py-0.5 text-sm text-text-muted'>
Soon
</div>
<p className='text-sm text-text-muted'>
Invite your friends and earn 10% from their Points.
</p>
</div>
<Button
size='circle'
className='ml-auto flex-shrink-0 text-lg'
variant='transparent'
>
<HiChevronRight />
</Button>
</Card>
</LinkWrapper>
<LinkWrapper close={() => setIsOpen(false)} href='/tg'>
<Card className='flex w-full items-center gap-4 bg-background-light'>
<Image
src={Pointup}
alt=''
className='h-14 w-14 flex-shrink-0'
/>
<div className='flex flex-col gap-1'>
<div className='flex items-center gap-2'>
<span className='text-lg font-bold'>Tap2Earn</span>
<div className='rounded-full bg-background px-2 py-0.5 text-sm text-text-muted'>
Soon
</div>
<p className='text-sm text-text-muted'>
Tap on the laughing emoji and earn Points.
</p>
</div>
<Button
size='circle'
className='ml-auto flex-shrink-0 text-lg'
variant='transparent'
>
<HiChevronRight />
</Button>
</Card>
</LinkWrapper>
</div>
<p className='text-sm text-text-muted'>
Tap on the laughing emoji and earn Points.
</p>
</div>
<Button
size='circle'
className='ml-auto flex-shrink-0 text-lg'
variant='transparent'
>
<HiChevronRight />
</Button>
</Card>
</LinkWrapper>
</div>
</Drawer.Content>
</Drawer.Portal>
</Drawer.Root>
</div>
</Transition>
</>,
document.body
)
}

function LinkWrapper({
href,
children,
close,
}: {
href: string
children: React.ReactNode
close: () => void
}) {
const router = useRouter()

Expand All @@ -197,7 +236,7 @@ function LinkWrapper({
)

if (router.pathname === href) {
return <Drawer.Close asChild>{link}</Drawer.Close>
return <span onClick={close}>{link}</span>
}
return link
}
Expand Down
8 changes: 8 additions & 0 deletions src/utils/window.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,3 +136,11 @@ export function isWebNotificationsEnabled() {
export function sendMessageToParentWindow(name: string, value: string) {
window.parent?.postMessage(`grill:${name}:${value}`, '*')
}

export function preventWindowScroll() {
document.body.style.overflow = 'hidden'
}

export function allowWindowScroll() {
document.body.style.overflow = 'initial'
}

0 comments on commit dd97ff8

Please sign in to comment.