import { useQuery } from '@apollo/client' import PageLoading from '../../components/page-loading' import { ME_REWARDS } from '../../fragments/rewards' import { CenterLayout } from '../../components/layout' import dynamic from 'next/dynamic' import { useRouter } from 'next/router' import { getGetServerSideProps } from '../../api/ssrApollo' import { fixedDecimal } from '../../lib/format' import Trophy from '../../svgs/trophy-fill.svg' import { ListItem } from '../../components/items' import { dayMonthYear } from '../../lib/time' const GrowthPieChart = dynamic(() => import('../../components/charts').then(mod => mod.GrowthPieChart), { loading: () =>
Loading...
}) export const getServerSideProps = getGetServerSideProps({ query: ME_REWARDS, notFound: (data, params) => data.rewards.reduce((a, r) => a || new Date(r.time) > new Date(), false) }) export default function Rewards ({ ssrData }) { const router = useRouter() const { data } = useQuery(ME_REWARDS, { variables: { ...router.query } }) if (!data && !ssrData) return const { rewards, meRewards } = data || ssrData return (
{rewards.map(({ total, sources, time }, i) => (

{time &&
On {dayMonthYear(time)} at 12a CT
} {total} sats were rewarded

{meRewards[i] &&

you earned {meRewards[i].total} sats ({fixedDecimal(meRewards[i].total * 100 / total, 2)}%)

{meRewards[i].rewards?.map((r, i) => )}
}
))}
) } function Reward ({ rank, type, sats, item }) { if (!rank) return null const color = rank <= 3 ? 'text-primary' : 'text-muted' let category = type switch (type) { case 'TIP_POST': category = 'in post zapping' break case 'TIP_COMMENT': category = 'in comment zapping' break case 'POST': category = 'among posts' break case 'COMMENT': category = 'among comments' break } return (
#{rank} {category} for {sats} sats
{item &&
}
) }