Show a top5 leaderboard on resolved markets

This commit is contained in:
Austin Chen 2022-03-18 21:00:33 -07:00
parent d6a751d9a2
commit b8e391f0f0
3 changed files with 58 additions and 2 deletions

View File

@ -14,6 +14,7 @@ export function Leaderboard(props: {
}[]
className?: string
}) {
// TODO: Ideally, highlight your own entry on the leaderboard
const { title, users, columns, className } = props
return (
<div className={clsx('w-full px-1', className)}>

View File

@ -126,6 +126,16 @@ export async function uploadData(
return await getDownloadURL(uploadRef)
}
export async function listUsers(userIds: string[]) {
if (userIds.length > 10) {
throw new Error('Too many users requested at once; Firestore limits to 10')
}
const userCollection = collection(db, 'users')
const q = query(userCollection, where('id', 'in', userIds))
const docs = await getDocs(q)
return docs.docs.map((doc) => doc.data() as User)
}
export async function listAllUsers() {
const userCollection = collection(db, 'users')
const q = query(userCollection)

View File

@ -1,4 +1,4 @@
import React from 'react'
import React, { useEffect, useState } from 'react'
import { useContractWithPreload } from '../../hooks/use-contract'
import { ContractOverview } from '../../components/contract-overview'
@ -10,7 +10,7 @@ import { ContractBetsTable, MyBetsSummary } from '../../components/bets-list'
import { useBets } from '../../hooks/use-bets'
import { Title } from '../../components/title'
import { Spacer } from '../../components/layout/spacer'
import { User } from '../../lib/firebase/users'
import { listUsers, User } from '../../lib/firebase/users'
import {
Contract,
getContractFromSlug,
@ -30,6 +30,10 @@ import { listAllAnswers } from '../../lib/firebase/answers'
import { Answer } from '../../../common/answer'
import { AnswersPanel } from '../../components/answers/answers-panel'
import { fromPropz, usePropz } from '../../hooks/use-propz'
import { Leaderboard } from '../../components/leaderboard'
import _ from 'lodash'
import { calculatePayout, resolvedPayout } from '../../../common/calculate'
import { formatMoney } from '../../../common/util/format'
export const getStaticProps = fromPropz(getStaticPropz)
export async function getStaticPropz(props: {
@ -147,6 +151,9 @@ export default function ContractPage(props: {
)}
</ContractOverview>
{contract.isResolved && (
<ContractLeaderboard contract={contract} bets={bets} />
)}
<BetsSection contract={contract} user={user ?? null} bets={bets} />
</div>
@ -195,6 +202,44 @@ function BetsSection(props: {
)
}
function ContractLeaderboard(props: { contract: Contract; bets: Bet[] }) {
const { contract, bets } = props
const [users, setUsers] = useState<User[]>()
// Create a map of userIds to total profits
// TODO: Are we supposed to include sales...?
const betsWithoutSales = bets.filter((bet) => !(bet.isSold || bet.sale))
const betsByUser = _.groupBy(betsWithoutSales, 'userId')
const userProfits = _.mapValues(betsByUser, (bets) =>
_.sumBy(bets, (bet) => resolvedPayout(contract, bet) - bet.amount)
)
// Find the 5 users with the most profit
const topUsers = _.entries(userProfits).sort(([i1, p1], [i2, p2]) => p2 - p1)
const top5Ids = topUsers.slice(0, 5).map(([userId]) => userId)
useEffect(() => {
listUsers(top5Ids).then((users) => {
const sortedUsers = _.sortBy(users, (user) => -userProfits[user.id])
setUsers(sortedUsers)
})
}, [])
return (
<Leaderboard
title="Top Traders"
users={users || []}
columns={[
{
header: 'Total profit',
renderCell: (user) => formatMoney(userProfits[user.id] || 0),
},
]}
className="mt-12 max-w-sm"
/>
)
}
const getOpenGraphProps = (contract: Contract) => {
const { resolution, question, creatorName, creatorUsername, outcomeType } =
contract