77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
import { NostrEvent } from '@nostr-dev-kit/ndk'
|
|
import { ZapPopUp } from 'components/Zap'
|
|
import {
|
|
useAppSelector,
|
|
useNDKContext,
|
|
useBodyScrollDisable,
|
|
useDidMount
|
|
} from 'hooks'
|
|
import { useState } from 'react'
|
|
import { toast } from 'react-toastify'
|
|
import { abbreviateNumber } from 'utils'
|
|
|
|
export const Zap = (props: NostrEvent) => {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const [totalZappedAmount, setTotalZappedAmount] = useState(0)
|
|
const [hasZapped, setHasZapped] = useState(false)
|
|
|
|
const userState = useAppSelector((state) => state.user)
|
|
const { getTotalZapAmount } = useNDKContext()
|
|
|
|
useBodyScrollDisable(isOpen)
|
|
|
|
useDidMount(() => {
|
|
getTotalZapAmount(
|
|
props.pubkey,
|
|
props.id!,
|
|
undefined,
|
|
userState.user?.pubkey as string
|
|
)
|
|
.then((res) => {
|
|
setTotalZappedAmount(res.accumulatedZapAmount)
|
|
setHasZapped(res.hasZapped)
|
|
})
|
|
.catch((err) => {
|
|
toast.error(err.message || err)
|
|
})
|
|
})
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className={`IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEBolt ${
|
|
hasZapped ? 'IBMSMSMBSSCL_CAEBoltActive' : ''
|
|
}`}
|
|
onClick={() => setIsOpen(true)}
|
|
>
|
|
<svg
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
viewBox='-64 0 512 512'
|
|
width='1em'
|
|
height='1em'
|
|
fill='currentColor'
|
|
className='IBMSMSMBSSCL_CAElementIcon'
|
|
>
|
|
<path d='M240.5 224H352C365.3 224 377.3 232.3 381.1 244.7C386.6 257.2 383.1 271.3 373.1 280.1L117.1 504.1C105.8 513.9 89.27 514.7 77.19 505.9C65.1 497.1 60.7 481.1 66.59 467.4L143.5 288H31.1C18.67 288 6.733 279.7 2.044 267.3C-2.645 254.8 .8944 240.7 10.93 231.9L266.9 7.918C278.2-1.92 294.7-2.669 306.8 6.114C318.9 14.9 323.3 30.87 317.4 44.61L240.5 224z'></path>
|
|
</svg>
|
|
<p className='IBMSMSMBSSCL_CAElementText'>
|
|
{abbreviateNumber(totalZappedAmount)}
|
|
</p>
|
|
<div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
|
|
<div className='IBMSMSMBSSCL_CAElementLoad'></div>
|
|
</div>
|
|
</div>
|
|
{isOpen && (
|
|
<ZapPopUp
|
|
title='Tip/Zap'
|
|
receiver={props.pubkey}
|
|
eventId={props.id}
|
|
handleClose={() => setIsOpen(false)}
|
|
setTotalZapAmount={setTotalZappedAmount}
|
|
setHasZapped={setHasZapped}
|
|
/>
|
|
)}
|
|
</>
|
|
)
|
|
}
|