From 8905bfbfc82d7955c5b50243d6547385357e0c93 Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Tue, 19 Apr 2022 15:04:49 -0600
Subject: [PATCH] Allow sell row to show just a button

This is nice for the feed and on a bet's mobile interface.
---
 web/components/bet-row.tsx  |  31 +++++++++-
 web/components/sell-row.tsx | 113 ++++++++++++++++++++++--------------
 2 files changed, 100 insertions(+), 44 deletions(-)

diff --git a/web/components/bet-row.tsx b/web/components/bet-row.tsx
index e1b99c3a..60e9e11a 100644
--- a/web/components/bet-row.tsx
+++ b/web/components/bet-row.tsx
@@ -1,11 +1,14 @@
 import clsx from 'clsx'
 import { useState } from 'react'
 
-import { BetPanelSwitcher } from './bet-panel'
+import { BetPanelSwitcher, useSaveShares } from './bet-panel'
 import { Row } from './layout/row'
 import { YesNoSelector } from './yes-no-selector'
 import { Binary, CPMM, DPM, FullContract } from '../../common/contract'
 import { Modal } from './layout/modal'
+import { SellRow } from './sell-row'
+import { useUser } from '../hooks/use-user'
+import { useUserContractBets } from '../hooks/use-user-bets'
 
 // Inline version of a bet panel. Opens BetPanel in a new modal.
 export default function BetRow(props: {
@@ -18,11 +21,17 @@ export default function BetRow(props: {
   const [betChoice, setBetChoice] = useState<'YES' | 'NO' | undefined>(
     undefined
   )
+  const user = useUser()
+  const userBets = useUserContractBets(user?.id, props.contract.id)
+  const { yesFloorShares, noFloorShares } = useSaveShares(
+    props.contract,
+    userBets
+  )
 
   return (
     <>
       <div className={className}>
-        <Row className="items-center justify-end gap-2">
+        <Row className="mt-2 justify-end space-x-3">
           {/* <div className={clsx('mr-2 text-gray-400', labelClassName)}>
             Place a trade
           </div> */}
@@ -32,6 +41,24 @@ export default function BetRow(props: {
               setOpen(true)
               setBetChoice(choice)
             }}
+            replaceNoButton={
+              yesFloorShares > noFloorShares && yesFloorShares > 0 ? (
+                <SellRow
+                  contract={props.contract}
+                  user={user}
+                  buttonOnly={true}
+                />
+              ) : undefined
+            }
+            replaceYesButton={
+              noFloorShares > yesFloorShares && noFloorShares > 0 ? (
+                <SellRow
+                  contract={props.contract}
+                  user={user}
+                  buttonOnly={true}
+                />
+              ) : undefined
+            }
           />
         </Row>
         <Modal open={open} setOpen={setOpen}>
diff --git a/web/components/sell-row.tsx b/web/components/sell-row.tsx
index de562a63..bceffa72 100644
--- a/web/components/sell-row.tsx
+++ b/web/components/sell-row.tsx
@@ -10,11 +10,13 @@ import { Modal } from './layout/modal'
 import { Title } from './title'
 import { SellPanel, useSaveShares } from './bet-panel'
 import { useUserContractBets } from '../hooks/use-user-bets'
+import clsx from 'clsx'
 
 export function SellRow(props: {
   contract: FullContract<DPM | CPMM, Binary>
   user: User | null | undefined
   className?: string
+  buttonOnly?: boolean
 }) {
   const { className } = props
 
@@ -22,54 +24,81 @@ export function SellRow(props: {
   const [showSellModal, setShowSellModal] = useState(false)
 
   const { mechanism } = props.contract
-  const { yesShares, noShares } = useSaveShares(props.contract, userBets)
-
-  const shares = yesShares || noShares
-  const sharesOutcome = yesShares ? 'YES' : noShares ? 'NO' : undefined
-
-  return (
-    <div>
-      {sharesOutcome && props.user && mechanism === 'cpmm-1' && (
-        <Col className={className}>
-          <Row className="items-center justify-between gap-2 ">
-            <div>
-              You have {formatWithCommas(Math.floor(shares))}{' '}
-              <OutcomeLabel
-                outcome={sharesOutcome}
-                contract={props.contract}
-                truncate={'short'}
-              />{' '}
-              shares
-            </div>
+  const { yesFloorShares, noFloorShares } = useSaveShares(
+    props.contract,
+    userBets
+  )
+  const shares = yesFloorShares || noFloorShares
+  const sharesOutcome = yesFloorShares
+    ? 'YES'
+    : noFloorShares
+    ? 'NO'
+    : undefined
 
+  if (sharesOutcome && props.user && mechanism === 'cpmm-1') {
+    return (
+      <div>
+        {props.buttonOnly ? (
+          <Col className={'items-center'}>
             <button
-              className="btn btn-sm"
-              style={{
-                backgroundColor: 'white',
-                border: '2px solid',
-                color: '#3D4451',
-              }}
+              className={clsx(
+                'btn-sm w-24 gap-1',
+                // from the yes-no-selector:
+                'flex inline-flex flex-row  items-center justify-center rounded-3xl border-2 p-2',
+                sharesOutcome === 'NO'
+                  ? 'hover:bg-primary-focus border-primary hover:border-primary-focus text-primary hover:text-white'
+                  : 'border-red-400 text-red-500 hover:border-red-500 hover:bg-red-500 hover:text-white'
+              )}
               onClick={() => setShowSellModal(true)}
             >
-              Sell
+              {'Sell ' + sharesOutcome}
             </button>
+            <div className={'w-24 text-center text-sm text-gray-500'}>
+              {'(' + shares + ' shares)'}
+            </div>
+          </Col>
+        ) : (
+          <Col className={className}>
+            <Row className="items-center justify-between gap-2 ">
+              <div>
+                You have {formatWithCommas(shares)}{' '}
+                <OutcomeLabel
+                  outcome={sharesOutcome}
+                  contract={props.contract}
+                  truncate={'short'}
+                />{' '}
+                shares
+              </div>
 
-            {showSellModal && (
-              <SellSharesModal
-                contract={props.contract as FullContract<CPMM, Binary>}
-                user={props.user}
-                userBets={userBets ?? []}
-                shares={shares}
-                sharesOutcome={sharesOutcome}
-                setOpen={setShowSellModal}
-              />
-            )}
-          </Row>
-        </Col>
-        // </div>
-      )}
-    </div>
-  )
+              <button
+                className="btn btn-sm"
+                style={{
+                  backgroundColor: 'white',
+                  border: '2px solid',
+                  color: '#3D4451',
+                }}
+                onClick={() => setShowSellModal(true)}
+              >
+                Sell
+              </button>
+            </Row>
+          </Col>
+        )}
+        {showSellModal && (
+          <SellSharesModal
+            contract={props.contract as FullContract<CPMM, Binary>}
+            user={props.user}
+            userBets={userBets ?? []}
+            shares={shares}
+            sharesOutcome={sharesOutcome}
+            setOpen={setShowSellModal}
+          />
+        )}
+      </div>
+    )
+  }
+
+  return <div></div>
 }
 
 function SellSharesModal(props: {