manifold/web/pages/create.tsx

224 lines
7.1 KiB
TypeScript
Raw Normal View History

import router from 'next/router'
import { useEffect, useState } from 'react'
import clsx from 'clsx'
import dayjs from 'dayjs'
import Textarea from 'react-expanding-textarea'
2021-12-16 02:31:14 +00:00
import { Spacer } from '../components/layout/spacer'
import { Title } from '../components/title'
import { useUser } from '../hooks/use-user'
import { Contract, path } from '../lib/firebase/contracts'
import { Page } from '../components/page'
2022-01-05 18:23:44 +00:00
import { AdvancedPanel } from '../components/advanced-panel'
import { createContract } from '../lib/firebase/api-call'
import { Row } from '../components/layout/row'
2022-01-11 03:41:42 +00:00
import { AmountInput } from '../components/amount-input'
// Allow user to create a new contract
export default function NewContract() {
const creator = useUser()
useEffect(() => {
2021-12-16 07:00:35 +00:00
if (creator === null) router.push('/')
}, [creator])
useEffect(() => {
// warm up function
createContract({}).catch()
}, [])
const [initialProb, setInitialProb] = useState(50)
const [question, setQuestion] = useState('')
const [description, setDescription] = useState('')
const [ante, setAnte] = useState<number | undefined>(undefined)
2022-01-11 03:41:42 +00:00
const [anteError, setAnteError] = useState<string | undefined>()
const [closeDate, setCloseDate] = useState('')
const [isSubmitting, setIsSubmitting] = useState(false)
const closeTime = dateToMillis(closeDate) || undefined
// We'd like this to look like "Apr 2, 2022, 23:59:59 PM PT" but timezones are hard with dayjs
const formattedCloseTime = closeTime ? new Date(closeTime).toString() : ''
const user = useUser()
const remainingBalance = (user?.balance || 0) - (ante || 0)
const isValid =
initialProb > 0 &&
initialProb < 100 &&
question.length > 0 &&
(ante === undefined || (ante >= 0 && ante <= remainingBalance)) &&
// If set, closeTime must be in the future
closeTime &&
closeTime > Date.now()
async function submit() {
// TODO: Tell users why their contract is invalid
if (!creator || !isValid) return
setIsSubmitting(true)
const result: any = await createContract({
question,
description,
initialProb,
ante,
closeTime: closeTime || undefined,
}).then((r) => r.data || {})
if (result.status !== 'success') {
console.log('error creating contract', result)
return
}
await router.push(path(result.contract as Contract))
}
// const descriptionPlaceholder = `e.g. This market will resolve to “Yes” if, by June 2, 2021, 11:59:59 PM ET, Paxlovid (also known under PF-07321332)...`
const descriptionPlaceholder = `(Optional) Provide more detail on how you will resolve this market.`
if (!creator) return <></>
return (
<Page>
2021-12-18 23:40:39 +00:00
<Title text="Create a new prediction market" />
2022-01-12 07:13:01 +00:00
<div className="w-full max-w-4xl bg-gray-100 rounded-lg shadow-md px-6 py-4">
2021-12-18 23:40:39 +00:00
{/* 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 w-full">
<label className="label">
2022-01-07 03:32:46 +00:00
<span className="mb-1">Question</span>
</label>
<Textarea
placeholder="e.g. Will the FDA will approve Paxlovid before Jun 2nd, 2022?"
className="input input-bordered resize-none"
disabled={isSubmitting}
value={question}
onChange={(e) => setQuestion(e.target.value || '')}
/>
</div>
<Spacer h={4} />
<div className="form-control">
<label className="label">
2022-01-07 03:32:46 +00:00
<span className="mb-1">Initial probability</span>
</label>
<Row className="items-center gap-2">
<label className="input-group input-group-lg w-fit text-xl">
<input
type="number"
value={initialProb}
className="input input-bordered input-md text-3xl w-24"
disabled={isSubmitting}
min={1}
max={99}
onChange={(e) =>
setInitialProb(parseInt(e.target.value.substring(0, 2)))
}
/>
<span>%</span>
</label>
<input
type="range"
className="range range-primary"
min={1}
max={99}
value={initialProb}
onChange={(e) => setInitialProb(parseInt(e.target.value))}
/>
</Row>
</div>
<Spacer h={4} />
<div className="form-control items-start mb-1">
<label className="label">
<span className="mb-1">Close date</span>
</label>
<input
type="date"
className="input input-bordered"
onClick={(e) => e.stopPropagation()}
onChange={(e) => setCloseDate(e.target.value || '')}
min={new Date().toISOString().split('T')[0]}
disabled={isSubmitting}
value={closeDate}
/>
</div>
<label>
<span className="label-text text-gray-500 ml-1">
No trading after this date
</span>
</label>
<Spacer h={4} />
<div className="form-control">
<label className="label">
2022-01-07 03:32:46 +00:00
<span className="mb-1">Description</span>
</label>
<Textarea
className="textarea w-full textarea-bordered"
rows={3}
placeholder={descriptionPlaceholder}
value={description}
disabled={isSubmitting}
onClick={(e) => e.stopPropagation()}
onChange={(e) => setDescription(e.target.value || '')}
/>
2021-12-18 23:40:39 +00:00
</div>
2022-01-05 18:23:44 +00:00
<AdvancedPanel>
<div className="form-control mb-1">
<label className="label">
2022-01-07 03:32:46 +00:00
<span className="mb-1">Subsidize your market</span>
2022-01-05 18:23:44 +00:00
</label>
2022-01-11 03:41:42 +00:00
<AmountInput
amount={ante}
onChange={setAnte}
error={anteError}
setError={setAnteError}
disabled={isSubmitting}
/>
2022-01-05 18:23:44 +00:00
</div>
</AdvancedPanel>
2021-12-18 23:40:39 +00:00
<Spacer h={4} />
<div className="flex justify-end my-4">
<button
type="submit"
className={clsx(
'btn btn-primary',
isSubmitting && 'loading disabled'
)}
disabled={isSubmitting || !isValid}
2021-12-18 23:40:39 +00:00
onClick={(e) => {
e.preventDefault()
submit()
}}
>
{isSubmitting ? 'Creating...' : 'Create market'}
2021-12-18 23:40:39 +00:00
</button>
</div>
</form>
</div>
</Page>
)
}
// 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()
}