manifold/web/components/contract-overview.tsx

142 lines
4.1 KiB
TypeScript
Raw Normal View History

2022-01-04 20:57:48 +00:00
import {
contractMetrics,
2022-01-04 20:57:48 +00:00
Contract,
deleteContract,
contractPath,
2022-01-30 03:08:06 +00:00
tradingAllowed,
2022-01-04 20:57:48 +00:00
} from '../lib/firebase/contracts'
import { Col } from './layout/col'
import { Spacer } from './layout/spacer'
2021-12-12 22:14:52 +00:00
import { ContractProbGraph } from './contract-prob-graph'
import router from 'next/router'
import { useUser } from '../hooks/use-user'
2021-12-16 10:46:41 +00:00
import { Row } from './layout/row'
2021-12-19 09:24:37 +00:00
import { Linkify } from './linkify'
2021-12-20 05:15:18 +00:00
import clsx from 'clsx'
import { ContractDetails, ResolutionOrChance } from './contract-card'
import { ContractFeed } from './contract-feed'
2022-01-04 20:57:48 +00:00
import { TweetButton } from './tweet-button'
import { Bet } from '../../common/bet'
import { Comment } from '../../common/comment'
2022-02-02 21:29:26 +00:00
import { RevealableTagsInput, TagsInput } from './tags-input'
import BetRow from './bet-row'
import { Fold } from '../../common/fold'
import { FoldTagList } from './tags-list'
2021-12-16 10:46:41 +00:00
2021-12-12 22:14:52 +00:00
export const ContractOverview = (props: {
contract: Contract
bets: Bet[]
comments: Comment[]
folds: Fold[]
2021-12-12 22:14:52 +00:00
className?: string
}) => {
const { contract, bets, comments, folds, className } = props
2022-01-04 20:57:48 +00:00
const { resolution, creatorId, creatorName } = contract
const { probPercent, truePool } = contractMetrics(contract)
const user = useUser()
const isCreator = user?.id === creatorId
2022-01-04 20:57:48 +00:00
const tweetQuestion = isCreator
? contract.question
: `${creatorName}: ${contract.question}`
const tweetDescription = resolution
2022-01-28 19:45:32 +00:00
? `Resolved ${resolution}!`
2022-01-04 20:57:48 +00:00
: `Currently ${probPercent} chance, place your bets here:`
const url = `https://manifold.markets${contractPath(contract)}`
2022-01-04 20:57:48 +00:00
const tweetText = `${tweetQuestion}\n\n${tweetDescription}\n\n${url}`
return (
2021-12-20 05:15:18 +00:00
<Col className={clsx('mb-6', className)}>
2022-01-13 18:58:25 +00:00
<Row className="justify-between gap-4 px-2">
<Col className="gap-4">
<div className="text-2xl md:text-3xl text-indigo-700">
2021-12-19 09:08:12 +00:00
<Linkify text={contract.question} />
</div>
2022-01-27 21:02:47 +00:00
<Row className="justify-between items-center gap-4">
<ResolutionOrChance
className="md:hidden"
resolution={resolution}
probPercent={probPercent}
large
/>
2022-01-30 03:08:06 +00:00
{tradingAllowed(contract) && (
<BetRow
contract={contract}
className="md:hidden"
labelClassName="hidden"
/>
)}
</Row>
2022-01-05 07:06:30 +00:00
<ContractDetails contract={contract} />
</Col>
2022-01-06 05:02:36 +00:00
<Col className="hidden md:flex justify-between items-end">
<ResolutionOrChance
className="items-end"
resolution={resolution}
probPercent={probPercent}
large
/>
</Col>
</Row>
<Spacer h={4} />
<ContractProbGraph contract={contract} bets={bets} />
<Row className="hidden sm:flex justify-between items-center mt-6 ml-4 gap-4">
2022-02-02 21:29:26 +00:00
{folds.length === 0 ? (
<TagsInput className={clsx('mx-4')} contract={contract} />
) : (
<FoldTagList folds={folds} />
)}
2022-01-26 23:45:05 +00:00
<TweetButton tweetText={tweetText} />
</Row>
<Col className="sm:hidden mt-6 ml-4 gap-4">
<TweetButton className="self-end" tweetText={tweetText} />
2022-02-02 21:29:26 +00:00
{folds.length === 0 ? (
<TagsInput contract={contract} />
) : (
<FoldTagList folds={folds} />
)}
</Col>
2022-02-02 21:29:26 +00:00
{folds.length > 0 && (
<RevealableTagsInput className="mt-4 mx-4" contract={contract} />
)}
<Spacer h={12} />
{/* Show a delete button for contracts without any trading */}
{isCreator && truePool === 0 && (
<>
<Spacer h={8} />
<button
className="btn btn-xs btn-error btn-outline mt-1 max-w-fit self-end"
onClick={async (e) => {
e.preventDefault()
await deleteContract(contract.id)
router.push('/markets')
}}
>
Delete
</button>
</>
)}
<ContractFeed
contract={contract}
bets={bets}
comments={comments}
feedType="market"
2022-01-27 21:02:47 +00:00
betRowClassName="md:hidden !mt-0"
/>
</Col>
)
}