configuration of auto resolution on market creation

web/pages/create.tsx

@@ -89,16 +89,16 @@ export function NewContract(props: { question: string; tag?: string }) {
   // const [anteError, setAnteError] = useState<string | undefined>()
   // By default, close the market a week from today
   const [closeDate, setCloseDate] = useState<undefined | string>(weekFrom(dayjs()))
-  const [resolutionDate, setResolutionDate] = useState<undefined | string>(weekFrom(closeDate))
   const [closeHoursMinutes, setCloseHoursMinutes] = useState<string>('23:59')
+  const [resolutionDate, setResolutionDate] = useState<undefined | string>(weekFrom(closeDate))
+  const [resolutionHoursMinutes, setResolutionHoursMinutes] = useState<string>('23:59')
   const [probErrorText, setProbErrorText] = useState('')
   const [marketInfoText, setMarketInfoText] = useState('')
+  const [resolutionInfoText, setResolutionInfoText] = useState('')
   const [isSubmitting, setIsSubmitting] = useState(false)
 
-  const closeTime = closeDate
+  const closeTime = closeDate ? dayjs(`${closeDate}T${closeHoursMinutes}`).valueOf() : undefined
-    ? dayjs(`${closeDate}T${closeHoursMinutes}`).valueOf()
+  const automaticResolutionTime = resolutionDate ? dayjs(`${resolutionDate}TT${resolutionHoursMinutes}`).valueOf() : undefined
-    : undefined
-  const automaticResolutionTime = resolutionDate ? dayjs(resolutionDate).valueOf() : undefined
 
   const balance = creator?.balance || 0
 
@@ -376,49 +376,38 @@ export function NewContract(props: { question: string; tag?: string }) {
       </div>
 
       {outcomeType === 'BINARY' && (
-        <div>
-          <Spacer h={4} />
         <div className="form-control mb-1 items-start">
-            <label className="label mt-1 gap-2">
+          <Spacer h={4} />
+          <label className="label mb-1 gap-2">
             <span>Resolution type</span>
             <InfoTooltip text="Combined markets can be resolved manually but will be resolved automatically under given conditions." />
           </label>
-            <Row className="form-control gap-2">
+          <ChoicesToggleGroup
-              <label className="label cursor-pointer gap-2">
+            currentChoice={resolutionType}
-                <input
+            setChoice={(choice) => {
-                  className="radio"
+              setResolutionInfoText((choice === 'COMBINED' ? 'Automatic resolution is still experimental.' : ''))
-                  type="radio"
+              setResolutionType(choice as resolutionType)
-                  name="res"
+            }}
-                  checked={resolutionType === 'MANUAL'}
+            choicesMap={{
-                  value="MANUAL"
+              'Manual': 'MANUAL',
-                  onChange={() => setResolutionType('MANUAL')}
+              'Combined': 'COMBINED',
-                  disabled={isSubmitting}
+            }}
+            isSubmitting={isSubmitting}
+            className={'col-span-4 sm:col-span-3'}
           />
-                <span className="label-text">Manual</span>
+          {resolutionInfoText && (
-              </label>
+            <div className="mt-2 ml-1 text-sm text-indigo-700">
-
+              {resolutionInfoText}
-              <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>
-            </Row>
             </div>
+          )}
 
           {resolutionType === 'COMBINED' && (
-            <div className="form-control">
+            <div className="form-control mb-1 items-start">
-              <Row className="label justify-start">
+              <Spacer h={4} />
+              <label className="label mb-1 gap-2">
                 <span>Question resolves automatically as:</span>
                 <InfoTooltip text="The market will be resolved automatically on this date (local timezone)." />
-              </Row>
+              </label>
-              <Row className={'justify-start'}>
               <ChoicesToggleGroup
                 currentChoice={automaticResolution}
                 setChoice={(choice) => setAutomaticResolution(choice as resolution)}
@@ -431,25 +420,32 @@ export function NewContract(props: { question: string; tag?: string }) {
                 isSubmitting={isSubmitting}
                 className={'col-span-4 sm:col-span-3'}
               />
-              </Row>
+            <Row>
               <input
                 type={'date'}
                 className="input input-bordered mt-4"
                 onClick={(e) => e.stopPropagation()}
                 onChange={(e) =>
-                  setResolutionDate(
+                  setResolutionDate(dayjs(e.target.value).format('YYYY-MM-DDT23:59') || '')
-                    dayjs(e.target.value).format('YYYY-MM-DDT23:59') || ''
-                  )
                 }
                 min={Date.parse(closeDate??"")} // TODO: Fix: Market can be created with dates in the past
                 disabled={isSubmitting}
                 value={dayjs(resolutionDate).format('YYYY-MM-DD')}
               />
+              <input
+                type={'time'}
+                className="input input-bordered mt-4 ml-2"
+                onClick={(e) => e.stopPropagation()}
+                onChange={(e) => setResolutionHoursMinutes(e.target.value)}
+                min={'00:00'}
+                disabled={isSubmitting}
+                value={closeHoursMinutes}
+              />
+            </Row>
             </div>
           )}
         </div>
       )}
-
       <Spacer h={4} />
 
       <div className="form-control mb-1 items-start">