manifold/web/pages/create.tsx

484 lines
16 KiB
TypeScript

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 'web/components/layout/spacer'
import { useUser } from 'web/hooks/use-user'
import { Contract, contractPath } from 'web/lib/firebase/contracts'
import { createContract } from 'web/lib/firebase/api-call'
import { FIXED_ANTE, MINIMUM_ANTE } from 'common/antes'
import { InfoTooltip } from 'web/components/info-tooltip'
import { Page } from 'web/components/page'
import { Row } from 'web/components/layout/row'
import { MAX_DESCRIPTION_LENGTH, outcomeType, resolutionType } from 'common/contract'
import { formatMoney } from 'common/util/format'
import { useHasCreatedContractToday } from 'web/hooks/use-has-created-contract-today'
import { removeUndefinedProps } from 'common/util/object'
import { CATEGORIES } from 'common/categories'
import { ChoicesToggleGroup } from 'web/components/choices-toggle-group'
import { CalculatorIcon } from '@heroicons/react/outline'
export default function Create() {
const [question, setQuestion] = useState('')
return (
<Page>
<div className="mx-auto w-full max-w-2xl">
<div className="rounded-lg px-6 py-4">
<form>
<div className="form-control w-full">
<label className="label">
<span className="mb-1">
Question<span className={'text-red-700'}>*</span>
</span>
</label>
<Textarea
placeholder="e.g. Will the Democrats win the 2024 US presidential election?"
className="input input-bordered resize-none"
autoFocus
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 [outcomeType, setOutcomeType] = useState<outcomeType>('BINARY')
const [resolutionType, setResolutionType] = useState<resolutionType>('MANUAL')
const [initialProb, setInitialProb] = useState(50)
const [minString, setMinString] = useState('')
const [maxString, setMaxString] = useState('')
const [description, setDescription] = useState('')
const [showCalendar, setShowCalendar] = useState(false)
const [showNumInput, setShowNumInput] = useState(false)
const [category, setCategory] = useState<string>('')
// const [tagText, setTagText] = useState<string>(tag ?? '')
// const tags = parseWordsAsTags(tagText)
const [ante, setAnte] = useState(FIXED_ANTE)
const mustWaitForDailyFreeMarketStatus = useHasCreatedContractToday(creator)
// useEffect(() => {
// if (ante === null && creator) {
// const initialAnte = creator.balance < 100 ? MINIMUM_ANTE : 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 min = minString ? parseFloat(minString) : undefined
const max = maxString ? parseFloat(maxString) : undefined
const isValid =
initialProb > 0 &&
initialProb < 100 &&
question.length > 0 &&
ante !== undefined &&
ante !== null &&
ante >= MINIMUM_ANTE &&
(ante <= balance ||
(mustWaitForDailyFreeMarketStatus != 'loading' &&
!mustWaitForDailyFreeMarketStatus)) &&
// closeTime must be in the future
closeTime &&
closeTime > Date.now() &&
(outcomeType !== 'NUMERIC' ||
(min !== undefined &&
max !== undefined &&
isFinite(min) &&
isFinite(max) &&
min < max &&
max - min > 0.01))
function setCloseDateInDays(days: number) {
setShowCalendar(days === 0)
const newCloseDate = dayjs().add(days, 'day').format('YYYY-MM-DDT23:59')
setCloseDate(newCloseDate)
}
async function submit() {
// TODO: Tell users why their contract is invalid
if (!creator || !isValid) return
setIsSubmitting(true)
try {
const result = await createContract(
removeUndefinedProps({
question,
outcomeType,
description,
initialProb,
ante,
closeTime,
tags: category ? [category] : undefined,
min,
max,
})
)
await router.push(contractPath(result as Contract))
} catch (e) {
console.log('error creating contract', e)
}
}
const descriptionPlaceholder =
outcomeType === 'BINARY'
? `e.g. This question resolves to "YES" if they receive the majority of votes...`
: `e.g. I will choose the answer according to...`
if (!creator) return <></>
return (
<div>
<label className="label mt-1">
<span className="my-1">Answer type</span>
</label>
<Row className="form-control gap-2">
<label className="label cursor-pointer gap-2">
<input
className="radio"
type="radio"
name="opt"
checked={outcomeType === 'BINARY'}
value="BINARY"
onChange={() => setOutcomeType('BINARY')}
disabled={isSubmitting}
/>
<span className="label-text">Yes / No</span>
</label>
<label className="label cursor-pointer gap-2">
<input
className="radio"
type="radio"
name="opt"
checked={outcomeType === 'FREE_RESPONSE'}
value="FREE_RESPONSE"
onChange={() => setOutcomeType('FREE_RESPONSE')}
disabled={isSubmitting}
/>
<span className="label-text">Free response</span>
</label>
<label className="label cursor-pointer gap-2">
<input
className="radio"
type="radio"
name="opt"
checked={outcomeType === 'NUMERIC'}
value="NUMERIC"
onChange={() => setOutcomeType('NUMERIC')}
/>
<span className="label-text">Numeric (experimental)</span>
</label>
</Row>
<Spacer h={4} />
{outcomeType === 'BINARY' && (
<div className="form-control">
<Row className="label justify-start">
<span className="mb-1">How likely is it to happen?</span>
<CalculatorIcon
className={clsx(
'ml-2 cursor-pointer rounded-md',
'hover:bg-gray-200',
showNumInput && 'stroke-indigo-700'
)}
height={20}
onClick={() => setShowNumInput(!showNumInput)}
/>
</Row>
<Row className={'w-full items-center sm:gap-2'}>
<ChoicesToggleGroup
currentChoice={initialProb}
setChoice={setInitialProb}
choices={[25, 50, 75]}
titles={['Unlikely', 'Unsure', 'Likely']}
isSubmitting={isSubmitting}
/>
{showNumInput && (
<>
<input
type="number"
value={initialProb}
className={
'max-w-[16%] sm:max-w-[15%] ' +
'input-bordered input-md mt-2 rounded-md p-1 text-lg sm:p-4'
}
disabled={isSubmitting}
min={10}
max={90}
onChange={(e) =>
setInitialProb(parseInt(e.target.value.substring(0, 2)))
}
/>
<span className={'mt-2'}>%</span>
</>
)}
</Row>
</div>
)}
{outcomeType === 'NUMERIC' && (
<div className="form-control items-start">
<label className="label gap-2">
<span className="mb-1">Range</span>
<InfoTooltip text="The minimum and maximum numbers across the numeric range." />
</label>
<Row className="gap-2">
<input
type="number"
className="input input-bordered"
placeholder="MIN"
onClick={(e) => e.stopPropagation()}
onChange={(e) => setMinString(e.target.value)}
min={Number.MIN_SAFE_INTEGER}
max={Number.MAX_SAFE_INTEGER}
disabled={isSubmitting}
value={minString ?? ''}
/>
<input
type="number"
className="input input-bordered"
placeholder="MAX"
onClick={(e) => e.stopPropagation()}
onChange={(e) => setMaxString(e.target.value)}
min={Number.MIN_SAFE_INTEGER}
max={Number.MAX_SAFE_INTEGER}
disabled={isSubmitting}
value={maxString}
/>
</Row>
</div>
)}
<Spacer h={4} />
<div className="form-control mb-1 items-start">
<label className="label mb-1 gap-2">
<span className="mb-1">Description</span>
<InfoTooltip text="Optional. Describe how you will resolve this market." />
</label>
<Textarea
className="textarea textarea-bordered w-full resize-none"
rows={3}
maxLength={MAX_DESCRIPTION_LENGTH}
placeholder={descriptionPlaceholder}
value={description}
disabled={isSubmitting}
onClick={(e) => e.stopPropagation()}
onChange={(e) => setDescription(e.target.value || '')}
/>
</div>
<Spacer h={4} />
<div className="form-control max-w-sm items-start">
<label className="label gap-2">
<span className="mb-1">Category</span>
</label>
<select
className="select select-bordered w-full max-w-xs"
value={category}
onChange={(e) => setCategory(e.currentTarget.value ?? '')}
>
<option value={''}>(none)</option>
{Object.entries(CATEGORIES).map(([id, name]) => (
<option key={id} value={id}>
{name}
</option>
))}
</select>
</div>
<Spacer h={4} />
<div className="form-control mb-1 items-start">
<label className="label mb-1 gap-2">
<span>Question expires in a:</span>
<InfoTooltip text="Betting will be halted after this date (local timezone)." />
</label>
<Row className={'w-full items-center gap-2'}>
<ChoicesToggleGroup
currentChoice={
closeDate
? [1, 7, 30, 365, 0].includes(
dayjs(closeDate).diff(dayjs(), 'day')
)
? dayjs(closeDate).diff(dayjs(), 'day')
: 0
: -1
}
setChoice={setCloseDateInDays}
choices={[1, 7, 30, 0]}
titles={['Day', 'Week', 'Month', 'Custom']}
isSubmitting={isSubmitting}
/>
</Row>
{showCalendar && (
<input
type={'date'}
className="input input-bordered mt-4"
onClick={(e) => e.stopPropagation()}
onChange={(e) =>
setCloseDate(
dayjs(e.target.value).format('YYYY-MM-DDT23:59') || ''
)
}
min={Date.now()}
disabled={isSubmitting}
value={dayjs(closeDate).format('YYYY-MM-DD')}
/>
)}
</div>
<Spacer h={4} />
<label className="label mt-1">
<span className="my-1">Resolution type</span>
</label>
<Row className="form-control gap-2">
<label className="label cursor-pointer gap-2">
<input
className="radio"
type="radio"
name="res"
checked={resolutionType === 'MANUAL'}
value="MANUAL"
onChange={() => setResolutionType('MANUAL')}
disabled={isSubmitting}
/>
<span className="label-text">Manual</span>
</label>
<label className="label cursor-pointer gap-2">
<input
className="radio"
type="radio"
name="res"
checked={resolutionType === 'COMBINED'}
value="COMBINED"
onChange={() => setResolutionType('COMBINED')}
disabled={isSubmitting}
/>
<span className="label-text">Combined (experimental)</span>
</label>
<label className="label cursor-pointer gap-2">
<input
className="radio"
type="radio"
name="res"
checked={resolutionType === 'AUTOMATIC'}
value="AUTOMATIC"
onChange={() => setResolutionType('AUTOMATIC')}
/>
<span className="label-text">Automatic (experimental)</span>
</label>
</Row>
<Spacer h={4} />
<div className="form-control mb-1 items-start">
<label className="label mb-1 gap-2">
<span>Cost</span>
{mustWaitForDailyFreeMarketStatus != 'loading' &&
mustWaitForDailyFreeMarketStatus && (
<InfoTooltip
text={`Cost to create your market. This amount is used to subsidize trading.`}
/>
)}
</label>
{mustWaitForDailyFreeMarketStatus != 'loading' &&
!mustWaitForDailyFreeMarketStatus ? (
<div className="label-text text-primary pl-1">
<span className={'label-text text-neutral line-through '}>
{formatMoney(ante)}
</span>{' '}
FREE
</div>
) : (
mustWaitForDailyFreeMarketStatus != 'loading' && (
<div className="label-text text-neutral pl-1">
{formatMoney(ante)}
</div>
)
)}
{mustWaitForDailyFreeMarketStatus != 'loading' &&
mustWaitForDailyFreeMarketStatus &&
ante > balance && (
<div className="mb-2 mt-2 mr-auto self-center whitespace-nowrap text-xs font-medium tracking-wide">
<span className="mr-2 text-red-500">Insufficient balance</span>
<button
className="btn btn-xs btn-primary"
onClick={() => (window.location.href = '/add-funds')}
>
Add funds
</button>
</div>
)}
{/* <BuyAmountInput
amount={ante ?? undefined}
minimumAmount={MINIMUM_ANTE}
onChange={setAnte}
error={anteError}
setError={setAnteError}
disabled={isSubmitting}
contractIdForLoan={undefined}
/> */}
</div>
<Spacer h={4} />
<div className="my-4 flex justify-end">
<button
type="submit"
className={clsx(
'btn btn-primary capitalize',
isSubmitting && 'loading disabled'
)}
disabled={isSubmitting || !isValid}
onClick={(e) => {
e.preventDefault()
submit()
}}
>
{isSubmitting ? 'Creating...' : 'Create market'}
</button>
</div>
</div>
)
}