Add a closing date to Create Market (#10)
* Preview a slimmed-down version of /Create * Rework dropdown to be on bottom * Parse the close time as just before midnight * Prevent invalid contracts from being created * Prevent trading after contract has closed
This commit is contained in:
Austin Chen
GitHub
parent
3ba96028f4
commit
fb0e16d619
|
|
@ -16,6 +16,19 @@ import { Linkify } from './linkify'
|
|||
import clsx from 'clsx'
|
||||
import { ContractDetails, ResolutionOrChance } from './contract-card'
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
function ContractDescription(props: {
|
||||
contract: Contract
|
||||
isCreator: boolean
|
||||
|
|
@ -127,9 +140,14 @@ export const ContractOverview = (props: {
|
|||
|
||||
<Spacer h={12} />
|
||||
|
||||
<ContractCloseTime contract={contract} />
|
||||
|
||||
<Spacer h={4} />
|
||||
|
||||
{((isCreator && !contract.resolution) || contract.description) && (
|
||||
<label className="text-gray-500 mb-2 text-sm">Description</label>
|
||||
)}
|
||||
|
||||
<ContractDescription contract={contract} isCreator={isCreator} />
|
||||
|
||||
{/* Show a delete button for contracts without any trading */}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@ export async function createContract(
|
|||
question: string,
|
||||
description: string,
|
||||
initialProb: number,
|
||||
creator: User
|
||||
creator: User,
|
||||
closeTime?: number
|
||||
) {
|
||||
const proposedSlug = slugify(question).substring(0, 35)
|
||||
|
||||
|
|
@ -45,6 +46,9 @@ export async function createContract(
|
|||
createdTime: Date.now(),
|
||||
lastUpdatedTime: Date.now(),
|
||||
}
|
||||
if (closeTime) {
|
||||
contract.closeTime = closeTime
|
||||
}
|
||||
|
||||
return await pushNewContract(contract)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,6 +53,9 @@ export default function ContractPage(props: {
|
|||
|
||||
const { creatorId, isResolved, resolution, question } = contract
|
||||
const isCreator = user?.id === creatorId
|
||||
const allowTrade =
|
||||
!isResolved && (!contract.closeTime || contract.closeTime > Date.now())
|
||||
const allowResolve = !isResolved && isCreator && user
|
||||
|
||||
const { probPercent } = compute(contract)
|
||||
|
||||
|
|
@ -61,7 +64,7 @@ export default function ContractPage(props: {
|
|||
: `${probPercent} chance. ${contract.description}`
|
||||
|
||||
return (
|
||||
<Page wide={!isResolved}>
|
||||
<Page wide={allowTrade}>
|
||||
<SEO
|
||||
title={question}
|
||||
description={description}
|
||||
|
|
@ -74,14 +77,13 @@ export default function ContractPage(props: {
|
|||
<BetsSection contract={contract} user={user ?? null} />
|
||||
</div>
|
||||
|
||||
{!isResolved && (
|
||||
{(allowTrade || allowResolve) && (
|
||||
<>
|
||||
<div className="md:ml-8" />
|
||||
|
||||
<Col className="flex-1">
|
||||
<BetPanel contract={contract} />
|
||||
|
||||
{isCreator && user && (
|
||||
{allowTrade && <BetPanel contract={contract} />}
|
||||
{allowResolve && (
|
||||
<ResolutionPanel creator={user} contract={contract} />
|
||||
)}
|
||||
</Col>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@ import { useUser } from '../hooks/use-user'
|
|||
import { path } from '../lib/firebase/contracts'
|
||||
import { createContract } from '../lib/service/create-contract'
|
||||
import { Page } from '../components/page'
|
||||
import { Row } from '../components/layout/row'
|
||||
import clsx from 'clsx'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
// Allow user to create a new contract
|
||||
export default function NewContract() {
|
||||
|
|
@ -20,11 +23,33 @@ export default function NewContract() {
|
|||
const [initialProb, setInitialProb] = useState(50)
|
||||
const [question, setQuestion] = useState('')
|
||||
const [description, setDescription] = useState('')
|
||||
const [closeDate, setCloseDate] = useState('')
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [collapsed, setCollapsed] = useState(true)
|
||||
|
||||
// Given a date string like '2022-04-02',
|
||||
// return the time just before midnight on that date (in the user's local time), as millis since epoch
|
||||
function dateToMillis(date: string) {
|
||||
return dayjs(date)
|
||||
.set('hour', 23)
|
||||
.set('minute', 59)
|
||||
.set('second', 59)
|
||||
.valueOf()
|
||||
}
|
||||
const closeTime = dateToMillis(closeDate)
|
||||
// We'd like this to look like "Apr 2, 2022, 23:59:59 PM PT" but timezones are hard with dayjs
|
||||
const formattedCloseTime = new Date(closeTime).toString()
|
||||
|
||||
const isValid =
|
||||
initialProb > 0 &&
|
||||
initialProb < 100 &&
|
||||
question.length > 0 &&
|
||||
// If set, closeTime must be in the future
|
||||
(!closeDate || closeTime > Date.now())
|
||||
|
||||
async function submit() {
|
||||
// TODO: add more rigorous error handling for question
|
||||
if (!creator || !question) return
|
||||
// TODO: Tell users why their contract is invalid
|
||||
if (!creator || !isValid) return
|
||||
|
||||
setIsSubmitting(true)
|
||||
|
||||
|
|
@ -32,7 +57,8 @@ export default function NewContract() {
|
|||
question,
|
||||
description,
|
||||
initialProb,
|
||||
creator
|
||||
creator,
|
||||
closeTime
|
||||
)
|
||||
await router.push(path(contract))
|
||||
}
|
||||
|
|
@ -49,53 +75,95 @@ export default function NewContract() {
|
|||
{/* Create a Tailwind form that takes in all the fields needed for a new contract */}
|
||||
{/* When the form is submitted, create a new contract in the database */}
|
||||
<form>
|
||||
<div className="form-control">
|
||||
<div className="flex justify-between gap-4 items-center">
|
||||
<div className="form-control w-full">
|
||||
<label className="label">
|
||||
<span className="label-text">Question</span>
|
||||
<span className="label-text">Prediction</span>
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. Will the FDA approve Paxlovid before Jun 2nd, 2022?"
|
||||
placeholder="e.g. The FDA will approve Paxlovid before Jun 2nd, 2022"
|
||||
className="input input-bordered"
|
||||
value={question}
|
||||
onChange={(e) => setQuestion(e.target.value || '')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Spacer h={4} />
|
||||
<div className="form-control">
|
||||
<label className="label">
|
||||
<span className="label-text">Chance</span>
|
||||
</label>
|
||||
<label className="input-group input-group-md w-fit">
|
||||
<input
|
||||
type="number"
|
||||
value={initialProb}
|
||||
className="input input-bordered input-md"
|
||||
min={1}
|
||||
max={99}
|
||||
onChange={(e) => setInitialProb(parseInt(e.target.value))}
|
||||
/>
|
||||
<span>%</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Collapsible "Advanced" section */}
|
||||
<div
|
||||
tabIndex={0}
|
||||
className={clsx(
|
||||
'cursor-pointer relative collapse collapse-arrow',
|
||||
collapsed ? 'collapse-close' : 'collapse-open'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="mt-4 mr-6 text-sm text-gray-400 text-right"
|
||||
onClick={() => setCollapsed((collapsed) => !collapsed)}
|
||||
>
|
||||
Advanced
|
||||
</div>
|
||||
<Row>
|
||||
<div
|
||||
className="collapse-title p-0 absolute w-0 h-0 min-h-0"
|
||||
style={{ top: -2, right: -15, color: '#9ca3af' /* gray-400 */ }}
|
||||
/>
|
||||
</Row>
|
||||
<div className="collapse-content !p-0 m-0 !bg-transparent">
|
||||
<div className="form-control">
|
||||
<label className="label">
|
||||
<span className="label-text">Description (optional)</span>
|
||||
</label>
|
||||
|
||||
<textarea
|
||||
className="textarea h-24 textarea-bordered"
|
||||
className="textarea w-full h-24 textarea-bordered"
|
||||
placeholder={descriptionPlaceholder}
|
||||
value={description}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onChange={(e) => setDescription(e.target.value || '')}
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<Spacer h={4} />
|
||||
|
||||
<div className="form-control">
|
||||
<label className="label">
|
||||
<span className="label-text">
|
||||
Initial probability: {initialProb}%
|
||||
</span>
|
||||
<span className="label-text">Close date (optional)</span>
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="range"
|
||||
className="range range-lg range-primary"
|
||||
min="1"
|
||||
max={99}
|
||||
value={initialProb}
|
||||
onChange={(e) => setInitialProb(parseInt(e.target.value))}
|
||||
type="date"
|
||||
className="input input-bordered"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onChange={(e) => setCloseDate(e.target.value || '')}
|
||||
min={new Date().toISOString().split('T')[0]}
|
||||
value={closeDate}
|
||||
/>
|
||||
</div>
|
||||
<label>
|
||||
{closeDate && (
|
||||
<span className="label-text text-gray-400 ml-1">
|
||||
No new trades will be allowed after {formattedCloseTime}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Spacer h={4} />
|
||||
|
||||
|
|
@ -103,7 +171,7 @@ export default function NewContract() {
|
|||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary"
|
||||
disabled={isSubmitting || !question}
|
||||
disabled={isSubmitting || !isValid}
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
submit()
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user