manifold/web/components/contract/contract-details.tsx
TrueMilli a3663d03e8
Automated market resolution (#404)
* Added radio buttons to market creation (non functional)

* Ignoring vs code files

Should this be done in the repo or should everyone using VS Code do that himself globally on his machine(s)?

* Removed 'automatic' resolution

* added union type for resolution

* revert: resolution could be anything here (non binary markets)

* Expanded ChoicesToggleGroup for string choices

* Added combined resolution and required buttons to market creation

* restricted automatic resolution to binary markets

* added automatic resolution to contract

* added automatic resolution to contract overview

* string or number array to mixed array

* created const for resolutions

* Added comments for leading semicolons

* configuration of auto resolution on market creation

* v1.22.19

* v1.0.0

* v0.0.0

* v1.0.0

* v1.22.19

* Mock display automatic resolution

* Revert changes to market creation

* Revert "v1.22.19"

This reverts commit 22f59adc9c.

* Removed resolutiontype from contract creation

* Added auto resolution time to contract

* Auto resolution date editable

* refactoring

* Editable interface for auto resolution

* New edit interface for auto resolution

* Setting of auto resolve date when changing close date

* prohibited changing other peoples markets

* removed unnecessary export

* refactoring

(cherry picked from commit 4de86d5b08)

* Added comments for leading semicolons

(cherry picked from commit 60739c7853)

* Ignoring vs code files

Should this be done in the repo or should everyone using VS Code do that himself globally on his machine(s)?

(cherry picked from commit 944de9398a)

* removed unused imports and variables

* added type for binary resolution

* Prettier

* const for binary resolutions

* using the type "resolution"

* Prettier

* Re-added comment

* Update functions/src/create-contract.ts

* Revert "Ignoring vs code files"

This reverts commit 09aea5c207.

* launch config for debugging with vs code WIP

* "Launch Chrome" does not work since login via google is not possible in debugger-chrome
* Breakpoints are unbound when attached to chrome

* Revert "Added comments for leading semicolons"

* prettier

* linebreak crlf

* vscode settings

* correct linebreaks
* search exclusion
* automatic prettifier

* vscode settings

* correct linebreaks
* search exclusion
* automatic prettifier

* Working debugger config

* fix merge

* Removed comments, default resolution MKT

* removed vscode from gitignore

* refactoring description update

* Added auto resolution to LiteMarket

* fix date, setDate mutates object

* fixed firestore.rules

* script to add auto resolution to all markets

* regularely auto resolve markets

* fix description error

* moved calculate ts for access in firebase

* Revert "moved calculate ts for access in firebase"

This reverts commit 8380bf4f72.

* fix reference to calculate for firebase

* fixed references to time

* renamed function

* added description

* added auto resolution to description

* direct bool check instead of != null

* direct bool check instead of != undefined

* remove explicit type

* Fix free response markets

* removed contract from functionname

* interval set to 1h

* query instead of filter

* folds ~> contracts

* query instead of filter

* promise.all instead of foreach

* removed contractDoc from function header

* removed autoResolution from function header

* batchedWaitAll instead of promise.all

* removed unused parameter

* replaced auto resolution with constant

* suggestions from PR

* fix comment

* removed unused imports

* added scripts to add close dates on prod

* optimization

* removed test script

* security: only auto resolve markets which are closed

* consistency checks

* re-added type check for binary markets
* moved check of probability into switch case block

* removed unused import

* auto resolution every minute

* auto resolution time optional

* pr fixes
2022-06-14 15:01:32 -05:00

290 lines
8.3 KiB
TypeScript

import {
ClockIcon,
DatabaseIcon,
PencilIcon,
TrendingUpIcon,
} from '@heroicons/react/outline'
import { Row } from '../layout/row'
import { formatMoney } from 'common/util/format'
import { UserLink } from '../user-page'
import {
Contract,
contractMetrics,
contractPool,
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 { CATEGORY_LIST } from 'common/categories'
import { TagsList } from '../tags-list'
import { DAY_MS } from 'common/util/time'
import { UserFollowButton } from '../follow-button'
export function MiscDetails(props: {
contract: Contract
showHotVolume?: boolean
showCloseTime?: boolean
}) {
const { contract, showHotVolume, showCloseTime } = props
const { volume, volume24Hours, closeTime, tags } = 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 (
<Row className="items-center gap-3 text-sm text-gray-400">
{showHotVolume ? (
<Row className="gap-0.5">
<TrendingUpIcon className="h-5 w-5" /> {formatMoney(volume24Hours)}
</Row>
) : showCloseTime ? (
<Row className="gap-0.5">
<ClockIcon className="h-5 w-5" />
{(closeTime || 0) < Date.now() ? 'Closed' : 'Closes'}{' '}
{fromNow(closeTime || 0)}
</Row>
) : volume > 0 ? (
<Row>{contractPool(contract)} pool</Row>
) : (
<NewContractBadge />
)}
{categories.length > 0 && (
<TagsList className="text-gray-400" tags={categories} noLabel />
)}
</Row>
)
}
export function AvatarDetails(props: { contract: Contract }) {
const { contract } = props
const { creatorName, creatorUsername } = contract
return (
<Row className="items-center gap-2 text-sm text-gray-400">
<Avatar
username={creatorUsername}
avatarUrl={contract.creatorAvatarUrl}
size={6}
/>
<UserLink name={creatorName} username={creatorUsername} />
</Row>
)
}
export function AbbrContractDetails(props: {
contract: Contract
showHotVolume?: boolean
showCloseTime?: boolean
}) {
const { contract, showHotVolume, showCloseTime } = props
return (
<Row className="items-center justify-between">
<AvatarDetails contract={contract} />
<MiscDetails
contract={contract}
showHotVolume={showHotVolume}
showCloseTime={showCloseTime}
/>
</Row>
)
}
export function ContractDetails(props: {
contract: Contract
bets: Bet[]
isCreator?: boolean
disabled?: boolean
}) {
const { contract, bets, isCreator, disabled } = props
const { closeTime, creatorName, creatorUsername, creatorId } = contract
const { volumeLabel, resolvedDate } = contractMetrics(contract)
return (
<Row className="flex-1 flex-wrap items-center gap-x-4 gap-y-2 text-sm text-gray-500">
<Row className="items-center gap-2">
<Avatar
username={creatorUsername}
avatarUrl={contract.creatorAvatarUrl}
noLink={disabled}
size={6}
/>
{disabled ? (
creatorName
) : (
<UserLink
className="whitespace-nowrap"
name={creatorName}
username={creatorUsername}
/>
)}
{!disabled && <UserFollowButton userId={creatorId} small />}
</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>
{!disabled && (
<ContractInfoDialog
contract={contract}
bets={bets}
isCreator={isCreator ?? false}
/>
)}
</Row>
)
}
// 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 { description, autoResolutionTime } = contract
const formattedCloseDate = dayjs(newCloseTime).format('YYYY-MM-DD h:mm a')
let newDescription = description.concat(
`\n\nClose date updated to ${formattedCloseDate}`
)
const update: Partial<Contract> = {
closeTime: newCloseTime,
}
if (autoResolutionTime) {
const newAutoResolutionTime = newCloseTime + 7 * DAY_MS
if (newAutoResolutionTime >= autoResolutionTime) {
update.autoResolutionTime = newAutoResolutionTime
const formattedNewAutoResolutionTime = dayjs(
newAutoResolutionTime
).format('YYYY-MM-DD h:mm a')
newDescription = newDescription.concat(
`\nAuto resolution date updated to ${formattedNewAutoResolutionTime}`
)
}
}
update.description = newDescription
updateContract(contract.id, update)
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>
))}
</>
)
}