Add volume calculation. Remove new bet button that was unnecessary.

web/components/bet-panel.tsx

@@ -21,6 +21,11 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [wasSubmitted, setWasSubmitted] = useState(false)
 
+  function onBetChoice(choice: 'YES' | 'NO') {
+    setBetChoice(choice)
+    setWasSubmitted(false)
+  }
+
   function onBetChange(str: string) {
     const amount = parseInt(str)
     setBetAmount(isNaN(amount) ? undefined : amount)
@@ -44,11 +49,6 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
     setWasSubmitted(true)
   }
 
-  function newBet() {
-    setBetAmount(undefined)
-    setWasSubmitted(false)
-  }
-
   const betDisabled = isSubmitting || wasSubmitted
 
   const initialProb = getProbability(contract.pot, betChoice)
@@ -72,7 +72,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
       <YesNoSelector
         className="p-2"
         selected={betChoice}
-        onSelect={setBetChoice}
+        onSelect={choice => onBetChoice(choice)}
       />
 
       <Spacer h={4} />
@@ -128,19 +128,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
         Place bet
       </button>
 
-      {wasSubmitted && (
-        <Col>
-          <Spacer h={4} />
-
-          <div>Bet submitted!</div>
-
-          <Spacer h={4} />
-
-          <button className="btn btn-accent btn-xs" onClick={newBet}>
-            New bet
-          </button>
-        </Col>
-      )}
+      {wasSubmitted && <div className="mt-4">Bet submitted!</div>}
     </Col>
   )
 }

web/components/contract-overview.tsx

@@ -14,6 +14,7 @@ import { Contract } from '../lib/firebase/contracts'
 import { Col } from './layout/col'
 import { Row } from './layout/row'
 import { Spacer } from './layout/spacer'
+import { formatWithCommas } from '../lib/util/format'
 
 // Auto import doesn't work for some reason...
 // So we manually register ChartJS components instead:
@@ -39,6 +40,9 @@ const chartData = {
 
 export const ContractOverview = (props: { contract: Contract }) => {
   const { contract } = props
+  const { pot, seedAmounts } = contract
+
+  const volume = pot.YES + pot.NO - seedAmounts.YES - seedAmounts.NO
 
   return (
     <Col className="max-w-3xl w-full">
@@ -49,7 +53,7 @@ export const ContractOverview = (props: { contract: Contract }) => {
         <div className="py-2">•</div>
         <div className="p-2 whitespace-nowrap">Dec 9</div>
         <div className="py-2">•</div>
-        <div className="p-2 whitespace-nowrap">200,000 volume</div>
+        <div className="p-2 whitespace-nowrap">{formatWithCommas(volume)} volume</div>
       </Row>
 
       <Spacer h={4} />

web/lib/util/format.ts

@@ -4,6 +4,10 @@ const formatter = new Intl.NumberFormat('en-US', {
   maximumFractionDigits: 0,
 })
 
-export const formatMoney = (amount: number) => {
+export function formatMoney(amount: number) {
   return 'M$ ' + formatter.format(amount).substr(1)
 }
+
+export function formatWithCommas(amount: number) {
+  return formatter.format(amount).substr(1)
+}