bet panel: use new calculations

web/components/bet-panel.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { useUser } from '../hooks/use-user'
-import { Contract } from '../../common/contract'
+import { Binary, CPMM, DPM, FullContract } from '../../common/contract'
 import { Col } from './layout/col'
 import { Row } from './layout/row'
 import { Spacer } from './layout/spacer'
@@ -13,31 +13,22 @@ import {
   formatWithCommas,
 } from '../../common/util/format'
 import { Title } from './title'
-import {
-  getDpmProbability,
-  calculateDpmShares,
-  getDpmProbabilityAfterBet,
-  calculateDpmPayoutAfterCorrectBet,
-} from '../../common/calculate-dpm'
 import { firebaseLogin } from '../lib/firebase/users'
 import { Bet } from '../../common/bet'
 import { placeBet } from '../lib/firebase/api-call'
 import { AmountInput } from './amount-input'
 import { InfoTooltip } from './info-tooltip'
 import { OutcomeLabel } from './outcome-label'
-
-// Focus helper from https://stackoverflow.com/a/54159564/1222351
-function useFocus(): [React.RefObject<HTMLElement>, () => void] {
-  const htmlElRef = useRef<HTMLElement>(null)
-  const setFocus = () => {
-    htmlElRef.current && htmlElRef.current.focus()
-  }
-
-  return [htmlElRef, setFocus]
-}
+import {
+  calculatePayoutAfterCorrectBet,
+  calculateShares,
+  getProbability,
+  getProbabilityAfterBet,
+} from '../../common/calculate'
+import { useFocus } from '../hooks/use-focus'
 
 export function BetPanel(props: {
-  contract: Contract
+  contract: FullContract<DPM | CPMM, Binary>
   className?: string
   title?: string // Set if BetPanel is on a feed modal
   selected?: 'YES' | 'NO'
@@ -49,7 +40,6 @@ export function BetPanel(props: {
   }, [])
 
   const { contract, className, title, selected, onBetSuccess } = props
-  const { totalShares, phantomShares } = contract
 
   const user = useUser()
 
@@ -107,23 +97,19 @@ export function BetPanel(props: {
 
   const betDisabled = isSubmitting || !betAmount || error
 
-  const initialProb = getDpmProbability(contract.totalShares)
+  const initialProb = getProbability(contract)
 
-  const outcomeProb = getDpmProbabilityAfterBet(
-    contract.totalShares,
+  const outcomeProb = getProbabilityAfterBet(
+    contract,
     betChoice || 'YES',
     betAmount ?? 0
   )
   const resultProb = betChoice === 'NO' ? 1 - outcomeProb : outcomeProb
 
-  const shares = calculateDpmShares(
-    contract.totalShares,
-    betAmount ?? 0,
-    betChoice || 'YES'
-  )
+  const shares = calculateShares(contract, betAmount ?? 0, betChoice || 'YES')
 
   const currentPayout = betAmount
-    ? calculateDpmPayoutAfterCorrectBet(contract, {
+    ? calculatePayoutAfterCorrectBet(contract, {
         outcome: betChoice,
         amount: betAmount,
         shares,
@@ -132,11 +118,23 @@ export function BetPanel(props: {
 
   const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0
   const currentReturnPercent = (currentReturn * 100).toFixed() + '%'
+
   const panelTitle = title ?? 'Place a trade'
   if (title) {
     focusAmountInput()
   }
 
+  const tooltip =
+    contract.mechanism === 'dpm-2'
+      ? `Current payout for ${formatWithCommas(shares)} / ${formatWithCommas(
+          shares +
+            contract.totalShares[betChoice ?? 'YES'] -
+            (contract.phantomShares
+              ? contract.phantomShares[betChoice ?? 'YES']
+              : 0)
+        )} ${betChoice} shares`
+      : undefined
+
   return (
     <Col className={clsx('rounded-md bg-white px-8 py-6', className)}>
       <Title
@@ -177,15 +175,8 @@ export function BetPanel(props: {
             <div>
               Payout if <OutcomeLabel outcome={betChoice ?? 'YES'} />
             </div>
-            <InfoTooltip
-              text={`Current payout for ${formatWithCommas(
-                shares
-              )} / ${formatWithCommas(
-                shares +
-                  totalShares[betChoice ?? 'YES'] -
-                  (phantomShares ? phantomShares[betChoice ?? 'YES'] : 0)
-              )} ${betChoice} shares`}
-            />
+
+            {tooltip && <InfoTooltip text={tooltip} />}
           </Row>
           <Row className="flex-wrap justify-end items-end gap-2">
             <span className="whitespace-nowrap">