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
2022-01-02 21:21:25 -08:00 · 2022-01-02 21:21:25 -08:00 · fb0e16d619
commit fb0e16d619
parent 3ba96028f4
4 changed files with 144 additions and 52 deletions
--- a/web/components/contract-overview.tsx
+++ b/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 */}
--- a/web/lib/service/create-contract.ts
+++ b/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)
 }
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/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} />
-
-              {isCreator && user && (
+              {allowTrade && <BetPanel contract={contract} />}
+              {allowResolve && (
                <ResolutionPanel creator={user} contract={contract} />
              )}
            </Col>
--- a/web/pages/create.tsx
+++ b/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
-    if (!creator || !question) return
+    // TODO: Tell users why their contract is invalid
+    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">
-            <label className="label">
-              <span className="label-text">Question</span>
-            </label>
+          <div className="flex justify-between gap-4 items-center">
+            <div className="form-control w-full">
+              <label className="label">
+                <span className="label-text">Prediction</span>
+              </label>

-            <input
-              type="text"
-              placeholder="e.g. Will the FDA approve Paxlovid before Jun 2nd, 2022?"
-              className="input input-bordered"
-              value={question}
-              onChange={(e) => setQuestion(e.target.value || '')}
-            />
+              <input
+                type="text"
+                placeholder="e.g. The FDA will approve Paxlovid before Jun 2nd, 2022"
+                className="input input-bordered"
+                value={question}
+                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">
-            <label className="label">
-              <span className="label-text">Description (optional)</span>
-            </label>
-
-            <textarea
-              className="textarea h-24 textarea-bordered"
-              placeholder={descriptionPlaceholder}
-              value={description}
-              onChange={(e) => setDescription(e.target.value || '')}
-            ></textarea>
-          </div>
-
-          <Spacer h={4} />
-
-          <div className="form-control">
-            <label className="label">
-              <span className="label-text">
-                Initial probability: {initialProb}%
-              </span>
-            </label>
-
-            <input
-              type="range"
-              className="range range-lg range-primary"
-              min="1"
-              max={99}
-              value={initialProb}
-              onChange={(e) => setInitialProb(parseInt(e.target.value))}
-            />
+              <div className="form-control">
+                <label className="label">
+                  <span className="label-text">Close date (optional)</span>
+                </label>
+                <input
+                  type="date"
+                  className="input input-bordered"
+                  onClick={(e) => e.stopPropagation()}
+                  onChange={(e) => setCloseDate(e.target.value || '')}
+                  min={new Date().toISOString().split('T')[0]}
+                  value={closeDate}
+                />
+              </div>
+              <label>
+                {closeDate && (
+                  <span className="label-text text-gray-400 ml-1">
+                    No new trades will be allowed after {formattedCloseTime}
+                  </span>
+                )}
+              </label>
+            </div>
          </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()