Working betting with ante'd NONE answer

common/answer.ts

@@ -1,3 +1,5 @@
+import { User } from './user'
+
 export type Answer = {
   id: string
   contractId: string
@@ -10,3 +12,18 @@ export type Answer = {
 
   text: string
 }
+
+export const getNoneAnswer = (contractId: string, creator: User) => {
+  const { username, name, avatarUrl } = creator
+
+  return {
+    id: 'NONE',
+    contractId,
+    createdTime: Date.now(),
+    userId: creator.id,
+    username,
+    name,
+    avatarUrl,
+    text: 'None',
+  }
+}

common/antes.ts

@@ -67,7 +67,9 @@ export function getFreeAnswerAnte(
   contract: Contract<'MULTI'>,
   anteBetId: string
 ) {
-  const ante = contract.totalBets.YES + contract.totalBets.NO
+  const { totalBets, totalShares } = contract
+  const amount = totalBets.NONE
+  const shares = totalShares.NONE
 
   const { createdTime } = contract
 
@@ -75,11 +77,11 @@ export function getFreeAnswerAnte(
     id: anteBetId,
     userId: creator.id,
     contractId: contract.id,
-    amount: ante,
+    amount,
-    shares: 0,
+    shares,
     outcome: 'NONE',
-    probBefore: 0,
+    probBefore: 100,
-    probAfter: 0,
+    probAfter: 100,
     createdTime,
     isAnte: true,
   }

common/calculate.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash'
+import * as _ from 'lodash'
 import { Bet } from './bet'
 import { Contract } from './contract'
 import { FEES } from './fees'

common/new-contract.ts

@@ -24,7 +24,7 @@ export function getNewContract(
   const propsByOutcomeType =
     outcomeType === 'BINARY'
       ? getBinaryProps(initialProb, ante)
-      : getFreeAnswerProps()
+      : getFreeAnswerProps(ante)
 
   const contract: Contract<'BINARY' | 'MULTI'> = removeUndefinedProps({
     id,
@@ -68,11 +68,11 @@ const getBinaryProps = (initialProb: number, ante: number) => {
   }
 }
 
-const getFreeAnswerProps = () => {
+const getFreeAnswerProps = (ante: number) => {
   return {
-    pool: {},
+    pool: { NONE: ante },
-    totalShares: {},
+    totalShares: { NONE: ante },
-    totalBets: {},
+    totalBets: { NONE: ante },
     phantomShares: undefined,
     outcomes: 'FREE_ANSWER' as const,
   }

functions/src/create-contract.ts

@@ -11,6 +11,7 @@ import {
   getFreeAnswerAnte,
   MINIMUM_ANTE,
 } from '../../common/antes'
+import { getNoneAnswer } from '../../common/answer'
 
 export const createContract = functions
   .runWith({ minInstances: 1 })
@@ -106,16 +107,21 @@ export const createContract = functions
           await yesBetDoc.set(yesBet)
           await noBetDoc.set(noBet)
         } else if (outcomeType === 'MULTI') {
+          const noneAnswerDoc = firestore.doc(
+            `contracts/${contract.id}/answers/NONE`
+          )
+          const noneAnswer = getNoneAnswer(contract.id, creator)
+          await noneAnswerDoc.set(noneAnswer)
+
           const anteBetDoc = firestore
             .collection(`contracts/${contract.id}/bets`)
             .doc()
-          getFreeAnswerAnte(
+          const anteBet = getFreeAnswerAnte(
             creator,
             contract as Contract<'MULTI'>,
             anteBetDoc.id
           )
-          // Disable until we figure out how this should work.
+          await anteBetDoc.set(anteBet)
-          // await anteBetDoc.set(anteBetDoc)
         }
       }
 

web/components/answers-panel.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx'
 import { useEffect, useRef, useState } from 'react'
 import Textarea from 'react-expanding-textarea'
+import { XIcon } from '@heroicons/react/solid'
 
 import { Answer } from '../../common/answer'
 import { Contract } from '../../common/contract'
@@ -25,8 +26,10 @@ import {
   getProbabilityAfterBet,
   getOutcomeProbability,
   calculateShares,
+  calculatePayoutAfterCorrectBet,
 } from '../../common/calculate'
 import { firebaseLogin } from '../lib/firebase/users'
+import { Bet } from '../../common/bet'
 
 export function AnswersPanel(props: {
   contract: Contract<'MULTI'>
@@ -49,12 +52,14 @@ function AnswerItem(props: { answer: Answer; contract: Contract<'MULTI'> }) {
   const { username, avatarUrl, name, createdTime } = answer
 
   const createdDate = dayjs(createdTime).format('MMM D')
+  const prob = getOutcomeProbability(contract.totalShares, answer.id)
+  const probPercent = formatPercent(prob)
 
   const [isBetting, setIsBetting] = useState(false)
 
   return (
-    <Col>
+    <Col className="p-2 sm:flex-row">
-      <Col className="p-2 sm:flex-row">
+      <Row className="flex-1">
         <Col className="gap-2 flex-1">
           <div>{answer.text}</div>
 
@@ -76,15 +81,26 @@ function AnswerItem(props: { answer: Answer; contract: Contract<'MULTI'> }) {
           </Row>
         </Col>
 
-        <BuyButton
+        {!isBetting && (
-          className="justify-end self-end flex-initial"
+          <Col className="sm:flex-row items-center gap-4">
-          onClick={() => {
+            <div className="text-2xl text-green-500">{probPercent}</div>
-            setIsBetting(true)
+            <BuyButton
-          }}
+              className="justify-end self-end flex-initial btn-md !px-4 sm:!px-8"
-        />
+              onClick={() => {
-      </Col>
+                setIsBetting(true)
+              }}
+            />
+          </Col>
+        )}
+      </Row>
 
-      {isBetting && <AnswerBetPanel answer={answer} contract={contract} />}
+      {isBetting && (
+        <AnswerBetPanel
+          answer={answer}
+          contract={contract}
+          closePanel={() => setIsBetting(false)}
+        />
+      )}
     </Col>
   )
 }
@@ -92,8 +108,9 @@ function AnswerItem(props: { answer: Answer; contract: Contract<'MULTI'> }) {
 function AnswerBetPanel(props: {
   answer: Answer
   contract: Contract<'MULTI'>
+  closePanel: () => void
 }) {
-  const { answer, contract } = props
+  const { answer, contract, closePanel } = props
   const { id: answerId } = answer
 
   const user = useUser()
@@ -101,18 +118,12 @@ function AnswerBetPanel(props: {
 
   const [error, setError] = useState<string | undefined>()
   const [isSubmitting, setIsSubmitting] = useState(false)
-  const [wasSubmitted, setWasSubmitted] = useState(false)
 
   const inputRef = useRef<HTMLElement>(null)
   useEffect(() => {
     inputRef.current && inputRef.current.focus()
   }, [])
 
-  function onBetChange(newAmount: number | undefined) {
-    setWasSubmitted(false)
-    setBetAmount(newAmount)
-  }
-
   async function submitBet() {
     if (!user || !betAmount) return
 
@@ -133,9 +144,7 @@ function AnswerBetPanel(props: {
     console.log('placed bet. Result:', result)
 
     if (result?.status === 'success') {
-      setIsSubmitting(false)
+      closePanel()
-      setWasSubmitted(true)
-      setBetAmount(undefined)
     } else {
       setError(result?.error || 'Error placing bet')
       setIsSubmitting(false)
@@ -155,83 +164,86 @@ function AnswerBetPanel(props: {
   const shares = calculateShares(contract.totalShares, betAmount ?? 0, answerId)
 
   const currentPayout = betAmount
-    ? 0
+    ? calculatePayoutAfterCorrectBet(
-    : // calculatePayoutAfterCorrectBet(contract, {
+        contract as any as Contract,
-      //     outcome: answerId,
+        {
-      //     amount: betAmount,
+          outcome: answerId,
-      //     shares,
+          amount: betAmount,
-      //   } as Bet)
+          shares,
-      0
+        } as Bet
+      )
+    : 0
 
   const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0
   const currentReturnPercent = (currentReturn * 100).toFixed() + '%'
 
   return (
-    <Col className="items-center">
+    <Col className="items-start">
-      <Col className="p-2 items-start">
+      <Row className="self-stretch items-center justify-between">
-        <div className="my-3 text-left text-sm text-gray-500">Amount </div>
+        <div className="text-xl">Buy this answer</div>
-        <AmountInput
+
-          inputClassName="w-full"
+        <button className="btn-ghost btn-circle" onClick={closePanel}>
-          amount={betAmount}
+          <XIcon className="w-8 h-8 text-gray-500 mx-auto" aria-hidden="true" />
-          onChange={onBetChange}
+        </button>
-          error={error}
+      </Row>
-          setError={setError}
+      <div className="my-3 text-left text-sm text-gray-500">Amount </div>
-          disabled={isSubmitting}
+      <AmountInput
-          inputRef={inputRef}
+        inputClassName="w-full"
+        amount={betAmount}
+        onChange={setBetAmount}
+        error={error}
+        setError={setError}
+        disabled={isSubmitting}
+        inputRef={inputRef}
+      />
+
+      <Spacer h={4} />
+
+      <div className="mt-2 mb-1 text-sm text-gray-500">Implied probability</div>
+      <Row>
+        <div>{formatPercent(initialProb)}</div>
+        <div className="mx-2">→</div>
+        <div>{formatPercent(resultProb)}</div>
+      </Row>
+
+      <Spacer h={4} />
+
+      <Row className="mt-2 mb-1 items-center gap-2 text-sm text-gray-500">
+        Potential payout
+        <InfoTooltip
+          text={`Current payout for ${formatWithCommas(
+            shares
+          )} / ${formatWithCommas(
+            shares + contract.totalShares[answerId]
+          )} shares`}
         />
+      </Row>
+      <div>
+        {formatMoney(currentPayout)}
+        &nbsp; <span>(+{currentReturnPercent})</span>
+      </div>
 
-        <Spacer h={4} />
+      <Spacer h={6} />
 
-        <div className="mt-2 mb-1 text-sm text-gray-500">
+      {user ? (
-          Implied probability
+        <button
-        </div>
+          className={clsx(
-        <Row>
+            'btn',
-          <div>{formatPercent(initialProb)}</div>
+            betDisabled ? 'btn-disabled' : 'btn-primary',
-          <div className="mx-2">→</div>
+            isSubmitting ? 'loading' : ''
-          <div>{formatPercent(resultProb)}</div>
+          )}
-        </Row>
+          onClick={betDisabled ? undefined : submitBet}
-
+        >
-        <Spacer h={4} />
+          {isSubmitting ? 'Submitting...' : 'Submit trade'}
-
+        </button>
-        <Row className="mt-2 mb-1 items-center gap-2 text-sm text-gray-500">
+      ) : (
-          Potential payout
+        <button
-          <InfoTooltip
+          className="btn mt-4 whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
-            text={`Current payout for ${formatWithCommas(
+          onClick={firebaseLogin}
-              shares
+        >
-            )} / ${formatWithCommas(
+          Sign in to trade!
-              shares + contract.totalShares[answerId]
+        </button>
-            )} shares`}
+      )}
-          />
-        </Row>
-        <div>
-          {formatMoney(currentPayout)}
-          &nbsp; <span>(+{currentReturnPercent})</span>
-        </div>
-
-        <Spacer h={6} />
-
-        {user ? (
-          <button
-            className={clsx(
-              'btn',
-              betDisabled ? 'btn-disabled' : 'btn-primary',
-              isSubmitting ? 'loading' : ''
-            )}
-            onClick={betDisabled ? undefined : submitBet}
-          >
-            {isSubmitting ? 'Submitting...' : 'Submit trade'}
-          </button>
-        ) : (
-          <button
-            className="btn mt-4 whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
-            onClick={firebaseLogin}
-          >
-            Sign in to trade!
-          </button>
-        )}
-
-        {wasSubmitted && <div className="mt-4">Trade submitted!</div>}
-      </Col>
     </Col>
   )
 }
@@ -267,7 +279,7 @@ function CreateAnswerInput(props: { contract: Contract<'MULTI'> }) {
   }
 
   return (
-    <Col className="gap-4 mt-2">
+    <Col className="gap-4 mt-2 px-2">
       <Col className="sm:flex-row gap-8">
         <Col className="flex-1 gap-2">
           <div className="text-gray-500 text-sm mb-1">Add your answer</div>

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

@@ -121,10 +121,13 @@ export default function ContractPage(props: {
             folds={folds}
           >
             {contract.outcomes === 'FREE_ANSWER' && (
-              <AnswersPanel
+              <>
-                contract={contract as any}
+                <Spacer h={4} />
-                answers={props.answers}
+                <AnswersPanel
-              />
+                  contract={contract as any}
+                  answers={props.answers}
+                />
+              </>
             )}
           </ContractOverview>