2021-12-19 09:08:12 +00:00
|
|
|
import { useState } from 'react'
|
2021-12-16 10:46:41 +00:00
|
|
|
import {
|
|
|
|
compute,
|
|
|
|
Contract,
|
|
|
|
deleteContract,
|
|
|
|
setContract,
|
|
|
|
} from '../lib/firebase/contracts'
|
2021-12-10 14:56:17 +00:00
|
|
|
import { Col } from './layout/col'
|
|
|
|
import { Spacer } from './layout/spacer'
|
2021-12-12 22:14:52 +00:00
|
|
|
import { ContractProbGraph } from './contract-prob-graph'
|
2021-12-14 10:27:22 +00:00
|
|
|
import { ContractDetails } from './contracts-list'
|
2021-12-14 18:51:30 +00:00
|
|
|
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:08:12 +00:00
|
|
|
import { Linkify } from './Linkify'
|
2021-12-16 10:46:41 +00:00
|
|
|
|
|
|
|
function ContractDescription(props: {
|
|
|
|
contract: Contract
|
|
|
|
isCreator: boolean
|
|
|
|
}) {
|
|
|
|
const { contract, isCreator } = props
|
|
|
|
const [editing, setEditing] = useState(false)
|
2021-12-16 22:17:43 +00:00
|
|
|
const editStatement = () => `${dayjs().format('MMM D, h:mma')}: `
|
2021-12-16 10:46:41 +00:00
|
|
|
const [description, setDescription] = useState(editStatement())
|
|
|
|
|
|
|
|
// Append the new description (after a newline)
|
|
|
|
async function saveDescription(e: any) {
|
|
|
|
e.preventDefault()
|
|
|
|
setEditing(false)
|
|
|
|
contract.description = `${contract.description}\n${description}`.trim()
|
|
|
|
await setContract(contract)
|
|
|
|
setDescription(editStatement())
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="whitespace-pre-line">
|
2021-12-18 12:06:59 +00:00
|
|
|
<Linkify text={contract.description} />
|
2021-12-16 10:46:41 +00:00
|
|
|
<br />
|
|
|
|
{isCreator &&
|
|
|
|
!contract.resolution &&
|
|
|
|
(editing ? (
|
2021-12-16 22:07:37 +00:00
|
|
|
<form className="mt-4">
|
2021-12-16 10:46:41 +00:00
|
|
|
<textarea
|
2021-12-16 22:17:43 +00:00
|
|
|
className="textarea h-24 textarea-bordered w-full mb-2"
|
2021-12-16 10:46:41 +00:00
|
|
|
value={description}
|
|
|
|
onChange={(e) => setDescription(e.target.value || '')}
|
2021-12-16 22:07:37 +00:00
|
|
|
autoFocus
|
|
|
|
onFocus={(e) =>
|
|
|
|
// Focus starts at end of description.
|
|
|
|
e.target.setSelectionRange(
|
|
|
|
description.length,
|
|
|
|
description.length
|
|
|
|
)
|
|
|
|
}
|
2021-12-16 22:17:43 +00:00
|
|
|
/>
|
|
|
|
<Row className="gap-4 justify-end">
|
2021-12-16 10:46:41 +00:00
|
|
|
<button
|
|
|
|
className="btn btn-error btn-outline btn-sm mt-2"
|
|
|
|
onClick={() => setEditing(false)}
|
|
|
|
>
|
|
|
|
Cancel
|
|
|
|
</button>
|
2021-12-16 22:17:43 +00:00
|
|
|
<button
|
|
|
|
className="btn btn-neutral btn-outline btn-sm mt-2"
|
|
|
|
onClick={saveDescription}
|
|
|
|
>
|
|
|
|
Save
|
|
|
|
</button>
|
2021-12-16 10:46:41 +00:00
|
|
|
</Row>
|
|
|
|
</form>
|
|
|
|
) : (
|
2021-12-16 22:17:43 +00:00
|
|
|
<Row className="justify-end">
|
|
|
|
<button
|
|
|
|
className="btn btn-neutral btn-outline btn-sm mt-4"
|
|
|
|
onClick={() => setEditing(true)}
|
|
|
|
>
|
|
|
|
Add to description
|
|
|
|
</button>
|
|
|
|
</Row>
|
2021-12-16 10:46:41 +00:00
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
2021-12-10 14:56:17 +00:00
|
|
|
|
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
|
2021-12-14 18:51:30 +00:00
|
|
|
const { probPercent, volume } = compute(contract)
|
2021-12-10 14:56:17 +00:00
|
|
|
|
2021-12-14 18:51:30 +00:00
|
|
|
const user = useUser()
|
|
|
|
const isCreator = user?.id === creatorId
|
|
|
|
|
2021-12-16 10:46:41 +00:00
|
|
|
const resolutionColor = {
|
|
|
|
YES: 'text-primary',
|
|
|
|
NO: 'text-red-400',
|
|
|
|
CANCEL: 'text-yellow-400',
|
|
|
|
'': '', // Empty if unresolved
|
|
|
|
}[contract.resolution || '']
|
|
|
|
|
2021-12-10 14:56:17 +00:00
|
|
|
return (
|
2021-12-12 22:14:52 +00:00
|
|
|
<Col className={className}>
|
2021-12-14 04:54:51 +00:00
|
|
|
<Col className="justify-between md:flex-row">
|
2021-12-12 22:51:44 +00:00
|
|
|
<Col>
|
2021-12-18 23:40:39 +00:00
|
|
|
<div className="text-3xl text-indigo-700 mb-4">
|
2021-12-19 09:08:12 +00:00
|
|
|
<Linkify text={contract.question} />
|
2021-12-14 10:23:32 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<ContractDetails contract={contract} />
|
2021-12-12 22:51:44 +00:00
|
|
|
</Col>
|
|
|
|
|
2021-12-14 18:51:30 +00:00
|
|
|
{resolution ? (
|
2021-12-18 23:40:39 +00:00
|
|
|
<Col className="text-4xl mt-8 md:mt-0 md:ml-4 md:mr-6 items-end self-center md:self-start">
|
2021-12-16 10:46:41 +00:00
|
|
|
<div className="text-xl text-gray-500">Resolved</div>
|
2021-12-19 00:37:37 +00:00
|
|
|
<div className={resolutionColor}>
|
|
|
|
{resolution === 'CANCEL' ? 'N/A' : resolution}
|
|
|
|
</div>
|
2021-12-14 18:51:30 +00:00
|
|
|
</Col>
|
|
|
|
) : (
|
2021-12-18 23:40:39 +00:00
|
|
|
<Col className="text-4xl mt-8 md:mt-0 md:ml-4 md:mr-6 text-primary items-end self-center md:self-start">
|
2021-12-14 17:37:31 +00:00
|
|
|
{probPercent}
|
|
|
|
<div className="text-xl">chance</div>
|
|
|
|
</Col>
|
2021-12-14 18:51:30 +00:00
|
|
|
)}
|
2021-12-14 04:54:51 +00:00
|
|
|
</Col>
|
2021-12-10 14:56:17 +00:00
|
|
|
|
|
|
|
<Spacer h={4} />
|
|
|
|
|
2021-12-12 22:14:52 +00:00
|
|
|
<ContractProbGraph contract={contract} />
|
2021-12-10 14:56:17 +00:00
|
|
|
|
|
|
|
<Spacer h={12} />
|
|
|
|
|
2021-12-16 10:46:41 +00:00
|
|
|
{((isCreator && !contract.resolution) || contract.description) && (
|
|
|
|
<label className="text-gray-500 mb-2 text-sm">Description</label>
|
|
|
|
)}
|
|
|
|
<ContractDescription contract={contract} isCreator={isCreator} />
|
2021-12-14 18:51:30 +00:00
|
|
|
|
|
|
|
{/* Show a delete button for contracts without any trading */}
|
2021-12-15 18:52:43 +00:00
|
|
|
{isCreator && volume === 0 && (
|
2021-12-14 18:51:30 +00:00
|
|
|
<>
|
|
|
|
<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>
|
|
|
|
</>
|
|
|
|
)}
|
2021-12-10 14:56:17 +00:00
|
|
|
</Col>
|
|
|
|
)
|
|
|
|
}
|