Simple bets list

web/components/bet-panel.tsx

@@ -8,7 +8,7 @@ import { Col } from './layout/col'
 import { Row } from './layout/row'
 import { Spacer } from './layout/spacer'
 import { YesNoSelector } from './yes-no-selector'
-import { formatMoney } from '../lib/util/format'
+import { formatMoney, formatPercent } from '../lib/util/format'
 import { Title } from './title'
 
 export function BetPanel(props: { contract: Contract; className?: string }) {
@@ -135,13 +135,9 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
 
       <div className="pt-2 pb-1 text-sm text-gray-500">Implied probability</div>
       <Row>
-        <div className="px-2 font-sans">
-          {Math.round(initialProb * 100) + '%'}
-        </div>
+        <div className="px-2 font-sans">{formatPercent(initialProb)}</div>
         <div>→</div>
-        <div className="px-2 font-sans">
-          {Math.round(resultProb * 100) + '%'}
-        </div>
+        <div className="px-2 font-sans">{formatPercent(resultProb)}</div>
       </Row>
 
       <Spacer h={2} />

web/components/bets-list.tsx

@@ -0,0 +1,84 @@
+import Link from 'next/link'
+import _ from 'lodash'
+import dayjs from 'dayjs'
+import { useContract } from '../hooks/use-contract'
+import { useUserBets } from '../hooks/use-user-bets'
+import { Bet } from '../lib/firebase/bets'
+import { User } from '../lib/firebase/users'
+import { formatMoney, formatPercent } from '../lib/util/format'
+import { Col } from './layout/col'
+import { ContractDetails } from './contracts-list'
+
+export function BetsList(props: { user: User }) {
+  const { user } = props
+  const bets = useUserBets(user?.id ?? '')
+
+  if (bets === 'loading') {
+    return <></>
+  }
+
+  if (bets.length === 0) return <div>You have not made any bets yet!</div>
+
+  const contractBets = _.groupBy(bets, 'contractId')
+
+  return (
+    <Col className='mt-6 gap-10'>
+      {Object.keys(contractBets).map((contractId) => (
+        <ContractBets
+          key={contractId}
+          contractId={contractId}
+          bets={contractBets[contractId]}
+        />
+      ))}
+    </Col>
+  )
+}
+
+function ContractBets(props: { contractId: string; bets: Bet[] }) {
+  const { contractId, bets } = props
+
+  const contract = useContract(contractId)
+  if (contract === 'loading' || contract === null) return <></>
+
+  return (
+    <div>
+      <p className="font-medium text-indigo-700 mb-2">{contract.question}</p>
+      <ContractDetails contract={contract} />
+      <ul role="list" className="grid grid-cols-2 gap-6 lg:grid-cols-4 mt-6">
+        {bets.map((bet) => (
+          <BetCard key={bet.id} bet={bet} />
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+function BetCard(props: { bet: Bet }) {
+  const { bet } = props
+  const { contractId, amount, outcome, createdTime, probBefore, probAfter } =
+    bet
+
+  return (
+    <Link href={`/contract/${contractId}`}>
+      <a>
+        <li className="col-span-1 bg-white hover:bg-gray-100 shadow-xl rounded-lg divide-y divide-gray-200">
+          <div className="card">
+            <div className="card-body p-6">
+              <Col className="gap-2">
+                <p className="font-medium text-gray-700">
+                  {formatMoney(amount)} on {outcome}
+                </p>
+                <p className="font-medium text-gray-500">
+                  {formatPercent(probBefore)} → {formatPercent(probAfter)}
+                </p>
+                <p className="font-medium text-gray-500">
+                  {dayjs(createdTime).format('MMM D, H:mma')}
+                </p>
+              </Col>
+            </div>
+          </div>
+        </li>
+      </a>
+    </Link>
+  )
+}

web/components/contracts-list.tsx

@@ -79,7 +79,7 @@ export function ContractsGrid(props: { contracts: Contract[] }) {
   return (
     <ul
       role="list"
-      className="grid grid-cols-1 gap-6 sm:grid-cols-1 lg:grid-cols-2"
+      className="grid grid-cols-1 gap-6 lg:grid-cols-2"
     >
       {contracts.map((contract) => (
         <ContractCard contract={contract} key={contract.id} />

web/lib/firebase/contracts.ts

@@ -42,7 +42,9 @@ export function compute(contract: Contract) {
   const prob = pot.YES ** 2 / (pot.YES ** 2 + pot.NO ** 2)
   const probPercent = Math.round(prob * 100) + '%'
   const createdDate = dayjs(createdTime).format('MMM D')
-  const resolvedDate = isResolved ? dayjs(resolutionTime).format('MMM D') : undefined
+  const resolvedDate = isResolved
+    ? dayjs(resolutionTime).format('MMM D')
+    : undefined
   return { volume, probPercent, createdDate, resolvedDate }
 }
 
@@ -85,10 +87,10 @@ export async function listAllContracts(): Promise<Contract[]> {
 
 export function listenForContract(
   contractId: string,
-  setContract: (contract: Contract) => void
+  setContract: (contract: Contract | null) => void
 ) {
   const contractRef = doc(contractCollection, contractId)
   return onSnapshot(contractRef, (contractSnap) => {
-    setContract(contractSnap.data() as Contract)
+    setContract((contractSnap.data() ?? null) as Contract | null)
   })
 }

web/lib/util/format.ts

@@ -6,9 +6,13 @@ const formatter = new Intl.NumberFormat('en-US', {
 })
 
 export function formatMoney(amount: number) {
-  return 'M$ ' + formatter.format(amount).substr(1)
+  return 'M$ ' + formatter.format(amount).substring(1)
 }
 
 export function formatWithCommas(amount: number) {
-  return formatter.format(amount).substr(1)
+  return formatter.format(amount).substring(1)
+}
+
+export function formatPercent(zeroToOne: number) {
+  return Math.round(zeroToOne * 100) + '%'
 }

web/package-lock.json

@@ -14,12 +14,14 @@
         "daisyui": "1.16.4",
         "dayjs": "1.10.7",
         "firebase": "9.6.0",
+        "lodash": "4.17.21",
         "next": "12.0.4",
         "react": "17.0.2",
         "react-dom": "17.0.2"
       },
       "devDependencies": {
         "@tailwindcss/forms": "0.4.0",
+        "@types/lodash": "^4.14.178",
         "@types/node": "16.11.11",
         "@types/react": "17.0.37",
         "autoprefixer": "10.2.6",
@@ -2280,6 +2282,12 @@
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.178",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.178.tgz",
+      "integrity": "sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==",
+      "dev": true
+    },
     "node_modules/@types/long": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
@@ -9929,6 +9937,12 @@
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
       "dev": true
     },
+    "@types/lodash": {
+      "version": "4.14.178",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.178.tgz",
+      "integrity": "sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==",
+      "dev": true
+    },
     "@types/long": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",

web/package.json

@@ -18,12 +18,14 @@
     "daisyui": "1.16.4",
     "dayjs": "1.10.7",
     "firebase": "9.6.0",
+    "lodash": "4.17.21",
     "next": "12.0.4",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },
   "devDependencies": {
     "@tailwindcss/forms": "0.4.0",
+    "@types/lodash": "^4.14.178",
     "@types/node": "16.11.11",
     "@types/react": "17.0.37",
     "autoprefixer": "10.2.6",

web/pages/account.tsx

@@ -5,6 +5,8 @@ import { ContractsList } from '../components/contracts-list'
 import { Title } from '../components/title'
 import { Row } from '../components/layout/row'
 import { formatMoney } from '../lib/util/format'
+import { BetsList } from '../components/bets-list'
+import { Spacer } from '../components/layout/spacer'
 
 function UserCard(props: { user: User }) {
   const { user } = props
@@ -72,8 +74,14 @@ export default function Account() {
         {user ? (
           <div>
             <UserCard user={user} />
+
             <Title className="px-2" text="Your markets" />
             <ContractsList />
+
+            <Spacer h={4} />
+
+            <Title className="px-2" text="Your bets" />
+            <BetsList user={user} />
           </div>
         ) : (
           <SignInCard />