stacker.news/pages/rewards/index.js

208 lines
5.8 KiB
JavaScript
Raw Normal View History

import { gql } from 'graphql-tag'
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 Layout 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'
import { ListUsers } from '../../components/user-list'
import { Col, Row } from 'react-bootstrap'
import { proportions } from '../../lib/madness'
2024-03-02 00:21:52 +00:00
import { useData } from '../../components/use-data'
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_FULL = gql`
2022-12-08 00:04:02 +00:00
{
2023-08-15 17:41:51 +00:00
rewards {
2022-12-08 00:04:02 +00:00
total
time
2022-12-08 00:04:02 +00:00
sources {
name
value
}
leaderboard {
users {
id
name
photoId
2024-03-02 17:48:11 +00:00
ncomments
nposts
optional {
streak
2024-03-02 17:48:11 +00:00
stacked
spent
referrals
}
}
}
2022-12-08 00:04:02 +00:00
}
}
`
const REWARDS = gql`
{
rewards {
total
time
sources {
name
value
}
2023-07-07 19:43:53 +00:00
}
}
`
2023-07-07 19:43:53 +00:00
export const getServerSideProps = getGetServerSideProps({ query: REWARDS_FULL })
2023-07-06 17:43:51 +00:00
export function RewardLine ({ total, time }) {
2023-07-06 17:43:51 +00:00
return (
<>
<span tyle={{ whiteSpace: 'nowrap' }}>
{numWithUnits(total)} in rewards
</span>
{time &&
2023-07-06 17:43:51 +00:00
<Countdown
date={time}
renderer={props =>
<small className='text-monospace' suppressHydrationWarning style={{ whiteSpace: 'nowrap' }}>
{props.formatted.days
? ` ${props.formatted.days}d ${props.formatted.hours}h ${props.formatted.minutes}m ${props.formatted.seconds}s`
: ` ${props.formatted.hours}:${props.formatted.minutes}:${props.formatted.seconds}`}
</small>}
2023-07-06 17:43:51 +00:00
/>}
</>
)
}
export default function Rewards ({ ssrData }) {
// only poll for updates to rewards and not leaderboard
2024-03-02 00:21:52 +00:00
const { data: rewardsData } = useQuery(
REWARDS,
SSR ? {} : { pollInterval: 1000, nextFetchPolicy: 'cache-and-network' })
2024-03-02 00:21:52 +00:00
const { data } = useQuery(REWARDS_FULL)
if (!data && !ssrData) return <PageLoading />
2022-12-08 00:04:02 +00:00
2024-03-02 00:21:52 +00:00
let { rewards: [{ total, sources, time, leaderboard }] } = useData(data, ssrData)
if (rewardsData?.rewards?.length > 0) {
total = rewardsData.rewards[0].total
sources = rewardsData.rewards[0].sources
time = rewardsData.rewards[0].time
}
2022-12-08 00:04:02 +00:00
function EstimatedReward ({ rank }) {
return (
<div className='text-muted fst-italic'>
<small>
<span>estimated reward: {numWithUnits(Math.floor(total * proportions[rank - 1]))}</span>
</small>
2022-12-08 00:04:02 +00:00
</div>
)
}
return (
<Layout footerLinks>
<Row className='py-3'>
<Col>
<div
className='d-flex flex-column sticky-lg-top py-5'
>
<h3 className='text-center'>
<div>
<RewardLine total={total} time={time} />
</div>
<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>
</Link>
</h3>
<div className='my-3 w-100'>
<GrowthPieChart data={sources} />
</div>
<DonateButton />
</div>
</Col>
{leaderboard?.users &&
<Col lg={7}>
<h2 className='pt-5 text-center'>leaderboard</h2>
<div className='d-flex justify-content-center pt-4'>
<ListUsers users={leaderboard.users} rank Embellish={EstimatedReward} />
</div>
</Col>}
</Row>
</Layout>
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={{
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 {
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'>
<SubmitButton variant='success' className='ms-auto mt-1 px-4' value='TIP'>donate</SubmitButton>
</div>
</Form>
))}
className='align-self-center'
>DONATE TO REWARDS
</Button>
2022-12-08 00:04:02 +00:00
</>
)
}