stacker.news/pages/rewards/index.js

148 lines
4.3 KiB
JavaScript
Raw Normal View History

import { gql } from 'graphql-tag'
import { useMemo } from 'react'
2023-07-24 18:35:05 +00:00
import Button from 'react-bootstrap/Button'
import InputGroup from 'react-bootstrap/InputGroup'
2023-08-15 17:41:51 +00:00
import { getGetServerSideProps } from '../../api/ssrApollo'
import { Form, Input, SubmitButton } from '../../components/form'
import { CenterLayout } from '../../components/layout'
2022-12-08 00:04:02 +00:00
import { useMutation, useQuery } from '@apollo/client'
import Link from 'next/link'
2023-08-15 17:41:51 +00:00
import { amountSchema } from '../../lib/validate'
2023-07-06 17:43:51 +00:00
import Countdown from 'react-countdown'
2023-08-15 17:41:51 +00:00
import { numWithUnits } from '../../lib/format'
import PageLoading from '../../components/page-loading'
import { useShowModal } from '../../components/modal'
2023-07-24 22:50:12 +00:00
import dynamic from 'next/dynamic'
2023-08-15 17:41:51 +00:00
import { SSR } from '../../lib/constants'
import { useToast } from '../../components/toast'
2023-12-26 00:05:45 +00:00
import { useLightning } from '../../components/lightning'
2023-07-24 22:50:12 +00:00
2023-08-15 17:41:51 +00:00
const GrowthPieChart = dynamic(() => import('../../components/charts').then(mod => mod.GrowthPieChart), {
2023-07-24 22:50:12 +00:00
loading: () => <div>Loading...</div>
})
2022-12-08 00:04:02 +00:00
const REWARDS = gql`
{
2023-08-15 17:41:51 +00:00
rewards {
2022-12-08 00:04:02 +00:00
total
sources {
name
value
}
}
}
`
2023-07-07 19:43:53 +00:00
function midnight (tz) {
function tzOffset (tz) {
const date = new Date()
date.setMilliseconds(0)
const targetDate = new Date(date.toLocaleString('en-US', { timeZone: tz }))
const targetOffsetHours = (date.getTime() - targetDate.getTime()) / 1000 / 60 / 60
return targetOffsetHours
}
const date = new Date()
date.setHours(24, 0, 0, 0)
return date.getTime() + tzOffset(tz) * 60 * 60 * 1000
}
export const getServerSideProps = getGetServerSideProps({ query: REWARDS })
2022-12-08 00:04:02 +00:00
2023-07-06 17:43:51 +00:00
export function RewardLine ({ total }) {
const threshold = useMemo(() => midnight('America/Chicago'))
2023-07-06 17:43:51 +00:00
return (
<>
{numWithUnits(total)} in rewards
2023-07-06 17:43:51 +00:00
{threshold &&
<Countdown
date={threshold}
renderer={props => <small className='text-monospace' suppressHydrationWarning> {props.formatted.hours}:{props.formatted.minutes}:{props.formatted.seconds}</small>}
2023-07-06 17:43:51 +00:00
/>}
</>
)
}
export default function Rewards ({ ssrData }) {
const { data } = useQuery(REWARDS, SSR ? {} : { pollInterval: 1000, nextFetchPolicy: 'cache-and-network' })
if (!data && !ssrData) return <PageLoading />
2022-12-08 00:04:02 +00:00
2023-08-30 00:13:21 +00:00
const { rewards: [{ total, sources }] } = data || ssrData
2022-12-08 00:04:02 +00:00
return (
<CenterLayout footerLinks>
2023-07-24 18:35:05 +00:00
<h4 className='fw-bold text-muted text-center'>
2023-07-06 17:43:51 +00:00
<div>
<RewardLine total={total} />
</div>
2023-08-15 17:41:51 +00:00
<Link href='/faq#how-do-i-earn-sats-on-stacker-news' className='text-info fw-normal'>
<small><small><small>learn about rewards</small></small></small>
2022-12-08 00:04:02 +00:00
</Link>
</h4>
<div className='my-3 w-100'>
<GrowthPieChart data={sources} />
</div>
<DonateButton />
</CenterLayout>
2022-12-08 00:04:02 +00:00
)
}
export function DonateButton () {
const showModal = useShowModal()
const toaster = useToast()
2023-12-26 00:05:45 +00:00
const strike = useLightning()
2022-12-08 00:04:02 +00:00
const [donateToRewards] = useMutation(
gql`
mutation donateToRewards($sats: Int!, $hash: String, $hmac: String) {
donateToRewards(sats: $sats, hash: $hash, hmac: $hmac)
2022-12-08 00:04:02 +00:00
}`)
return (
<>
<Button onClick={() => showModal(onClose => (
<Form
initial={{
2023-11-11 00:18:10 +00:00
amount: 10000
}}
schema={amountSchema}
invoiceable
onSubmit={async ({ amount, hash, hmac }) => {
const { error } = await donateToRewards({
variables: {
sats: Number(amount),
hash,
hmac
}
})
if (error) {
console.error(error)
toaster.danger('failed to donate')
} else {
2023-12-26 00:05:45 +00:00
const didStrike = strike()
if (!didStrike) {
toaster.success('donated')
}
}
onClose()
}}
>
<Input
label='amount'
name='amount'
type='number'
required
autoFocus
append={<InputGroup.Text className='text-monospace'>sats</InputGroup.Text>}
/>
<div className='d-flex'>
2023-07-24 18:35:05 +00:00
<SubmitButton variant='success' className='ms-auto mt-1 px-4' value='TIP'>donate</SubmitButton>
</div>
</Form>
))}
>DONATE TO REWARDS
</Button>
2022-12-08 00:04:02 +00:00
</>
)
}