fix bucketing

web/components/amount-input.tsx

@@ -139,59 +139,6 @@ export function BuyAmountInput(props: {
   )
 }
 
-export function BucketAmountInput(props: {
-  bucket: number | undefined
-  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,
-    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 < min || bucket > max) {
-        setError(`Enter a number between ${min} and ${max}`)
-      } 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

@@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import { useState } from 'react'
+
 import { Bet } from '../../common/bet'
 import {
   getOutcomeProbabilityAfterBet,
@@ -7,16 +8,17 @@ import {
   calculatePayoutAfterCorrectBet,
   getOutcomeProbability,
 } from '../../common/calculate'
-import { getMappedBucket, getNumericBets } from '../../common/calculate-dpm'
+import { getNumericBets } from '../../common/calculate-dpm'
 import { NumericContract } from '../../common/contract'
 import { formatPercent, formatMoney } from '../../common/util/format'
 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 { BuyAmountInput } from './amount-input'
 import { Col } from './layout/col'
 import { Row } from './layout/row'
 import { Spacer } from './layout/spacer'
+import { NumberInput } from './number-input'
 
 export function NumericBetPanel(props: {
   contract: NumericContract
@@ -49,21 +51,21 @@ function NumericBuyPanel(props: {
   onBuySuccess?: () => void
 }) {
   const { contract, user, onBuySuccess } = props
-  const { min, max } = contract
+  const { min, max, bucketCount } = contract
 
-  const [bucket, setBucketChoice] = useState<number | undefined>(undefined)
-  const bucketChoice =
-    bucket === undefined ? undefined : `${getMappedBucket(bucket, contract)}`
+  const [numberString, setNumberString] = useState('')
   const [betAmount, setBetAmount] = useState<number | undefined>(undefined)
+
   const [valueError, setValueError] = useState<string | undefined>()
   const [error, setError] = useState<string | undefined>()
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [wasSubmitted, setWasSubmitted] = useState(false)
 
-  function onBucketChange(newBucket: number | undefined) {
-    setBucketChoice(newBucket)
-    setWasSubmitted(false)
-  }
+  const value = parseFloat(numberString)
+  const index = Math.floor(((value - min) / (max - min)) * bucketCount)
+  const bucket = Math.max(Math.min(index, bucketCount - 1), 0)
+  const bucketChoice = `${bucket}`
+  console.log('value', value, 'bucket', bucket, 'min', min, 'max', max)
 
   function onBetChange(newAmount: number | undefined) {
     setWasSubmitted(false)
@@ -71,9 +73,7 @@ function NumericBuyPanel(props: {
   }
 
   async function submitBet() {
-    if (!user || !betAmount || bucket === undefined) return
-
-    const bucketChoice = getMappedBucket(bucket, contract)
+    if (!user || !betAmount || !isFinite(bucket)) return
 
     setError(undefined)
     setIsSubmitting(true)
@@ -134,15 +134,13 @@ function NumericBuyPanel(props: {
       <div className="my-3 text-left text-sm text-gray-500">
         Predicted value
       </div>
-      <BucketAmountInput
-        bucket={bucket}
-        min={min}
-        max={max}
+      <NumberInput
         inputClassName="w-full max-w-none"
-        onChange={onBucketChange}
+        onChange={setNumberString}
         error={valueError}
-        setError={setValueError}
         disabled={isSubmitting}
+        numberString={numberString}
+        label="Value"
       />
 
       <div className="my-3 text-left text-sm text-gray-500">Bet amount</div>