import {
ClockIcon,
DatabaseIcon,
PencilIcon,
TrendingUpIcon,
UserGroupIcon,
} from '@heroicons/react/outline'
import { Row } from '../layout/row'
import { formatMoney } from 'common/util/format'
import { UserLink } from '../user-page'
import {
Contract,
contractMetrics,
updateContract,
} from 'web/lib/firebase/contracts'
import dayjs from 'dayjs'
import { DateTimeTooltip } from '../datetime-tooltip'
import { fromNow } from 'web/lib/util/time'
import { Avatar } from '../avatar'
import { useState } from 'react'
import { ContractInfoDialog } from './contract-info-dialog'
import { Bet } from 'common/bet'
import NewContractBadge from '../new-contract-badge'
import { UserFollowButton } from '../follow-button'
import { DAY_MS } from 'common/util/time'
import { useUser } from 'web/hooks/use-user'
import { Editor } from '@tiptap/react'
import { exhibitExts } from 'common/util/parse'
import { Button } from 'web/components/button'
import { Modal } from 'web/components/layout/modal'
import { Col } from 'web/components/layout/col'
import { ContractGroupsList } from 'web/components/groups/contract-groups-list'
import { SiteLink } from 'web/components/site-link'
import { groupPath } from 'web/lib/firebase/groups'
import { appendToEditor } from '../editor/utils'
export type ShowTime = 'resolve-date' | 'close-date'
export function MiscDetails(props: {
contract: Contract
showHotVolume?: boolean
showTime?: ShowTime
hideGroupLink?: boolean
}) {
const { contract, showHotVolume, showTime, hideGroupLink } = props
const {
volume,
volume24Hours,
closeTime,
isResolved,
createdTime,
resolutionTime,
groupLinks,
} = contract
const isNew = createdTime > Date.now() - DAY_MS && !isResolved
return (
{showHotVolume ? (
{formatMoney(volume24Hours)}
) : showTime === 'close-date' ? (
{(closeTime || 0) < Date.now() ? 'Closed' : 'Closes'}{' '}
{fromNow(closeTime || 0)}
) : showTime === 'resolve-date' && resolutionTime !== undefined ? (
{'Resolved '}
{fromNow(resolutionTime || 0)}
) : volume > 0 || !isNew ? (
{formatMoney(contract.volume)} bet
) : (
)}
{!hideGroupLink && groupLinks && groupLinks.length > 0 && (
{groupLinks[0].name}
)}
)
}
export function AvatarDetails(props: { contract: Contract }) {
const { contract } = props
const { creatorName, creatorUsername } = contract
return (
)
}
export function AbbrContractDetails(props: {
contract: Contract
showHotVolume?: boolean
showTime?: ShowTime
}) {
const { contract, showHotVolume, showTime } = props
return (
)
}
export function ContractDetails(props: {
contract: Contract
bets: Bet[]
isCreator?: boolean
disabled?: boolean
}) {
const { contract, bets, isCreator, disabled } = props
const { closeTime, creatorName, creatorUsername, creatorId, groupLinks } =
contract
const { volumeLabel, resolvedDate } = contractMetrics(contract)
const groupToDisplay =
groupLinks?.sort((a, b) => a.createdTime - b.createdTime)[0] ?? null
const user = useUser()
const [open, setOpen] = useState(false)
const groupInfo = (
{groupToDisplay ? groupToDisplay.name : 'No group'}
)
return (
{disabled ? (
creatorName
) : (
)}
{!disabled && }
{disabled ? (
groupInfo
) : (
)}
{(!!closeTime || !!resolvedDate) && (
{resolvedDate && contract.resolutionTime ? (
<>
{resolvedDate}
>
) : null}
{!resolvedDate && closeTime && (
<>
>
)}
)}
{volumeLabel}
{!disabled && }
)
}
// String version of the above, to send to the OpenGraph image generator
export function contractTextDetails(contract: Contract) {
const { closeTime, tags } = contract
const { createdDate, resolvedDate, volumeLabel } = contractMetrics(contract)
const hashtags = tags.map((tag) => `#${tag}`)
return (
`${resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}` +
(closeTime
? ` • ${closeTime > Date.now() ? 'Closes' : 'Closed'} ${dayjs(
closeTime
).format('MMM D, h:mma')}`
: '') +
` • ${volumeLabel}` +
(hashtags.length > 0 ? ` • ${hashtags.join(' ')}` : '')
)
}
function EditableCloseDate(props: {
closeTime: number
contract: Contract
isCreator: boolean
}) {
const { closeTime, contract, isCreator } = props
const [isEditingCloseTime, setIsEditingCloseTime] = useState(false)
const [closeDate, setCloseDate] = useState(
closeTime && dayjs(closeTime).format('YYYY-MM-DDTHH:mm')
)
const isSameYear = dayjs(closeTime).isSame(dayjs(), 'year')
const isSameDay = dayjs(closeTime).isSame(dayjs(), 'day')
const onSave = () => {
const newCloseTime = dayjs(closeDate).valueOf()
if (newCloseTime === closeTime) setIsEditingCloseTime(false)
else if (newCloseTime > Date.now()) {
const content = contract.description
const formattedCloseDate = dayjs(newCloseTime).format('YYYY-MM-DD h:mm a')
const editor = new Editor({ content, extensions: exhibitExts })
appendToEditor(
editor,
`
Close date updated to ${formattedCloseDate}
`
)
updateContract(contract.id, {
closeTime: newCloseTime,
description: editor.getJSON(),
})
setIsEditingCloseTime(false)
}
}
return (
<>
{isEditingCloseTime ? (
e.stopPropagation()}
onChange={(e) => setCloseDate(e.target.value || '')}
min={Date.now()}
value={closeDate}
/>
) : (
Date.now() ? 'Trading ends:' : 'Trading ended:'}
time={closeTime}
>
{isSameYear
? dayjs(closeTime).format('MMM D')
: dayjs(closeTime).format('MMM D, YYYY')}
{isSameDay && <> ({fromNow(closeTime)})>}
)}
{isCreator &&
(isEditingCloseTime ? (
) : (
))}
>
)
}