2022-06-14 20:01:32 +00:00
|
|
|
import {
|
|
|
|
DotsHorizontalIcon,
|
|
|
|
PencilIcon,
|
|
|
|
CheckIcon,
|
|
|
|
} from '@heroicons/react/outline'
|
2022-04-07 20:52:54 +00:00
|
|
|
import clsx from 'clsx'
|
2022-04-09 23:04:13 +00:00
|
|
|
import dayjs from 'dayjs'
|
2022-06-03 00:30:34 +00:00
|
|
|
import { uniqBy } from 'lodash'
|
2022-04-07 20:52:54 +00:00
|
|
|
import { useState } from 'react'
|
2022-05-09 13:04:36 +00:00
|
|
|
import { Bet } from 'common/bet'
|
2022-04-09 23:04:13 +00:00
|
|
|
|
2022-05-09 13:04:36 +00:00
|
|
|
import { Contract } from 'common/contract'
|
|
|
|
import { formatMoney } from 'common/util/format'
|
2022-05-24 23:57:34 +00:00
|
|
|
import {
|
|
|
|
contractPath,
|
|
|
|
contractPool,
|
|
|
|
getBinaryProbPercent,
|
2022-06-14 20:01:32 +00:00
|
|
|
updateContract,
|
2022-05-24 23:57:34 +00:00
|
|
|
} from 'web/lib/firebase/contracts'
|
2022-06-08 18:00:49 +00:00
|
|
|
import { LiquidityPanel } from '../liquidity-panel'
|
2022-04-11 00:59:01 +00:00
|
|
|
import { CopyLinkButton } from '../copy-link-button'
|
2022-04-07 21:15:51 +00:00
|
|
|
import { Col } from '../layout/col'
|
|
|
|
import { Modal } from '../layout/modal'
|
|
|
|
import { Row } from '../layout/row'
|
|
|
|
import { ShareEmbedButton } from '../share-embed-button'
|
|
|
|
import { TagsInput } from '../tags-input'
|
|
|
|
import { Title } from '../title'
|
|
|
|
import { TweetButton } from '../tweet-button'
|
2022-06-12 23:34:13 +00:00
|
|
|
import { InfoTooltip } from '../info-tooltip'
|
2022-04-07 20:52:54 +00:00
|
|
|
|
2022-06-14 20:01:32 +00:00
|
|
|
const formatTime = (dt: number) => dayjs(dt).format('MMM DD, YYYY hh:mm a z')
|
2022-04-07 20:52:54 +00:00
|
|
|
|
2022-06-14 20:01:32 +00:00
|
|
|
export function ContractInfoDialog(props: {
|
|
|
|
contract: Contract
|
|
|
|
bets: Bet[]
|
|
|
|
isCreator: boolean
|
|
|
|
}) {
|
|
|
|
const { contract, bets, isCreator } = props
|
2022-04-07 20:52:54 +00:00
|
|
|
|
2022-06-14 20:01:32 +00:00
|
|
|
const [open, setOpen] = useState(false)
|
2022-04-09 23:04:13 +00:00
|
|
|
|
2022-06-14 20:01:32 +00:00
|
|
|
const {
|
|
|
|
createdTime,
|
|
|
|
closeTime,
|
|
|
|
resolutionTime,
|
|
|
|
mechanism,
|
|
|
|
outcomeType,
|
|
|
|
autoResolutionTime,
|
|
|
|
} = contract
|
2022-06-12 23:34:13 +00:00
|
|
|
|
2022-06-10 17:23:27 +00:00
|
|
|
const tradersCount = uniqBy(
|
|
|
|
bets.filter((bet) => !bet.isAnte),
|
|
|
|
'userId'
|
|
|
|
).length
|
2022-06-13 04:49:02 +00:00
|
|
|
|
2022-06-12 23:34:13 +00:00
|
|
|
const typeDisplay =
|
|
|
|
outcomeType === 'BINARY'
|
|
|
|
? 'YES / NO'
|
|
|
|
: outcomeType === 'FREE_RESPONSE'
|
|
|
|
? 'Free response'
|
|
|
|
: 'Numeric'
|
2022-04-09 23:04:13 +00:00
|
|
|
|
2022-04-07 20:52:54 +00:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<button
|
|
|
|
className="group flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:cursor-pointer hover:bg-gray-100"
|
|
|
|
onClick={() => setOpen(true)}
|
|
|
|
>
|
|
|
|
<DotsHorizontalIcon
|
|
|
|
className={clsx(
|
|
|
|
'h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500'
|
|
|
|
)}
|
|
|
|
aria-hidden="true"
|
|
|
|
/>
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<Modal open={open} setOpen={setOpen}>
|
|
|
|
<Col className="gap-4 rounded bg-white p-6">
|
|
|
|
<Title className="!mt-0 !mb-0" text="Market info" />
|
|
|
|
|
2022-05-02 16:18:53 +00:00
|
|
|
<div>Share</div>
|
|
|
|
|
|
|
|
<Row className="justify-start gap-4">
|
2022-05-17 15:55:26 +00:00
|
|
|
<CopyLinkButton
|
|
|
|
contract={contract}
|
|
|
|
toastClassName={'sm:-left-10 -left-4 min-w-[250%]'}
|
|
|
|
/>
|
2022-05-02 16:18:53 +00:00
|
|
|
<TweetButton
|
|
|
|
className="self-start"
|
|
|
|
tweetText={getTweetText(contract, false)}
|
|
|
|
/>
|
2022-05-17 15:55:26 +00:00
|
|
|
<ShareEmbedButton contract={contract} toastClassName={'-left-20'} />
|
2022-05-02 16:18:53 +00:00
|
|
|
</Row>
|
|
|
|
<div />
|
|
|
|
|
|
|
|
<div>Stats</div>
|
2022-06-12 23:34:13 +00:00
|
|
|
|
2022-04-09 23:04:13 +00:00
|
|
|
<table className="table-compact table-zebra table w-full text-gray-500">
|
|
|
|
<tbody>
|
2022-06-12 23:34:13 +00:00
|
|
|
<tr>
|
|
|
|
<td>Type</td>
|
|
|
|
<td>{typeDisplay}</td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
<td>Payout</td>
|
|
|
|
<td>
|
|
|
|
{mechanism === 'cpmm-1' ? (
|
|
|
|
<>
|
|
|
|
Fixed{' '}
|
|
|
|
<InfoTooltip text="Each YES share is worth M$1 if YES wins." />
|
|
|
|
</>
|
|
|
|
) : (
|
|
|
|
<div>
|
|
|
|
Parimutuel{' '}
|
|
|
|
<InfoTooltip text="Each share is a fraction of the pool. " />
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
|
2022-04-09 23:04:13 +00:00
|
|
|
<tr>
|
|
|
|
<td>Market created</td>
|
|
|
|
<td>{formatTime(createdTime)}</td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
{closeTime && (
|
|
|
|
<tr>
|
|
|
|
<td>Market close{closeTime > Date.now() ? 's' : 'd'}</td>
|
|
|
|
<td>{formatTime(closeTime)}</td>
|
|
|
|
</tr>
|
|
|
|
)}
|
|
|
|
|
2022-06-14 20:01:32 +00:00
|
|
|
{autoResolutionTime && !resolutionTime && (
|
|
|
|
<EditableResolutionTime
|
|
|
|
time={autoResolutionTime}
|
|
|
|
contract={contract}
|
|
|
|
isCreator={isCreator}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
|
2022-04-09 23:04:13 +00:00
|
|
|
{resolutionTime && (
|
|
|
|
<tr>
|
|
|
|
<td>Market resolved</td>
|
|
|
|
<td>{formatTime(resolutionTime)}</td>
|
|
|
|
</tr>
|
|
|
|
)}
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
<td>Volume</td>
|
2022-04-09 23:13:10 +00:00
|
|
|
<td>{formatMoney(contract.volume)}</td>
|
2022-04-09 23:04:13 +00:00
|
|
|
</tr>
|
|
|
|
|
2022-05-09 21:04:40 +00:00
|
|
|
<tr>
|
|
|
|
<td>Creator earnings</td>
|
2022-05-27 21:02:02 +00:00
|
|
|
<td>{formatMoney(contract.collectedFees.creatorFee)}</td>
|
2022-05-09 21:04:40 +00:00
|
|
|
</tr>
|
|
|
|
|
2022-04-13 19:11:49 +00:00
|
|
|
<tr>
|
|
|
|
<td>Traders</td>
|
|
|
|
<td>{tradersCount}</td>
|
|
|
|
</tr>
|
|
|
|
|
2022-05-24 23:57:34 +00:00
|
|
|
<tr>
|
2022-06-12 23:34:13 +00:00
|
|
|
<td>
|
|
|
|
{mechanism === 'cpmm-1' ? 'Liquidity pool' : 'Betting pool'}
|
|
|
|
</td>
|
2022-05-24 23:57:34 +00:00
|
|
|
<td>{contractPool(contract)}</td>
|
|
|
|
</tr>
|
2022-04-09 23:04:13 +00:00
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
|
2022-05-02 16:18:53 +00:00
|
|
|
<div>Tags</div>
|
2022-04-07 20:52:54 +00:00
|
|
|
<TagsInput contract={contract} />
|
|
|
|
<div />
|
2022-04-21 17:58:12 +00:00
|
|
|
|
2022-06-08 18:00:49 +00:00
|
|
|
{contract.mechanism === 'cpmm-1' && !contract.resolution && (
|
|
|
|
<LiquidityPanel contract={contract} />
|
|
|
|
)}
|
2022-04-07 20:52:54 +00:00
|
|
|
</Col>
|
|
|
|
</Modal>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
const getTweetText = (contract: Contract, isCreator: boolean) => {
|
|
|
|
const { question, creatorName, resolution, outcomeType } = contract
|
|
|
|
const isBinary = outcomeType === 'BINARY'
|
|
|
|
|
|
|
|
const tweetQuestion = isCreator
|
|
|
|
? question
|
|
|
|
: `${question}\nAsked by ${creatorName}.`
|
|
|
|
const tweetDescription = resolution
|
|
|
|
? `Resolved ${resolution}!`
|
|
|
|
: isBinary
|
|
|
|
? `Currently ${getBinaryProbPercent(
|
|
|
|
contract
|
|
|
|
)} chance, place your bets here:`
|
|
|
|
: `Submit your own answer:`
|
|
|
|
|
|
|
|
const timeParam = `${Date.now()}`.substring(7)
|
|
|
|
const url = `https://manifold.markets${contractPath(contract)}?t=${timeParam}`
|
|
|
|
|
|
|
|
return `${tweetQuestion}\n\n${tweetDescription}\n\n${url}`
|
|
|
|
}
|
2022-06-14 20:01:32 +00:00
|
|
|
|
|
|
|
export function EditableResolutionTime(props: {
|
|
|
|
time: number
|
|
|
|
contract: Contract
|
|
|
|
isCreator: boolean
|
|
|
|
}) {
|
|
|
|
const { time, contract, isCreator } = props
|
|
|
|
|
|
|
|
const [isEditing, setIsEditing] = useState(false)
|
|
|
|
const [timeString, setTimeString] = useState(time && formatTime(time))
|
|
|
|
|
|
|
|
const onSave = () => {
|
|
|
|
const newTime = dayjs(timeString).valueOf()
|
|
|
|
if (newTime === time) setIsEditing(false)
|
|
|
|
else if (
|
|
|
|
contract.closeTime &&
|
|
|
|
newTime > (contract.closeTime ?? Date.now())
|
|
|
|
) {
|
|
|
|
const formattedTime = dayjs(newTime).format('YYYY-MM-DD h:mm a')
|
|
|
|
const newDescription = `${contract.description}\n\nAuto resolution date updated to ${formattedTime}`
|
|
|
|
|
|
|
|
updateContract(contract.id, {
|
|
|
|
autoResolutionTime: newTime,
|
|
|
|
description: newDescription,
|
|
|
|
})
|
|
|
|
|
|
|
|
setIsEditing(false)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<tr>
|
|
|
|
<td>
|
|
|
|
Market autoresolves
|
|
|
|
{isCreator &&
|
|
|
|
(isEditing ? (
|
|
|
|
<button className="btn btn-xs btn-ghost" onClick={onSave}>
|
|
|
|
<CheckIcon className="inline h-4 w-4" />
|
|
|
|
</button>
|
|
|
|
) : (
|
|
|
|
<button
|
|
|
|
className="btn btn-xs btn-ghost"
|
|
|
|
onClick={() => setIsEditing(true)}
|
|
|
|
>
|
|
|
|
<PencilIcon className="inline h-4 w-4" />
|
|
|
|
</button>
|
|
|
|
))}
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
{isEditing ? (
|
|
|
|
<div className="form-control mr-1 items-start">
|
|
|
|
<input
|
|
|
|
type="datetime-local"
|
|
|
|
className="input input-xs"
|
|
|
|
onClick={(e) => e.stopPropagation()}
|
|
|
|
onChange={(e) => setTimeString(e.target.value || '')}
|
|
|
|
min={contract.closeTime}
|
|
|
|
value={timeString}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
) : (
|
|
|
|
<div className="form-control mr-1 items-start">
|
|
|
|
{formatTime(time)}
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
)
|
|
|
|
}
|