open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Center create market page. Tweak labels

Browse Source
This commit is contained in:
jahooma 2022-01-15 19:02:01 -06:00
parent 4618b37c82
commit c13b71b754
1 changed files with 109 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

223
web/pages/create.tsx
View File

@ -89,137 +89,132 @@ export default function NewContract() {
return ( return (
<Page> <Page>
<Title text="Create a new prediction market" /> <div className="w-full max-w-2xl mx-auto">
<Title text="Create a new prediction market" />
<div className="w-full max-w-2xl bg-gray-100 rounded-lg shadow-md px-6 py-4"> <div className="bg-gray-100 rounded-lg shadow-md px-6 py-4">
{/* Create a Tailwind form that takes in all the fields needed for a new contract */} <form>
{/* When the form is submitted, create a new contract in the database */} <div className="form-control w-full">
<form> <label className="label">
<div className="form-control w-full"> <span className="mb-1">Question</span>
<label className="label"> </label>
<span className="mb-1">Question</span>
</label>
<Textarea <Textarea
placeholder="e.g. Will the Democrats win the 2024 US presidential election?" placeholder="e.g. Will the Democrats win the 2024 US presidential election?"
className="input input-bordered resize-none" className="input input-bordered resize-none"
disabled={isSubmitting} disabled={isSubmitting}
value={question} value={question}
onChange={(e) => setQuestion(e.target.value || '')} onChange={(e) => setQuestion(e.target.value || '')}
/> />
</div> </div>
<Spacer h={4} /> <Spacer h={4} />
<div className="form-control"> <div className="form-control">
<label className="label"> <label className="label">
<span className="mb-1">Initial probability</span> <span className="mb-1">Initial probability</span>
</label> </label>
<Row className="items-center gap-2"> <Row className="items-center gap-2">
<label className="input-group input-group-lg w-fit text-lg"> <label className="input-group input-group-lg w-fit text-lg">
<input
type="number"
value={initialProb}
className="input input-bordered input-md text-lg"
disabled={isSubmitting}
min={1}
max={99}
onChange={(e) =>
setInitialProb(parseInt(e.target.value.substring(0, 2)))
}
/>
<span>%</span>
</label>
<input <input
type="number" type="range"
value={initialProb} className="range range-primary"
className="input input-bordered input-md text-lg"
disabled={isSubmitting}
min={1} min={1}
max={99} max={99}
onChange={(e) => value={initialProb}
setInitialProb(parseInt(e.target.value.substring(0, 2))) onChange={(e) => setInitialProb(parseInt(e.target.value))}
}
/> />
<span>%</span> </Row>
</div>
<Spacer h={4} />
<div className="form-control">
<label className="label">
<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 || '')}
/>
</div>
<Spacer h={4} />
<div className="form-control items-start mb-1">
<label className="label gap-2 mb-1">
<span>Last trading day</span>
<InfoTooltip text="Trading allowed through 11:59 pm local time on this date." />
</label> </label>
<input <input
type="range" type="date"
className="range range-primary" className="input input-bordered"
min={1} onClick={(e) => e.stopPropagation()}
max={99} onChange={(e) => setCloseDate(e.target.value || '')}
value={initialProb} min={new Date().toISOString().split('T')[0]}
onChange={(e) => setInitialProb(parseInt(e.target.value))} disabled={isSubmitting}
value={closeDate}
/> />
</Row> </div>
</div>
<Spacer h={4} /> <Spacer h={4} />
<div className="form-control"> <div className="form-control items-start mb-1">
<label className="label"> <label className="label gap-2 mb-1">
<span className="mb-1">Description</span> <span>Market ante</span>
</label> <InfoTooltip
<Textarea text={`Subsidize your market to encourage trading. Ante bets are set to match your initial probability.
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">
<span className="mb-1 mr-1">Last trading day</span>
<InfoTooltip text="Trading allowed up to 11:59:59 pm local time on this date." />
</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 items-start mb-1">
<label className="label">
<span className="mb-1 mr-1">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 trading volume.`} You earn ${CREATOR_FEE * 100}% of trading volume.`}
/>
</label>
<AmountInput
amount={ante}
minimumAmount={MINIMUM_ANTE}
onChange={setAnte}
error={anteError}
setError={setAnteError}
disabled={isSubmitting}
/> />
</label> </div>
<AmountInput
amount={ante}
minimumAmount={MINIMUM_ANTE}
onChange={setAnte}
error={anteError}
setError={setAnteError}
disabled={isSubmitting}
/>
</div>
<Spacer h={4} /> <Spacer h={4} />
<div className="flex justify-end my-4"> <div className="flex justify-end my-4">
<button <button
type="submit" type="submit"
className={clsx( className={clsx(
'btn btn-primary', 'btn btn-primary',
isSubmitting && 'loading disabled' isSubmitting && 'loading disabled'
)} )}
disabled={isSubmitting || !isValid} disabled={isSubmitting || !isValid}
onClick={(e) => { onClick={(e) => {
e.preventDefault() e.preventDefault()
submit() submit()
}} }}
> >
{isSubmitting ? 'Creating...' : 'Create market'} {isSubmitting ? 'Creating...' : 'Create market'}
</button> </button>
</div> </div>
</form> </form>
</div>
</div> </div>
</Page> </Page>
) )