From 5f385c2f9dbf35642e33c72c484af54ac0ac3f9e Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Tue, 24 May 2022 15:46:41 -0500
Subject: [PATCH 01/10] Revert "use geometric mean probability to calculate
 fees for cfmm (a lot easier than solving the integral)"

This reverts commit a1c3a5e5692f82d48a2ada852da2571c47bfebba.
---
 common/calculate-cpmm.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/common/calculate-cpmm.ts b/common/calculate-cpmm.ts
index 6b14211d..4ced5b16 100644
--- a/common/calculate-cpmm.ts
+++ b/common/calculate-cpmm.ts
@@ -63,10 +63,8 @@ export function getCpmmLiquidityFee(
   bet: number,
   outcome: string
 ) {
-  const probBefore = getCpmmProbability(contract.pool, contract.p)
-  const probAfter = getCpmmProbabilityAfterBetBeforeFees(contract, outcome, bet)
-  const probMid = Math.sqrt(probBefore * probAfter)
-  const betP = outcome === 'YES' ? 1 - probMid : probMid
+  const prob = getCpmmProbabilityAfterBetBeforeFees(contract, outcome, bet)
+  const betP = outcome === 'YES' ? 1 - prob : prob
 
   const liquidityFee = LIQUIDITY_FEE * betP * bet
   const platformFee = PLATFORM_FEE * betP * bet

From 2d8ad40e70ac70b7c2f9987dc3826c8e241b12e0 Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Tue, 24 May 2022 14:31:49 -0700
Subject: [PATCH 02/10] Add outcome type to API market descriptors (#325)

---
 web/pages/api/v0/_types.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/web/pages/api/v0/_types.ts b/web/pages/api/v0/_types.ts
index 355b1973..9f043c80 100644
--- a/web/pages/api/v0/_types.ts
+++ b/web/pages/api/v0/_types.ts
@@ -20,6 +20,7 @@ export type LiteMarket = {
   description: string
   tags: string[]
   url: string
+  outcomeType: string
   mechanism: string
 
   pool: number
@@ -57,6 +58,7 @@ export function toLiteMarket(contract: Contract): LiteMarket {
     tags,
     slug,
     pool,
+    outcomeType,
     mechanism,
     volume7Days,
     volume24Hours,
@@ -88,6 +90,7 @@ export function toLiteMarket(contract: Contract): LiteMarket {
     probability,
     p,
     totalLiquidity,
+    outcomeType,
     mechanism,
     volume7Days,
     volume24Hours,

From f9336c00be5d80ba5ae522b5b341f54c9408d1ef Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Tue, 24 May 2022 16:38:43 -0700
Subject: [PATCH 03/10] Preview the quick bet result on hover (#319)

* Switch from triangle to a circle arrow

WIP

* Revert "Switch from triangle to a circle arrow"

This reverts commit 370f8eefe40112a71333d40d0d12f91cb8121307.

* Show amount moved in probability

* Animate the prob bar change too

* Pull out quick bet display component

* Minor cleanups

* Clean up comments

* Close empty divs

* Feedback from Ian

* Pull out constant

* Get rid of quick bet separators

* Fix typescript change

* Invert colors so gray indicates placed bets

* Update comment on useSaveShares re: Ian's comments
---
 web/components/contract/contract-card.tsx |  53 ++++---
 web/components/contract/quick-bet.tsx     | 175 ++++++++++++++--------
 2 files changed, 141 insertions(+), 87 deletions(-)

diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index 8fffd844..2390ffc6 100644
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@@ -6,7 +6,6 @@ import {
   Contract,
   contractPath,
   getBinaryProbPercent,
-  listenForContract,
 } from 'web/lib/firebase/contracts'
 import { Col } from '../layout/col'
 import {
@@ -26,8 +25,7 @@ import {
 import { getOutcomeProbability, getTopAnswer } from 'common/calculate'
 import { AvatarDetails, MiscDetails } from './contract-details'
 import { getExpectedValue, getValueFromBucket } from 'common/calculate-dpm'
-import { useEffect, useState } from 'react'
-import { QuickBet, QuickOutcomeView, ProbBar, getColor } from './quick-bet'
+import { QuickBet, ProbBar, getColor } from './quick-bet'
 import { useContractWithPreload } from 'web/hooks/use-contract'
 
 export function ContractCard(props: {
@@ -54,7 +52,7 @@ export function ContractCard(props: {
           className
         )}
       >
-        <Row className={clsx(showQuickBet ? 'divide-x' : '')}>
+        <Row>
           <Col className="relative flex-1 gap-3 pr-1">
             <div
               className={clsx(
@@ -92,11 +90,31 @@ export function ContractCard(props: {
             <QuickBet contract={contract} />
           ) : (
             <Col className="m-auto pl-2">
-              <QuickOutcomeView contract={contract} />
+              {outcomeType === 'BINARY' && (
+                <BinaryResolutionOrChance
+                  className="items-center"
+                  contract={contract}
+                />
+              )}
+
+              {outcomeType === 'NUMERIC' && (
+                <NumericResolutionOrExpectation
+                  className="items-center"
+                  contract={contract as NumericContract}
+                />
+              )}
+
+              {outcomeType === 'FREE_RESPONSE' && (
+                <FreeResponseResolutionOrChance
+                  className="self-end text-gray-600"
+                  contract={contract as FullContract<DPM, FreeResponse>}
+                  truncate="long"
+                />
+              )}
+              <ProbBar contract={contract} />
             </Col>
           )}
         </Row>
-        <ProbBar contract={contract} />
       </Col>
     </div>
   )
@@ -106,9 +124,8 @@ export function BinaryResolutionOrChance(props: {
   contract: FullContract<DPM | CPMM, Binary>
   large?: boolean
   className?: string
-  hideText?: boolean
 }) {
-  const { contract, large, className, hideText } = props
+  const { contract, large, className } = props
   const { resolution } = contract
   const textColor = `text-${getColor(contract)}`
 
@@ -129,11 +146,9 @@ export function BinaryResolutionOrChance(props: {
       ) : (
         <>
           <div className={textColor}>{getBinaryProbPercent(contract)}</div>
-          {!hideText && (
-            <div className={clsx(textColor, large ? 'text-xl' : 'text-base')}>
-              chance
-            </div>
-          )}
+          <div className={clsx(textColor, large ? 'text-xl' : 'text-base')}>
+            chance
+          </div>
         </>
       )}
     </Col>
@@ -162,9 +177,8 @@ export function FreeResponseResolutionOrChance(props: {
   contract: FreeResponseContract
   truncate: 'short' | 'long' | 'none'
   className?: string
-  hideText?: boolean
 }) {
-  const { contract, truncate, className, hideText } = props
+  const { contract, truncate, className } = props
   const { resolution } = contract
 
   const topAnswer = getTopAnswer(contract)
@@ -189,7 +203,7 @@ export function FreeResponseResolutionOrChance(props: {
               <div>
                 {formatPercent(getOutcomeProbability(contract, topAnswer.id))}
               </div>
-              {!hideText && <div className="text-base">chance</div>}
+              <div className="text-base">chance</div>
             </Col>
           </Row>
         )
@@ -201,9 +215,8 @@ export function FreeResponseResolutionOrChance(props: {
 export function NumericResolutionOrExpectation(props: {
   contract: NumericContract
   className?: string
-  hideText?: boolean
 }) {
-  const { contract, className, hideText } = props
+  const { contract, className } = props
   const { resolution } = contract
   const textColor = `text-${getColor(contract)}`
 
@@ -222,9 +235,7 @@ export function NumericResolutionOrExpectation(props: {
           <div className={clsx('text-3xl', textColor)}>
             {formatLargeNumber(getExpectedValue(contract))}
           </div>
-          {!hideText && (
-            <div className={clsx('text-base', textColor)}>expected</div>
-          )}
+          <div className={clsx('text-base', textColor)}>expected</div>
         </>
       )}
     </Col>
diff --git a/web/components/contract/quick-bet.tsx b/web/components/contract/quick-bet.tsx
index 35fcad50..58f31e67 100644
--- a/web/components/contract/quick-bet.tsx
+++ b/web/components/contract/quick-bet.tsx
@@ -1,5 +1,9 @@
 import clsx from 'clsx'
-import { getOutcomeProbability, getTopAnswer } from 'common/calculate'
+import {
+  getOutcomeProbability,
+  getOutcomeProbabilityAfterBet,
+  getTopAnswer,
+} from 'common/calculate'
 import { getExpectedValue } from 'common/calculate-dpm'
 import {
   Contract,
@@ -8,55 +12,81 @@ import {
   DPM,
   Binary,
   NumericContract,
-  FreeResponse,
+  FreeResponseContract,
 } from 'common/contract'
-import { formatMoney } from 'common/util/format'
+import {
+  formatLargeNumber,
+  formatMoney,
+  formatPercent,
+} from 'common/util/format'
+import { useState } from 'react'
 import toast from 'react-hot-toast'
 import { useUser } from 'web/hooks/use-user'
 import { useUserContractBets } from 'web/hooks/use-user-bets'
 import { placeBet } from 'web/lib/firebase/api-call'
-import { getBinaryProb } from 'web/lib/firebase/contracts'
+import { getBinaryProb, getBinaryProbPercent } from 'web/lib/firebase/contracts'
 import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon'
 import TriangleFillIcon from 'web/lib/icons/triangle-fill-icon'
 import { Col } from '../layout/col'
 import { OUTCOME_TO_COLOR } from '../outcome-label'
 import { useSaveShares } from '../use-save-shares'
-import {
-  BinaryResolutionOrChance,
-  NumericResolutionOrExpectation,
-  FreeResponseResolutionOrChance,
-} from './contract-card'
+
+const BET_SIZE = 10
 
 export function QuickBet(props: { contract: Contract }) {
   const { contract } = props
 
   const user = useUser()
   const userBets = useUserContractBets(user?.id, contract.id)
-  const { yesFloorShares, noFloorShares, yesShares, noShares } = useSaveShares(
+  const { yesFloorShares, noFloorShares } = useSaveShares(
     contract as FullContract<CPMM | DPM, Binary>,
     userBets
   )
-  // TODO: For some reason, Floor Shares are inverted for non-BINARY markets
+  // TODO: This relies on a hack in useSaveShares, where noFloorShares includes
+  // all non-YES shares. Ideally, useSaveShares should group by all outcomes
   const hasUpShares =
     contract.outcomeType === 'BINARY' ? yesFloorShares : noFloorShares
   const hasDownShares =
     contract.outcomeType === 'BINARY' ? noFloorShares : yesFloorShares
 
-  const color = getColor(contract)
+  const [upHover, setUpHover] = useState(false)
+  const [downHover, setDownHover] = useState(false)
+
+  let previewProb = undefined
+  try {
+    previewProb = upHover
+      ? getOutcomeProbabilityAfterBet(
+          contract,
+          quickOutcome(contract, 'UP') || '',
+          BET_SIZE
+        )
+      : downHover
+      ? 1 -
+        getOutcomeProbabilityAfterBet(
+          contract,
+          quickOutcome(contract, 'DOWN') || '',
+          BET_SIZE
+        )
+      : undefined
+  } catch (e) {
+    // Catch any errors from hovering on an invalid option
+  }
+
+  const color = getColor(contract, previewProb)
 
   async function placeQuickBet(direction: 'UP' | 'DOWN') {
     const betPromise = async () => {
       const outcome = quickOutcome(contract, direction)
       return await placeBet({
-        amount: 10,
+        amount: BET_SIZE,
         outcome,
         contractId: contract.id,
       })
     }
     const shortQ = contract.question.slice(0, 20)
     toast.promise(betPromise(), {
-      loading: `${formatMoney(10)} on "${shortQ}"...`,
-      success: `${formatMoney(10)} on "${shortQ}"...`,
+      loading: `${formatMoney(BET_SIZE)} on "${shortQ}"...`,
+      success: `${formatMoney(BET_SIZE)} on "${shortQ}"...`,
       error: (err) => `${err.message}`,
     })
   }
@@ -68,7 +98,7 @@ export function QuickBet(props: { contract: Contract }) {
     if (contract.outcomeType === 'FREE_RESPONSE') {
       // TODO: Implement shorting of free response answers
       if (direction === 'DOWN') {
-        throw new Error("Can't short free response answers")
+        throw new Error("Can't bet against free response answers")
       }
       return getTopAnswer(contract)?.id
     }
@@ -81,18 +111,19 @@ export function QuickBet(props: { contract: Contract }) {
   return (
     <Col
       className={clsx(
-        'relative -my-4 -mr-5 min-w-[6rem] justify-center gap-2 pr-5 pl-3 align-middle',
+        'relative -my-4 -mr-5 min-w-[6rem] justify-center gap-2 pr-5 pl-3 align-middle'
         // Use this for colored QuickBet panes
         // `bg-opacity-10 bg-${color}`
-        'bg-gray-50'
       )}
     >
       {/* Up bet triangle */}
       <div>
         <div
           className="peer absolute top-0 left-0 right-0 h-[50%]"
+          onMouseEnter={() => setUpHover(true)}
+          onMouseLeave={() => setUpHover(false)}
           onClick={() => placeQuickBet('UP')}
-        ></div>
+        />
         <div className="mt-2 text-center text-xs text-transparent peer-hover:text-gray-400">
           {formatMoney(10)}
         </div>
@@ -101,31 +132,43 @@ export function QuickBet(props: { contract: Contract }) {
           <TriangleFillIcon
             className={clsx(
               'mx-auto h-5 w-5',
-              `text-${color} text-opacity-70 peer-hover:text-gray-400`
+              upHover ? `text-${color}` : 'text-gray-400'
             )}
           />
         ) : (
-          <TriangleFillIcon className="mx-auto h-5 w-5 text-gray-200 peer-hover:text-gray-400" />
+          <TriangleFillIcon
+            className={clsx(
+              'mx-auto h-5 w-5',
+              upHover ? `text-${color}` : 'text-gray-200'
+            )}
+          />
         )}
       </div>
 
-      <QuickOutcomeView contract={contract} />
+      <QuickOutcomeView contract={contract} previewProb={previewProb} />
 
       {/* Down bet triangle */}
       <div>
         <div
           className="peer absolute bottom-0 left-0 right-0 h-[50%]"
+          onMouseEnter={() => setDownHover(true)}
+          onMouseLeave={() => setDownHover(false)}
           onClick={() => placeQuickBet('DOWN')}
         ></div>
         {hasDownShares > 0 ? (
           <TriangleDownFillIcon
             className={clsx(
               'mx-auto h-5 w-5',
-              `text-${color} text-opacity-70 peer-hover:text-gray-400`
+              downHover ? `text-${color}` : 'text-gray-400'
             )}
           />
         ) : (
-          <TriangleDownFillIcon className="mx-auto h-5 w-5 text-gray-200 peer-hover:text-gray-400" />
+          <TriangleDownFillIcon
+            className={clsx(
+              'mx-auto h-5 w-5',
+              downHover ? `text-${color}` : 'text-gray-200'
+            )}
+          />
         )}
         <div className="mb-2 text-center text-xs text-transparent peer-hover:text-gray-400">
           {formatMoney(10)}
@@ -135,10 +178,10 @@ export function QuickBet(props: { contract: Contract }) {
   )
 }
 
-export function ProbBar(props: { contract: Contract }) {
-  const { contract } = props
-  const color = getColor(contract)
-  const prob = getProb(contract)
+export function ProbBar(props: { contract: Contract; previewProb?: number }) {
+  const { contract, previewProb } = props
+  const color = getColor(contract, previewProb)
+  const prob = previewProb ?? getProb(contract)
   return (
     <>
       <div
@@ -147,7 +190,7 @@ export function ProbBar(props: { contract: Contract }) {
           'bg-gray-200'
         )}
         style={{ height: `${100 * (1 - prob)}%` }}
-      ></div>
+      />
       <div
         className={clsx(
           'absolute right-0 bottom-0 w-2 rounded-br-md transition-all',
@@ -156,41 +199,45 @@ export function ProbBar(props: { contract: Contract }) {
           prob === 1 ? 'rounded-tr-md' : ''
         )}
         style={{ height: `${100 * prob}%` }}
-      ></div>
+      />
     </>
   )
 }
 
-export function QuickOutcomeView(props: { contract: Contract }) {
-  const { contract } = props
+function QuickOutcomeView(props: {
+  contract: Contract
+  previewProb?: number
+  caption?: 'chance' | 'expected'
+}) {
+  const { contract, previewProb, caption } = props
   const { outcomeType } = contract
+  // If there's a preview prob, display that instead of the current prob
+  const override =
+    previewProb === undefined ? undefined : formatPercent(previewProb)
+  const textColor = `text-${getColor(contract, previewProb)}`
+
+  let display: string | undefined
+  switch (outcomeType) {
+    case 'BINARY':
+      display = getBinaryProbPercent(contract)
+      break
+    case 'NUMERIC':
+      display = formatLargeNumber(getExpectedValue(contract as NumericContract))
+      break
+    case 'FREE_RESPONSE':
+      const topAnswer = getTopAnswer(contract as FreeResponseContract)
+      display =
+        topAnswer &&
+        formatPercent(getOutcomeProbability(contract, topAnswer.id))
+      break
+  }
+
   return (
-    <>
-      {outcomeType === 'BINARY' && (
-        <BinaryResolutionOrChance
-          className="items-center"
-          contract={contract}
-          hideText
-        />
-      )}
-
-      {outcomeType === 'NUMERIC' && (
-        <NumericResolutionOrExpectation
-          className="items-center"
-          contract={contract as NumericContract}
-          hideText
-        />
-      )}
-
-      {outcomeType === 'FREE_RESPONSE' && (
-        <FreeResponseResolutionOrChance
-          className="self-end text-gray-600"
-          contract={contract as FullContract<DPM, FreeResponse>}
-          truncate="long"
-          hideText
-        />
-      )}
-    </>
+    <Col className={clsx('items-center text-3xl', textColor)}>
+      {override ?? display}
+      {caption && <div className="text-base">{caption}</div>}
+      <ProbBar contract={contract} previewProb={previewProb} />
+    </Col>
   )
 }
 
@@ -215,15 +262,14 @@ function getNumericScale(contract: NumericContract) {
   return (ev - min) / (max - min)
 }
 
-export function getColor(contract: Contract) {
+export function getColor(contract: Contract, previewProb?: number) {
   // TODO: Not sure why eg green-400 doesn't work here; try upgrading Tailwind
   // TODO: Try injecting a gradient here
   // return 'primary'
   const { resolution } = contract
   if (resolution) {
     return (
-      // @ts-ignore; TODO: Have better typing for contract.resolution?
-      OUTCOME_TO_COLOR[resolution] ||
+      OUTCOME_TO_COLOR[resolution as 'YES' | 'NO' | 'CANCEL' | 'MKT'] ??
       // If resolved to a FR answer, use 'primary'
       'primary'
     )
@@ -233,9 +279,6 @@ export function getColor(contract: Contract) {
   }
 
   const marketClosed = (contract.closeTime || Infinity) < Date.now()
-  return marketClosed
-    ? 'gray-400'
-    : getProb(contract) >= 0.5
-    ? 'primary'
-    : 'red-400'
+  const prob = previewProb ?? getProb(contract)
+  return marketClosed ? 'gray-400' : prob >= 0.5 ? 'primary' : 'red-400'
 }

From 8715ff274092fab03356d07fbce8bd05fd9f9dad Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Tue, 24 May 2022 16:39:42 -0700
Subject: [PATCH 04/10] Semibold the question on cards

---
 web/components/contract/contract-card.tsx    | 2 +-
 web/components/contract/contract-details.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index 2390ffc6..266d1fc2 100644
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@@ -67,7 +67,7 @@ export function ContractCard(props: {
             </div>
             <AvatarDetails contract={contract} />
             <p
-              className="break-words font-medium text-indigo-700 peer-hover:underline peer-hover:decoration-indigo-400 peer-hover:decoration-2"
+              className="break-words font-semibold text-indigo-700 peer-hover:underline peer-hover:decoration-indigo-400 peer-hover:decoration-2"
               style={{ /* For iOS safari */ wordBreak: 'break-word' }}
             >
               {question}
diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx
index ed07e409..0ec082d8 100644
--- a/web/components/contract/contract-details.tsx
+++ b/web/components/contract/contract-details.tsx
@@ -71,7 +71,7 @@ export function AvatarDetails(props: { contract: Contract }) {
   const { creatorName, creatorUsername } = contract
 
   return (
-    <Row className="items-center gap-2 text-sm text-gray-500">
+    <Row className="items-center gap-2 text-sm text-gray-400">
       <Avatar
         username={creatorUsername}
         avatarUrl={contract.creatorAvatarUrl}

From d5a362502a3e3266b88a0f345f3b2fe81921b853 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Tue, 24 May 2022 16:57:34 -0700
Subject: [PATCH 05/10] Display liquidity "pool" instead of "bet" volume

---
 web/components/contract/contract-details.tsx  | 11 +++++----
 .../contract/contract-info-dialog.tsx         | 24 ++++++++-----------
 web/lib/firebase/contracts.ts                 | 10 +++++++-
 3 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx
index 0ec082d8..801609c1 100644
--- a/web/components/contract/contract-details.tsx
+++ b/web/components/contract/contract-details.tsx
@@ -14,6 +14,7 @@ import { UserLink } from '../user-page'
 import {
   Contract,
   contractMetrics,
+  contractPool,
   updateContract,
 } from 'web/lib/firebase/contracts'
 import { Col } from '../layout/col'
@@ -43,10 +44,6 @@ export function MiscDetails(props: {
 
   return (
     <Row className="items-center gap-3 text-sm text-gray-400">
-      {categories.length > 0 && (
-        <TagsList className="text-gray-400" tags={categories} noLabel />
-      )}
-
       {showHotVolume ? (
         <Row className="gap-0.5">
           <TrendingUpIcon className="h-5 w-5" /> {formatMoney(volume24Hours)}
@@ -58,10 +55,14 @@ export function MiscDetails(props: {
           {fromNow(closeTime || 0)}
         </Row>
       ) : volume > 0 ? (
-        <Row>{volumeLabel}</Row>
+        <Row>{contractPool(contract)} pool</Row>
       ) : (
         <NewContractBadge />
       )}
+
+      {categories.length > 0 && (
+        <TagsList className="text-gray-400" tags={categories} noLabel />
+      )}
     </Row>
   )
 }
diff --git a/web/components/contract/contract-info-dialog.tsx b/web/components/contract/contract-info-dialog.tsx
index f15eed2e..8a238727 100644
--- a/web/components/contract/contract-info-dialog.tsx
+++ b/web/components/contract/contract-info-dialog.tsx
@@ -7,7 +7,12 @@ import { Bet } from 'common/bet'
 
 import { Contract } from 'common/contract'
 import { formatMoney } from 'common/util/format'
-import { contractPath, getBinaryProbPercent } from 'web/lib/firebase/contracts'
+import {
+  contractMetrics,
+  contractPath,
+  contractPool,
+  getBinaryProbPercent,
+} from 'web/lib/firebase/contracts'
 import { AddLiquidityPanel } from '../add-liquidity-panel'
 import { CopyLinkButton } from '../copy-link-button'
 import { Col } from '../layout/col'
@@ -98,19 +103,10 @@ export function ContractInfoDialog(props: { contract: Contract; bets: Bet[] }) {
                 <td>{tradersCount}</td>
               </tr>
 
-              {contract.mechanism === 'cpmm-1' && (
-                <tr>
-                  <td>Liquidity</td>
-                  <td>{formatMoney(contract.totalLiquidity)}</td>
-                </tr>
-              )}
-
-              {contract.mechanism === 'dpm-2' && (
-                <tr>
-                  <td>Pool</td>
-                  <td>{formatMoney(sum(Object.values(contract.pool)))}</td>
-                </tr>
-              )}
+              <tr>
+                <td>Pool</td>
+                <td>{contractPool(contract)}</td>
+              </tr>
             </tbody>
           </table>
 
diff --git a/web/lib/firebase/contracts.ts b/web/lib/firebase/contracts.ts
index 4fcfb6da..3ea413ce 100644
--- a/web/lib/firebase/contracts.ts
+++ b/web/lib/firebase/contracts.ts
@@ -13,7 +13,7 @@ import {
   updateDoc,
   limit,
 } from 'firebase/firestore'
-import { range, sortBy } from 'lodash'
+import { range, sortBy, sum } from 'lodash'
 
 import { app } from './init'
 import { getValues, listenForValue, listenForValues } from './utils'
@@ -55,6 +55,14 @@ export function contractMetrics(contract: Contract) {
   return { volumeLabel, createdDate, resolvedDate }
 }
 
+export function contractPool(contract: Contract) {
+  return contract.mechanism === 'cpmm-1'
+    ? formatMoney(contract.totalLiquidity)
+    : contract.mechanism === 'dpm-2'
+    ? formatMoney(sum(Object.values(contract.pool)))
+    : 'Empty pool'
+}
+
 export function getBinaryProb(contract: FullContract<any, Binary>) {
   const { totalShares, pool, p, resolutionProbability, mechanism } = contract
 

From eef5dda0f3ed4a9da1ec22a868e45a6c20f84e45 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Tue, 24 May 2022 17:25:23 -0700
Subject: [PATCH 06/10] Shrink card margin between question & %

---
 web/components/contract/quick-bet.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/components/contract/quick-bet.tsx b/web/components/contract/quick-bet.tsx
index 58f31e67..daca33a7 100644
--- a/web/components/contract/quick-bet.tsx
+++ b/web/components/contract/quick-bet.tsx
@@ -111,7 +111,7 @@ export function QuickBet(props: { contract: Contract }) {
   return (
     <Col
       className={clsx(
-        'relative -my-4 -mr-5 min-w-[6rem] justify-center gap-2 pr-5 pl-3 align-middle'
+        'relative -my-4 -mr-5 min-w-[5.5rem] justify-center gap-2 pr-5 pl-1 align-middle'
         // Use this for colored QuickBet panes
         // `bg-opacity-10 bg-${color}`
       )}

From 1942e1c47a3dd2d8df11f64840f7f1b9516c08f2 Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Wed, 25 May 2022 07:13:33 -0600
Subject: [PATCH 07/10] Show just first 3 letters and chosen answer on fr cards
 (#318)

* Show just first 3 letters and chosen answer

* 3 dots

* Just show resolved and the chosen answer

* Remove unused truncate & hide resolved except on xs
---
 web/components/contract/contract-card.tsx | 38 +++++++++++++++--------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index 266d1fc2..6f83ccb9 100644
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@@ -37,6 +37,7 @@ export function ContractCard(props: {
   const { showHotVolume, showCloseTime, className } = props
   const contract = useContractWithPreload(props.contract) ?? props.contract
   const { question, outcomeType } = contract
+  const { resolution } = contract
 
   const marketClosed = (contract.closeTime || Infinity) < Date.now()
   const showQuickBet = !(
@@ -73,12 +74,19 @@ export function ContractCard(props: {
               {question}
             </p>
 
-            {outcomeType === 'FREE_RESPONSE' && (
-              <FreeResponseTopAnswer
-                contract={contract as FullContract<DPM, FreeResponse>}
-                truncate="long"
-              />
-            )}
+            {outcomeType === 'FREE_RESPONSE' &&
+              (resolution ? (
+                <FreeResponseOutcomeLabel
+                  contract={contract as FreeResponseContract}
+                  resolution={resolution}
+                  truncate={'long'}
+                />
+              ) : (
+                <FreeResponseTopAnswer
+                  contract={contract as FullContract<DPM, FreeResponse>}
+                  truncate="long"
+                />
+              ))}
 
             <MiscDetails
               contract={contract}
@@ -188,13 +196,17 @@ export function FreeResponseResolutionOrChance(props: {
     <Col className={clsx(resolution ? 'text-3xl' : 'text-xl', className)}>
       {resolution ? (
         <>
-          <div className={clsx('text-base text-gray-500')}>Resolved</div>
-          <FreeResponseOutcomeLabel
-            contract={contract}
-            resolution={resolution}
-            truncate={truncate}
-            answerClassName="text-xl"
-          />
+          <div className={clsx('text-base text-gray-500 sm:hidden')}>
+            Resolved
+          </div>
+          {(resolution === 'CANCEL' || resolution === 'MKT') && (
+            <FreeResponseOutcomeLabel
+              contract={contract}
+              resolution={resolution}
+              truncate={truncate}
+              answerClassName="text-3xl uppercase text-blue-500"
+            />
+          )}
         </>
       ) : (
         topAnswer && (

From fb237d502dfc8d4698a00e3f2271cbb33aac8a68 Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Wed, 25 May 2022 10:11:45 -0600
Subject: [PATCH 08/10] Adjust emulator install instructions

---
 functions/README.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/functions/README.md b/functions/README.md
index 7601b7c8..e8debc6e 100644
--- a/functions/README.md
+++ b/functions/README.md
@@ -24,8 +24,9 @@ Adapted from https://firebase.google.com/docs/functions/get-started
 
 0. `$ firebase functions:config:get > .runtimeconfig.json` to cache secrets for local dev
 1. [Install](https://cloud.google.com/sdk/docs/install) gcloud CLI
-2. `$ brew install java` to install java if you don't already have it
-   1. `$ echo 'export PATH="/usr/local/opt/openjdk/bin:$PATH"' >> ~/.zshrc` to add java to your path
+2. If you don't have java (or see the error `Error: Process java -version has exited with code 1. Please make sure Java is installed and on your system PATH.`):
+   1. `$ brew install java`
+   2. `$ sudo ln -sfn /opt/homebrew/opt/openjdk/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk.jdk` 
 3. `$ gcloud auth login` to authenticate the CLI tools to Google Cloud
 4. `$ gcloud config set project <project-id>` to choose the project (`$ gcloud projects list` to see options)
 5. `$ mkdir firestore_export` to create a folder to store the exported database

From c5763e6ec3b3974ba4423e348a7d7491e2f01a3f Mon Sep 17 00:00:00 2001
From: Forrest Wolf <forrest.weiswolf@gmail.com>
Date: Wed, 25 May 2022 11:25:39 -0500
Subject: [PATCH 09/10] Extract signup prompt (#333)

* Extract SignUpPrompt component

* Return null instead of false when not showing SignUpPrompt

* Add trailing newline

* Lint
---
 web/components/bet-panel.tsx         | 21 ++++-----------------
 web/components/numeric-bet-panel.tsx | 12 +++---------
 web/components/sign-up-prompt.tsx    | 16 ++++++++++++++++
 3 files changed, 23 insertions(+), 26 deletions(-)
 create mode 100644 web/components/sign-up-prompt.tsx

diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index bb3cacb8..8010e8de 100644
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@@ -14,7 +14,7 @@ import {
   formatWithCommas,
 } from 'common/util/format'
 import { Title } from './title'
-import { firebaseLogin, User } from 'web/lib/firebase/users'
+import { User } from 'web/lib/firebase/users'
 import { Bet } from 'common/bet'
 import { APIError, placeBet } from 'web/lib/firebase/api-call'
 import { sellShares } from 'web/lib/firebase/fn-call'
@@ -36,6 +36,7 @@ import {
 } from 'common/calculate-cpmm'
 import { SellRow } from './sell-row'
 import { useSaveShares } from './use-save-shares'
+import { SignUpPrompt } from './sign-up-prompt'
 
 export function BetPanel(props: {
   contract: FullContract<DPM | CPMM, Binary>
@@ -70,14 +71,7 @@ export function BetPanel(props: {
 
         <BuyPanel contract={contract} user={user} />
 
-        {user === null && (
-          <button
-            className="btn flex-1 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 up to bet!
-          </button>
-        )}
+        <SignUpPrompt />
       </Col>
     </Col>
   )
@@ -183,14 +177,7 @@ export function BetPanelSwitcher(props: {
           />
         )}
 
-        {user === null && (
-          <button
-            className="btn flex-1 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 up to bet!
-          </button>
-        )}
+        <SignUpPrompt />
       </Col>
     </Col>
   )
diff --git a/web/components/numeric-bet-panel.tsx b/web/components/numeric-bet-panel.tsx
index 20478e25..f249e3c3 100644
--- a/web/components/numeric-bet-panel.tsx
+++ b/web/components/numeric-bet-panel.tsx
@@ -12,12 +12,13 @@ import { formatPercent, formatMoney } from 'common/util/format'
 
 import { useUser } from '../hooks/use-user'
 import { APIError, placeBet } from '../lib/firebase/api-call'
-import { firebaseLogin, User } from '../lib/firebase/users'
+import { User } from '../lib/firebase/users'
 import { BuyAmountInput } from './amount-input'
 import { BucketInput } from './bucket-input'
 import { Col } from './layout/col'
 import { Row } from './layout/row'
 import { Spacer } from './layout/spacer'
+import { SignUpPrompt } from './sign-up-prompt'
 
 export function NumericBetPanel(props: {
   contract: NumericContract
@@ -32,14 +33,7 @@ export function NumericBetPanel(props: {
 
       <NumericBuyPanel contract={contract} user={user} />
 
-      {user === null && (
-        <button
-          className="btn flex-1 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 up to trade!
-        </button>
-      )}
+      <SignUpPrompt />
     </Col>
   )
 }
diff --git a/web/components/sign-up-prompt.tsx b/web/components/sign-up-prompt.tsx
new file mode 100644
index 00000000..256a64d7
--- /dev/null
+++ b/web/components/sign-up-prompt.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { useUser } from 'web/hooks/use-user'
+import { firebaseLogin } from 'web/lib/firebase/users'
+
+export function SignUpPrompt() {
+  const user = useUser()
+
+  return user === null ? (
+    <button
+      className="btn flex-1 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 up to bet!
+    </button>
+  ) : null
+}

From 92df092ad359a50df6037ea25ced3aabec2aea22 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Wed, 25 May 2022 11:48:28 -0500
Subject: [PATCH 10/10] Fix DOM error in console

---
 web/lib/icons/triangle-down-fill-icon.tsx | 2 +-
 web/lib/icons/triangle-fill-icon.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/lib/icons/triangle-down-fill-icon.tsx b/web/lib/icons/triangle-down-fill-icon.tsx
index 28ed5ba6..1c5b7ab4 100644
--- a/web/lib/icons/triangle-down-fill-icon.tsx
+++ b/web/lib/icons/triangle-down-fill-icon.tsx
@@ -8,7 +8,7 @@ export default function TriangleDownFillIcon(props: { className?: string }) {
       viewBox="0 0 16 16"
     >
       <path
-        fill-rule="evenodd"
+        fillRule="evenodd"
         transform="rotate(-180 8 8)"
         d="M7.022 1.566a1.13 1.13 0 0 1 1.96 0l6.857 11.667c.457.778-.092 1.767-.98 1.767H1.144c-.889 0-1.437-.99-.98-1.767L7.022 1.566z"
       />
diff --git a/web/lib/icons/triangle-fill-icon.tsx b/web/lib/icons/triangle-fill-icon.tsx
index e24c005f..0894df20 100644
--- a/web/lib/icons/triangle-fill-icon.tsx
+++ b/web/lib/icons/triangle-fill-icon.tsx
@@ -8,7 +8,7 @@ export default function TriangleFillIcon(props: { className?: string }) {
       viewBox="0 0 16 16"
     >
       <path
-        fill-rule="evenodd"
+        fillRule="evenodd"
         d="M7.022 1.566a1.13 1.13 0 0 1 1.96 0l6.857 11.667c.457.778-.092 1.767-.98 1.767H1.144c-.889 0-1.437-.99-.98-1.767L7.022 1.566z"
       />
     </svg>