Move contract details components to their own file.
This commit is contained in:
James Grugett
parent
3b413e52e5
commit
3c1e16b815
|
|
@ -1,27 +1,15 @@
|
|||
import clsx from 'clsx'
|
||||
import Link from 'next/link'
|
||||
import _ from 'lodash'
|
||||
import { ClockIcon, DatabaseIcon, PencilIcon } from '@heroicons/react/outline'
|
||||
import { TrendingUpIcon } from '@heroicons/react/solid'
|
||||
import { Row } from '../layout/row'
|
||||
import { formatMoney, formatPercent } from '../../../common/util/format'
|
||||
import { UserLink } from '../user-page'
|
||||
import { formatPercent } from '../../../common/util/format'
|
||||
import {
|
||||
Contract,
|
||||
contractMetrics,
|
||||
contractPath,
|
||||
getBinaryProbPercent,
|
||||
updateContract,
|
||||
} from '../../lib/firebase/contracts'
|
||||
import { Col } from '../layout/col'
|
||||
import dayjs from 'dayjs'
|
||||
import { DateTimeTooltip } from '../datetime-tooltip'
|
||||
import { fromNow } from '../../lib/util/time'
|
||||
import { Avatar } from '../avatar'
|
||||
import { Spacer } from '../layout/spacer'
|
||||
import { useState } from 'react'
|
||||
import { ContractInfoDialog } from './contract-info-dialog'
|
||||
import { Bet } from '../../../common/bet'
|
||||
import {
|
||||
Binary,
|
||||
CPMM,
|
||||
|
|
@ -36,6 +24,7 @@ import {
|
|||
FreeResponseOutcomeLabel,
|
||||
} from '../outcome-label'
|
||||
import { getOutcomeProbability } from '../../../common/calculate'
|
||||
import { AbbrContractDetails } from './contract-details'
|
||||
|
||||
export function ContractCard(props: {
|
||||
contract: Contract
|
||||
|
|
@ -187,215 +176,3 @@ export function FreeResponseResolutionOrChance(props: {
|
|||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
function AbbrContractDetails(props: {
|
||||
contract: Contract
|
||||
showHotVolume?: boolean
|
||||
showCloseTime?: boolean
|
||||
}) {
|
||||
const { contract, showHotVolume, showCloseTime } = props
|
||||
const { volume24Hours, creatorName, creatorUsername, closeTime } = contract
|
||||
const { volumeLabel } = contractMetrics(contract)
|
||||
|
||||
return (
|
||||
<Col className={clsx('gap-2 text-sm text-gray-500')}>
|
||||
<Row className="items-center justify-between">
|
||||
<Row className="items-center gap-2">
|
||||
<Avatar
|
||||
username={creatorUsername}
|
||||
avatarUrl={contract.creatorAvatarUrl}
|
||||
size={6}
|
||||
/>
|
||||
<UserLink
|
||||
className="whitespace-nowrap"
|
||||
name={creatorName}
|
||||
username={creatorUsername}
|
||||
/>
|
||||
</Row>
|
||||
|
||||
{showHotVolume ? (
|
||||
<Row className="gap-1">
|
||||
<TrendingUpIcon className="h-5 w-5" /> {formatMoney(volume24Hours)}
|
||||
</Row>
|
||||
) : showCloseTime ? (
|
||||
<Row className="gap-1">
|
||||
<ClockIcon className="h-5 w-5" />
|
||||
{(closeTime || 0) < Date.now() ? 'Closed' : 'Closes'}{' '}
|
||||
{fromNow(closeTime || 0)}
|
||||
</Row>
|
||||
) : (
|
||||
<Row className="gap-1">
|
||||
{/* <DatabaseIcon className="h-5 w-5" /> */}
|
||||
{volumeLabel}
|
||||
</Row>
|
||||
)}
|
||||
</Row>
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
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 (
|
||||
<Col className="gap-2 text-sm text-gray-500 sm:flex-row sm:flex-wrap">
|
||||
<Row className="flex-1 flex-wrap items-center gap-x-4 gap-y-3">
|
||||
<Row className="items-center gap-2">
|
||||
<Avatar
|
||||
username={creatorUsername}
|
||||
avatarUrl={contract.creatorAvatarUrl}
|
||||
size={6}
|
||||
/>
|
||||
<UserLink
|
||||
className="whitespace-nowrap"
|
||||
name={creatorName}
|
||||
username={creatorUsername}
|
||||
/>
|
||||
</Row>
|
||||
|
||||
{(!!closeTime || !!resolvedDate) && (
|
||||
<Row className="items-center gap-1">
|
||||
<ClockIcon className="h-5 w-5" />
|
||||
|
||||
{/* <DateTimeTooltip text="Market created:" time={contract.createdTime}>
|
||||
{createdDate}
|
||||
</DateTimeTooltip> */}
|
||||
|
||||
{resolvedDate && contract.resolutionTime ? (
|
||||
<>
|
||||
{/* {' - '} */}
|
||||
<DateTimeTooltip
|
||||
text="Market resolved:"
|
||||
time={contract.resolutionTime}
|
||||
>
|
||||
{resolvedDate}
|
||||
</DateTimeTooltip>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{!resolvedDate && closeTime && (
|
||||
<>
|
||||
{/* {' - '}{' '} */}
|
||||
<EditableCloseDate
|
||||
closeTime={closeTime}
|
||||
contract={contract}
|
||||
isCreator={isCreator ?? false}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Row>
|
||||
)}
|
||||
|
||||
<Row className="items-center gap-1">
|
||||
<DatabaseIcon className="h-5 w-5" />
|
||||
|
||||
<div className="whitespace-nowrap">{volumeLabel}</div>
|
||||
</Row>
|
||||
|
||||
{!hideShareButtons && (
|
||||
<ContractInfoDialog contract={contract} bets={bets} />
|
||||
)}
|
||||
</Row>
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
// 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 ? (
|
||||
<div className="form-control mr-1 items-start">
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="input input-bordered"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onChange={(e) => setCloseDate(e.target.value || '')}
|
||||
min={Date.now()}
|
||||
value={closeDate}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<DateTimeTooltip
|
||||
text={closeTime > Date.now() ? 'Trading ends:' : 'Trading ended:'}
|
||||
time={closeTime}
|
||||
>
|
||||
{isSameYear
|
||||
? dayjs(closeTime).format('MMM D')
|
||||
: dayjs(closeTime).format('MMM D, YYYY')}
|
||||
{isSameDay && <> ({fromNow(closeTime)})</>}
|
||||
</DateTimeTooltip>
|
||||
)}
|
||||
|
||||
{isCreator &&
|
||||
(isEditingCloseTime ? (
|
||||
<button className="btn btn-xs" onClick={onSave}>
|
||||
Done
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className="btn btn-xs btn-ghost"
|
||||
onClick={() => setIsEditingCloseTime(true)}
|
||||
>
|
||||
<PencilIcon className="mr-2 inline h-4 w-4" /> Edit
|
||||
</button>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
232
web/components/contract/contract-details.tsx
Normal file
232
web/components/contract/contract-details.tsx
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
import clsx from 'clsx'
|
||||
import _ from 'lodash'
|
||||
import { ClockIcon, DatabaseIcon, PencilIcon } from '@heroicons/react/outline'
|
||||
import { TrendingUpIcon } from '@heroicons/react/solid'
|
||||
import { Row } from '../layout/row'
|
||||
import { formatMoney } from '../../../common/util/format'
|
||||
import { UserLink } from '../user-page'
|
||||
import {
|
||||
Contract,
|
||||
contractMetrics,
|
||||
updateContract,
|
||||
} from '../../lib/firebase/contracts'
|
||||
import { Col } from '../layout/col'
|
||||
import dayjs from 'dayjs'
|
||||
import { DateTimeTooltip } from '../datetime-tooltip'
|
||||
import { fromNow } from '../../lib/util/time'
|
||||
import { Avatar } from '../avatar'
|
||||
import { useState } from 'react'
|
||||
import { ContractInfoDialog } from './contract-info-dialog'
|
||||
import { Bet } from '../../../common/bet'
|
||||
|
||||
export function AbbrContractDetails(props: {
|
||||
contract: Contract
|
||||
showHotVolume?: boolean
|
||||
showCloseTime?: boolean
|
||||
}) {
|
||||
const { contract, showHotVolume, showCloseTime } = props
|
||||
const { volume24Hours, creatorName, creatorUsername, closeTime } = contract
|
||||
const { volumeLabel } = contractMetrics(contract)
|
||||
|
||||
return (
|
||||
<Col className={clsx('gap-2 text-sm text-gray-500')}>
|
||||
<Row className="items-center justify-between">
|
||||
<Row className="items-center gap-2">
|
||||
<Avatar
|
||||
username={creatorUsername}
|
||||
avatarUrl={contract.creatorAvatarUrl}
|
||||
size={6}
|
||||
/>
|
||||
<UserLink
|
||||
className="whitespace-nowrap"
|
||||
name={creatorName}
|
||||
username={creatorUsername}
|
||||
/>
|
||||
</Row>
|
||||
|
||||
{showHotVolume ? (
|
||||
<Row className="gap-1">
|
||||
<TrendingUpIcon className="h-5 w-5" /> {formatMoney(volume24Hours)}
|
||||
</Row>
|
||||
) : showCloseTime ? (
|
||||
<Row className="gap-1">
|
||||
<ClockIcon className="h-5 w-5" />
|
||||
{(closeTime || 0) < Date.now() ? 'Closed' : 'Closes'}{' '}
|
||||
{fromNow(closeTime || 0)}
|
||||
</Row>
|
||||
) : (
|
||||
<Row className="gap-1">
|
||||
{/* <DatabaseIcon className="h-5 w-5" /> */}
|
||||
{volumeLabel}
|
||||
</Row>
|
||||
)}
|
||||
</Row>
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
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 (
|
||||
<Col className="gap-2 text-sm text-gray-500 sm:flex-row sm:flex-wrap">
|
||||
<Row className="flex-1 flex-wrap items-center gap-x-4 gap-y-3">
|
||||
<Row className="items-center gap-2">
|
||||
<Avatar
|
||||
username={creatorUsername}
|
||||
avatarUrl={contract.creatorAvatarUrl}
|
||||
size={6}
|
||||
/>
|
||||
<UserLink
|
||||
className="whitespace-nowrap"
|
||||
name={creatorName}
|
||||
username={creatorUsername}
|
||||
/>
|
||||
</Row>
|
||||
|
||||
{(!!closeTime || !!resolvedDate) && (
|
||||
<Row className="items-center gap-1">
|
||||
<ClockIcon className="h-5 w-5" />
|
||||
|
||||
{/* <DateTimeTooltip text="Market created:" time={contract.createdTime}>
|
||||
{createdDate}
|
||||
</DateTimeTooltip> */}
|
||||
|
||||
{resolvedDate && contract.resolutionTime ? (
|
||||
<>
|
||||
{/* {' - '} */}
|
||||
<DateTimeTooltip
|
||||
text="Market resolved:"
|
||||
time={contract.resolutionTime}
|
||||
>
|
||||
{resolvedDate}
|
||||
</DateTimeTooltip>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{!resolvedDate && closeTime && (
|
||||
<>
|
||||
{/* {' - '}{' '} */}
|
||||
<EditableCloseDate
|
||||
closeTime={closeTime}
|
||||
contract={contract}
|
||||
isCreator={isCreator ?? false}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Row>
|
||||
)}
|
||||
|
||||
<Row className="items-center gap-1">
|
||||
<DatabaseIcon className="h-5 w-5" />
|
||||
|
||||
<div className="whitespace-nowrap">{volumeLabel}</div>
|
||||
</Row>
|
||||
|
||||
{!hideShareButtons && (
|
||||
<ContractInfoDialog contract={contract} bets={bets} />
|
||||
)}
|
||||
</Row>
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
// 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 ? (
|
||||
<div className="form-control mr-1 items-start">
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="input input-bordered"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onChange={(e) => setCloseDate(e.target.value || '')}
|
||||
min={Date.now()}
|
||||
value={closeDate}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<DateTimeTooltip
|
||||
text={closeTime > Date.now() ? 'Trading ends:' : 'Trading ended:'}
|
||||
time={closeTime}
|
||||
>
|
||||
{isSameYear
|
||||
? dayjs(closeTime).format('MMM D')
|
||||
: dayjs(closeTime).format('MMM D, YYYY')}
|
||||
{isSameDay && <> ({fromNow(closeTime)})</>}
|
||||
</DateTimeTooltip>
|
||||
)}
|
||||
|
||||
{isCreator &&
|
||||
(isEditingCloseTime ? (
|
||||
<button className="btn btn-xs" onClick={onSave}>
|
||||
Done
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className="btn btn-xs btn-ghost"
|
||||
onClick={() => setIsEditingCloseTime(true)}
|
||||
>
|
||||
<PencilIcon className="mr-2 inline h-4 w-4" /> Edit
|
||||
</button>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -8,7 +8,6 @@ import { Linkify } from '../linkify'
|
|||
import clsx from 'clsx'
|
||||
import {
|
||||
FreeResponseResolutionOrChance,
|
||||
ContractDetails,
|
||||
BinaryResolutionOrChance,
|
||||
} from './contract-card'
|
||||
import { Bet } from '../../../common/bet'
|
||||
|
|
@ -17,6 +16,7 @@ import BetRow from '../bet-row'
|
|||
import { AnswersGraph } from '../answers/answers-graph'
|
||||
import { DPM, FreeResponse, FullContract } from '../../../common/contract'
|
||||
import { ContractDescription } from './contract-description'
|
||||
import { ContractDetails } from './contract-details'
|
||||
|
||||
export const ContractOverview = (props: {
|
||||
contract: Contract
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user