Use min and max to map the input

common/calculate-dpm.ts

@@ -63,6 +63,13 @@ export function getNumericBets(
   return bets
 }
 
+export const getMappedBucket = (value: number, contract: NumericContract) => {
+  const { bucketCount, min, max } = contract
+  const cappedValue = Math.min(Math.max(min, value), max)
+  const mapped = Math.floor((bucketCount * (cappedValue - min)) / (max - min))
+  return `${mapped}`
+}
+
 export function getDpmOutcomeProbabilityAfterBet(
   totalShares: {
     [outcome: string]: number

web/components/amount-input.tsx

@@ -141,7 +141,6 @@ export function BuyAmountInput(props: {
 
 export function BucketAmountInput(props: {
   bucket: number | undefined
-  bucketCount: number
   min: number
   max: number
   onChange: (newBucket: number | undefined) => void
@@ -155,7 +154,6 @@ export function BucketAmountInput(props: {
 }) {
   const {
     bucket,
-    bucketCount,
     min,
     max,
     onChange,
@@ -172,8 +170,8 @@ export function BucketAmountInput(props: {
 
     // Check for errors.
     if (bucket !== undefined) {
-      if (bucket < 0 || bucket >= bucketCount) {
-        setError('Enter a number between 0 and ' + (bucketCount - 1))
+      if (bucket < min || bucket > max) {
+        setError(`Enter a number between ${min} and ${max}`)
       } else {
         setError(undefined)
       }

web/components/numeric-bet-panel.tsx

@@ -7,7 +7,7 @@ import {
   calculatePayoutAfterCorrectBet,
   getOutcomeProbability,
 } from '../../common/calculate'
-import { getNumericBets } from '../../common/calculate-dpm'
+import { getMappedBucket, getNumericBets } from '../../common/calculate-dpm'
 import { NumericContract } from '../../common/contract'
 import { formatPercent, formatMoney } from '../../common/util/format'
 import { useUser } from '../hooks/use-user'
@@ -49,20 +49,19 @@ function NumericBuyPanel(props: {
   onBuySuccess?: () => void
 }) {
   const { contract, user, onBuySuccess } = props
-  const { bucketCount, min, max } = contract
+  const { min, max } = contract
 
-  const [bucketChoice, setBucketChoice] = useState<string | undefined>(
-    undefined
-  )
+  const [bucket, setBucketChoice] = useState<number | undefined>(undefined)
+  const bucketChoice = bucket === undefined ? undefined : `${bucket}`
   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: string | undefined) {
-    setWasSubmitted(false)
+  function onBucketChange(newBucket: number | undefined) {
     setBucketChoice(newBucket)
+    setWasSubmitted(false)
   }
 
   function onBetChange(newAmount: number | undefined) {
@@ -71,7 +70,9 @@ function NumericBuyPanel(props: {
   }
 
   async function submitBet() {
-    if (!user || !betAmount || !bucketChoice) return
+    if (!user || !betAmount || bucket === undefined) return
+
+    const bucketChoice = getMappedBucket(bucket, contract)
 
     setError(undefined)
     setIsSubmitting(true)
@@ -132,11 +133,10 @@ function NumericBuyPanel(props: {
       <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) => onBucketChange(bucket ? `${bucket}` : undefined)}
+        onChange={onBucketChange}
         error={valueError}
         setError={setValueError}
         disabled={isSubmitting}

web/components/resolution-panel.tsx

@@ -19,6 +19,7 @@ import {
 } from '../../common/contract'
 import { formatMoney } from '../../common/util/format'
 import { BucketAmountInput } from './amount-input'
+import { getMappedBucket } from '../../common/calculate-dpm'
 
 export function ResolutionPanel(props: {
   creator: User
@@ -161,10 +162,16 @@ export function NumericResolutionPanel(props: {
   const resolve = async () => {
     if (!outcome) return
 
+    let outcomeChoice = outcome
+    if (outcome !== 'CANCEL') {
+      const bucket = getMappedBucket(+outcome, contract)
+      outcomeChoice = `${bucket}`
+    }
+
     setIsSubmitting(true)
 
     const result = await resolveMarket({
-      outcome: outcome,
+      outcome: outcomeChoice,
       contractId: contract.id,
     }).then((r) => r.data)
 
@@ -201,7 +208,6 @@ export function NumericResolutionPanel(props: {
         <>
           <BucketAmountInput
             bucket={outcome && outcome !== 'CANCEL' ? +outcome : undefined}
-            bucketCount={bucketCount}
             min={min}
             max={max}
             inputClassName="w-full max-w-none"