import router from 'next/router' import { useEffect, useState } from 'react' import clsx from 'clsx' import dayjs from 'dayjs' import Textarea from 'react-expanding-textarea' import { Spacer } from '../components/layout/spacer' import { useUser } from '../hooks/use-user' import { Contract, contractPath } from '../lib/firebase/contracts' import { createContract } from '../lib/firebase/api-call' import { AmountInput } from '../components/amount-input' import { MINIMUM_ANTE } from '../../common/antes' import { InfoTooltip } from '../components/info-tooltip' import { CREATOR_FEE } from '../../common/fees' import { Page } from '../components/page' import { Title } from '../components/title' import { ProbabilitySelector } from '../components/probability-selector' export default function Create() { const [question, setQuestion] = useState('') return (
<div className="bg-gray-100 rounded-lg shadow-md px-6 py-4"> <form> <div className="form-control w-full"> <label className="label"> <span className="mb-1">Question</span> </label> <Textarea placeholder="e.g. Will the Democrats win the 2024 US presidential election?" className="input input-bordered resize-none" value={question} onChange={(e) => setQuestion(e.target.value || '')} /> </div> </form> <NewContract question={question} /> </div> </div> </Page> ) } // Allow user to create a new contract export function NewContract(props: { question: string; tag?: string }) { const { question, tag } = props const creator = useUser() useEffect(() => { if (creator === null) router.push('/') }, [creator]) useEffect(() => { createContract({}).catch() // warm up function }, []) const [initialProb, setInitialProb] = useState(50) const [description, setDescription] = useState('') const [ante, setAnte] = useState<number | undefined>(undefined) useEffect(() => { if (ante === undefined && creator) { const initialAnte = creator.balance < 100 ? 10 : 100 setAnte(initialAnte) } }, [ante, creator]) const [anteError, setAnteError] = useState<string | undefined>() // By default, close the market a week from today const weekFromToday = dayjs().add(7, 'day').format('YYYY-MM-DDT23:59') const [closeDate, setCloseDate] = useState<undefined | string>(weekFromToday) const [isSubmitting, setIsSubmitting] = useState(false) const closeTime = closeDate ? dayjs(closeDate).valueOf() : undefined const balance = creator?.balance || 0 const isValid = initialProb > 0 && initialProb < 100 && question.length > 0 && ante !== undefined && ante >= MINIMUM_ANTE && ante <= balance && // 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, tags: tag ? [tag] : [], }).then((r) => r.data || {}) if (result.status !== 'success') { console.log('error creating contract', result) return } await router.push(contractPath(result.contract as Contract)) } const descriptionPlaceholder = `e.g. This market resolves to "YES" if, two weeks after closing, the...\n#politics #world` if (!creator) return <></> return ( <div> <Spacer h={4} /> <div className="form-control"> <label className="label"> <span className="mb-1">Initial probability</span> </label> <ProbabilitySelector probabilityInt={initialProb} setProbabilityInt={setInitialProb} /> </div> <Spacer h={4} /> <div className="form-control items-start mb-1"> <label className="label gap-2 mb-1"> <span className="mb-1">Description</span> <InfoTooltip text="Optional. Describe how you will resolve this market." /> </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 || '')} /> </div> <Spacer h={4} /> <div className="form-control items-start mb-1"> <label className="label gap-2 mb-1"> <span>Market close</span> <InfoTooltip text="Trading will be halted after this time (local timezone)." /> </label> <input type="datetime-local" className="input input-bordered" onClick={(e) => e.stopPropagation()} onChange={(e) => setCloseDate(e.target.value || '')} min={Date.now()} disabled={isSubmitting} value={closeDate} /> </div> <Spacer h={4} /> <div className="form-control items-start mb-1"> <label className="label gap-2 mb-1"> <span>Market ante</span> <InfoTooltip text={`Subsidize your market to encourage trading. Ante bets are set to match your initial probability. You earn ${CREATOR_FEE * 100}% of the winnings.`} /> </label> <AmountInput amount={ante} minimumAmount={MINIMUM_ANTE} onChange={setAnte} error={anteError} setError={setAnteError} disabled={isSubmitting} /> </div> <Spacer h={4} /> <div className="flex justify-end my-4"> <button type="submit" className={clsx( 'btn btn-primary', isSubmitting && 'loading disabled' )} disabled={isSubmitting || !isValid} onClick={(e) => { e.preventDefault() submit() }} > {isSubmitting ? 'Creating...' : 'Create market'} </button> </div> </div> ) }