From 9ee71733055bbf7ade9b340f98709fc6cd6151aa Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Sat, 10 Sep 2022 17:48:35 -0600
Subject: [PATCH] Put sale value above quick bet button

---
 web/components/bet-button.tsx                 | 17 +------
 web/components/contract/contract-overview.tsx |  2 +-
 web/components/contract/quick-bet-button.tsx  | 48 ++++++++++++++-----
 3 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/web/components/bet-button.tsx b/web/components/bet-button.tsx
index 2aadbc78..75d12211 100644
--- a/web/components/bet-button.tsx
+++ b/web/components/bet-button.tsx
@@ -23,26 +23,11 @@ export default function BetButton(props: {
 
   const user = useUser()
   const userBets = useUserContractBets(user?.id, contract.id)
-  const { yesShares, noShares, hasYesShares, hasNoShares } =
-    useSaveBinaryShares(contract, userBets)
-
-  const { outcomeType } = contract
-  const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
+  const { hasYesShares, hasNoShares } = useSaveBinaryShares(contract, userBets)
 
   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"
diff --git a/web/components/contract/contract-overview.tsx b/web/components/contract/contract-overview.tsx
index 77a9420c..41c66603 100644
--- a/web/components/contract/contract-overview.tsx
+++ b/web/components/contract/contract-overview.tsx
@@ -38,7 +38,7 @@ const BetWidget = (props: { contract: CPMMContract }) => {
   const user = useUser()
   return (
     <Col className={'justify-center'}>
-      <Row className={'gap-4'}>
+      <Row className={'items-end gap-4'}>
         {contract.outcomeType === 'BINARY' &&
           user &&
           QuickBetButtons({
diff --git a/web/components/contract/quick-bet-button.tsx b/web/components/contract/quick-bet-button.tsx
index d7d5a3a3..734c4ec9 100644
--- a/web/components/contract/quick-bet-button.tsx
+++ b/web/components/contract/quick-bet-button.tsx
@@ -18,6 +18,7 @@ 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'
+import { Col } from 'web/components/layout/col'
 
 const BET_SIZE = 10
 
@@ -34,15 +35,16 @@ export function QuickBetButtons(props: {
 
   const userBets = useUserContractBets(user.id, contract.id)
   const unfilledBets = useUnfilledBets(contract.id) ?? []
-
-  const { yesShares, noShares } = useSaveBinaryShares(contract, userBets)
+  const { hasYesShares, hasNoShares, 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)
+      (BET_SIZE + 1) / (sellOutcome === 'YES' ? prob : 1 - prob)
     sharesSold = Math.min(oppositeShares, maxSharesSold)
 
     const { saleValue } = calculateCpmmSale(
@@ -53,6 +55,16 @@ export function QuickBetButtons(props: {
     )
     saleAmount = saleValue
   }
+  const getValueOfShares = () => {
+    const { saleValue } = calculateCpmmSale(
+      contract,
+      side === 'YES' ? yesShares : noShares,
+      side,
+      unfilledBets
+    )
+    return saleValue
+  }
+  const saleValueOfShares = getValueOfShares()
 
   async function placeQuickBet() {
     const betPromise = async () => {
@@ -91,14 +103,28 @@ export function QuickBetButtons(props: {
   }
 
   return (
-    <Button
-      size={'lg'}
-      onClick={() => placeQuickBet()}
-      color={side === 'YES' ? 'green' : 'red'}
-      className={props.className}
-    >
-      {side === 'YES' ? 'Yes' : 'No'}
-    </Button>
+    <Col>
+      {user && (
+        <div className={'min-w-sm mb-1 text-center text-sm text-gray-500'}>
+          {saleValueOfShares > 0.1 &&
+            hasYesShares &&
+            side === 'YES' &&
+            `${formatMoney(saleValueOfShares)}`}
+          {saleValueOfShares > 0.1 &&
+            hasNoShares &&
+            side === 'NO' &&
+            `${formatMoney(saleValueOfShares)}`}
+        </div>
+      )}
+      <Button
+        size={'lg'}
+        onClick={() => placeQuickBet()}
+        color={side === 'YES' ? 'green' : 'red'}
+        className={props.className}
+      >
+        {side === 'YES' ? 'Yes' : 'No'}
+      </Button>
+    </Col>
   )
 }