From 93033b5b243ca115806f3ec755a167e9d29cab79 Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Sat, 10 Sep 2022 21:57:50 -0500
Subject: [PATCH] Revert "Yes and no buttons on contract page (#868)"

This reverts commit b39e0f304f7472e0e3e2ae2539b9c0f56d26b430.
---
 web/components/bet-button.tsx                 |  23 ++--
 web/components/contract/contract-card.tsx     |   8 +-
 web/components/contract/contract-overview.tsx |  41 ++----
 web/components/contract/quick-bet-button.tsx  | 128 ------------------
 .../{quick-bet-arrows.tsx => quick-bet.tsx}   |   4 +-
 5 files changed, 25 insertions(+), 179 deletions(-)
 delete mode 100644 web/components/contract/quick-bet-button.tsx
 rename web/components/contract/{quick-bet-arrows.tsx => quick-bet.tsx} (98%)

diff --git a/web/components/bet-button.tsx b/web/components/bet-button.tsx
index 2aadbc78..0bd3702f 100644
--- a/web/components/bet-button.tsx
+++ b/web/components/bet-button.tsx
@@ -32,17 +32,6 @@ export default function BetButton(props: {
   return (
     <>
       <Col className={clsx('items-center', className)}>
-        {user && (
-          <div className={'mb-1 w-24 text-center text-sm text-gray-500'}>
-            {hasYesShares
-              ? `(${Math.floor(yesShares)} ${
-                  isPseudoNumeric ? 'HIGHER' : 'YES'
-                })`
-              : hasNoShares
-              ? `(${Math.floor(noShares)} ${isPseudoNumeric ? 'LOWER' : 'NO'})`
-              : ''}
-          </div>
-        )}
         {user ? (
           <Button
             size="lg"
@@ -57,6 +46,18 @@ export default function BetButton(props: {
         ) : (
           <BetSignUpPrompt />
         )}
+
+        {user && (
+          <div className={'mt-1 w-24 text-center text-sm text-gray-500'}>
+            {hasYesShares
+              ? `(${Math.floor(yesShares)} ${
+                  isPseudoNumeric ? 'HIGHER' : 'YES'
+                })`
+              : hasNoShares
+              ? `(${Math.floor(noShares)} ${isPseudoNumeric ? 'LOWER' : 'NO'})`
+              : ''}
+          </div>
+        )}
       </Col>
 
       <Modal open={open} setOpen={setOpen} position="center">
diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index b021d660..dab92a7a 100644
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@@ -25,11 +25,7 @@ import {
 } from 'common/calculate'
 import { AvatarDetails, MiscDetails, ShowTime } from './contract-details'
 import { getExpectedValue, getValueFromBucket } from 'common/calculate-dpm'
-import {
-  getColor,
-  ProbBar,
-  QuickBetArrows,
-} from 'web/components/contract/quick-bet-arrows'
+import { getColor, ProbBar, QuickBet } from './quick-bet'
 import { useContractWithPreload } from 'web/hooks/use-contract'
 import { useUser } from 'web/hooks/use-user'
 import { track } from '@amplitude/analytics-browser'
@@ -105,7 +101,7 @@ export function ContractCard(props: {
           ))}
       </Col>
       {showQuickBet ? (
-        <QuickBetArrows contract={contract} user={user} className="z-10" />
+        <QuickBet contract={contract} user={user} className="z-10" />
       ) : (
         <>
           {outcomeType === 'BINARY' && (
diff --git a/web/components/contract/contract-overview.tsx b/web/components/contract/contract-overview.tsx
index 77a9420c..1bfe84de 100644
--- a/web/components/contract/contract-overview.tsx
+++ b/web/components/contract/contract-overview.tsx
@@ -27,44 +27,21 @@ import {
 } from 'common/contract'
 import { ContractDetails, ExtraMobileContractDetails } from './contract-details'
 import { NumericGraph } from './numeric-graph'
-import { QuickBetButtons } from 'web/components/contract/quick-bet-button'
 
 const OverviewQuestion = (props: { text: string }) => (
   <Linkify className="text-2xl text-indigo-700 md:text-3xl" text={props.text} />
 )
 
 const BetWidget = (props: { contract: CPMMContract }) => {
-  const { contract } = props
   const user = useUser()
   return (
-    <Col className={'justify-center'}>
-      <Row className={'gap-4'}>
-        {contract.outcomeType === 'BINARY' &&
-          user &&
-          QuickBetButtons({
-            contract: contract as CPMMBinaryContract,
-            user: user,
-            side: 'NO',
-            className: 'self-end min-w-[60px]',
-          })}
-        <BetButton contract={props.contract} />
-
-        {contract.outcomeType === 'BINARY' &&
-          user &&
-          QuickBetButtons({
-            contract: contract as CPMMBinaryContract,
-            user: user,
-            side: 'YES',
-            className: 'self-end min-w-[60px]',
-          })}
-      </Row>
-      <Row className={'items-center justify-center'}>
-        {!user && (
-          <div className="mt-1 text-center text-sm text-gray-500">
-            (with play money!)
-          </div>
-        )}
-      </Row>
+    <Col>
+      <BetButton contract={props.contract} />
+      {!user && (
+        <div className="mt-1 text-center text-sm text-gray-500">
+          (with play money!)
+        </div>
+      )}
     </Col>
   )
 }
@@ -108,13 +85,13 @@ const BinaryOverview = (props: { contract: BinaryContract; bets: Bet[] }) => {
         </Row>
         <Row className="items-center justify-between gap-4 xl:hidden">
           <BinaryResolutionOrChance contract={contract} />
+          <ExtraMobileContractDetails contract={contract} />
           {tradingAllowed(contract) && (
             <BetWidget contract={contract as CPMMBinaryContract} />
           )}
         </Row>
       </Col>
       <ContractProbGraph contract={contract} bets={[...bets].reverse()} />
-      <ExtraMobileContractDetails contract={contract} />
     </Col>
   )
 }
@@ -163,11 +140,11 @@ const PseudoNumericOverview = (props: {
         </Row>
         <Row className="items-center justify-between gap-4 xl:hidden">
           <PseudoNumericResolutionOrExpectation contract={contract} />
+          <ExtraMobileContractDetails contract={contract} />
           {tradingAllowed(contract) && <BetWidget contract={contract} />}
         </Row>
       </Col>
       <ContractProbGraph contract={contract} bets={[...bets].reverse()} />
-      <ExtraMobileContractDetails contract={contract} />
     </Col>
   )
 }
diff --git a/web/components/contract/quick-bet-button.tsx b/web/components/contract/quick-bet-button.tsx
deleted file mode 100644
index d7d5a3a3..00000000
--- a/web/components/contract/quick-bet-button.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import {
-  getOutcomeProbability,
-  getProbability,
-  getTopAnswer,
-} from 'common/calculate'
-import { getExpectedValue } from 'common/calculate-dpm'
-import { User } from 'common/user'
-import { Contract, CPMMBinaryContract, NumericContract } from 'common/contract'
-import { formatMoney } from 'common/util/format'
-import toast from 'react-hot-toast'
-import { useUserContractBets } from 'web/hooks/use-user-bets'
-import { placeBet } from 'web/lib/firebase/api'
-import { useSaveBinaryShares } from '../use-save-binary-shares'
-import { sellShares } from 'web/lib/firebase/api'
-import { calculateCpmmSale } from 'common/calculate-cpmm'
-import { track } from 'web/lib/service/analytics'
-import { useUnfilledBets } from 'web/hooks/use-bets'
-import { getBinaryProb } from 'common/contract-details'
-import { quickOutcome } from 'web/components/contract/quick-bet-arrows'
-import { Button } from 'web/components/button'
-
-const BET_SIZE = 10
-
-export function QuickBetButtons(props: {
-  contract: CPMMBinaryContract
-  user: User
-  side: 'YES' | 'NO'
-  className?: string
-}) {
-  const { contract, side, user } = props
-  let sharesSold: number | undefined
-  let sellOutcome: 'YES' | 'NO' | undefined
-  let saleAmount: number | undefined
-
-  const userBets = useUserContractBets(user.id, contract.id)
-  const unfilledBets = useUnfilledBets(contract.id) ?? []
-
-  const { yesShares, noShares } = useSaveBinaryShares(contract, userBets)
-  const oppositeShares = side === 'YES' ? noShares : yesShares
-  if (oppositeShares > 0.01) {
-    sellOutcome = side === 'YES' ? 'NO' : 'YES'
-
-    const prob = getProb(contract)
-    const maxSharesSold =
-      (BET_SIZE + 0.05) / (sellOutcome === 'YES' ? prob : 1 - prob)
-    sharesSold = Math.min(oppositeShares, maxSharesSold)
-
-    const { saleValue } = calculateCpmmSale(
-      contract,
-      sharesSold,
-      sellOutcome,
-      unfilledBets
-    )
-    saleAmount = saleValue
-  }
-
-  async function placeQuickBet() {
-    const betPromise = async () => {
-      if (sharesSold && sellOutcome) {
-        return await sellShares({
-          shares: sharesSold,
-          outcome: sellOutcome,
-          contractId: contract.id,
-        })
-      }
-
-      const outcome = quickOutcome(contract, side === 'YES' ? 'UP' : 'DOWN')
-      return await placeBet({
-        amount: BET_SIZE,
-        outcome,
-        contractId: contract.id,
-      })
-    }
-    const shortQ = contract.question.slice(0, 20)
-    const message =
-      sellOutcome && saleAmount
-        ? `${formatMoney(saleAmount)} sold of "${shortQ}"...`
-        : `${formatMoney(BET_SIZE)} on "${shortQ}"...`
-
-    toast.promise(betPromise(), {
-      loading: message,
-      success: message,
-      error: (err) => `${err.message}`,
-    })
-
-    track('quick bet button', {
-      slug: contract.slug,
-      outcome: side,
-      contractId: contract.id,
-    })
-  }
-
-  return (
-    <Button
-      size={'lg'}
-      onClick={() => placeQuickBet()}
-      color={side === 'YES' ? 'green' : 'red'}
-      className={props.className}
-    >
-      {side === 'YES' ? 'Yes' : 'No'}
-    </Button>
-  )
-}
-
-// Return a number from 0 to 1 for this contract
-// Resolved contracts are set to 1, for coloring purposes (even if NO)
-function getProb(contract: Contract) {
-  const { outcomeType, resolution, resolutionProbability } = contract
-  return resolutionProbability
-    ? resolutionProbability
-    : resolution
-    ? 1
-    : outcomeType === 'BINARY'
-    ? getBinaryProb(contract)
-    : outcomeType === 'PSEUDO_NUMERIC'
-    ? getProbability(contract)
-    : outcomeType === 'FREE_RESPONSE' || outcomeType === 'MULTIPLE_CHOICE'
-    ? getOutcomeProbability(contract, getTopAnswer(contract)?.id || '')
-    : outcomeType === 'NUMERIC'
-    ? getNumericScale(contract)
-    : 1 // Should not happen
-}
-
-function getNumericScale(contract: NumericContract) {
-  const { min, max } = contract
-  const ev = getExpectedValue(contract)
-  return (ev - min) / (max - min)
-}
diff --git a/web/components/contract/quick-bet-arrows.tsx b/web/components/contract/quick-bet.tsx
similarity index 98%
rename from web/components/contract/quick-bet-arrows.tsx
rename to web/components/contract/quick-bet.tsx
index 678963bf..7b19306f 100644
--- a/web/components/contract/quick-bet-arrows.tsx
+++ b/web/components/contract/quick-bet.tsx
@@ -38,7 +38,7 @@ import { getBinaryProb } from 'common/contract-details'
 
 const BET_SIZE = 10
 
-export function QuickBetArrows(props: {
+export function QuickBet(props: {
   contract: BinaryContract | PseudoNumericContract
   user: User
   className?: string
@@ -243,7 +243,7 @@ export function ProbBar(props: { contract: Contract; previewProb?: number }) {
   )
 }
 
-export function quickOutcome(contract: Contract, direction: 'UP' | 'DOWN') {
+function quickOutcome(contract: Contract, direction: 'UP' | 'DOWN') {
   const { outcomeType } = contract
 
   if (outcomeType === 'BINARY' || outcomeType === 'PSEUDO_NUMERIC') {