Add probability slider to Create Market

web/package.json

@@ -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",

web/pages/create.tsx

@@ -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
+            <Textarea
-              type="text"
               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,20 +118,30 @@ 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 text-primary text-4xl w-24"
+                  disabled={isSubmitting}
+                  min={1}
+                  max={99}
+                  onChange={(e) =>
+                    setInitialProb(parseInt(e.target.value.substring(0, 2)))
+                  }
+                />
+                <span>%</span>
+              </label>
               <input
-                type="number"
+                type="range"
-                value={initialProb}
+                className="range range-primary"
-                className="input input-bordered input-md"
-                disabled={isSubmitting}
                 min={1}
                 max={99}
-                onChange={(e) =>
+                value={initialProb}
-                  setInitialProb(parseInt(e.target.value.substring(0, 2)))
+                onChange={(e) => setInitialProb(parseInt(e.target.value))}
-                }
               />
-              <span>%</span>
+            </Row>
-            </label>
           </div>
 
           <Spacer h={4} />
@@ -139,8 +150,9 @@ export default function NewContract() {
             <label className="label">
               <span className="label-text">Description</span>
             </label>
-            <textarea
+            <Textarea
-              className="textarea w-full h-24 textarea-bordered"
+              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>
-
+              <label>
-              <div className="mt-3 mb-1 text-sm text-gray-400">
+                <span className="label-text text-gray-400 ml-1">
-                Remaining balance
+                  Remaining balance:{' '}
-              </div>
+                  {formatMoney(remainingBalance > 0 ? remainingBalance : 0)}
-              <div>
+                </span>
-                {formatMoney(remainingBalance > 0 ? remainingBalance : 0)}
+              </label>
-              </div>
             </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>

web/yarn.lock

@@ -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==