Hoist SellAmountInput logic into SellPanel

web/components/amount-input.tsx

@@ -1,12 +1,9 @@
 import clsx from 'clsx'
 import _ from 'lodash'
 import { useUser } from 'web/hooks/use-user'
-import { formatMoney, formatWithCommas } from 'common/util/format'
+import { formatMoney } from 'common/util/format'
 import { Col } from './layout/col'
-import { Row } from './layout/row'
-import { Bet } from 'common/bet'
 import { Spacer } from './layout/spacer'
-import { calculateCpmmSale } from 'common/calculate-cpmm'
 import { Binary, CPMM, FullContract } from 'common/contract'
 import { SiteLink } from './site-link'
 
@@ -143,9 +140,7 @@ export function SellAmountInput(props: {
   contract: FullContract<CPMM, Binary>
   amount: number | undefined
   onChange: (newAmount: number | undefined) => void
-  userBets: Bet[]
   error: string | undefined
-  setError: (error: string | undefined) => void
   disabled?: boolean
   className?: string
   inputClassName?: string
@@ -153,73 +148,25 @@ export function SellAmountInput(props: {
   inputRef?: React.MutableRefObject<any>
 }) {
   const {
-    contract,
     amount,
     onChange,
-    userBets,
     error,
-    setError,
     disabled,
     className,
     inputClassName,
     inputRef,
   } = props
 
-  const user = useUser()
-
-  const openUserBets = userBets.filter((bet) => !bet.isSold && !bet.sale)
-  const [yesBets, noBets] = _.partition(
-    openUserBets,
-    (bet) => bet.outcome === 'YES'
-  )
-  const [yesShares, noShares] = [
-    _.sumBy(yesBets, (bet) => bet.shares),
-    _.sumBy(noBets, (bet) => bet.shares),
-  ]
-
-  const sellOutcome = yesShares ? 'YES' : noShares ? 'NO' : undefined
-  const shares = Math.round(yesShares) || Math.round(noShares)
-
-  const sharesSold = Math.min(amount ?? 0, shares)
-
-  const { saleValue } = calculateCpmmSale(
-    contract,
-    sharesSold,
-    sellOutcome as 'YES' | 'NO'
-  )
-
-  const onAmountChange = (amount: number | undefined) => {
-    onChange(amount)
-
-    // Check for errors.
-    if (amount !== undefined) {
-      if (amount > shares) {
-        setError(`Maximum ${formatWithCommas(Math.floor(shares))} shares`)
-      } else {
-        setError(undefined)
-      }
-    }
-  }
-
   return (
     <AmountInput
       amount={amount}
-      onChange={onAmountChange}
+      onChange={onChange}
       label="Qty"
       error={error}
       disabled={disabled}
       className={className}
       inputClassName={inputClassName}
       inputRef={inputRef}
-    >
+    ></AmountInput>
-      {user && (
-        <Col className="gap-3 text-sm">
-          <Row className="items-center justify-between gap-2 text-gray-500">
-            Sale proceeds{' '}
-            <span className="text-neutral">{formatMoney(saleValue)}</span>
-          </Row>
-        </Col>
-      )}
-    </AmountInput>
   )
 }

web/components/bet-panel.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx'
+import _ from 'lodash'
 import React, { useEffect, useState } from 'react'
 
 import { useUser } from 'web/hooks/use-user'
@@ -437,6 +438,40 @@ export function SellPanel(props: {
   )
   const resultProb = getCpmmProbability(newPool, contract.p)
 
+  const openUserBets = userBets.filter((bet) => !bet.isSold && !bet.sale)
+  const [yesBets, noBets] = _.partition(
+    openUserBets,
+    (bet) => bet.outcome === 'YES'
+  )
+  const [yesShares, noShares] = [
+    _.sumBy(yesBets, (bet) => bet.shares),
+    _.sumBy(noBets, (bet) => bet.shares),
+  ]
+
+  const sellOutcome = yesShares ? 'YES' : noShares ? 'NO' : undefined
+  const ownedShares = Math.round(yesShares) || Math.round(noShares)
+
+  const sharesSold = Math.min(amount ?? 0, ownedShares)
+
+  const { saleValue } = calculateCpmmSale(
+    contract,
+    sharesSold,
+    sellOutcome as 'YES' | 'NO'
+  )
+
+  const onAmountChange = (amount: number | undefined) => {
+    setAmount(amount)
+
+    // Check for errors.
+    if (amount !== undefined) {
+      if (amount > ownedShares) {
+        setError(`Maximum ${formatWithCommas(Math.floor(ownedShares))} shares`)
+      } else {
+        setError(undefined)
+      }
+    }
+  }
+
   return (
     <>
       <SellAmountInput
@@ -449,13 +484,18 @@ export function SellPanel(props: {
               : Math.floor(amount)
             : undefined
         }
-        onChange={setAmount}
+        onChange={onAmountChange}
-        userBets={userBets}
         error={error}
-        setError={setError}
         disabled={isSubmitting}
       />
 
+      <Col className="gap-3 text-sm">
+        <Row className="items-center justify-between gap-2 text-gray-500">
+          Sale proceeds{' '}
+          <span className="text-neutral">{formatMoney(saleValue)}</span>
+        </Row>
+      </Col>
+
       <Col className="mt-3 w-full gap-3">
         <Row className="items-center justify-between text-sm">
           <div className="text-gray-500">Probability</div>