Add a closing date to Create Market (#10)

* Preview a slimmed-down version of /Create

* Rework dropdown to be on bottom

* Parse the close time as just before midnight

* Prevent invalid contracts from being created

* Prevent trading after contract has closed

web/components/contract-overview.tsx

@@ -16,6 +16,19 @@ import { Linkify } from './linkify'
 import clsx from 'clsx'
 import { ContractDetails, ResolutionOrChance } from './contract-card'
 
+function ContractCloseTime(props: { contract: Contract }) {
+  const closeTime = props.contract.closeTime
+  if (!closeTime) {
+    return null
+  }
+  return (
+    <div className="text-gray-500 text-sm">
+      Trading {closeTime > Date.now() ? 'closes' : 'closed'} at{' '}
+      {dayjs(closeTime).format('MMM D, h:mma')}
+    </div>
+  )
+}
+
 function ContractDescription(props: {
   contract: Contract
   isCreator: boolean
@@ -127,9 +140,14 @@ export const ContractOverview = (props: {
 
       <Spacer h={12} />
 
+      <ContractCloseTime contract={contract} />
+
+      <Spacer h={4} />
+
       {((isCreator && !contract.resolution) || contract.description) && (
         <label className="text-gray-500 mb-2 text-sm">Description</label>
       )}
+
       <ContractDescription contract={contract} isCreator={isCreator} />
 
       {/* Show a delete button for contracts without any trading */}

web/lib/service/create-contract.ts

@@ -12,7 +12,8 @@ export async function createContract(
   question: string,
   description: string,
   initialProb: number,
-  creator: User
+  creator: User,
+  closeTime?: number
 ) {
   const proposedSlug = slugify(question).substring(0, 35)
 
@@ -45,6 +46,9 @@ export async function createContract(
     createdTime: Date.now(),
     lastUpdatedTime: Date.now(),
   }
+  if (closeTime) {
+    contract.closeTime = closeTime
+  }
 
   return await pushNewContract(contract)
 }

web/pages/[username]/[contractSlug].tsx

@@ -53,6 +53,9 @@ export default function ContractPage(props: {
 
   const { creatorId, isResolved, resolution, question } = contract
   const isCreator = user?.id === creatorId
+  const allowTrade =
+    !isResolved && (!contract.closeTime || contract.closeTime > Date.now())
+  const allowResolve = !isResolved && isCreator && user
 
   const { probPercent } = compute(contract)
 
@@ -61,7 +64,7 @@ export default function ContractPage(props: {
     : `${probPercent} chance. ${contract.description}`
 
   return (
-    <Page wide={!isResolved}>
+    <Page wide={allowTrade}>
       <SEO
         title={question}
         description={description}
@@ -74,14 +77,13 @@ export default function ContractPage(props: {
           <BetsSection contract={contract} user={user ?? null} />
         </div>
 
-        {!isResolved && (
+        {(allowTrade || allowResolve) && (
           <>
             <div className="md:ml-8" />
 
             <Col className="flex-1">
-              <BetPanel contract={contract} />
+              {allowTrade && <BetPanel contract={contract} />}
-
+              {allowResolve && (
-              {isCreator && user && (
                 <ResolutionPanel creator={user} contract={contract} />
               )}
             </Col>

web/pages/create.tsx

@@ -8,6 +8,9 @@ import { useUser } from '../hooks/use-user'
 import { path } from '../lib/firebase/contracts'
 import { createContract } from '../lib/service/create-contract'
 import { Page } from '../components/page'
+import { Row } from '../components/layout/row'
+import clsx from 'clsx'
+import dayjs from 'dayjs'
 
 // Allow user to create a new contract
 export default function NewContract() {
@@ -20,11 +23,33 @@ export default function NewContract() {
   const [initialProb, setInitialProb] = useState(50)
   const [question, setQuestion] = useState('')
   const [description, setDescription] = useState('')
+  const [closeDate, setCloseDate] = useState('')
   const [isSubmitting, setIsSubmitting] = useState(false)
+  const [collapsed, setCollapsed] = useState(true)
+
+  // Given a date string like '2022-04-02',
+  // return the time just before midnight on that date (in the user's local time), as millis since epoch
+  function dateToMillis(date: string) {
+    return dayjs(date)
+      .set('hour', 23)
+      .set('minute', 59)
+      .set('second', 59)
+      .valueOf()
+  }
+  const closeTime = dateToMillis(closeDate)
+  // We'd like this to look like "Apr 2, 2022, 23:59:59 PM PT" but timezones are hard with dayjs
+  const formattedCloseTime = new Date(closeTime).toString()
+
+  const isValid =
+    initialProb > 0 &&
+    initialProb < 100 &&
+    question.length > 0 &&
+    // If set, closeTime must be in the future
+    (!closeDate || closeTime > Date.now())
 
   async function submit() {
-    // TODO: add more rigorous error handling for question
+    // TODO: Tell users why their contract is invalid
-    if (!creator || !question) return
+    if (!creator || !isValid) return
 
     setIsSubmitting(true)
 
@@ -32,7 +57,8 @@ export default function NewContract() {
       question,
       description,
       initialProb,
-      creator
+      creator,
+      closeTime
     )
     await router.push(path(contract))
   }
@@ -49,52 +75,94 @@ export default function NewContract() {
         {/* Create a Tailwind form that takes in all the fields needed for a new contract */}
         {/* When the form is submitted, create a new contract in the database */}
         <form>
-          <div className="form-control">
+          <div className="flex justify-between gap-4 items-center">
-            <label className="label">
+            <div className="form-control w-full">
-              <span className="label-text">Question</span>
+              <label className="label">
-            </label>
+                <span className="label-text">Prediction</span>
+              </label>
 
-            <input
+              <input
-              type="text"
+                type="text"
-              placeholder="e.g. Will the FDA approve Paxlovid before Jun 2nd, 2022?"
+                placeholder="e.g. The FDA will approve Paxlovid before Jun 2nd, 2022"
-              className="input input-bordered"
+                className="input input-bordered"
-              value={question}
+                value={question}
-              onChange={(e) => setQuestion(e.target.value || '')}
+                onChange={(e) => setQuestion(e.target.value || '')}
-            />
+              />
+            </div>
+
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text">Chance</span>
+              </label>
+              <label className="input-group input-group-md w-fit">
+                <input
+                  type="number"
+                  value={initialProb}
+                  className="input input-bordered input-md"
+                  min={1}
+                  max={99}
+                  onChange={(e) => setInitialProb(parseInt(e.target.value))}
+                />
+                <span>%</span>
+              </label>
+            </div>
           </div>
 
-          <Spacer h={4} />
+          {/* Collapsible "Advanced" section */}
+          <div
+            tabIndex={0}
+            className={clsx(
+              'cursor-pointer relative collapse collapse-arrow',
+              collapsed ? 'collapse-close' : 'collapse-open'
+            )}
+          >
+            <div
+              className="mt-4 mr-6 text-sm text-gray-400 text-right"
+              onClick={() => setCollapsed((collapsed) => !collapsed)}
+            >
+              Advanced
+            </div>
+            <Row>
+              <div
+                className="collapse-title p-0 absolute w-0 h-0 min-h-0"
+                style={{ top: -2, right: -15, color: '#9ca3af' /* gray-400 */ }}
+              />
+            </Row>
+            <div className="collapse-content !p-0 m-0 !bg-transparent">
+              <div className="form-control">
+                <label className="label">
+                  <span className="label-text">Description (optional)</span>
+                </label>
+                <textarea
+                  className="textarea w-full h-24 textarea-bordered"
+                  placeholder={descriptionPlaceholder}
+                  value={description}
+                  onClick={(e) => e.stopPropagation()}
+                  onChange={(e) => setDescription(e.target.value || '')}
+                ></textarea>
+              </div>
 
-          <div className="form-control">
+              <div className="form-control">
-            <label className="label">
+                <label className="label">
-              <span className="label-text">Description (optional)</span>
+                  <span className="label-text">Close date (optional)</span>
-            </label>
+                </label>
-
+                <input
-            <textarea
+                  type="date"
-              className="textarea h-24 textarea-bordered"
+                  className="input input-bordered"
-              placeholder={descriptionPlaceholder}
+                  onClick={(e) => e.stopPropagation()}
-              value={description}
+                  onChange={(e) => setCloseDate(e.target.value || '')}
-              onChange={(e) => setDescription(e.target.value || '')}
+                  min={new Date().toISOString().split('T')[0]}
-            ></textarea>
+                  value={closeDate}
-          </div>
+                />
-
+              </div>
-          <Spacer h={4} />
+              <label>
-
+                {closeDate && (
-          <div className="form-control">
+                  <span className="label-text text-gray-400 ml-1">
-            <label className="label">
+                    No new trades will be allowed after {formattedCloseTime}
-              <span className="label-text">
+                  </span>
-                Initial probability: {initialProb}%
+                )}
-              </span>
+              </label>
-            </label>
+            </div>
-
-            <input
-              type="range"
-              className="range range-lg range-primary"
-              min="1"
-              max={99}
-              value={initialProb}
-              onChange={(e) => setInitialProb(parseInt(e.target.value))}
-            />
           </div>
 
           <Spacer h={4} />
@@ -103,7 +171,7 @@ export default function NewContract() {
             <button
               type="submit"
               className="btn btn-primary"
-              disabled={isSubmitting || !question}
+              disabled={isSubmitting || !isValid}
               onClick={(e) => {
                 e.preventDefault()
                 submit()