Prevent buying slots when fake balance is low

web/components/manaboard.tsx

@@ -10,6 +10,8 @@ import {
   Transaction,
   writeTransaction,
 } from '../lib/firebase/transactions'
+import { loadFakeBalance } from '../pages/leaderboards'
+import { AddFundsButton } from './add-funds-button'
 import { AmountInput } from './amount-input'
 import { Avatar } from './avatar'
 import { Col } from './layout/col'
@@ -150,6 +152,10 @@ export function BuySlotModal(props: {
     }
   }
 
+  const fakeBalance = loadFakeBalance()
+  const noFundsMsg =
+    value > fakeBalance ? `You only have ${formatMoney(fakeBalance)}!` : ''
+
   return (
     <>
       <Modal open={open} setOpen={setOpen}>
@@ -183,12 +189,23 @@ export function BuySlotModal(props: {
             label={ENV_CONFIG.moneyMoniker}
           />
 
-          <button className="btn btn-primary" onClick={onBuy}>
+          {noFundsMsg ? (
-            Buy Slot ({formatMoney(value)})
+            <div className="alert alert-error">
-          </button>
+              {noFundsMsg}{' '}
-          <div className="-mt-2 text-sm">
+              <span className="!text-gray-600">
-            Additional fees: {formatMoney(newValue * 0.25)} per hour
+                <AddFundsButton />
-          </div>
+              </span>
+            </div>
+          ) : (
+            <Col>
+              <button className="btn btn-primary" onClick={onBuy}>
+                Buy Slot ({formatMoney(value)})
+              </button>
+              <div className="mt-2 text-sm">
+                Additional fees: {formatMoney(newValue * 0.25)} per hour
+              </div>
+            </Col>
+          )}
         </Col>
       </Modal>
       <button

web/pages/leaderboards.tsx

@@ -234,8 +234,11 @@ export function saveFakeBalance(profit: number) {
 }
 
 export function loadFakeBalance() {
-  const profit = localStorage.getItem(FAKE_BALANCE_KEY)
+  if (typeof window !== 'undefined') {
-  return profit ? JSON.parse(profit) : 0
+    const profit = localStorage.getItem(FAKE_BALANCE_KEY)
+    return profit ? JSON.parse(profit) : 0
+  }
+  return 0
 }
 
 function TransactionsTable(props: { txns: Transaction[] }) {