2022-06-09 04:03:03 +00:00
|
|
|
import dayjs from 'dayjs'
|
2022-05-18 14:42:13 +00:00
|
|
|
import { Contract } from 'common/contract'
|
|
|
|
import { Bet } from 'common/bet'
|
|
|
|
import { User } from 'common/user'
|
2022-06-09 04:03:03 +00:00
|
|
|
import { useUser, useUserById } from 'web/hooks/use-user'
|
2022-05-18 14:42:13 +00:00
|
|
|
import { Row } from 'web/components/layout/row'
|
2022-06-23 17:55:41 +00:00
|
|
|
import { Avatar, EmptyAvatar } from 'web/components/avatar'
|
2022-05-18 14:42:13 +00:00
|
|
|
import clsx from 'clsx'
|
|
|
|
import { UserIcon, UsersIcon } from '@heroicons/react/solid'
|
|
|
|
import { formatMoney } from 'common/util/format'
|
|
|
|
import { OutcomeLabel } from 'web/components/outcome-label'
|
|
|
|
import { RelativeTimestamp } from 'web/components/relative-timestamp'
|
|
|
|
import React, { Fragment } from 'react'
|
2022-05-22 08:36:05 +00:00
|
|
|
import { uniqBy, partition, sumBy, groupBy } from 'lodash'
|
2022-05-18 14:42:13 +00:00
|
|
|
import { JoinSpans } from 'web/components/join-spans'
|
2022-06-09 20:00:31 +00:00
|
|
|
import { UserLink } from '../user-page'
|
2022-05-18 14:42:13 +00:00
|
|
|
|
|
|
|
export function FeedBet(props: {
|
|
|
|
contract: Contract
|
|
|
|
bet: Bet
|
|
|
|
hideOutcome: boolean
|
|
|
|
smallAvatar: boolean
|
|
|
|
}) {
|
2022-06-09 04:03:03 +00:00
|
|
|
const { contract, bet, hideOutcome, smallAvatar } = props
|
|
|
|
const { userId, createdTime } = bet
|
|
|
|
|
|
|
|
const isBeforeJune2022 = dayjs(createdTime).isBefore('2022-06-01')
|
|
|
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
|
|
const bettor = isBeforeJune2022 ? undefined : useUserById(userId)
|
|
|
|
|
2022-05-18 14:42:13 +00:00
|
|
|
const user = useUser()
|
|
|
|
const isSelf = user?.id === userId
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Row className={'flex w-full gap-2 pt-3'}>
|
|
|
|
{isSelf ? (
|
|
|
|
<Avatar
|
|
|
|
className={clsx(smallAvatar && 'ml-1')}
|
|
|
|
size={smallAvatar ? 'sm' : undefined}
|
|
|
|
avatarUrl={user.avatarUrl}
|
|
|
|
username={user.username}
|
|
|
|
/>
|
|
|
|
) : bettor ? (
|
|
|
|
<Avatar
|
|
|
|
className={clsx(smallAvatar && 'ml-1')}
|
|
|
|
size={smallAvatar ? 'sm' : undefined}
|
|
|
|
avatarUrl={bettor.avatarUrl}
|
|
|
|
username={bettor.username}
|
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<div className="relative px-1">
|
2022-06-23 17:55:41 +00:00
|
|
|
<EmptyAvatar />
|
2022-05-18 14:42:13 +00:00
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
<div className={'min-w-0 flex-1 py-1.5'}>
|
|
|
|
<BetStatusText
|
|
|
|
bet={bet}
|
|
|
|
contract={contract}
|
|
|
|
isSelf={isSelf}
|
|
|
|
bettor={bettor}
|
|
|
|
hideOutcome={hideOutcome}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</Row>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export function BetStatusText(props: {
|
|
|
|
contract: Contract
|
|
|
|
bet: Bet
|
|
|
|
isSelf: boolean
|
|
|
|
bettor?: User
|
|
|
|
hideOutcome?: boolean
|
|
|
|
}) {
|
|
|
|
const { bet, contract, bettor, isSelf, hideOutcome } = props
|
|
|
|
const { amount, outcome, createdTime } = bet
|
|
|
|
|
|
|
|
const bought = amount >= 0 ? 'bought' : 'sold'
|
|
|
|
const money = formatMoney(Math.abs(amount))
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="text-sm text-gray-500">
|
2022-06-09 20:00:31 +00:00
|
|
|
{bettor ? (
|
|
|
|
<UserLink name={bettor.name} username={bettor.username} />
|
|
|
|
) : (
|
|
|
|
<span>{isSelf ? 'You' : 'A trader'}</span>
|
|
|
|
)}{' '}
|
|
|
|
{bought} {money}
|
2022-05-18 14:42:13 +00:00
|
|
|
{!hideOutcome && (
|
|
|
|
<>
|
|
|
|
{' '}
|
|
|
|
of{' '}
|
|
|
|
<OutcomeLabel
|
|
|
|
outcome={outcome}
|
2022-05-19 17:42:03 +00:00
|
|
|
value={(bet as any).value}
|
2022-05-18 14:42:13 +00:00
|
|
|
contract={contract}
|
|
|
|
truncate="short"
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
<RelativeTimestamp time={createdTime} />
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
function BetGroupSpan(props: {
|
|
|
|
contract: Contract
|
|
|
|
bets: Bet[]
|
|
|
|
outcome?: string
|
|
|
|
}) {
|
|
|
|
const { contract, bets, outcome } = props
|
|
|
|
|
2022-05-22 08:36:05 +00:00
|
|
|
const numberTraders = uniqBy(bets, (b) => b.userId).length
|
2022-05-18 14:42:13 +00:00
|
|
|
|
2022-05-22 08:36:05 +00:00
|
|
|
const [buys, sells] = partition(bets, (bet) => bet.amount >= 0)
|
|
|
|
const buyTotal = sumBy(buys, (b) => b.amount)
|
|
|
|
const sellTotal = sumBy(sells, (b) => -b.amount)
|
2022-05-18 14:42:13 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<span>
|
|
|
|
{numberTraders} {numberTraders > 1 ? 'traders' : 'trader'}{' '}
|
|
|
|
<JoinSpans>
|
|
|
|
{buyTotal > 0 && <>bought {formatMoney(buyTotal)} </>}
|
|
|
|
{sellTotal > 0 && <>sold {formatMoney(sellTotal)} </>}
|
|
|
|
</JoinSpans>
|
|
|
|
{outcome && (
|
|
|
|
<>
|
|
|
|
{' '}
|
|
|
|
of{' '}
|
|
|
|
<OutcomeLabel
|
|
|
|
outcome={outcome}
|
|
|
|
contract={contract}
|
|
|
|
truncate="short"
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
)}{' '}
|
|
|
|
</span>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export function FeedBetGroup(props: {
|
|
|
|
contract: Contract
|
|
|
|
bets: Bet[]
|
|
|
|
hideOutcome: boolean
|
|
|
|
}) {
|
|
|
|
const { contract, bets, hideOutcome } = props
|
|
|
|
|
2022-05-22 08:36:05 +00:00
|
|
|
const betGroups = groupBy(bets, (bet) => bet.outcome)
|
2022-05-18 14:42:13 +00:00
|
|
|
const outcomes = Object.keys(betGroups)
|
|
|
|
|
|
|
|
// Use the time of the last bet for the entire group
|
|
|
|
const createdTime = bets[bets.length - 1].createdTime
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div>
|
|
|
|
<div className="relative px-1">
|
|
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
|
|
|
|
<UsersIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className={clsx('min-w-0 flex-1', outcomes.length === 1 && 'mt-1')}>
|
|
|
|
<div className="text-sm text-gray-500">
|
|
|
|
{outcomes.map((outcome, index) => (
|
|
|
|
<Fragment key={outcome}>
|
|
|
|
<BetGroupSpan
|
|
|
|
contract={contract}
|
|
|
|
outcome={hideOutcome ? undefined : outcome}
|
|
|
|
bets={betGroups[outcome]}
|
|
|
|
/>
|
|
|
|
{index !== outcomes.length - 1 && <br />}
|
|
|
|
</Fragment>
|
|
|
|
))}
|
|
|
|
<RelativeTimestamp time={createdTime} />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|