import { LimitBet } from 'common/bet'
import { CPMMBinaryContract, PseudoNumericContract } from 'common/contract'
import { getFormattedMappedValue } from 'common/pseudo-numeric'
import { formatMoney, formatPercent } from 'common/util/format'
import { sortBy } from 'lodash'
import { useState } from 'react'
import { useUser, useUserById } from 'web/hooks/use-user'
import { cancelBet } from 'web/lib/firebase/api'
import { Avatar } from './avatar'
import { Button } from './button'
import { Col } from './layout/col'
import { Modal } from './layout/modal'
import { Row } from './layout/row'
import { LoadingIndicator } from './loading-indicator'
import { BinaryOutcomeLabel, PseudoNumericOutcomeLabel } from './outcome-label'
import { Subtitle } from './subtitle'
import { Title } from './title'
export function LimitBets(props: {
contract: CPMMBinaryContract | PseudoNumericContract
bets: LimitBet[]
className?: string
}) {
const { contract, bets, className } = props
const sortedBets = sortBy(
bets,
(bet) => -1 * bet.limitProb,
(bet) => -1 * bet.createdTime
)
const user = useUser()
const yourBets = sortedBets.filter((bet) => bet.userId === user?.id)
return (
{yourBets.length === 0 && (
)}
{yourBets.length > 0 && (
)}
)
}
export function LimitOrderTable(props: {
limitBets: LimitBet[]
contract: CPMMBinaryContract | PseudoNumericContract
isYou: boolean
}) {
const { limitBets, contract, isYou } = props
const isPseudoNumeric = contract.outcomeType === 'PSEUDO_NUMERIC'
return (
{!isYou && | }
Outcome |
Amount |
{isPseudoNumeric ? 'Value' : 'Prob'} |
{isYou && | }
{limitBets.map((bet) => (
))}
)
}
function LimitBet(props: {
contract: CPMMBinaryContract | PseudoNumericContract
bet: LimitBet
isYou: boolean
}) {
const { contract, bet, isYou } = props
const { orderAmount, amount, limitProb, outcome } = bet
const isPseudoNumeric = contract.outcomeType === 'PSEUDO_NUMERIC'
const [isCancelling, setIsCancelling] = useState(false)
const onCancel = () => {
cancelBet({ betId: bet.id })
setIsCancelling(true)
}
const user = useUserById(bet.userId)
return (
{!isYou && (
|
)}
{isPseudoNumeric ? (
) : (
)}
|
{formatMoney(orderAmount - amount)} |
{isPseudoNumeric
? getFormattedMappedValue(contract)(limitProb)
: formatPercent(limitProb)}
|
{isYou && (
{isCancelling ? (
) : (
)}
|
)}
)
}
export function OrderBookButton(props: {
limitBets: LimitBet[]
contract: CPMMBinaryContract | PseudoNumericContract
className?: string
}) {
const { limitBets, contract, className } = props
const [open, setOpen] = useState(false)
const yesBets = limitBets.filter((bet) => bet.outcome === 'YES')
const noBets = limitBets.filter((bet) => bet.outcome === 'NO').reverse()
return (
<>
>
)
}