reward countdown in footer

This commit is contained in:
keyan 2023-07-06 12:43:51 -05:00
parent 490ed59099
commit ec9a424bf4
4 changed files with 54 additions and 8 deletions

View File

@ -5,7 +5,7 @@ export default function SimpleCountdown ({ className, onComplete, date }) {
<span className={className}> <span className={className}>
<Countdown <Countdown
date={date} date={date}
renderer={props => <span> {props.formatted.minutes}:{props.formatted.seconds}</span>} renderer={props => <span className='text-monospace'> {props.formatted.minutes}:{props.formatted.seconds}</span>}
onComplete={onComplete} onComplete={onComplete}
/> />
</span> </span>

View File

@ -0,0 +1,23 @@
import { gql, useQuery } from '@apollo/client'
import Link from 'next/link'
import { RewardLine } from '../pages/rewards'
const REWARDS = gql`
{
expectedRewards {
total
}
}`
export default function Rewards () {
const { data } = useQuery(REWARDS, { pollInterval: 60000, fetchPolicy: 'cache-and-network' })
const total = data?.expectedRewards?.total
return (
<Link href='/rewards' passHref>
<a className='nav-link p-0 p-0 d-inline-flex'>
{total ? <span><RewardLine total={total} /></span> : 'rewards'}
</a>
</Link>
)
}

View File

@ -13,6 +13,7 @@ import No from '../svgs/no.svg'
import Bolt from '../svgs/bolt.svg' import Bolt from '../svgs/bolt.svg'
import Amboss from '../svgs/amboss.svg' import Amboss from '../svgs/amboss.svg'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import Rewards from './footer-rewards'
// XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX // XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
// if you update this you need to update /public/darkmode // if you update this you need to update /public/darkmode
@ -234,11 +235,7 @@ export default function Footer ({ noLinks }) {
<LnIcon onClick={toggleLightning} width={20} height={20} className='ml-2 fill-grey theme' /> <LnIcon onClick={toggleLightning} width={20} height={20} className='ml-2 fill-grey theme' />
</div>} </div>}
<div className='mb-0' style={{ fontWeight: 500 }}> <div className='mb-0' style={{ fontWeight: 500 }}>
<Link href='/rewards' passHref> <Rewards />
<a className='nav-link p-0 p-0 d-inline-flex'>
rewards
</a>
</Link>
</div> </div>
<div className='mb-0' style={{ fontWeight: 500 }}> <div className='mb-0' style={{ fontWeight: 500 }}>
<OverlayTrigger trigger='click' placement='top' overlay={AnalyticsPopover} rootClose> <OverlayTrigger trigger='click' placement='top' overlay={AnalyticsPopover} rootClose>

View File

@ -8,6 +8,8 @@ import LayoutCenter from '../components/layout-center'
import { useMutation, useQuery } from '@apollo/client' import { useMutation, useQuery } from '@apollo/client'
import Link from 'next/link' import Link from 'next/link'
import { amountSchema } from '../lib/validate' import { amountSchema } from '../lib/validate'
import Countdown from 'react-countdown'
import { abbrNum } from '../lib/format'
const REWARDS = gql` const REWARDS = gql`
{ {
@ -23,8 +25,30 @@ const REWARDS = gql`
export const getServerSideProps = getGetServerSideProps(REWARDS) export const getServerSideProps = getGetServerSideProps(REWARDS)
export function RewardLine ({ total }) {
const [threshold, setThreshold] = useState(0)
useEffect(() => {
const dateStr = new Date().toLocaleString('en-US', { timeZone: 'America/Chicago' })
const date = new Date(dateStr)
date.setHours(24, 0, 0, 0)
setThreshold(date.getTime())
}, [])
return (
<>
{abbrNum(total)} sats in rewards
{threshold &&
<Countdown
date={threshold}
renderer={props => <small className='text-monospace'> {props.formatted.hours}:{props.formatted.minutes}:{props.formatted.seconds}</small>}
/>}
</>
)
}
export default function Rewards ({ data: { expectedRewards: { total, sources } } }) { export default function Rewards ({ data: { expectedRewards: { total, sources } } }) {
const { data } = useQuery(REWARDS, { pollInterval: 1000 }) const { data } = useQuery(REWARDS, { pollInterval: 1000, fetchPolicy: 'cache-and-network' })
if (data) { if (data) {
({ expectedRewards: { total, sources } } = data) ({ expectedRewards: { total, sources } } = data)
@ -33,7 +57,9 @@ export default function Rewards ({ data: { expectedRewards: { total, sources } }
return ( return (
<LayoutCenter footerLinks> <LayoutCenter footerLinks>
<h4 className='font-weight-bold text-muted text-center'> <h4 className='font-weight-bold text-muted text-center'>
<div>{total} sats to be rewarded today</div> <div>
<RewardLine total={total} />
</div>
<Link href='/faq#how-do-i-earn-sats-on-stacker-news' passHref> <Link href='/faq#how-do-i-earn-sats-on-stacker-news' passHref>
<a className='text-reset'><small><small><small>learn about rewards</small></small></small></a> <a className='text-reset'><small><small><small>learn about rewards</small></small></small></a>
</Link> </Link>