reward countdown in footer

components/countdown.js

@@ -5,7 +5,7 @@ export default function SimpleCountdown ({ className, onComplete, date }) {
     <span className={className}>
       <Countdown
         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}
       />
     </span>

components/footer-rewards.js

@@ -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>
+  )
+}

components/footer.js

@@ -13,6 +13,7 @@ import No from '../svgs/no.svg'
 import Bolt from '../svgs/bolt.svg'
 import Amboss from '../svgs/amboss.svg'
 import { useEffect, useState } from 'react'
+import Rewards from './footer-rewards'
 
 // XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 // 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' />
               </div>}
             <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 className='mb-0' style={{ fontWeight: 500 }}>
               <OverlayTrigger trigger='click' placement='top' overlay={AnalyticsPopover} rootClose>

pages/rewards.js

@@ -8,6 +8,8 @@ import LayoutCenter from '../components/layout-center'
 import { useMutation, useQuery } from '@apollo/client'
 import Link from 'next/link'
 import { amountSchema } from '../lib/validate'
+import Countdown from 'react-countdown'
+import { abbrNum } from '../lib/format'
 
 const REWARDS = gql`
 {
@@ -23,8 +25,30 @@ const REWARDS = gql`
 
 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 } } }) {
-  const { data } = useQuery(REWARDS, { pollInterval: 1000 })
+  const { data } = useQuery(REWARDS, { pollInterval: 1000, fetchPolicy: 'cache-and-network' })
 
   if (data) {
     ({ expectedRewards: { total, sources } } = data)
@@ -33,7 +57,9 @@ export default function Rewards ({ data: { expectedRewards: { total, sources } }
   return (
     <LayoutCenter footerLinks>
       <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>
           <a className='text-reset'><small><small><small>learn about rewards</small></small></small></a>
         </Link>