Grab up to 50 traders

web/components/manaboard.tsx

@@ -21,7 +21,14 @@ export function Manaboard(props: {
   className?: string
 }) {
   // TODO: Ideally, highlight your own entry on the leaderboard
-  const { title, users, className, values } = props
+  let { title, users, className, values } = props
+
+  const [expanded, setExpanded] = useState(false)
+  if (!expanded) {
+    users = users.slice(0, 25)
+    values = values.slice(0, 25)
+  }
+
   return (
     <div className={clsx('w-full px-1', className)}>
       <Title text={title} className="!mt-0" />
@@ -68,6 +75,12 @@ export function Manaboard(props: {
               ))}
             </tbody>
           </table>
+          <button
+            className="btn btn-sm btn-outline m-2"
+            onClick={() => setExpanded(!expanded)}
+          >
+            {expanded ? 'Hide' : 'Show more'}
+          </button>
         </div>
       )}
     </div>

web/lib/firebase/users.ts

@@ -160,12 +160,12 @@ export function listenForPrivateUsers(
 const topTradersQuery = query(
   collection(db, 'users'),
   orderBy('totalPnLCached', 'desc'),
-  limit(21)
+  limit(51)
 )
 
 export async function getTopTraders() {
   const users = await getValues<User>(topTradersQuery)
-  return users.slice(0, 20)
+  return users.slice(0, 50)
 }
 
 const topCreatorsQuery = query(

web/pages/leaderboards.tsx

@@ -98,7 +98,6 @@ function Explanation() {
 // [ ] Correctly calculate tax
 // [ ] List history of purchases at the bottom
 // [ ] Restrict to at most buying one slot per user?
-// [ ] Set to 50 top traders
 // [ ] Deduct amount from user's balance, either in UX or for real
 export default function Manaboards(props: {
   topTraders: User[]