Add probability slider to Create Market

This commit is contained in:
Austin Chen 2022-01-06 00:45:30 -08:00
parent 477878a09f
commit f218a74a0c
3 changed files with 60 additions and 27 deletions

View File

@ -22,7 +22,8 @@
"lodash": "4.17.21",
"next": "12.0.7",
"react": "17.0.2",
"react-dom": "17.0.2"
"react-dom": "17.0.2",
"react-expanding-textarea": "^2.3.4"
},
"devDependencies": {
"@tailwindcss/forms": "0.4.0",

View File

@ -2,6 +2,7 @@ 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 { CreatorContractsList } from '../components/contracts-list'
import { Spacer } from '../components/layout/spacer'
@ -12,6 +13,7 @@ import { Page } from '../components/page'
import { formatMoney } from '../lib/util/format'
import { AdvancedPanel } from '../components/advanced-panel'
import { createContract } from '../lib/firebase/api-call'
import { Row } from '../components/layout/row'
// Allow user to create a new contract
export default function NewContract() {
@ -101,10 +103,9 @@ export default function NewContract() {
<span className="label-text">Question</span>
</label>
<input
type="text"
<Textarea
placeholder="e.g. Will the FDA will approve Paxlovid before Jun 2nd, 2022?"
className="input input-bordered"
className="input input-bordered resize-none"
disabled={isSubmitting}
value={question}
onChange={(e) => setQuestion(e.target.value || '')}
@ -117,11 +118,12 @@ export default function NewContract() {
<label className="label">
<span className="label-text">Initial probability</span>
</label>
<label className="input-group input-group-md w-fit">
<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"
className="input input-bordered input-md text-primary text-4xl w-24"
disabled={isSubmitting}
min={1}
max={99}
@ -131,6 +133,15 @@ export default function NewContract() {
/>
<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} />
@ -139,8 +150,9 @@ export default function NewContract() {
<label className="label">
<span className="label-text">Description</span>
</label>
<textarea
className="textarea w-full h-24 textarea-bordered"
<Textarea
className="textarea w-full textarea-bordered"
rows={3}
placeholder={descriptionPlaceholder}
value={description}
disabled={isSubmitting}
@ -156,7 +168,7 @@ export default function NewContract() {
</label>
<label className="input-group">
<span className="text-sm bg-gray-200">M$</span>
<span className="text-sm ">M$</span>
<input
className={clsx(
'input input-bordered',
@ -170,20 +182,19 @@ export default function NewContract() {
onChange={(e) => onAnteChange(e.target.value)}
/>
</label>
<div className="mt-3 mb-1 text-sm text-gray-400">
Remaining balance
</div>
<div>
<label>
<span className="label-text text-gray-400 ml-1">
Remaining balance:{' '}
{formatMoney(remainingBalance > 0 ? remainingBalance : 0)}
</div>
</span>
</label>
</div>
<Spacer h={4} />
<div className="form-control">
<label className="label">
<span className="label-text">Close date (optional)</span>
<span className="label-text">Close date</span>
</label>
<input
type="date"
@ -196,7 +207,7 @@ export default function NewContract() {
/>
</div>
<label>
<span className="label-text text-gray-400 ml-2">
<span className="label-text text-gray-400 ml-1">
No new trades will be allowed after{' '}
{closeDate ? formattedCloseTime : 'this time'}
</span>

View File

@ -2289,6 +2289,11 @@ fast-levenshtein@^2.0.6:
resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
fast-shallow-equal@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz#d4dcaf6472440dcefa6f88b98e3251e27f25628b"
integrity sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==
fastq@^1.6.0:
version "1.13.0"
resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.13.0.tgz#616760f88a7526bdfc596b7cab8c18938c36b98c"
@ -3837,6 +3842,15 @@ react-dom@17.0.2:
object-assign "^4.1.1"
scheduler "^0.20.2"
react-expanding-textarea@^2.3.4:
version "2.3.4"
resolved "https://registry.yarnpkg.com/react-expanding-textarea/-/react-expanding-textarea-2.3.4.tgz#3eee788cf3b36798d0f9aed5a50f752278d44a49"
integrity sha512-zg/14CyPrIbjPgjfQGxcCmSv9nCrSNpmYpnqyOnNwaOJb8zxWD/GXN8Dgnp5jx8CPU6uIfZVhxs7h2hiOXiSHQ==
dependencies:
fast-shallow-equal "^1.0.0"
react-with-forwarded-ref "^0.3.3"
tslib "^2.0.3"
react-is@17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
@ -3866,6 +3880,13 @@ react-refresh@0.8.3:
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
react-with-forwarded-ref@^0.3.3:
version "0.3.4"
resolved "https://registry.yarnpkg.com/react-with-forwarded-ref/-/react-with-forwarded-ref-0.3.4.tgz#b1e884ea081ec3c5dd578f37889159797454c0a5"
integrity sha512-SRq/uTdTh+02JDwYzEEhY2aNNWl/CP2EKP2nQtXzhJw06w6PgYnJt2ObrebvFJu6+wGzX3vDHU3H/ux9hxyZUQ==
dependencies:
tslib "^2.0.3"
react@17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@ -4508,7 +4529,7 @@ tslib@^1.8.1, tslib@^1.9.0:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
tslib@^2.1.0:
tslib@^2.0.3, tslib@^2.1.0:
version "2.3.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==