manifold/web/components/contract-overview.tsx

95 lines
2.5 KiB
TypeScript
Raw Normal View History

import { compute, Contract, deleteContract } 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'
import dayjs from 'dayjs'
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'
2021-12-16 10:46:41 +00:00
function ContractCloseTime(props: { contract: Contract }) {
const closeTime = props.contract.closeTime
if (!closeTime) {
return null
}
return (
<div className="text-gray-500 text-sm">
Trading {closeTime > Date.now() ? 'closes' : 'closed'} at{' '}
{dayjs(closeTime).format('MMM D, h:mma')}
</div>
)
}
2021-12-12 22:14:52 +00:00
export const ContractOverview = (props: {
contract: Contract
className?: string
}) => {
const { contract, className } = props
2021-12-16 10:46:41 +00:00
const { resolution, creatorId } = contract
const { probPercent, truePool } = compute(contract)
const user = useUser()
const isCreator = user?.id === creatorId
return (
2021-12-20 05:15:18 +00:00
<Col className={clsx('mb-6', className)}>
<Row className="justify-between gap-4">
<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>
<ResolutionOrChance
className="md:hidden"
resolution={resolution}
probPercent={probPercent}
large
/>
<ContractDetails contract={contract} />
</Col>
<ResolutionOrChance
className="hidden md:flex md:items-end"
resolution={resolution}
probPercent={probPercent}
large
/>
</Row>
<Spacer h={4} />
2021-12-12 22:14:52 +00:00
<ContractProbGraph contract={contract} />
<Spacer h={12} />
<ContractCloseTime contract={contract} />
{/* 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>
</>
)}
<Spacer h={4} />
<ContractFeed contract={contract} />
</Col>
)
}