129 lines
4.0 KiB
TypeScript
129 lines
4.0 KiB
TypeScript
import dayjs from 'dayjs'
|
|
import { Contract } from 'common/contract'
|
|
import { Bet } from 'common/bet'
|
|
import { useUser } from 'web/hooks/use-user'
|
|
import { Row } from 'web/components/layout/row'
|
|
import { Avatar, EmptyAvatar } from 'web/components/avatar'
|
|
import clsx from 'clsx'
|
|
import { formatMoney, formatPercent } from 'common/util/format'
|
|
import { OutcomeLabel } from 'web/components/outcome-label'
|
|
import { RelativeTimestamp } from 'web/components/relative-timestamp'
|
|
import React, { useEffect } from 'react'
|
|
import { formatNumericProbability } from 'common/pseudo-numeric'
|
|
import { SiteLink } from 'web/components/site-link'
|
|
import { getChallenge, getChallengeUrl } from 'web/lib/firebase/challenges'
|
|
import { Challenge } from 'common/challenge'
|
|
import { UserLink } from 'web/components/user-link'
|
|
import { BETTOR } from 'common/user'
|
|
|
|
export function FeedBet(props: { contract: Contract; bet: Bet }) {
|
|
const { contract, bet } = props
|
|
const { userAvatarUrl, userUsername, createdTime } = bet
|
|
const showUser = dayjs(createdTime).isAfter('2022-06-01')
|
|
|
|
return (
|
|
<Row className="items-center gap-2 pt-3">
|
|
{showUser ? (
|
|
<Avatar avatarUrl={userAvatarUrl} username={userUsername} />
|
|
) : (
|
|
<EmptyAvatar className="mx-1" />
|
|
)}
|
|
<BetStatusText
|
|
bet={bet}
|
|
contract={contract}
|
|
hideUser={!showUser}
|
|
className="flex-1"
|
|
/>
|
|
</Row>
|
|
)
|
|
}
|
|
|
|
export function BetStatusText(props: {
|
|
contract: Contract
|
|
bet: Bet
|
|
hideUser?: boolean
|
|
hideOutcome?: boolean
|
|
className?: string
|
|
}) {
|
|
const { bet, contract, hideUser, hideOutcome, className } = props
|
|
const { outcomeType } = contract
|
|
const self = useUser()
|
|
const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
|
|
const isFreeResponse = outcomeType === 'FREE_RESPONSE'
|
|
const { amount, outcome, createdTime, challengeSlug } = bet
|
|
const [challenge, setChallenge] = React.useState<Challenge>()
|
|
useEffect(() => {
|
|
if (challengeSlug) {
|
|
getChallenge(challengeSlug, contract.id).then((c) => {
|
|
setChallenge(c)
|
|
})
|
|
}
|
|
}, [challengeSlug, contract.id])
|
|
|
|
const bought = amount >= 0 ? 'bought' : 'sold'
|
|
const outOfTotalAmount =
|
|
bet.limitProb !== undefined && bet.orderAmount !== undefined
|
|
? ` / ${formatMoney(bet.orderAmount)}`
|
|
: ''
|
|
const money = formatMoney(Math.abs(amount))
|
|
|
|
const hadPoolMatch =
|
|
(bet.limitProb === undefined ||
|
|
bet.fills?.some((fill) => fill.matchedBetId === null)) ??
|
|
false
|
|
|
|
const fromProb =
|
|
hadPoolMatch || isFreeResponse
|
|
? isPseudoNumeric
|
|
? formatNumericProbability(bet.probBefore, contract)
|
|
: formatPercent(bet.probBefore)
|
|
: isPseudoNumeric
|
|
? formatNumericProbability(bet.limitProb ?? bet.probBefore, contract)
|
|
: formatPercent(bet.limitProb ?? bet.probBefore)
|
|
|
|
const toProb =
|
|
hadPoolMatch || isFreeResponse
|
|
? isPseudoNumeric
|
|
? formatNumericProbability(bet.probAfter, contract)
|
|
: formatPercent(bet.probAfter)
|
|
: isPseudoNumeric
|
|
? formatNumericProbability(bet.limitProb ?? bet.probAfter, contract)
|
|
: formatPercent(bet.limitProb ?? bet.probAfter)
|
|
|
|
return (
|
|
<div className={clsx('text-sm text-gray-500', className)}>
|
|
{!hideUser ? (
|
|
<UserLink name={bet.userName} username={bet.userUsername} />
|
|
) : (
|
|
<span>{self?.id === bet.userId ? 'You' : `A ${BETTOR}`}</span>
|
|
)}{' '}
|
|
{bought} {money}
|
|
{outOfTotalAmount}
|
|
{!hideOutcome && (
|
|
<>
|
|
{' '}
|
|
of{' '}
|
|
<OutcomeLabel
|
|
outcome={outcome}
|
|
value={(bet as any).value}
|
|
contract={contract}
|
|
truncate="short"
|
|
/>{' '}
|
|
{fromProb === toProb
|
|
? `at ${fromProb}`
|
|
: `from ${fromProb} to ${toProb}`}
|
|
{challengeSlug && (
|
|
<SiteLink
|
|
href={challenge ? getChallengeUrl(challenge) : ''}
|
|
className={'mx-1'}
|
|
>
|
|
[challenge]
|
|
</SiteLink>
|
|
)}
|
|
</>
|
|
)}
|
|
<RelativeTimestamp time={createdTime} />
|
|
</div>
|
|
)
|
|
}
|