From 618bdf76a6cc453cdff573a927ecac3d3d83befd Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Sun, 27 Mar 2022 22:43:40 -0500
Subject: [PATCH] Bring back 'Place a trade'. Tweaks

---
 web/components/amount-input.tsx    |  2 +-
 web/components/bet-panel.tsx       | 24 +++++++++++++-----------
 web/components/bet-row.tsx         |  1 -
 web/components/yes-no-selector.tsx |  7 +++----
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/web/components/amount-input.tsx b/web/components/amount-input.tsx
index 8f794e48..0af3ee94 100644
--- a/web/components/amount-input.tsx
+++ b/web/components/amount-input.tsx
@@ -237,7 +237,7 @@ export function SellAmountInput(props: {
     <AmountInput
       amount={amount}
       onChange={onAmountChange}
-      label="Shares"
+      label="Qty"
       error={error}
       disabled={disabled}
       className={className}
diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index e4d62f2f..f44609da 100644
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@@ -42,6 +42,8 @@ export function BetPanel(props: {
 }) {
   const { contract, className, title, selected, onBetSuccess } = props
 
+  const { mechanism } = contract
+
   const user = useUser()
   const userBets = useUserContractBets(user?.id, contract.id) ?? []
 
@@ -59,10 +61,10 @@ export function BetPanel(props: {
   const sharesOutcome = yesShares ? 'YES' : noShares ? 'NO' : undefined
 
   return (
-    <Col>
-      {sharesOutcome && (
-        <Col className="rounded-t-md px-6 py-6 bg-gray-100">
-          <Row className="justify-between items-center gap-2">
+    <Col className={className}>
+      {sharesOutcome && mechanism === 'cpmm-1' && (
+        <Col className="rounded-t-md bg-gray-100 px-6 py-6">
+          <Row className="items-center justify-between gap-2">
             <div>
               You have {formatWithCommas(Math.floor(yesShares || noShares))}{' '}
               <OutcomeLabel outcome={sharesOutcome} /> shares
@@ -97,7 +99,7 @@ export function BetPanel(props: {
             '!mt-0',
             tradeType === 'BUY' && title ? '!text-xl' : ''
           )}
-          text={tradeType === 'BUY' ? title ?? 'Buy' : 'Sell'}
+          text={tradeType === 'BUY' ? title ?? 'Place a trade' : 'Sell shares'}
         />
 
         {tradeType === 'SELL' && user && sharesOutcome && (
@@ -145,17 +147,21 @@ function BuyPanel(props: {
 
   const [betChoice, setBetChoice] = useState<'YES' | 'NO' | undefined>(selected)
   const [betAmount, setBetAmount] = useState<number | undefined>(undefined)
-  const [inputRef, focusAmountInput] = useFocus()
-
   const [error, setError] = useState<string | undefined>()
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [wasSubmitted, setWasSubmitted] = useState(false)
 
+  const [inputRef, focusAmountInput] = useFocus()
+
   useEffect(() => {
     // warm up cloud function
     placeBet({}).catch()
   }, [])
 
+  useEffect(() => {
+    if (selected) focusAmountInput()
+  }, [selected, focusAmountInput])
+
   function onBetChoice(choice: 'YES' | 'NO') {
     setBetChoice(choice)
     setWasSubmitted(false)
@@ -219,10 +225,6 @@ function BuyPanel(props: {
   const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0
   const currentReturnPercent = formatPercent(currentReturn)
 
-  useEffect(() => {
-    focusAmountInput()
-  }, [focusAmountInput])
-
   const dpmTooltip =
     contract.mechanism === 'dpm-2'
       ? `Current payout for ${formatWithCommas(shares)} / ${formatWithCommas(
diff --git a/web/components/bet-row.tsx b/web/components/bet-row.tsx
index 1508d0cd..f766e51d 100644
--- a/web/components/bet-row.tsx
+++ b/web/components/bet-row.tsx
@@ -28,7 +28,6 @@ export default function BetRow(props: {
           </div>
           <YesNoSelector
             btnClassName="btn-sm w-20"
-            showBuyLabel
             onSelect={(choice) => {
               setOpen(true)
               setBetChoice(choice)
diff --git a/web/components/yes-no-selector.tsx b/web/components/yes-no-selector.tsx
index 674a2293..2cbd55f5 100644
--- a/web/components/yes-no-selector.tsx
+++ b/web/components/yes-no-selector.tsx
@@ -7,11 +7,10 @@ import { Row } from './layout/row'
 export function YesNoSelector(props: {
   selected?: 'YES' | 'NO'
   onSelect: (selected: 'YES' | 'NO') => void
-  showBuyLabel?: boolean
   className?: string
   btnClassName?: string
 }) {
-  const { selected, onSelect, showBuyLabel, className, btnClassName } = props
+  const { selected, onSelect, className, btnClassName } = props
 
   const commonClassNames =
     'inline-flex flex-1  items-center justify-center rounded-3xl border-2 p-2'
@@ -29,7 +28,7 @@ export function YesNoSelector(props: {
         )}
         onClick={() => onSelect('YES')}
       >
-        {showBuyLabel ? 'Buy' : ''} YES
+        Buy YES
       </button>
       <button
         className={clsx(
@@ -42,7 +41,7 @@ export function YesNoSelector(props: {
         )}
         onClick={() => onSelect('NO')}
       >
-        {showBuyLabel ? 'Buy' : ''} NO
+        Buy NO
       </button>
     </Row>
   )