Sell shares mobile (#86)

* Abstract sell shares row to component

* Allow sell row to show just a button

This is nice for the feed and on a bet's mobile interface.

* Add and use floor shares

* Allow sell button on the same line as bet button

* Move use save shares to own file

* Make sure to sell non-integer shares

* Create SellButon & sell non-integer shares

* Remove props prefixes

* Break out sell modal and button

web/components/bet-panel.tsx

@@ -1,6 +1,5 @@
 import clsx from 'clsx'
 import React, { useEffect, useState } from 'react'
-import _ from 'lodash'
 
 import { useUser } from '../hooks/use-user'
 import { Binary, CPMM, DPM, FullContract } from '../../common/contract'
@@ -19,7 +18,7 @@ import { Bet } from '../../common/bet'
 import { placeBet, sellShares } from '../lib/firebase/api-call'
 import { BuyAmountInput, SellAmountInput } from './amount-input'
 import { InfoTooltip } from './info-tooltip'
-import { BinaryOutcomeLabel, OutcomeLabel } from './outcome-label'
+import { BinaryOutcomeLabel } from './outcome-label'
 import {
   calculatePayoutAfterCorrectBet,
   calculateShares,
@@ -32,61 +31,30 @@ import {
   calculateCpmmSale,
   getCpmmProbability,
 } from '../../common/calculate-cpmm'
-import { Modal } from './layout/modal'
+import { SellRow } from './sell-row'
+import { useSaveShares } from './use-save-shares'
 
 export function BetPanel(props: {
   contract: FullContract<DPM | CPMM, Binary>
   className?: string
 }) {
   const { contract, className } = props
-  const { mechanism } = contract
-
   const user = useUser()
   const userBets = useUserContractBets(user?.id, contract.id)
-
+  const { yesFloorShares, noFloorShares } = useSaveShares(contract, userBets)
-  const [showSellModal, setShowSellModal] = useState(false)
+  const sharesOutcome = yesFloorShares
-
+    ? 'YES'
-  const { yesShares, noShares } = useSaveShares(contract, userBets)
+    : noFloorShares
-
+    ? 'NO'
-  const shares = yesShares || noShares
+    : undefined
-  const sharesOutcome = yesShares ? 'YES' : noShares ? 'NO' : undefined
 
   return (
     <Col className={className}>
-      {sharesOutcome && user && mechanism === 'cpmm-1' && (
+      <SellRow
-        <Col className="rounded-t-md bg-gray-100 px-4 py-6">
+        contract={contract}
-          <Row className="items-center justify-between gap-2">
+        user={user}
-            <div>
+        className={'rounded-t-md bg-gray-100 px-6 py-6'}
-              You have {formatWithCommas(Math.floor(shares))}{' '}
+      />
-              <BinaryOutcomeLabel outcome={sharesOutcome} /> shares
-            </div>
-
-            <button
-              className="btn btn-sm"
-              style={{
-                backgroundColor: 'white',
-                border: '2px solid',
-                color: '#3D4451',
-              }}
-              onClick={() => setShowSellModal(true)}
-            >
-              Sell
-            </button>
-
-            {showSellModal && (
-              <SellSharesModal
-                contract={contract as FullContract<CPMM, Binary>}
-                user={user}
-                userBets={userBets ?? []}
-                shares={shares}
-                sharesOutcome={sharesOutcome}
-                setOpen={setShowSellModal}
-              />
-            )}
-          </Row>
-        </Col>
-      )}
-
       <Col
         className={clsx(
           'rounded-b-md bg-white px-8 py-6',
@@ -128,10 +96,17 @@ export function BetPanelSwitcher(props: {
 
   const [tradeType, setTradeType] = useState<'BUY' | 'SELL'>('BUY')
 
-  const { yesShares, noShares } = useSaveShares(contract, userBets)
+  const { yesFloorShares, noFloorShares, yesShares, noShares } = useSaveShares(
+    contract,
+    userBets
+  )
 
-  const shares = yesShares || noShares
+  const floorShares = yesFloorShares || noFloorShares
-  const sharesOutcome = yesShares ? 'YES' : noShares ? 'NO' : undefined
+  const sharesOutcome = yesFloorShares
+    ? 'YES'
+    : noFloorShares
+    ? 'NO'
+    : undefined
 
   useEffect(() => {
     // Switch back to BUY if the user has sold all their shares.
@@ -146,7 +121,7 @@ export function BetPanelSwitcher(props: {
         <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(shares))}{' '}
+              You have {formatWithCommas(floorShares)}{' '}
               <BinaryOutcomeLabel outcome={sharesOutcome} /> shares
             </div>
 
@@ -394,7 +369,7 @@ function BuyPanel(props: {
   )
 }
 
-function SellPanel(props: {
+export function SellPanel(props: {
   contract: FullContract<CPMM, Binary>
   userBets: Bet[]
   shares: number
@@ -493,78 +468,3 @@ function SellPanel(props: {
     </>
   )
 }
-
-const useSaveShares = (
-  contract: FullContract<CPMM | DPM, Binary>,
-  userBets: Bet[] | undefined
-) => {
-  const [savedShares, setSavedShares] = useState<
-    { yesShares: number; noShares: number } | undefined
-  >()
-
-  const [yesBets, noBets] = _.partition(
-    userBets ?? [],
-    (bet) => bet.outcome === 'YES'
-  )
-  const [yesShares, noShares] = [
-    _.sumBy(yesBets, (bet) => bet.shares),
-    _.sumBy(noBets, (bet) => bet.shares),
-  ]
-
-  useEffect(() => {
-    // Save yes and no shares to local storage.
-    const savedShares = localStorage.getItem(`${contract.id}-shares`)
-    if (!userBets && savedShares) {
-      setSavedShares(JSON.parse(savedShares))
-    }
-
-    if (userBets) {
-      const updatedShares = { yesShares, noShares }
-      localStorage.setItem(
-        `${contract.id}-shares`,
-        JSON.stringify(updatedShares)
-      )
-    }
-  }, [contract.id, userBets, noShares, yesShares])
-
-  if (userBets) return { yesShares, noShares }
-  return savedShares ?? { yesShares: 0, noShares: 0 }
-}
-
-function SellSharesModal(props: {
-  contract: FullContract<CPMM, Binary>
-  userBets: Bet[]
-  shares: number
-  sharesOutcome: 'YES' | 'NO'
-  user: User
-  setOpen: (open: boolean) => void
-}) {
-  const { contract, shares, sharesOutcome, userBets, user, setOpen } = props
-
-  return (
-    <Modal open={true} setOpen={setOpen}>
-      <Col className="rounded-md bg-white px-8 py-6">
-        <Title className="!mt-0" text={'Sell shares'} />
-
-        <div className="mb-6">
-          You have {formatWithCommas(Math.floor(shares))}{' '}
-          <OutcomeLabel
-            outcome={sharesOutcome}
-            contract={contract}
-            truncate="long"
-          />{' '}
-          shares
-        </div>
-
-        <SellPanel
-          contract={contract}
-          shares={shares}
-          sharesOutcome={sharesOutcome}
-          user={user}
-          userBets={userBets ?? []}
-          onSellSuccess={() => setOpen(false)}
-        />
-      </Col>
-    </Modal>
-  )
-}

web/components/bet-row.tsx

@@ -1,4 +1,3 @@
-import clsx from 'clsx'
 import { useState } from 'react'
 
 import { BetPanelSwitcher } from './bet-panel'
@@ -6,6 +5,10 @@ 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 { SellButton } from './sell-button'
+import { useUser } from '../hooks/use-user'
+import { useUserContractBets } from '../hooks/use-user-bets'
+import { useSaveShares } from './use-save-shares'
 
 // Inline version of a bet panel. Opens BetPanel in a new modal.
 export default function BetRow(props: {
@@ -13,16 +16,19 @@ export default function BetRow(props: {
   className?: string
   labelClassName?: string
 }) {
-  const { className, labelClassName } = props
+  const { className, labelClassName, 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 { yesFloorShares, noFloorShares } = useSaveShares(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,12 +38,22 @@ export default function BetRow(props: {
               setOpen(true)
               setBetChoice(choice)
             }}
+            replaceNoButton={
+              yesFloorShares > noFloorShares && yesFloorShares > 0 ? (
+                <SellButton contract={contract} user={user} />
+              ) : undefined
+            }
+            replaceYesButton={
+              noFloorShares > yesFloorShares && noFloorShares > 0 ? (
+                <SellButton contract={contract} user={user} />
+              ) : undefined
+            }
           />
         </Row>
         <Modal open={open} setOpen={setOpen}>
           <BetPanelSwitcher
-            contract={props.contract}
+            contract={contract}
-            title={props.contract.question}
+            title={contract.question}
             selected={betChoice}
             onBetSuccess={() => setOpen(false)}
           />

web/components/sell-button.tsx

@@ -0,0 +1,64 @@
+import { Binary, CPMM, DPM, FullContract } from '../../common/contract'
+import { User } from '../../common/user'
+import { useUserContractBets } from '../hooks/use-user-bets'
+import { useState } from 'react'
+import { useSaveShares } from './use-save-shares'
+import { Col } from './layout/col'
+import clsx from 'clsx'
+import { SellSharesModal } from './sell-modal'
+
+export function SellButton(props: {
+  contract: FullContract<DPM | CPMM, Binary>
+  user: User | null | undefined
+}) {
+  const { contract, user } = props
+
+  const userBets = useUserContractBets(user?.id, contract.id)
+  const [showSellModal, setShowSellModal] = useState(false)
+
+  const { mechanism } = contract
+  const { yesFloorShares, noFloorShares, yesShares, noShares } = useSaveShares(
+    contract,
+    userBets
+  )
+  const floorShares = yesFloorShares || noFloorShares
+  const sharesOutcome = yesFloorShares
+    ? 'YES'
+    : noFloorShares
+    ? 'NO'
+    : undefined
+
+  if (sharesOutcome && user && mechanism === 'cpmm-1') {
+    return (
+      <Col className={'items-center'}>
+        <button
+          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 ' + sharesOutcome}
+        </button>
+        <div className={'mt-1 w-24 text-center text-sm text-gray-500'}>
+          {'(' + floorShares + ' shares)'}
+        </div>
+        {showSellModal && (
+          <SellSharesModal
+            contract={contract as FullContract<CPMM, Binary>}
+            user={user}
+            userBets={userBets ?? []}
+            shares={yesShares || noShares}
+            sharesOutcome={sharesOutcome}
+            setOpen={setShowSellModal}
+          />
+        )}
+      </Col>
+    )
+  }
+  return <div />
+}

web/components/sell-modal.tsx

@@ -0,0 +1,47 @@
+import { Binary, CPMM, FullContract } from '../../common/contract'
+import { Bet } from '../../common/bet'
+import { User } from '../../common/user'
+import { Modal } from './layout/modal'
+import { Col } from './layout/col'
+import { Title } from './title'
+import { formatWithCommas } from '../../common/util/format'
+import { OutcomeLabel } from './outcome-label'
+import { SellPanel } from './bet-panel'
+
+export function SellSharesModal(props: {
+  contract: FullContract<CPMM, Binary>
+  userBets: Bet[]
+  shares: number
+  sharesOutcome: 'YES' | 'NO'
+  user: User
+  setOpen: (open: boolean) => void
+}) {
+  const { contract, shares, sharesOutcome, userBets, user, setOpen } = props
+
+  return (
+    <Modal open={true} setOpen={setOpen}>
+      <Col className="rounded-md bg-white px-8 py-6">
+        <Title className="!mt-0" text={'Sell shares'} />
+
+        <div className="mb-6">
+          You have {formatWithCommas(Math.floor(shares))}{' '}
+          <OutcomeLabel
+            outcome={sharesOutcome}
+            contract={contract}
+            truncate={'short'}
+          />{' '}
+          shares
+        </div>
+
+        <SellPanel
+          contract={contract}
+          shares={shares}
+          sharesOutcome={sharesOutcome}
+          user={user}
+          userBets={userBets ?? []}
+          onSellSuccess={() => setOpen(false)}
+        />
+      </Col>
+    </Modal>
+  )
+}

web/components/sell-row.tsx

@@ -0,0 +1,77 @@
+import { Binary, CPMM, DPM, FullContract } from '../../common/contract'
+import { User } from '../../common/user'
+import { useState } from 'react'
+import { Col } from './layout/col'
+import { Row } from './layout/row'
+import { formatWithCommas } from '../../common/util/format'
+import { OutcomeLabel } from './outcome-label'
+import { useUserContractBets } from '../hooks/use-user-bets'
+import { useSaveShares } from './use-save-shares'
+import { SellSharesModal } from './sell-modal'
+
+export function SellRow(props: {
+  contract: FullContract<DPM | CPMM, Binary>
+  user: User | null | undefined
+  className?: string
+}) {
+  const { className, contract, user } = props
+
+  const userBets = useUserContractBets(user?.id, contract.id)
+  const [showSellModal, setShowSellModal] = useState(false)
+
+  const { mechanism } = contract
+  const { yesFloorShares, noFloorShares, yesShares, noShares } = useSaveShares(
+    contract,
+    userBets
+  )
+  const floorShares = yesFloorShares || noFloorShares
+  const sharesOutcome = yesFloorShares
+    ? 'YES'
+    : noFloorShares
+    ? 'NO'
+    : undefined
+
+  if (sharesOutcome && user && mechanism === 'cpmm-1') {
+    return (
+      <div>
+        <Col className={className}>
+          <Row className="items-center justify-between gap-2 ">
+            <div>
+              You have {formatWithCommas(floorShares)}{' '}
+              <OutcomeLabel
+                outcome={sharesOutcome}
+                contract={contract}
+                truncate={'short'}
+              />{' '}
+              shares
+            </div>
+
+            <button
+              className="btn btn-sm"
+              style={{
+                backgroundColor: 'white',
+                border: '2px solid',
+                color: '#3D4451',
+              }}
+              onClick={() => setShowSellModal(true)}
+            >
+              Sell
+            </button>
+          </Row>
+        </Col>
+        {showSellModal && (
+          <SellSharesModal
+            contract={contract as FullContract<CPMM, Binary>}
+            user={user}
+            userBets={userBets ?? []}
+            shares={yesShares || noShares}
+            sharesOutcome={sharesOutcome}
+            setOpen={setShowSellModal}
+          />
+        )}
+      </div>
+    )
+  }
+
+  return <div />
+}

web/components/use-save-shares.ts

@@ -0,0 +1,59 @@
+import { Binary, CPMM, DPM, FullContract } from '../../common/contract'
+import { Bet } from '../../common/bet'
+import { useEffect, useState } from 'react'
+import _ from 'lodash'
+
+export const useSaveShares = (
+  contract: FullContract<CPMM | DPM, Binary>,
+  userBets: Bet[] | undefined
+) => {
+  const [savedShares, setSavedShares] = useState<
+    | {
+        yesShares: number
+        noShares: number
+        yesFloorShares: number
+        noFloorShares: number
+      }
+    | undefined
+  >()
+
+  const [yesBets, noBets] = _.partition(
+    userBets ?? [],
+    (bet) => bet.outcome === 'YES'
+  )
+  const [yesShares, noShares] = [
+    _.sumBy(yesBets, (bet) => bet.shares),
+    _.sumBy(noBets, (bet) => bet.shares),
+  ]
+
+  const [yesFloorShares, noFloorShares] = [
+    Math.floor(yesShares),
+    Math.floor(noShares),
+  ]
+
+  useEffect(() => {
+    // Save yes and no shares to local storage.
+    const savedShares = localStorage.getItem(`${contract.id}-shares`)
+    if (!userBets && savedShares) {
+      setSavedShares(JSON.parse(savedShares))
+    }
+
+    if (userBets) {
+      const updatedShares = { yesShares, noShares }
+      localStorage.setItem(
+        `${contract.id}-shares`,
+        JSON.stringify(updatedShares)
+      )
+    }
+  }, [contract.id, userBets, noShares, yesShares])
+
+  if (userBets) return { yesShares, noShares, yesFloorShares, noFloorShares }
+  return (
+    savedShares ?? {
+      yesShares: 0,
+      noShares: 0,
+      yesFloorShares: 0,
+      noFloorShares: 0,
+    }
+  )
+}

web/components/yes-no-selector.tsx

@@ -9,40 +9,57 @@ export function YesNoSelector(props: {
   onSelect: (selected: 'YES' | 'NO') => void
   className?: string
   btnClassName?: string
+  replaceYesButton?: React.ReactNode
+  replaceNoButton?: React.ReactNode
 }) {
-  const { selected, onSelect, className, btnClassName } = props
+  const {
+    selected,
+    onSelect,
+    className,
+    btnClassName,
+    replaceNoButton,
+    replaceYesButton,
+  } = props
 
   const commonClassNames =
     'inline-flex flex-1  items-center justify-center rounded-3xl border-2 p-2'
 
   return (
     <Row className={clsx('space-x-3', className)}>
-      <button
+      {replaceYesButton ? (
-        className={clsx(
+        replaceYesButton
-          commonClassNames,
+      ) : (
-          'hover:bg-primary-focus border-primary hover:border-primary-focus hover:text-white',
+        <button
-          selected == 'YES'
+          className={clsx(
-            ? 'bg-primary text-white'
+            commonClassNames,
-            : 'text-primary bg-transparent',
+            'hover:bg-primary-focus border-primary hover:border-primary-focus hover:text-white',
-          btnClassName
+            selected == 'YES'
-        )}
+              ? 'bg-primary text-white'
-        onClick={() => onSelect('YES')}
+              : 'text-primary bg-transparent',
-      >
+            btnClassName
-        Bet YES
+          )}
-      </button>
+          onClick={() => onSelect('YES')}
-      <button
+        >
-        className={clsx(
+          Bet YES
-          commonClassNames,
+        </button>
-          'border-red-400 hover:border-red-500 hover:bg-red-500 hover:text-white',
+      )}
-          selected == 'NO'
+      {replaceNoButton ? (
-            ? 'bg-red-400 text-white'
+        replaceNoButton
-            : 'bg-transparent text-red-400',
+      ) : (
-          btnClassName
+        <button
-        )}
+          className={clsx(
-        onClick={() => onSelect('NO')}
+            commonClassNames,
-      >
+            'border-red-400 hover:border-red-500 hover:bg-red-500 hover:text-white',
-        Bet NO
+            selected == 'NO'
-      </button>
+              ? 'bg-red-400 text-white'
+              : 'bg-transparent text-red-400',
+            btnClassName
+          )}
+          onClick={() => onSelect('NO')}
+        >
+          Bet NO
+        </button>
+      )}
     </Row>
   )
 }