89 lines
2.8 KiB
TypeScript
89 lines
2.8 KiB
TypeScript
|
import { DotsHorizontalIcon } from '@heroicons/react/outline'
|
||
|
|
import clsx from 'clsx'
|
||
|
|
import { useState } from 'react'
|
||
|
|
import { Contract } from '../../common/contract'
|
||
|
|
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
|
||
|
|
)
|
||
|
|
|
||
|
|
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">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}`
|
||
|
|
}
|