manifold/web/components/contract/contract-info-dialog.tsx
2022-04-09 18:04:13 -05:00

136 lines
4.1 KiB
TypeScript

import { DotsHorizontalIcon } from '@heroicons/react/outline'
import clsx from 'clsx'
import dayjs from 'dayjs'
import { useState } from 'react'
import { Contract } from '../../../common/contract'
import { formatMoney } from '../../../common/util/format'
import { useFoldsWithTags } from '../../hooks/use-fold'
import { useUser } from '../../hooks/use-user'
import {
contractPath,
getBinaryProbPercent,
} from '../../lib/firebase/contracts'
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 { FoldTagList } from '../tags-list'
import { Title } from '../title'
import { TweetButton } from '../tweet-button'
export function ContractInfoDialog(props: { contract: Contract }) {
const { contract } = props
const [open, setOpen] = useState(false)
const user = useUser()
const folds = (useFoldsWithTags(contract.tags) ?? []).filter(
(fold) => fold.followCount > 1 || user?.id === fold.curatorId
)
const formatTime = (dt: number) => dayjs(dt).format('MMM DD, YYYY hh:mm a z')
const { createdTime, closeTime, resolutionTime } = contract
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" />
<div className="text-gray-500">Stats</div>
<table className="table-compact table-zebra table w-full text-gray-500">
<tbody>
<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>
)}
{resolutionTime && (
<tr>
<td>Market resolved</td>
<td>{formatTime(resolutionTime)}</td>
</tr>
)}
<tr>
<td>Volume</td>
<td>{formatMoney(contract.volume24Hours)}</td>
</tr>
{contract.mechanism === 'cpmm-1' && (
<tr>
<td>Liquidity</td>
<td>{formatMoney(contract.totalLiquidity)}</td>
</tr>
)}
</tbody>
</table>
<div className="text-gray-500">Share</div>
<Row className="justify-start gap-4">
<TweetButton
className="self-start"
tweetText={getTweetText(contract, false)}
/>
<ShareEmbedButton contract={contract} />
</Row>
<div />
<div className="text-gray-500">Communities</div>
<FoldTagList folds={folds} noLabel />
<div />
<div className="text-gray-500">Tags</div>
<TagsInput contract={contract} />
<div />
</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}`
}