Simplify bet buttons (#644)

* mono-button bet row

* "bet yes" => "yes"

* prettier

web/components/bet-panel.tsx

@@ -109,9 +109,10 @@ export function SimpleBetPanel(props: {
   contract: CPMMBinaryContract | PseudoNumericContract
   className?: string
   selected?: 'YES' | 'NO'
+  hasShares?: boolean
   onBetSuccess?: () => void
 }) {
-  const { contract, className, selected, onBetSuccess } = props
+  const { contract, className, selected, hasShares, onBetSuccess } = props
 
   const user = useUser()
   const [isLimitOrder, setIsLimitOrder] = useState(false)
@@ -121,7 +122,17 @@ export function SimpleBetPanel(props: {
 
   return (
     <Col className={className}>
-      <Col className={clsx('rounded-b-md rounded-t-md bg-white px-8 py-6')}>
+      <SellRow
+        contract={contract}
+        user={user}
+        className={'rounded-t-md bg-gray-100 px-4 py-5'}
+      />
+      <Col
+        className={clsx(
+          !hasShares && 'rounded-t-md',
+          'rounded-b-md bg-white px-8 py-6'
+        )}
+      >
         <Row className="justify-between">
           <div className="mb-6 text-2xl">
             {isLimitOrder ? <>Limit order</> : <>Place your bet</>}

web/components/bet-row.tsx

@@ -2,13 +2,12 @@ import { useState } from 'react'
 import clsx from 'clsx'
 
 import { SimpleBetPanel } from './bet-panel'
-import { YesNoSelector } from './yes-no-selector'
 import { CPMMBinaryContract, PseudoNumericContract } from 'common/contract'
 import { Modal } from './layout/modal'
-import { SellButton } from './sell-button'
 import { useUser } from 'web/hooks/use-user'
 import { useUserContractBets } from 'web/hooks/use-user-bets'
 import { useSaveBinaryShares } from './use-save-binary-shares'
+import { Col } from './layout/col'
 
 // Inline version of a bet panel. Opens BetPanel in a new modal.
 export default function BetRow(props: {
@@ -19,9 +18,7 @@ export default function BetRow(props: {
 }) {
   const { className, btnClassName, betPanelClassName, contract } = props
   const [open, setOpen] = useState(false)
-  const [betChoice, setBetChoice] = useState<'YES' | 'NO' | undefined>(
-    undefined
-  )
+
   const user = useUser()
   const userBets = useUserContractBets(user?.id, contract.id)
   const { yesShares, noShares, hasYesShares, hasNoShares } =
@@ -29,43 +26,33 @@ export default function BetRow(props: {
 
   return (
     <>
-      <YesNoSelector
-        isPseudoNumeric={contract.outcomeType === 'PSEUDO_NUMERIC'}
-        className={clsx('justify-end', className)}
-        btnClassName={clsx('btn-sm w-24', btnClassName)}
-        onSelect={(choice) => {
-          setOpen(true)
-          setBetChoice(choice)
-        }}
-        replaceNoButton={
-          hasYesShares ? (
-            <SellButton
-              panelClassName={betPanelClassName}
-              contract={contract}
-              user={user}
-              sharesOutcome={'YES'}
-              shares={yesShares}
-            />
-          ) : undefined
-        }
-        replaceYesButton={
-          hasNoShares ? (
-            <SellButton
-              panelClassName={betPanelClassName}
-              contract={contract}
-              user={user}
-              sharesOutcome={'NO'}
-              shares={noShares}
-            />
-          ) : undefined
-        }
-      />
+      <Col className={clsx('items-center', className)}>
+        <button
+          className={clsx(
+            'btn btn-lg btn-outline my-auto inline-flex h-10 min-h-0 w-24',
+            btnClassName
+          )}
+          onClick={() => setOpen(true)}
+        >
+          Bet
+        </button>
+
+        <div className={'mt-1 w-24 text-center text-sm text-gray-500'}>
+          {hasYesShares
+            ? `(${Math.floor(yesShares)} YES)`
+            : hasNoShares
+            ? `(${Math.floor(noShares)} NO)`
+            : ''}
+        </div>
+      </Col>
+
       <Modal open={open} setOpen={setOpen}>
         <SimpleBetPanel
           className={betPanelClassName}
           contract={contract}
-          selected={betChoice}
+          selected={undefined}
           onBetSuccess={() => setOpen(false)}
+          hasShares={hasYesShares || hasNoShares}
         />
       </Modal>
     </>

web/components/limit-bets.tsx

@@ -30,7 +30,9 @@ export function LimitBets(props: {
         'gap-2 overflow-hidden rounded bg-white px-4 py-3'
       )}
     >
-      {!hideLabel && <div className="px-2 py-3 text-2xl">Your limit orders</div>}
+      {!hideLabel && (
+        <div className="px-2 py-3 text-2xl">Your limit orders</div>
+      )}
       <table className="table-compact table w-full rounded text-gray-500">
         <tbody>
           {recentBets.map((bet) => (

web/components/yes-no-selector.tsx

@@ -43,7 +43,7 @@ export function YesNoSelector(props: {
           )}
           onClick={() => onSelect('YES')}
         >
-          {isPseudoNumeric ? 'HIGHER' : 'Bet YES'}
+          {isPseudoNumeric ? 'HIGHER' : 'YES'}
         </button>
       )}
       {replaceNoButton ? (
@@ -60,7 +60,7 @@ export function YesNoSelector(props: {
           )}
           onClick={() => onSelect('NO')}
         >
-          {isPseudoNumeric ? 'LOWER' : 'Bet NO'}
+          {isPseudoNumeric ? 'LOWER' : 'NO'}
         </button>
       )}
     </Row>