82 lines
2.3 KiB
TypeScript
82 lines
2.3 KiB
TypeScript
import React from 'react'
|
|
import { compute, Contract, deleteContract } from '../lib/firebase/contracts'
|
|
import { Col } from './layout/col'
|
|
import { Spacer } from './layout/spacer'
|
|
import { ContractProbGraph } from './contract-prob-graph'
|
|
import { ContractDetails } from './contracts-list'
|
|
import router from 'next/router'
|
|
import { useUser } from '../hooks/use-user'
|
|
|
|
export const ContractOverview = (props: {
|
|
contract: Contract
|
|
className?: string
|
|
}) => {
|
|
const { contract, className } = props
|
|
const { resolution, creatorId, isResolved } = contract
|
|
const { probPercent, volume } = compute(contract)
|
|
|
|
const user = useUser()
|
|
const isCreator = user?.id === creatorId
|
|
|
|
const resolutionColor =
|
|
resolution === 'YES'
|
|
? 'text-primary'
|
|
: resolution === 'NO'
|
|
? 'text-red-400'
|
|
: resolution === 'CANCEL'
|
|
? 'text-yellow-400'
|
|
: ''
|
|
return (
|
|
<Col className={className}>
|
|
<Col className="justify-between md:flex-row">
|
|
<Col>
|
|
<div className="text-3xl text-indigo-700 mt-2 mb-4">
|
|
{contract.question}
|
|
</div>
|
|
|
|
<ContractDetails contract={contract} />
|
|
</Col>
|
|
|
|
{resolution ? (
|
|
<Col className="text-4xl mt-4 md:mt-2 md:ml-4 md:mr-6 items-end self-center md:self-start">
|
|
<div className="text-xl text-gray-500">Resolved:</div>
|
|
<div className={resolutionColor}>{resolution}</div>
|
|
</Col>
|
|
) : (
|
|
<Col className="text-4xl mt-4 md:mt-2 md:ml-4 md:mr-6 text-primary items-end self-center md:self-start">
|
|
{probPercent}
|
|
<div className="text-xl">chance</div>
|
|
</Col>
|
|
)}
|
|
</Col>
|
|
|
|
<Spacer h={4} />
|
|
|
|
<ContractProbGraph contract={contract} />
|
|
|
|
<Spacer h={12} />
|
|
|
|
<div className="text-gray-600 whitespace-pre-line">
|
|
{contract.description}
|
|
</div>
|
|
|
|
{/* Show a delete button for contracts without any trading */}
|
|
{isCreator && (volume === 0 || isResolved) && (
|
|
<>
|
|
<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>
|
|
</>
|
|
)}
|
|
</Col>
|
|
)
|
|
}
|