Store values as well

web/components/manaboard.tsx

@@ -17,10 +17,11 @@ import { Title } from './title'
 export function Manaboard(props: {
   title: string
   users: User[]
+  values: number[]
   className?: string
 }) {
   // TODO: Ideally, highlight your own entry on the leaderboard
-  const { title, users, className } = props
+  const { title, users, className, values } = props
   return (
     <div className={clsx('w-full px-1', className)}>
       <Title text={title} className="!mt-0" />
@@ -53,12 +54,12 @@ export function Manaboard(props: {
                   </td>
                   <td>
                     <Row className="items-center gap-4">
-                      {formatMoney(100 - 5 * index)}
+                      {formatMoney(values[index])}
                       <BuySlotModal
                         slot={index + 1}
                         title={`${title}`}
                         holder={user}
-                        value={100 - 5 * index}
+                        value={values[index]}
                       />
                     </Row>
                   </td>
@@ -138,7 +139,14 @@ export function BuySlotModal(props: {
             className="btn btn-primary"
             onClick={() => {
               if (user) {
-                buySlot({ holder, buyer: user, amount: value, slot, message })
+                buySlot({
+                  holder,
+                  buyer: user,
+                  amount: value,
+                  slot,
+                  message,
+                  newValue,
+                })
                 setOpen(false)
               }
             }}
@@ -166,8 +174,9 @@ async function buySlot(options: {
   amount: number
   slot: number
   message: string
+  newValue: number
 }) {
-  const { holder, buyer, amount, slot, message } = options
+  const { holder, buyer, amount, slot, message, newValue } = options
   const createdTime = Date.now()
   const buyTransaction: Transaction = {
     id: '',
@@ -190,6 +199,7 @@ async function buySlot(options: {
     data: {
       slot,
       message,
+      newValue,
     },
   }
 

web/lib/firebase/transactions.ts

@@ -25,12 +25,13 @@ export type Transaction = {
   data?: SlotData | TaxData
 }
 
-type SlotData = {
+export type SlotData = {
   slot: number
+  newValue: number
   message: string
 }
 
-type TaxData = {
+export type TaxData = {
   slot: number
 }
 

web/pages/leaderboards.tsx

@@ -9,7 +9,7 @@ import { fromPropz, usePropz } from '../hooks/use-propz'
 import { Manaboard } from '../components/manaboard'
 import { Title } from '../components/title'
 import { useTransactions } from '../hooks/use-transactions'
-import { Transaction } from '../lib/firebase/transactions'
+import { SlotData, Transaction } from '../lib/firebase/transactions'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz() {
@@ -110,6 +110,10 @@ export default function Manaboards(props: {
   }
   const { topTraders, topCreators } = props
 
+  const values = Array.from(Array(topTraders.length).keys())
+    .map((i) => i + 1)
+    .reverse()
+
   // Find the most recent purchases of each slot, and replace the entries in topTraders
   const transactions = useTransactions() ?? []
   // Iterate from oldest to newest transactions, so recent purchases overwrite older ones
@@ -117,13 +121,13 @@ export default function Manaboards(props: {
   for (const txn of sortedTxns) {
     if (txn.category === 'BUY_LEADERBOARD_SLOT') {
       const buyer = userFromBuy(txn)
-      const slot = txn.data?.slot ?? 0
+      const data = txn.data as SlotData
+      const slot = data.slot
       topTraders[slot - 1] = buyer
+      values[slot - 1] = data.newValue
     }
   }
 
-  console.log('sorted txn', sortedTxns)
-
   function userFromBuy(txn: Transaction): User {
     return {
       id: txn.fromId,
@@ -159,7 +163,7 @@ export default function Manaboards(props: {
       </div>
 
       <Col className="mt-6 items-center gap-10">
-        <Manaboard title="" users={topTraders} />
+        <Manaboard title="" users={topTraders} values={values} />
         {/* <Manaboard title="🏅 Top creators" users={topCreators} /> */}
       </Col>
     </Page>