Outline of numeric bet panel
This commit is contained in:
parent
00bc8d6068
commit
91990f524f
|
@ -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: {
|
export function SellAmountInput(props: {
|
||||||
contract: FullContract<CPMM, Binary>
|
contract: FullContract<CPMM, Binary>
|
||||||
amount: number | undefined
|
amount: number | undefined
|
||||||
|
|
222
web/components/numeric-bet-panel.tsx
Normal file
222
web/components/numeric-bet-panel.tsx
Normal file
|
@ -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>}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
|
@ -1,5 +1,6 @@
|
||||||
import React, { useEffect, useState } from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
import { ArrowLeftIcon } from '@heroicons/react/outline'
|
import { ArrowLeftIcon } from '@heroicons/react/outline'
|
||||||
|
import _ from 'lodash'
|
||||||
|
|
||||||
import { useContractWithPreload } from '../../hooks/use-contract'
|
import { useContractWithPreload } from '../../hooks/use-contract'
|
||||||
import { ContractOverview } from '../../components/contract/contract-overview'
|
import { ContractOverview } from '../../components/contract/contract-overview'
|
||||||
|
@ -24,17 +25,23 @@ import Custom404 from '../404'
|
||||||
import { AnswersPanel } from '../../components/answers/answers-panel'
|
import { AnswersPanel } from '../../components/answers/answers-panel'
|
||||||
import { fromPropz, usePropz } from '../../hooks/use-propz'
|
import { fromPropz, usePropz } from '../../hooks/use-propz'
|
||||||
import { Leaderboard } from '../../components/leaderboard'
|
import { Leaderboard } from '../../components/leaderboard'
|
||||||
import _ from 'lodash'
|
|
||||||
import { resolvedPayout } from '../../../common/calculate'
|
import { resolvedPayout } from '../../../common/calculate'
|
||||||
import { formatMoney } from '../../../common/util/format'
|
import { formatMoney } from '../../../common/util/format'
|
||||||
import { FeedBet, FeedComment } from '../../components/feed/feed-items'
|
import { FeedBet, FeedComment } from '../../components/feed/feed-items'
|
||||||
import { useUserById } from '../../hooks/use-users'
|
import { useUserById } from '../../hooks/use-users'
|
||||||
import { ContractTabs } from '../../components/contract/contract-tabs'
|
import { ContractTabs } from '../../components/contract/contract-tabs'
|
||||||
import { FirstArgument } from '../../../common/util/types'
|
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 { contractTextDetails } from '../../components/contract/contract-details'
|
||||||
import { useWindowSize } from '../../hooks/use-window-size'
|
import { useWindowSize } from '../../hooks/use-window-size'
|
||||||
import Confetti from 'react-confetti'
|
import Confetti from 'react-confetti'
|
||||||
|
import { NumericBetPanel } from '../../components/numeric-bet-panel'
|
||||||
|
|
||||||
export const getStaticProps = fromPropz(getStaticPropz)
|
export const getStaticProps = fromPropz(getStaticPropz)
|
||||||
export async function getStaticPropz(props: {
|
export async function getStaticPropz(props: {
|
||||||
|
@ -116,18 +123,27 @@ export function ContractPageContent(props: FirstArgument<typeof ContractPage>) {
|
||||||
|
|
||||||
const isCreator = user?.id === creatorId
|
const isCreator = user?.id === creatorId
|
||||||
const isBinary = outcomeType === 'BINARY'
|
const isBinary = outcomeType === 'BINARY'
|
||||||
|
const isNumeric = outcomeType === 'NUMERIC'
|
||||||
const allowTrade = tradingAllowed(contract)
|
const allowTrade = tradingAllowed(contract)
|
||||||
const allowResolve = !isResolved && isCreator && !!user
|
const allowResolve = !isResolved && isCreator && !!user
|
||||||
const hasSidePanel = isBinary && (allowTrade || allowResolve)
|
const hasSidePanel = (isBinary || isNumeric) && (allowTrade || allowResolve)
|
||||||
|
|
||||||
const ogCardProps = getOpenGraphProps(contract)
|
const ogCardProps = getOpenGraphProps(contract)
|
||||||
|
|
||||||
const rightSidebar = hasSidePanel ? (
|
const rightSidebar = hasSidePanel ? (
|
||||||
<Col className="gap-4">
|
<Col className="gap-4">
|
||||||
{allowTrade && (
|
{allowTrade &&
|
||||||
|
(isNumeric ? (
|
||||||
|
<NumericBetPanel
|
||||||
|
className="hidden xl:flex"
|
||||||
|
contract={contract as NumericContract}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
<BetPanel className="hidden xl:flex" contract={contract} />
|
<BetPanel className="hidden xl:flex" contract={contract} />
|
||||||
|
))}
|
||||||
|
{allowResolve && (
|
||||||
|
<ResolutionPanel creator={user} contract={contract as BinaryContract} />
|
||||||
)}
|
)}
|
||||||
{allowResolve && <ResolutionPanel creator={user} contract={contract} />}
|
|
||||||
</Col>
|
</Col>
|
||||||
) : null
|
) : null
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user