import clsx from 'clsx' import { ClockIcon, DatabaseIcon, PencilIcon, CurrencyDollarIcon, TrendingUpIcon, } 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 { Col } from '../layout/col' 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 { CATEGORY_LIST } from 'common/categories' import { TagsList } from '../tags-list' export function AbbrContractDetails(props: { contract: Contract showHotVolume?: boolean showCloseTime?: boolean }) { const { contract, showHotVolume, showCloseTime } = props const { volume, volume24Hours, creatorName, creatorUsername, closeTime, tags, } = contract const { volumeLabel } = contractMetrics(contract) // Show at most one category that this contract is tagged by const categories = CATEGORY_LIST.filter((category) => tags.map((t) => t.toLowerCase()).includes(category) ).slice(0, 1) return ( {categories.length > 0 && ( )} {showHotVolume ? ( {' '} {formatMoney(volume24Hours)} ) : showCloseTime ? ( {(closeTime || 0) < Date.now() ? 'Closed' : 'Closes'}{' '} {fromNow(closeTime || 0)} ) : volume > 0 ? ( {volumeLabel} ) : ( )} ) } export function ContractDetails(props: { contract: Contract bets: Bet[] isCreator?: boolean hideShareButtons?: boolean }) { const { contract, bets, isCreator, hideShareButtons } = props const { closeTime, creatorName, creatorUsername } = contract const { volumeLabel, createdDate, resolvedDate } = contractMetrics(contract) return ( {(!!closeTime || !!resolvedDate) && ( {/* {createdDate} */} {resolvedDate && contract.resolutionTime ? ( <> {/* {' - '} */} {resolvedDate} ) : null} {!resolvedDate && closeTime && ( <> {/* {' - '}{' '} */} )} )}
{volumeLabel}
{!hideShareButtons && ( )}
) } // 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-DDT23:59') ) 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 { description } = contract const formattedCloseDate = dayjs(newCloseTime).format('YYYY-MM-DD h:mm a') const newDescription = `${description}\n\nClose date updated to ${formattedCloseDate}` updateContract(contract.id, { closeTime: newCloseTime, description: newDescription, }) 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 ? ( ) : ( ))} ) }