open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Filter out SG from traders. Center leaderboard. Use Nextjs Image.

Browse Source
This commit is contained in:
jahooma 2022-01-17 20:56:37 -06:00
parent 129ef23a4e
commit df2f8046b0
2 changed files with 36 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/lib/firebase/users.ts
View File

@ -132,17 +132,18 @@ export function listenForAllUsers(setUsers: (users: User[]) => void) {
const topTradersQuery = query( const topTradersQuery = query(
collection(db, 'users'), collection(db, 'users'),
orderBy('totalPnLCached', 'desc'), orderBy('totalPnLCached', 'desc'),
limit(10) limit(21)
) )
export function getTopTraders() { export async function getTopTraders() {
return getValues<User>(topTradersQuery) const users = await getValues<User>(topTradersQuery)
return users.filter((user) => user.username !== 'SG').slice(0, 20)
} }
const topCreatorsQuery = query( const topCreatorsQuery = query(
collection(db, 'users'), collection(db, 'users'),
orderBy('creatorVolumeCached', 'desc'), orderBy('creatorVolumeCached', 'desc'),
limit(10) limit(20)
) )
export function getTopCreators() { export function getTopCreators() {

56
web/pages/leaderboards.tsx
View File

@ -1,4 +1,6 @@
import _ from 'lodash' import _ from 'lodash'
import Image from 'next/image'
import { Col } from '../components/layout/col'
import { Row } from '../components/layout/row' import { Row } from '../components/layout/row'
import { Spacer } from '../components/layout/spacer' import { Spacer } from '../components/layout/spacer'
import { Page } from '../components/page' import { Page } from '../components/page'
@ -31,27 +33,29 @@ export default function Leaderboards(props: {
return ( return (
<Page> <Page>
<Leaderboard <Col className="items-center">
title="Top traders" <Leaderboard
users={topTraders} title="Top traders"
columns={[ users={topTraders}
{ columns={[
header: 'Total profit', {
renderCell: (user) => formatMoney(user.totalPnLCached), header: 'Total profit',
}, renderCell: (user) => formatMoney(user.totalPnLCached),
]} },
/> ]}
<Spacer h={4} /> />
<Leaderboard <Spacer h={4} />
title="Top creators" <Leaderboard
users={topCreators} title="Top creators"
columns={[ users={topCreators}
{ columns={[
header: 'Market volume', {
renderCell: (user) => formatMoney(user.creatorVolumeCached), header: 'Market volume',
}, renderCell: (user) => formatMoney(user.creatorVolumeCached),
]} },
/> ]}
/>
</Col>
</Page> </Page>
) )
} }
@ -66,7 +70,7 @@ function Leaderboard(props: {
}) { }) {
const { title, users, columns } = props const { title, users, columns } = props
return ( return (
<div className="px-1"> <div className="max-w-xl w-full px-1">
<Title text={title} /> <Title text={title} />
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="table table-zebra table-compact text-gray-500 w-full"> <table className="table table-zebra table-compact text-gray-500 w-full">
@ -81,15 +85,17 @@ function Leaderboard(props: {
</thead> </thead>
<tbody> <tbody>
{users.map((user, index) => ( {users.map((user, index) => (
<tr> <tr key={user.id}>
<td>{index + 1}</td> <td>{index + 1}</td>
<td> <td>
<SiteLink className="relative" href={`/${user.username}`}> <SiteLink className="relative" href={`/${user.username}`}>
<Row className="items-center gap-4"> <Row className="items-center gap-4">
<img <Image
className="h-8 w-8 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-gray-50" className="rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-gray-50"
src={user.avatarUrl} src={user.avatarUrl}
alt="" alt=""
width={32}
height={32}
/> />
<div>{user.name}</div> <div>{user.name}</div>
</Row> </Row>