From aafd2a226f045904a21358dfb67328e86da6f99f Mon Sep 17 00:00:00 2001 From: Marshall Polaris Date: Mon, 16 May 2022 20:27:37 -0700 Subject: [PATCH] Clean up some stuff with SellPanel and AmountInput (#232) * Hoist SellAmountInput logic into SellPanel * Ditch now-unnecessary SellAmountInput * Clean up sale proceeds markup * Clean unused imports * BuyPanel doesn't need userBets --- web/components/amount-input.tsx | 96 +-------------------------------- web/components/bet-panel.tsx | 61 ++++++++++++++++----- 2 files changed, 49 insertions(+), 108 deletions(-) diff --git a/web/components/amount-input.tsx b/web/components/amount-input.tsx index ccd668d9..767628a0 100644 --- a/web/components/amount-input.tsx +++ b/web/components/amount-input.tsx @@ -1,13 +1,8 @@ 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' export function AmountInput(props: { @@ -20,7 +15,6 @@ export function AmountInput(props: { inputClassName?: string // Needed to focus the amount input inputRef?: React.MutableRefObject - children?: any }) { const { amount, @@ -31,7 +25,6 @@ export function AmountInput(props: { className, inputClassName, inputRef, - children, } = props const onAmountChange = (str: string) => { @@ -78,8 +71,6 @@ export function AmountInput(props: { )} )} - - {children} ) } @@ -138,88 +129,3 @@ export function BuyAmountInput(props: { /> ) } - -export function SellAmountInput(props: { - contract: FullContract - amount: number | undefined - onChange: (newAmount: number | undefined) => void - userBets: Bet[] - error: string | undefined - setError: (error: string | undefined) => void - disabled?: boolean - className?: string - inputClassName?: string - // Needed to focus the amount input - inputRef?: React.MutableRefObject -}) { - 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 ( - - {user && ( - - - Sale proceeds{' '} - {formatMoney(saleValue)} - - - )} - - ) -} diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx index e02e14d0..049db14b 100644 --- a/web/components/bet-panel.tsx +++ b/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' @@ -16,7 +17,7 @@ import { Title } from './title' import { firebaseLogin, User } from 'web/lib/firebase/users' import { Bet } from 'common/bet' import { placeBet, sellShares } from 'web/lib/firebase/api-call' -import { BuyAmountInput, SellAmountInput } from './amount-input' +import { AmountInput, BuyAmountInput } from './amount-input' import { InfoTooltip } from './info-tooltip' import { BinaryOutcomeLabel } from './outcome-label' import { @@ -66,7 +67,7 @@ export function BetPanel(props: {
Place your bet
{/* */} - <BuyPanel contract={contract} user={user} userBets={userBets ?? []} /> + <BuyPanel contract={contract} user={user} /> {user === null && ( <button @@ -177,7 +178,6 @@ export function BetPanelSwitcher(props: { <BuyPanel contract={contract} user={user} - userBets={userBets ?? []} selected={selected} onBuySuccess={onBetSuccess} /> @@ -199,11 +199,10 @@ export function BetPanelSwitcher(props: { function BuyPanel(props: { contract: FullContract<DPM | CPMM, Binary> user: User | null | undefined - userBets: Bet[] selected?: 'YES' | 'NO' onBuySuccess?: () => void }) { - const { contract, user, userBets, selected, onBuySuccess } = props + const { contract, user, selected, onBuySuccess } = props const [betChoice, setBetChoice] = useState<'YES' | 'NO' | undefined>(selected) const [betAmount, setBetAmount] = useState<number | undefined>(undefined) @@ -437,11 +436,43 @@ 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 - inputClassName="w-full" - contract={contract} + <AmountInput amount={ amount ? Math.round(amount) === 0 @@ -449,15 +480,19 @@ export function SellPanel(props: { : Math.floor(amount) : undefined } - onChange={setAmount} - userBets={userBets} + onChange={onAmountChange} + label="Qty" error={error} - setError={setError} disabled={isSubmitting} + inputClassName="w-full" /> - <Col className="mt-3 w-full gap-3"> - <Row className="items-center justify-between text-sm"> + <Col className="mt-3 w-full 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> + <Row className="items-center justify-between"> <div className="text-gray-500">Probability</div> <div> {formatPercent(initialProb)}