import _ from 'lodash' import { Col } from '../components/layout/col' import { Leaderboard } from '../components/leaderboard' import { Page } from '../components/page' import { getTopCreators, getTopTraders, User } from '../lib/firebase/users' import { formatMoney } from '../../common/util/format' import { fromPropz, usePropz } from '../hooks/use-propz' import { Manaboard } from '../components/manaboard' import { Title } from '../components/title' export const getStaticProps = fromPropz(getStaticPropz) export async function getStaticPropz() { const [topTraders, topCreators] = await Promise.all([ getTopTraders().catch((_) => {}), getTopCreators().catch((_) => {}), ]) return { props: { topTraders, topCreators, }, revalidate: 60, // regenerate after a minute } } function Leaderboards(props: { topTraders: User[]; topCreators: User[] }) { props = usePropz(props, getStaticPropz) ?? { topTraders: [], topCreators: [], } const { topTraders, topCreators } = props return ( <Page margin> <Col className="items-center gap-10 lg:flex-row"> <Leaderboard title="🏅 Top traders" users={topTraders} columns={[ { header: 'Total profit', renderCell: (user) => formatMoney(user.totalPnLCached), }, ]} /> <Leaderboard title="🏅 Top creators" users={topCreators} columns={[ { header: 'Market volume', renderCell: (user) => formatMoney(user.creatorVolumeCached), }, ]} /> </Col> </Page> ) } function Explanation() { return ( <div className="prose mt-8 text-gray-600"> <h3 id="how-this-works">How this works</h3> <ol> <li> Every slot has an "assessed value": what the current holder thinks their slot is worth. </li> <li>Slot holders pay a continuous fee of 10% per hour to Manafold.</li> <li> At any time, you can pay the assessed value of a slot to buy it from the current holder. </li> <li> The slot is now yours! You can customize the message, or reassess it to a new value. </li> </ol> <p> <em> Note: this mechanism is known as a{' '} <a href="https://medium.com/@simondlr/what-is-harberger-tax-where-does-the-blockchain-fit-in-1329046922c6"> Harberger Tax </a> ! </em> </p> </div> ) } export default function Manaboards(props: { topTraders: User[] topCreators: User[] }) { props = usePropz(props, getStaticPropz) ?? { topTraders: [], topCreators: [], } const { topTraders, topCreators } = props return ( <Page margin rightSidebar={<Explanation />}> <Title text={'Leaderboards (FOR SALE!)'} /> <div className="prose mb-8 text-gray-600"> <p> Manafold Markets is running low on mana, so we're selling our leaderboard slots to make up the deficit. Buy one now for ephemeral glory, and help keep Manafold afloat! </p> </div> <Col className="mt-6 items-center gap-10"> <Manaboard title="🏅 Top traders" users={topTraders} /> <Manaboard title="🏅 Top creators" users={topCreators} /> </Col> </Page> ) }