Outline of numeric bet panel

web/components/amount-input.tsx

@@ -139,6 +139,61 @@ export function BuyAmountInput(props: {
   )
 }
 
+export function BucketAmountInput(props: {
+  bucket: number | undefined
+  bucketCount: number
+  min: number
+  max: number
+  onChange: (newBucket: number | undefined) => void
+  error: string | undefined
+  setError: (error: string | undefined) => void
+  disabled?: boolean
+  className?: string
+  inputClassName?: string
+  // Needed to focus the amount input
+  inputRef?: React.MutableRefObject<any>
+}) {
+  const {
+    bucket,
+    bucketCount,
+    min,
+    max,
+    onChange,
+    error,
+    setError,
+    disabled,
+    className,
+    inputClassName,
+    inputRef,
+  } = props
+
+  const onBucketChange = (bucket: number | undefined) => {
+    onChange(bucket)
+
+    // Check for errors.
+    if (bucket !== undefined) {
+      if (bucket < 0 || bucket >= bucketCount) {
+        setError('Enter a number between 0 and ' + (bucketCount - 1))
+      } else {
+        setError(undefined)
+      }
+    }
+  }
+
+  return (
+    <AmountInput
+      amount={bucket}
+      onChange={onBucketChange}
+      label="Value"
+      error={error}
+      disabled={disabled}
+      className={className}
+      inputClassName={inputClassName}
+      inputRef={inputRef}
+    />
+  )
+}
+
 export function SellAmountInput(props: {
   contract: FullContract<CPMM, Binary>
   amount: number | undefined

web/components/numeric-bet-panel.tsx

@@ -0,0 +1,222 @@
+import clsx from 'clsx'
+import { useState, useEffect } from 'react'
+import { Bet } from '../../common/bet'
+import {
+  getOutcomeProbabilityAfterBet,
+  calculateShares,
+  calculatePayoutAfterCorrectBet,
+} from '../../common/calculate'
+import { NumericContract } from '../../common/contract'
+import {
+  formatPercent,
+  formatWithCommas,
+  formatMoney,
+} from '../../common/util/format'
+import { useFocus } from '../hooks/use-focus'
+import { useUser } from '../hooks/use-user'
+import { placeBet } from '../lib/firebase/api-call'
+import { firebaseLogin, User } from '../lib/firebase/users'
+import { BucketAmountInput, BuyAmountInput } from './amount-input'
+import { InfoTooltip } from './info-tooltip'
+import { Col } from './layout/col'
+import { Row } from './layout/row'
+import { Spacer } from './layout/spacer'
+
+export function NumericBetPanel(props: {
+  contract: NumericContract
+  className?: string
+}) {
+  const { contract, className } = props
+  const user = useUser()
+
+  return (
+    <Col className={clsx('rounded-md bg-white px-8 py-6', className)}>
+      <div className="mb-6 text-2xl">Place your bet</div>
+
+      <NumericBuyPanel contract={contract} user={user} />
+
+      {user === null && (
+        <button
+          className="btn flex-1 whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
+          onClick={firebaseLogin}
+        >
+          Sign up to trade!
+        </button>
+      )}
+    </Col>
+  )
+}
+
+function NumericBuyPanel(props: {
+  contract: NumericContract
+  user: User | null | undefined
+  onBuySuccess?: () => void
+}) {
+  const { contract, user, onBuySuccess } = props
+  const { bucketCount, min, max } = contract
+
+  const [bucketChoice, setBucketChoice] = useState<string | undefined>(
+    undefined
+  )
+  const [betAmount, setBetAmount] = useState<number | undefined>(undefined)
+  const [error, setError] = useState<string | undefined>()
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [wasSubmitted, setWasSubmitted] = useState(false)
+
+  const [inputRef, focusAmountInput] = useFocus()
+
+  useEffect(() => {
+    focusAmountInput()
+  }, [focusAmountInput])
+
+  function onBetChange(newAmount: number | undefined) {
+    setWasSubmitted(false)
+    setBetAmount(newAmount)
+  }
+
+  async function submitBet() {
+    if (!user || !betAmount) return
+
+    setError(undefined)
+    setIsSubmitting(true)
+
+    const result = await placeBet({
+      amount: betAmount,
+      outcome: bucketChoice,
+      contractId: contract.id,
+    }).then((r) => r.data as any)
+
+    console.log('placed bet. Result:', result)
+
+    if (result?.status === 'success') {
+      setIsSubmitting(false)
+      setWasSubmitted(true)
+      setBetAmount(undefined)
+      if (onBuySuccess) onBuySuccess()
+    } else {
+      setError(result?.message || 'Error placing bet')
+      setIsSubmitting(false)
+    }
+  }
+
+  const betDisabled = isSubmitting || !betAmount || error
+
+  const initialProb = 0
+  const outcomeProb = getOutcomeProbabilityAfterBet(
+    contract,
+    bucketChoice || 'YES',
+    betAmount ?? 0
+  )
+  const resultProb = bucketChoice === 'NO' ? 1 - outcomeProb : outcomeProb
+
+  const shares = calculateShares(
+    contract,
+    betAmount ?? 0,
+    bucketChoice || 'YES'
+  )
+
+  const currentPayout = betAmount
+    ? calculatePayoutAfterCorrectBet(contract, {
+        outcome: bucketChoice,
+        amount: betAmount,
+        shares,
+      } as Bet)
+    : 0
+
+  const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0
+  const currentReturnPercent = formatPercent(currentReturn)
+
+  const dpmTooltip =
+    contract.mechanism === 'dpm-2'
+      ? `Current payout for ${formatWithCommas(shares)} / ${formatWithCommas(
+          shares +
+            contract.totalShares[bucketChoice ?? 'YES'] -
+            (contract.phantomShares
+              ? contract.phantomShares[bucketChoice ?? 'YES']
+              : 0)
+        )} ${bucketChoice ?? 'YES'} shares`
+      : undefined
+  return (
+    <>
+      <div className="my-3 text-left text-sm text-gray-500">Numeric value</div>
+      <BucketAmountInput
+        bucket={bucketChoice ? +bucketChoice : undefined}
+        bucketCount={bucketCount}
+        min={min}
+        max={max}
+        inputClassName="w-full max-w-none"
+        onChange={(bucket) => setBucketChoice(bucket ? `${bucket}` : undefined)}
+        error={error}
+        setError={setError}
+        disabled={isSubmitting}
+        inputRef={inputRef}
+      />
+
+      <div className="my-3 text-left text-sm text-gray-500">Amount</div>
+      <BuyAmountInput
+        inputClassName="w-full max-w-none"
+        amount={betAmount}
+        onChange={onBetChange}
+        error={error}
+        setError={setError}
+        disabled={isSubmitting}
+        inputRef={inputRef}
+      />
+
+      <Col className="mt-3 w-full gap-3">
+        <Row className="items-center justify-between text-sm">
+          <div className="text-gray-500">Probability</div>
+          <Row>
+            <div>{formatPercent(initialProb)}</div>
+            <div className="mx-2">→</div>
+            <div>{formatPercent(resultProb)}</div>
+          </Row>
+        </Row>
+
+        <Row className="items-center justify-between gap-2 text-sm">
+          <Row className="flex-nowrap items-center gap-2 whitespace-nowrap text-gray-500">
+            <div>
+              {contract.mechanism === 'dpm-2' ? (
+                <>
+                  Estimated
+                  <br /> payout if correct
+                </>
+              ) : (
+                <>Payout if correct</>
+              )}
+            </div>
+
+            {dpmTooltip && <InfoTooltip text={dpmTooltip} />}
+          </Row>
+          <Row className="flex-wrap items-end justify-end gap-2">
+            <span className="whitespace-nowrap">
+              {formatMoney(currentPayout)}
+            </span>
+            <span>(+{currentReturnPercent})</span>
+          </Row>
+        </Row>
+      </Col>
+
+      <Spacer h={8} />
+
+      {user && (
+        <button
+          className={clsx(
+            'btn flex-1',
+            betDisabled
+              ? 'btn-disabled'
+              : bucketChoice === 'YES'
+              ? 'btn-primary'
+              : 'border-none bg-red-400 hover:bg-red-500',
+            isSubmitting ? 'loading' : ''
+          )}
+          onClick={betDisabled ? undefined : submitBet}
+        >
+          {isSubmitting ? 'Submitting...' : 'Submit bet'}
+        </button>
+      )}
+
+      {wasSubmitted && <div className="mt-4">Bet submitted!</div>}
+    </>
+  )
+}

web/pages/[username]/[contractSlug].tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { ArrowLeftIcon } from '@heroicons/react/outline'
+import _ from 'lodash'
 
 import { useContractWithPreload } from '../../hooks/use-contract'
 import { ContractOverview } from '../../components/contract/contract-overview'
@@ -24,17 +25,23 @@ import Custom404 from '../404'
 import { AnswersPanel } from '../../components/answers/answers-panel'
 import { fromPropz, usePropz } from '../../hooks/use-propz'
 import { Leaderboard } from '../../components/leaderboard'
-import _ from 'lodash'
 import { resolvedPayout } from '../../../common/calculate'
 import { formatMoney } from '../../../common/util/format'
 import { FeedBet, FeedComment } from '../../components/feed/feed-items'
 import { useUserById } from '../../hooks/use-users'
 import { ContractTabs } from '../../components/contract/contract-tabs'
 import { FirstArgument } from '../../../common/util/types'
-import { DPM, FreeResponse, FullContract } from '../../../common/contract'
+import {
+  BinaryContract,
+  DPM,
+  FreeResponse,
+  FullContract,
+  NumericContract,
+} from '../../../common/contract'
 import { contractTextDetails } from '../../components/contract/contract-details'
 import { useWindowSize } from '../../hooks/use-window-size'
 import Confetti from 'react-confetti'
+import { NumericBetPanel } from '../../components/numeric-bet-panel'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: {
@@ -116,18 +123,27 @@ export function ContractPageContent(props: FirstArgument<typeof ContractPage>) {
 
   const isCreator = user?.id === creatorId
   const isBinary = outcomeType === 'BINARY'
+  const isNumeric = outcomeType === 'NUMERIC'
   const allowTrade = tradingAllowed(contract)
   const allowResolve = !isResolved && isCreator && !!user
-  const hasSidePanel = isBinary && (allowTrade || allowResolve)
+  const hasSidePanel = (isBinary || isNumeric) && (allowTrade || allowResolve)
 
   const ogCardProps = getOpenGraphProps(contract)
 
   const rightSidebar = hasSidePanel ? (
     <Col className="gap-4">
-      {allowTrade && (
+      {allowTrade &&
+        (isNumeric ? (
+          <NumericBetPanel
+            className="hidden xl:flex"
+            contract={contract as NumericContract}
+          />
+        ) : (
           <BetPanel className="hidden xl:flex" contract={contract} />
+        ))}
+      {allowResolve && (
+        <ResolutionPanel creator={user} contract={contract as BinaryContract} />
       )}
-      {allowResolve && <ResolutionPanel creator={user} contract={contract} />}
     </Col>
   ) : null