manifold/web/components/amount-input.tsx

226 lines
5.4 KiB
TypeScript
Raw Normal View History

2022-01-11 03:41:42 +00:00
import clsx from 'clsx'
import _ from 'lodash'
import { useUser } from 'web/hooks/use-user'
import { formatMoney, formatWithCommas } from 'common/util/format'
2022-01-11 03:41:42 +00:00
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'
2022-01-11 03:41:42 +00:00
export function AmountInput(props: {
amount: number | undefined
onChange: (newAmount: number | undefined) => void
error: string | undefined
label: string
2022-01-11 03:41:42 +00:00
disabled?: boolean
className?: string
inputClassName?: string
// Needed to focus the amount input
inputRef?: React.MutableRefObject<any>
children?: any
2022-01-11 03:41:42 +00:00
}) {
const {
amount,
onChange,
error,
label,
2022-01-11 03:41:42 +00:00
disabled,
className,
inputClassName,
inputRef,
children,
2022-01-11 03:41:42 +00:00
} = props
const onAmountChange = (str: string) => {
const amount = parseInt(str.replace(/\D/g, ''))
const isInvalid = !str || isNaN(amount)
onChange(isInvalid ? undefined : amount)
2022-01-11 03:41:42 +00:00
}
return (
<Col className={className}>
<label className="input-group">
<span className="bg-gray-200 text-sm">{label}</span>
2022-01-11 03:41:42 +00:00
<input
className={clsx(
2022-05-02 16:15:00 +00:00
'input input-bordered max-w-[200px] text-lg',
2022-01-11 03:41:42 +00:00
error && 'input-error',
inputClassName
)}
ref={inputRef}
type="text"
pattern="[0-9]*"
inputMode="numeric"
2022-01-11 03:41:42 +00:00
placeholder="0"
maxLength={6}
2022-01-11 03:41:42 +00:00
value={amount ?? ''}
disabled={disabled}
onChange={(e) => onAmountChange(e.target.value)}
/>
</label>
<Spacer h={4} />
{error && (
<div className="mb-2 mr-auto self-center whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
{error === 'Insufficient balance' ? (
<>
Not enough funds.
<span className="ml-1 text-indigo-500">
<SiteLink href="/add-funds">Buy more?</SiteLink>
</span>
</>
) : (
error
)}
</div>
)}
{children}
</Col>
)
}
export function BuyAmountInput(props: {
amount: number | undefined
onChange: (newAmount: number | undefined) => void
error: string | undefined
setError: (error: string | undefined) => void
minimumAmount?: number
disabled?: boolean
className?: string
inputClassName?: string
// Needed to focus the amount input
inputRef?: React.MutableRefObject<any>
}) {
const {
amount,
onChange,
error,
setError,
disabled,
className,
inputClassName,
minimumAmount,
inputRef,
} = props
const user = useUser()
const onAmountChange = (amount: number | undefined) => {
onChange(amount)
// Check for errors.
if (amount !== undefined) {
2022-04-13 17:52:12 +00:00
if (user && user.balance < amount) {
setError('Insufficient balance')
} else if (minimumAmount && amount < minimumAmount) {
setError('Minimum amount: ' + formatMoney(minimumAmount))
} else {
setError(undefined)
}
}
}
return (
<AmountInput
amount={amount}
onChange={onAmountChange}
label="M$"
error={error}
disabled={disabled}
className={className}
inputClassName={inputClassName}
inputRef={inputRef}
2022-04-13 17:52:12 +00:00
/>
)
}
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
// Needed to focus the amount input
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
2022-05-04 15:47:45 +00:00
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}
label="Qty"
error={error}
disabled={disabled}
className={className}
inputClassName={inputClassName}
inputRef={inputRef}
>
{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>
2022-01-11 03:41:42 +00:00
)
}