2021-12-10 17:14:05 +00:00
|
|
|
import clsx from 'clsx'
|
2022-05-17 03:27:37 +00:00
|
|
|
import _ from 'lodash'
|
2022-03-15 22:27:51 +00:00
|
|
|
import React, { useEffect, useState } from 'react'
|
2021-12-11 00:06:17 +00:00
|
|
|
|
2022-05-09 13:04:36 +00:00
|
|
|
import { useUser } from 'web/hooks/use-user'
|
|
|
|
import { Binary, CPMM, DPM, FullContract } from 'common/contract'
|
2021-12-10 14:56:17 +00:00
|
|
|
import { Col } from './layout/col'
|
2021-12-10 15:51:48 +00:00
|
|
|
import { Row } from './layout/row'
|
2021-12-10 14:56:17 +00:00
|
|
|
import { Spacer } from './layout/spacer'
|
|
|
|
import { YesNoSelector } from './yes-no-selector'
|
2022-01-05 18:23:44 +00:00
|
|
|
import {
|
|
|
|
formatMoney,
|
|
|
|
formatPercent,
|
|
|
|
formatWithCommas,
|
2022-05-09 13:04:36 +00:00
|
|
|
} from 'common/util/format'
|
2021-12-13 18:32:40 +00:00
|
|
|
import { Title } from './title'
|
2022-05-09 13:04:36 +00:00
|
|
|
import { firebaseLogin, User } from 'web/lib/firebase/users'
|
|
|
|
import { Bet } from 'common/bet'
|
|
|
|
import { placeBet, sellShares } from 'web/lib/firebase/api-call'
|
2022-05-17 03:27:37 +00:00
|
|
|
import { AmountInput, BuyAmountInput } from './amount-input'
|
2022-01-15 21:28:19 +00:00
|
|
|
import { InfoTooltip } from './info-tooltip'
|
2022-04-20 14:13:39 +00:00
|
|
|
import { BinaryOutcomeLabel } from './outcome-label'
|
2022-03-15 22:27:51 +00:00
|
|
|
import {
|
|
|
|
calculatePayoutAfterCorrectBet,
|
|
|
|
calculateShares,
|
|
|
|
getProbability,
|
|
|
|
getOutcomeProbabilityAfterBet,
|
2022-05-09 13:04:36 +00:00
|
|
|
} from 'common/calculate'
|
|
|
|
import { useFocus } from 'web/hooks/use-focus'
|
|
|
|
import { useUserContractBets } from 'web/hooks/use-user-bets'
|
2022-05-09 21:33:14 +00:00
|
|
|
import {
|
|
|
|
calculateCpmmSale,
|
|
|
|
getCpmmProbability,
|
|
|
|
getCpmmLiquidityFee,
|
|
|
|
} from 'common/calculate-cpmm'
|
2022-04-20 14:13:39 +00:00
|
|
|
import { SellRow } from './sell-row'
|
|
|
|
import { useSaveShares } from './use-save-shares'
|
2022-01-26 20:08:03 +00:00
|
|
|
|
|
|
|
export function BetPanel(props: {
|
2022-03-15 22:27:51 +00:00
|
|
|
contract: FullContract<DPM | CPMM, Binary>
|
2022-01-26 20:08:03 +00:00
|
|
|
className?: string
|
2022-03-29 19:56:56 +00:00
|
|
|
}) {
|
|
|
|
const { contract, className } = props
|
|
|
|
const user = useUser()
|
|
|
|
const userBets = useUserContractBets(user?.id, contract.id)
|
2022-04-20 14:13:39 +00:00
|
|
|
const { yesFloorShares, noFloorShares } = useSaveShares(contract, userBets)
|
|
|
|
const sharesOutcome = yesFloorShares
|
|
|
|
? 'YES'
|
|
|
|
: noFloorShares
|
|
|
|
? 'NO'
|
|
|
|
: undefined
|
2022-03-29 19:56:56 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<Col className={className}>
|
2022-04-20 14:13:39 +00:00
|
|
|
<SellRow
|
|
|
|
contract={contract}
|
|
|
|
user={user}
|
|
|
|
className={'rounded-t-md bg-gray-100 px-6 py-6'}
|
|
|
|
/>
|
2022-03-29 19:56:56 +00:00
|
|
|
<Col
|
|
|
|
className={clsx(
|
|
|
|
'rounded-b-md bg-white px-8 py-6',
|
|
|
|
!sharesOutcome && 'rounded-t-md',
|
|
|
|
className
|
|
|
|
)}
|
|
|
|
>
|
2022-05-02 16:15:00 +00:00
|
|
|
<div className="mb-6 text-2xl">Place your bet</div>
|
2022-04-09 21:26:43 +00:00
|
|
|
{/* <Title className={clsx('!mt-0 text-neutral')} text="Place a trade" /> */}
|
2022-03-29 19:56:56 +00:00
|
|
|
|
2022-05-17 03:27:37 +00:00
|
|
|
<BuyPanel contract={contract} user={user} />
|
2022-03-29 19:56:56 +00:00
|
|
|
|
|
|
|
{user === null && (
|
|
|
|
<button
|
|
|
|
className="btn flex-1 whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
|
|
|
|
onClick={firebaseLogin}
|
|
|
|
>
|
2022-05-07 14:10:25 +00:00
|
|
|
Sign up to bet!
|
2022-03-29 19:56:56 +00:00
|
|
|
</button>
|
|
|
|
)}
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export function BetPanelSwitcher(props: {
|
|
|
|
contract: FullContract<DPM | CPMM, Binary>
|
|
|
|
className?: string
|
2022-01-26 20:08:03 +00:00
|
|
|
title?: string // Set if BetPanel is on a feed modal
|
|
|
|
selected?: 'YES' | 'NO'
|
2022-02-05 18:26:11 +00:00
|
|
|
onBetSuccess?: () => void
|
2022-01-26 20:08:03 +00:00
|
|
|
}) {
|
2022-02-05 18:26:11 +00:00
|
|
|
const { contract, className, title, selected, onBetSuccess } = props
|
2021-12-10 14:56:17 +00:00
|
|
|
|
2022-03-29 19:56:56 +00:00
|
|
|
const { mechanism } = contract
|
|
|
|
|
2021-12-10 17:14:05 +00:00
|
|
|
const user = useUser()
|
2022-03-29 19:56:56 +00:00
|
|
|
const userBets = useUserContractBets(user?.id, contract.id)
|
|
|
|
|
|
|
|
const [tradeType, setTradeType] = useState<'BUY' | 'SELL'>('BUY')
|
|
|
|
|
2022-04-20 14:13:39 +00:00
|
|
|
const { yesFloorShares, noFloorShares, yesShares, noShares } = useSaveShares(
|
|
|
|
contract,
|
|
|
|
userBets
|
|
|
|
)
|
2022-03-29 19:56:56 +00:00
|
|
|
|
2022-04-20 14:13:39 +00:00
|
|
|
const floorShares = yesFloorShares || noFloorShares
|
|
|
|
const sharesOutcome = yesFloorShares
|
|
|
|
? 'YES'
|
|
|
|
: noFloorShares
|
|
|
|
? 'NO'
|
|
|
|
: undefined
|
2022-03-29 19:56:56 +00:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
// Switch back to BUY if the user has sold all their shares.
|
|
|
|
if (tradeType === 'SELL' && sharesOutcome === undefined) {
|
|
|
|
setTradeType('BUY')
|
|
|
|
}
|
|
|
|
}, [tradeType, sharesOutcome])
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Col className={className}>
|
|
|
|
{sharesOutcome && mechanism === 'cpmm-1' && (
|
|
|
|
<Col className="rounded-t-md bg-gray-100 px-6 py-6">
|
|
|
|
<Row className="items-center justify-between gap-2">
|
|
|
|
<div>
|
2022-04-20 14:13:39 +00:00
|
|
|
You have {formatWithCommas(floorShares)}{' '}
|
2022-04-18 23:02:40 +00:00
|
|
|
<BinaryOutcomeLabel outcome={sharesOutcome} /> shares
|
2022-03-29 19:56:56 +00:00
|
|
|
</div>
|
|
|
|
|
2022-05-02 16:15:00 +00:00
|
|
|
{tradeType === 'BUY' && (
|
|
|
|
<button
|
|
|
|
className="btn btn-sm"
|
|
|
|
style={{
|
|
|
|
backgroundColor: 'white',
|
|
|
|
border: '2px solid',
|
|
|
|
color: '#3D4451',
|
|
|
|
}}
|
|
|
|
onClick={() =>
|
|
|
|
tradeType === 'BUY'
|
|
|
|
? setTradeType('SELL')
|
|
|
|
: setTradeType('BUY')
|
|
|
|
}
|
|
|
|
>
|
|
|
|
{tradeType === 'BUY' ? 'Sell' : 'Bet'}
|
|
|
|
</button>
|
|
|
|
)}
|
2022-03-29 19:56:56 +00:00
|
|
|
</Row>
|
|
|
|
</Col>
|
|
|
|
)}
|
|
|
|
|
|
|
|
<Col
|
|
|
|
className={clsx(
|
|
|
|
'rounded-b-md bg-white px-8 py-6',
|
|
|
|
!sharesOutcome && 'rounded-t-md',
|
|
|
|
className
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
<Title
|
|
|
|
className={clsx(
|
|
|
|
'!mt-0',
|
|
|
|
tradeType === 'BUY' && title ? '!text-xl' : ''
|
|
|
|
)}
|
|
|
|
text={tradeType === 'BUY' ? title ?? 'Place a trade' : 'Sell shares'}
|
|
|
|
/>
|
|
|
|
|
|
|
|
{tradeType === 'SELL' && user && sharesOutcome && (
|
|
|
|
<SellPanel
|
|
|
|
contract={contract as FullContract<CPMM, Binary>}
|
|
|
|
shares={yesShares || noShares}
|
|
|
|
sharesOutcome={sharesOutcome}
|
|
|
|
user={user}
|
|
|
|
userBets={userBets ?? []}
|
|
|
|
onSellSuccess={onBetSuccess}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
|
|
|
|
{tradeType === 'BUY' && (
|
|
|
|
<BuyPanel
|
|
|
|
contract={contract}
|
|
|
|
user={user}
|
|
|
|
selected={selected}
|
|
|
|
onBuySuccess={onBetSuccess}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
|
|
|
|
{user === null && (
|
|
|
|
<button
|
|
|
|
className="btn flex-1 whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
|
|
|
|
onClick={firebaseLogin}
|
|
|
|
>
|
2022-05-07 14:10:25 +00:00
|
|
|
Sign up to bet!
|
2022-03-29 19:56:56 +00:00
|
|
|
</button>
|
|
|
|
)}
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
function BuyPanel(props: {
|
|
|
|
contract: FullContract<DPM | CPMM, Binary>
|
|
|
|
user: User | null | undefined
|
|
|
|
selected?: 'YES' | 'NO'
|
|
|
|
onBuySuccess?: () => void
|
|
|
|
}) {
|
2022-05-17 03:27:37 +00:00
|
|
|
const { contract, user, selected, onBuySuccess } = props
|
2021-12-10 17:14:05 +00:00
|
|
|
|
2022-01-26 20:08:03 +00:00
|
|
|
const [betChoice, setBetChoice] = useState<'YES' | 'NO' | undefined>(selected)
|
2021-12-10 15:51:48 +00:00
|
|
|
const [betAmount, setBetAmount] = useState<number | undefined>(undefined)
|
2021-12-15 00:08:55 +00:00
|
|
|
const [error, setError] = useState<string | undefined>()
|
2021-12-10 17:14:05 +00:00
|
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
|
|
const [wasSubmitted, setWasSubmitted] = useState(false)
|
|
|
|
|
2022-03-29 19:56:56 +00:00
|
|
|
const [inputRef, focusAmountInput] = useFocus()
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
// warm up cloud function
|
|
|
|
placeBet({}).catch()
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (selected) focusAmountInput()
|
|
|
|
}, [selected, focusAmountInput])
|
|
|
|
|
2021-12-11 04:09:32 +00:00
|
|
|
function onBetChoice(choice: 'YES' | 'NO') {
|
|
|
|
setBetChoice(choice)
|
|
|
|
setWasSubmitted(false)
|
2022-01-26 20:08:03 +00:00
|
|
|
focusAmountInput()
|
2021-12-11 04:09:32 +00:00
|
|
|
}
|
|
|
|
|
2022-01-11 03:41:42 +00:00
|
|
|
function onBetChange(newAmount: number | undefined) {
|
2021-12-15 00:08:55 +00:00
|
|
|
setWasSubmitted(false)
|
2022-01-11 03:41:42 +00:00
|
|
|
setBetAmount(newAmount)
|
2022-01-26 20:08:03 +00:00
|
|
|
if (!betChoice) {
|
|
|
|
setBetChoice('YES')
|
|
|
|
}
|
2021-12-10 16:04:59 +00:00
|
|
|
}
|
|
|
|
|
2021-12-10 17:14:05 +00:00
|
|
|
async function submitBet() {
|
|
|
|
if (!user || !betAmount) return
|
|
|
|
|
2021-12-15 00:08:55 +00:00
|
|
|
setError(undefined)
|
2021-12-10 17:14:05 +00:00
|
|
|
setIsSubmitting(true)
|
|
|
|
|
2021-12-11 00:06:17 +00:00
|
|
|
const result = await placeBet({
|
|
|
|
amount: betAmount,
|
|
|
|
outcome: betChoice,
|
2021-12-11 00:40:23 +00:00
|
|
|
contractId: contract.id,
|
2021-12-16 04:55:03 +00:00
|
|
|
}).then((r) => r.data as any)
|
2021-12-15 18:12:47 +00:00
|
|
|
|
2021-12-11 00:06:17 +00:00
|
|
|
console.log('placed bet. Result:', result)
|
2021-12-10 17:14:05 +00:00
|
|
|
|
2021-12-15 18:12:47 +00:00
|
|
|
if (result?.status === 'success') {
|
|
|
|
setIsSubmitting(false)
|
|
|
|
setWasSubmitted(true)
|
|
|
|
setBetAmount(undefined)
|
2022-03-29 19:56:56 +00:00
|
|
|
if (onBuySuccess) onBuySuccess()
|
2021-12-15 18:12:47 +00:00
|
|
|
} else {
|
2022-03-29 19:56:56 +00:00
|
|
|
setError(result?.message || 'Error placing bet')
|
2021-12-15 18:12:47 +00:00
|
|
|
setIsSubmitting(false)
|
|
|
|
}
|
2021-12-10 17:14:05 +00:00
|
|
|
}
|
|
|
|
|
2021-12-15 00:08:55 +00:00
|
|
|
const betDisabled = isSubmitting || !betAmount || error
|
2021-12-10 17:14:05 +00:00
|
|
|
|
2022-03-15 22:27:51 +00:00
|
|
|
const initialProb = getProbability(contract)
|
2022-01-12 19:01:04 +00:00
|
|
|
|
2022-03-15 22:27:51 +00:00
|
|
|
const outcomeProb = getOutcomeProbabilityAfterBet(
|
|
|
|
contract,
|
2022-01-26 20:08:03 +00:00
|
|
|
betChoice || 'YES',
|
2021-12-15 22:57:40 +00:00
|
|
|
betAmount ?? 0
|
|
|
|
)
|
2022-02-17 23:00:19 +00:00
|
|
|
const resultProb = betChoice === 'NO' ? 1 - outcomeProb : outcomeProb
|
2021-12-11 03:47:46 +00:00
|
|
|
|
2022-03-15 22:27:51 +00:00
|
|
|
const shares = calculateShares(contract, betAmount ?? 0, betChoice || 'YES')
|
2022-01-12 19:01:04 +00:00
|
|
|
|
2022-01-15 21:28:19 +00:00
|
|
|
const currentPayout = betAmount
|
|
|
|
? calculatePayoutAfterCorrectBet(contract, {
|
|
|
|
outcome: betChoice,
|
|
|
|
amount: betAmount,
|
|
|
|
shares,
|
|
|
|
} as Bet)
|
2021-12-11 03:47:46 +00:00
|
|
|
: 0
|
2022-01-12 19:01:04 +00:00
|
|
|
|
2022-01-15 21:28:19 +00:00
|
|
|
const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0
|
2022-03-19 03:02:04 +00:00
|
|
|
const currentReturnPercent = formatPercent(currentReturn)
|
2022-03-15 22:27:51 +00:00
|
|
|
|
2022-05-09 21:33:14 +00:00
|
|
|
const cpmmFees =
|
|
|
|
contract.mechanism === 'cpmm-1' &&
|
|
|
|
getCpmmLiquidityFee(contract, betAmount ?? 0, betChoice ?? 'YES').totalFees
|
|
|
|
|
2022-03-22 05:18:08 +00:00
|
|
|
const dpmTooltip =
|
2022-03-15 22:27:51 +00:00
|
|
|
contract.mechanism === 'dpm-2'
|
|
|
|
? `Current payout for ${formatWithCommas(shares)} / ${formatWithCommas(
|
|
|
|
shares +
|
|
|
|
contract.totalShares[betChoice ?? 'YES'] -
|
|
|
|
(contract.phantomShares
|
|
|
|
? contract.phantomShares[betChoice ?? 'YES']
|
|
|
|
: 0)
|
2022-03-23 05:40:05 +00:00
|
|
|
)} ${betChoice ?? 'YES'} shares`
|
2022-03-15 22:27:51 +00:00
|
|
|
: undefined
|
2021-12-10 14:56:17 +00:00
|
|
|
return (
|
2022-03-29 19:56:56 +00:00
|
|
|
<>
|
2021-12-10 14:56:17 +00:00
|
|
|
<YesNoSelector
|
2022-01-27 06:38:22 +00:00
|
|
|
className="mb-4"
|
2022-05-11 21:35:50 +00:00
|
|
|
btnClassName="flex-1"
|
2021-12-10 14:56:17 +00:00
|
|
|
selected={betChoice}
|
2021-12-13 18:32:40 +00:00
|
|
|
onSelect={(choice) => onBetChoice(choice)}
|
2021-12-10 14:56:17 +00:00
|
|
|
/>
|
2022-03-29 19:56:56 +00:00
|
|
|
<div className="my-3 text-left text-sm text-gray-500">Amount</div>
|
|
|
|
<BuyAmountInput
|
2022-05-02 16:15:00 +00:00
|
|
|
inputClassName="w-full max-w-none"
|
2022-01-11 03:41:42 +00:00
|
|
|
amount={betAmount}
|
|
|
|
onChange={onBetChange}
|
|
|
|
error={error}
|
|
|
|
setError={setError}
|
|
|
|
disabled={isSubmitting}
|
2022-01-26 20:08:03 +00:00
|
|
|
inputRef={inputRef}
|
2022-01-11 03:41:42 +00:00
|
|
|
/>
|
|
|
|
|
2022-03-03 09:09:32 +00:00
|
|
|
<Col className="mt-3 w-full gap-3">
|
|
|
|
<Row className="items-center justify-between text-sm">
|
2022-03-02 03:31:48 +00:00
|
|
|
<div className="text-gray-500">Probability</div>
|
2022-05-15 21:10:26 +00:00
|
|
|
<div>
|
|
|
|
{formatPercent(initialProb)}
|
|
|
|
<span className="mx-2">→</span>
|
|
|
|
{formatPercent(resultProb)}
|
|
|
|
</div>
|
2022-03-02 03:31:48 +00:00
|
|
|
</Row>
|
2021-12-10 17:14:05 +00:00
|
|
|
|
2022-03-22 05:18:08 +00:00
|
|
|
<Row className="items-center justify-between gap-2 text-sm">
|
2022-03-03 09:09:32 +00:00
|
|
|
<Row className="flex-nowrap items-center gap-2 whitespace-nowrap text-gray-500">
|
2022-03-02 03:31:48 +00:00
|
|
|
<div>
|
2022-03-22 05:18:08 +00:00
|
|
|
{contract.mechanism === 'dpm-2' ? (
|
|
|
|
<>
|
|
|
|
Estimated
|
2022-04-18 23:02:40 +00:00
|
|
|
<br /> payout if{' '}
|
|
|
|
<BinaryOutcomeLabel outcome={betChoice ?? 'YES'} />
|
2022-03-22 05:18:08 +00:00
|
|
|
</>
|
|
|
|
) : (
|
|
|
|
<>
|
2022-04-18 23:02:40 +00:00
|
|
|
Payout if <BinaryOutcomeLabel outcome={betChoice ?? 'YES'} />
|
2022-03-22 05:18:08 +00:00
|
|
|
</>
|
|
|
|
)}
|
2022-03-02 03:31:48 +00:00
|
|
|
</div>
|
2022-03-15 22:27:51 +00:00
|
|
|
|
2022-05-09 21:33:14 +00:00
|
|
|
{cpmmFees !== false && (
|
|
|
|
<InfoTooltip text={`Includes ${formatMoney(cpmmFees)} in fees`} />
|
|
|
|
)}
|
|
|
|
|
2022-03-22 05:18:08 +00:00
|
|
|
{dpmTooltip && <InfoTooltip text={dpmTooltip} />}
|
2022-01-26 20:08:03 +00:00
|
|
|
</Row>
|
2022-05-15 21:10:26 +00:00
|
|
|
<div>
|
|
|
|
<span className="mr-2 whitespace-nowrap">
|
2022-03-02 03:31:48 +00:00
|
|
|
{formatMoney(currentPayout)}
|
|
|
|
</span>
|
2022-05-15 21:10:26 +00:00
|
|
|
(+{currentReturnPercent})
|
|
|
|
</div>
|
2022-03-02 03:31:48 +00:00
|
|
|
</Row>
|
|
|
|
</Col>
|
2021-12-11 03:47:46 +00:00
|
|
|
|
2022-03-02 03:31:48 +00:00
|
|
|
<Spacer h={8} />
|
2021-12-11 03:47:46 +00:00
|
|
|
|
2022-02-21 04:37:53 +00:00
|
|
|
{user && (
|
2021-12-18 07:09:11 +00:00
|
|
|
<button
|
|
|
|
className={clsx(
|
2022-03-02 03:31:48 +00:00
|
|
|
'btn flex-1',
|
2021-12-18 07:09:11 +00:00
|
|
|
betDisabled
|
|
|
|
? 'btn-disabled'
|
|
|
|
: betChoice === 'YES'
|
|
|
|
? 'btn-primary'
|
2022-02-11 18:40:22 +00:00
|
|
|
: 'border-none bg-red-400 hover:bg-red-500',
|
2021-12-18 07:09:11 +00:00
|
|
|
isSubmitting ? 'loading' : ''
|
|
|
|
)}
|
|
|
|
onClick={betDisabled ? undefined : submitBet}
|
|
|
|
>
|
2022-04-09 21:13:36 +00:00
|
|
|
{isSubmitting ? 'Submitting...' : 'Submit bet'}
|
2021-12-18 07:09:11 +00:00
|
|
|
</button>
|
|
|
|
)}
|
2021-12-11 03:47:46 +00:00
|
|
|
|
2022-04-09 21:13:36 +00:00
|
|
|
{wasSubmitted && <div className="mt-4">Bet submitted!</div>}
|
2022-03-29 19:56:56 +00:00
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-04-20 14:13:39 +00:00
|
|
|
export function SellPanel(props: {
|
2022-03-29 19:56:56 +00:00
|
|
|
contract: FullContract<CPMM, Binary>
|
|
|
|
userBets: Bet[]
|
|
|
|
shares: number
|
|
|
|
sharesOutcome: 'YES' | 'NO'
|
|
|
|
user: User
|
|
|
|
onSellSuccess?: () => void
|
|
|
|
}) {
|
|
|
|
const { contract, shares, sharesOutcome, userBets, user, onSellSuccess } =
|
|
|
|
props
|
|
|
|
|
|
|
|
const [amount, setAmount] = useState<number | undefined>(shares)
|
|
|
|
const [error, setError] = useState<string | undefined>()
|
|
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
|
|
const [wasSubmitted, setWasSubmitted] = useState(false)
|
|
|
|
|
|
|
|
const betDisabled = isSubmitting || !amount || error
|
|
|
|
|
|
|
|
async function submitSell() {
|
|
|
|
if (!user || !amount) return
|
|
|
|
|
|
|
|
setError(undefined)
|
|
|
|
setIsSubmitting(true)
|
|
|
|
|
|
|
|
// Sell all shares if remaining shares would be < 1
|
|
|
|
const sellAmount = amount === Math.floor(shares) ? shares : amount
|
|
|
|
|
|
|
|
const result = await sellShares({
|
|
|
|
shares: sellAmount,
|
|
|
|
outcome: sharesOutcome,
|
|
|
|
contractId: contract.id,
|
|
|
|
}).then((r) => r.data)
|
|
|
|
|
|
|
|
console.log('Sold shares. Result:', result)
|
|
|
|
|
|
|
|
if (result?.status === 'success') {
|
|
|
|
setIsSubmitting(false)
|
|
|
|
setWasSubmitted(true)
|
|
|
|
setAmount(undefined)
|
|
|
|
if (onSellSuccess) onSellSuccess()
|
|
|
|
} else {
|
|
|
|
setError(result?.message || 'Error selling')
|
|
|
|
setIsSubmitting(false)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const initialProb = getProbability(contract)
|
2022-03-30 02:30:04 +00:00
|
|
|
const { newPool } = calculateCpmmSale(
|
|
|
|
contract,
|
|
|
|
Math.min(amount ?? 0, shares),
|
|
|
|
sharesOutcome
|
|
|
|
)
|
2022-03-29 19:56:56 +00:00
|
|
|
const resultProb = getCpmmProbability(newPool, contract.p)
|
|
|
|
|
2022-05-17 03:27:37 +00:00
|
|
|
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)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-03-29 19:56:56 +00:00
|
|
|
return (
|
|
|
|
<>
|
2022-05-17 03:27:37 +00:00
|
|
|
<AmountInput
|
2022-05-04 15:47:45 +00:00
|
|
|
amount={
|
|
|
|
amount
|
|
|
|
? Math.round(amount) === 0
|
|
|
|
? 0
|
|
|
|
: Math.floor(amount)
|
|
|
|
: undefined
|
|
|
|
}
|
2022-05-17 03:27:37 +00:00
|
|
|
onChange={onAmountChange}
|
|
|
|
label="Qty"
|
2022-03-29 19:56:56 +00:00
|
|
|
error={error}
|
|
|
|
disabled={isSubmitting}
|
2022-05-17 03:27:37 +00:00
|
|
|
inputClassName="w-full"
|
2022-03-29 19:56:56 +00:00
|
|
|
/>
|
|
|
|
|
2022-05-17 03:27:37 +00:00
|
|
|
<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">
|
2022-03-29 19:56:56 +00:00
|
|
|
<div className="text-gray-500">Probability</div>
|
2022-05-15 21:10:26 +00:00
|
|
|
<div>
|
|
|
|
{formatPercent(initialProb)}
|
|
|
|
<span className="mx-2">→</span>
|
|
|
|
{formatPercent(resultProb)}
|
|
|
|
</div>
|
2022-03-29 19:56:56 +00:00
|
|
|
</Row>
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
<Spacer h={8} />
|
|
|
|
|
|
|
|
<button
|
|
|
|
className={clsx(
|
|
|
|
'btn flex-1',
|
|
|
|
betDisabled
|
|
|
|
? 'btn-disabled'
|
|
|
|
: sharesOutcome === 'YES'
|
|
|
|
? 'btn-primary'
|
|
|
|
: 'border-none bg-red-400 hover:bg-red-500',
|
|
|
|
isSubmitting ? 'loading' : ''
|
|
|
|
)}
|
|
|
|
onClick={betDisabled ? undefined : submitSell}
|
|
|
|
>
|
|
|
|
{isSubmitting ? 'Submitting...' : 'Submit sell'}
|
|
|
|
</button>
|
|
|
|
|
|
|
|
{wasSubmitted && <div className="mt-4">Sell submitted!</div>}
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|