import { gql } from 'graphql-tag' import Button from 'react-bootstrap/Button' import InputGroup from 'react-bootstrap/InputGroup' import { getGetServerSideProps } from '@/api/ssrApollo' import { Form, Input, SubmitButton } from '@/components/form' import Layout from '@/components/layout' import { useQuery } from '@apollo/client' import Link from 'next/link' import { amountSchema } from '@/lib/validate' import { numWithUnits } from '@/lib/format' import PageLoading from '@/components/page-loading' import { useShowModal } from '@/components/modal' import dynamic from 'next/dynamic' import { FAST_POLL_INTERVAL, SSR } from '@/lib/constants' import { useToast } from '@/components/toast' import { useLightning } from '@/components/lightning' import { ListUsers } from '@/components/user-list' import { Col, Row } from 'react-bootstrap' import { proportions } from '@/lib/madness' import { useData } from '@/components/use-data' import { GrowthPieChartSkeleton } from '@/components/charts-skeletons' import { useMemo } from 'react' import { CompactLongCountdown } from '@/components/countdown' import { usePaidMutation } from '@/components/use-paid-mutation' import { DONATE } from '@/fragments/paidAction' import { ITEM_FULL_FIELDS } from '@/fragments/items' import { ListItem } from '@/components/items' const GrowthPieChart = dynamic(() => import('@/components/charts').then(mod => mod.GrowthPieChart), { loading: () => }) const REWARDS_FULL = gql` ${ITEM_FULL_FIELDS} { rewards { total time sources { name value } ad { ...ItemFullFields } leaderboard { users { id name photoId ncomments nposts optional { streak stacked spent referrals } } } } } ` const REWARDS = gql` { rewards { total time sources { name value } } } ` export const getServerSideProps = getGetServerSideProps({ query: REWARDS_FULL }) export function RewardLine ({ total, time }) { return ( <> {numWithUnits(total)} in rewards {time && } ) } export default function Rewards ({ ssrData }) { // only poll for updates to rewards and not leaderboard const { data: rewardsData } = useQuery( REWARDS, SSR ? {} : { pollInterval: FAST_POLL_INTERVAL, nextFetchPolicy: 'cache-and-network' }) const { data } = useQuery(REWARDS_FULL) const dat = useData(data, ssrData) let { rewards: [{ total, sources, time, leaderboard, ad }] } = useMemo(() => { return dat || { rewards: [{}] } }, [dat]) if (rewardsData?.rewards?.length > 0) { total = rewardsData.rewards[0].total sources = rewardsData.rewards[0].sources time = rewardsData.rewards[0].time } if (!dat) return function EstimatedReward ({ rank }) { const referrerReward = Math.floor(total * proportions[rank - 1] * 0.2) const reward = Math.floor(total * proportions[rank - 1]) - referrerReward return (
estimated reward: {numWithUnits(reward)} (+ {numWithUnits(referrerReward)} to referrers)
) } return ( {ad &&
top boost this month
}

learn about rewards

{leaderboard?.users &&

leaderboard

}
) } export function DonateButton () { const showModal = useShowModal() const toaster = useToast() const strike = useLightning() const [donateToRewards] = usePaidMutation(DONATE) return ( <> ) }