Add back input for setting initial probability of created markets

web/pages/create.tsx

@@ -122,7 +122,8 @@ export function NewContract(props: {
   const [outcomeType, setOutcomeType] = useState<outcomeType>(
     (params?.outcomeType as outcomeType) ?? 'BINARY'
   )
-  const [initialProb] = useState(50)
+  const [initialProb, setInitialProb] = useState(50)
+  const [probErrorText, setProbErrorText] = useState('')
   const [minString, setMinString] = useState(params?.min ?? '')
   const [maxString, setMaxString] = useState(params?.max ?? '')
   const [isLogScale, setIsLogScale] = useState<boolean>(!!params?.isLogScale)
@@ -294,6 +295,56 @@ export function NewContract(props: {
 
       <Spacer h={6} />
 
+      {outcomeType === 'BINARY' && (
+        <div className="form-control">
+          <Row className="label justify-start">
+            <span className="mb-1">How likely is it to happen?</span>
+          </Row>
+          <Row className={'justify-start'}>
+            <ChoicesToggleGroup
+              currentChoice={initialProb}
+              setChoice={(option) => {
+                setProbErrorText('')
+                setInitialProb(option as number)
+              }}
+              choicesMap={{
+                Unlikely: 25,
+                'Not Sure': 50,
+                Likely: 75,
+              }}
+              isSubmitting={isSubmitting}
+              className={'col-span-4 sm:col-span-3'}
+            >
+              <Row className={'col-span-3 items-center justify-start'}>
+                <input
+                  type="number"
+                  value={initialProb}
+                  className={
+                    'input-bordered input-md max-w-[100px] rounded-md border-gray-300 pr-2 text-lg'
+                  }
+                  min={5}
+                  max={95}
+                  disabled={isSubmitting}
+                  onChange={(e) => {
+                    // show error if prob is less than 5 or greater than 95:
+                    const prob = parseInt(e.target.value)
+                    setInitialProb(prob)
+                    if (prob < 5 || prob > 95)
+                      setProbErrorText('Probability must be between 5% and 95%')
+                    else setProbErrorText('')
+                  }}
+                />
+                <span className={'ml-1'}>%</span>
+              </Row>
+            </ChoicesToggleGroup>
+          </Row>
+          {probErrorText && (
+            <div className="text-error mt-2 ml-1 text-sm">{probErrorText}</div>
+          )}
+          <Spacer h={6} />
+        </div>
+      )}
+
       {outcomeType === 'MULTIPLE_CHOICE' && (
         <MultipleChoiceAnswers setAnswers={setAnswers} />
       )}