Show error if low limit is higher than high limit

This commit is contained in:
James Grugett 2022-07-20 16:50:02 -05:00
parent a945b2310c
commit 90f3204dbf

View File

@ -423,13 +423,18 @@ function RangeOrderPanel(props: {
const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitting, setIsSubmitting] = useState(false)
const [wasSubmitted, setWasSubmitted] = useState(false) const [wasSubmitted, setWasSubmitted] = useState(false)
const rangeError =
lowLimitProb !== undefined &&
highLimitProb !== undefined &&
lowLimitProb >= highLimitProb
function onBetChange(newAmount: number | undefined) { function onBetChange(newAmount: number | undefined) {
setWasSubmitted(false) setWasSubmitted(false)
setBetAmount(newAmount) setBetAmount(newAmount)
} }
async function submitBet() { async function submitBet() {
if (!user || !betAmount) return if (!user || !betAmount || rangeError) return
const limitProbScaled = const limitProbScaled =
lowLimitProb !== undefined ? lowLimitProb / 100 : undefined lowLimitProb !== undefined ? lowLimitProb / 100 : undefined
@ -474,7 +479,7 @@ function RangeOrderPanel(props: {
}) })
} }
const betDisabled = isSubmitting || !betAmount || error const betDisabled = isSubmitting || !betAmount || rangeError || error
const lowProbFrac = (lowLimitProb ?? initialProb * 100) / 100 const lowProbFrac = (lowLimitProb ?? initialProb * 100) / 100
const { const {
@ -507,8 +512,8 @@ function RangeOrderPanel(props: {
return ( return (
<> <>
<div className="my-3 text-sm text-gray-500"> <div className="my-3 text-sm text-gray-500">
Trigger when the {isPseudoNumeric ? 'value' : 'probability'} reaches low Bet only when the {isPseudoNumeric ? 'value' : 'probability'} reaches
or high limit. low or high limit.
</div> </div>
<Row className="items-center gap-4"> <Row className="items-center gap-4">
@ -534,6 +539,12 @@ function RangeOrderPanel(props: {
</Col> </Col>
</Row> </Row>
{rangeError && (
<div className="mb-2 mr-auto self-center whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
Low limit must be less than high limit
</div>
)}
<div className="my-3 text-left text-sm text-gray-500"> <div className="my-3 text-left text-sm text-gray-500">
Max amount<span className="ml-1 text-red-500">*</span> Max amount<span className="ml-1 text-red-500">*</span>
</div> </div>