Sell shares panel (#69)

* Split BuyAmountInput out of AmountInput

* Buy and sell tabs. Compute some sell info

* In progress

* BuyPanel & SellPanel with banner above that shows current shares and toggle button

* Remove "Remaining balance"

* Bring back 'Place a trade'. Tweaks

* Sell shares cloud function.

* Sell all shares by default. Switch back to buy if sell all your shares.

* Cache your shares in local storage so sell banner doesn't flicker.

* Compute sale value of shares with binary search to keep k constant.

* Update bets table to show BUY or SELL

* Fixes from Stephen's review

* Don't allow selling more than max shares in cloud function

* Use modal for sell shares on desktop.

* Handle floating point precision in max shares you can sell.
This commit is contained in:
James Grugett 2022-03-29 14:56:56 -05:00 committed by GitHub
parent a40d593d32
commit ed5f69db7a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 830 additions and 193 deletions

View File

@ -114,28 +114,60 @@ export function calculateCpmmPurchase(
return { shares, newPool, newP, fees }
}
export function calculateCpmmShareValue(
function computeK(y: number, n: number, p: number) {
return y ** p * n ** (1 - p)
}
function sellSharesK(
y: number,
n: number,
p: number,
s: number,
outcome: 'YES' | 'NO',
b: number
) {
return outcome === 'YES'
? computeK(y - b + s, n - b, p)
: computeK(y - b, n - b + s, p)
}
function calculateCpmmShareValue(
contract: FullContract<CPMM, Binary>,
shares: number,
outcome: string
outcome: 'YES' | 'NO'
) {
const { pool } = contract
const { YES: y, NO: n } = pool
const { pool, p } = contract
// TODO: calculate using new function
const poolChange = outcome === 'YES' ? shares + y - n : shares + n - y
const k = y * n
const shareValue = 0.5 * (shares + y + n - Math.sqrt(4 * k + poolChange ** 2))
return shareValue
const k = computeK(pool.YES, pool.NO, p)
// Find bet amount that preserves k after selling shares.
let lowAmount = 0
let highAmount = shares
let mid = 0
let kGuess = 0
while (Math.abs(k - kGuess) > 0.00000000001) {
mid = lowAmount + (highAmount - lowAmount) / 2
kGuess = sellSharesK(pool.YES, pool.NO, p, shares, outcome, mid)
if (kGuess < k) {
highAmount = mid
} else {
lowAmount = mid
}
}
return mid
}
export function calculateCpmmSale(
contract: FullContract<CPMM, Binary>,
bet: Bet
bet: { shares: number; outcome: string }
) {
const { shares, outcome } = bet
const rawSaleValue = calculateCpmmShareValue(contract, shares, outcome)
const rawSaleValue = calculateCpmmShareValue(
contract,
Math.abs(shares),
outcome as 'YES' | 'NO'
)
const { fees, remainingBet: saleValue } = getCpmmLiquidityFee(
contract,
@ -153,9 +185,11 @@ export function calculateCpmmSale(
? [y + shares - saleValue + fee, n - saleValue + fee]
: [y - saleValue + fee, n + shares - saleValue + fee]
const newPool = { YES: newY, NO: newN }
const postBetPool = { YES: newY, NO: newN }
return { saleValue, newPool, fees }
const { newPool, newP } = addCpmmLiquidity(postBetPool, contract.p, fee)
return { saleValue, newPool, newP, fees }
}
export function getCpmmProbabilityAfterSale(

View File

@ -85,21 +85,24 @@ export const getSellBetInfo = (
export const getCpmmSellBetInfo = (
user: User,
bet: Bet,
shares: number,
outcome: 'YES' | 'NO',
contract: FullContract<CPMM, Binary>,
newBetId: string
) => {
const { pool, p } = contract
const { id: betId, amount, shares, outcome } = bet
const { saleValue, newPool, fees } = calculateCpmmSale(contract, bet)
const { saleValue, newPool, newP, fees } = calculateCpmmSale(contract, {
shares,
outcome,
})
const probBefore = getCpmmProbability(pool, p)
const probAfter = getCpmmProbability(newPool, p)
console.log(
'SELL M$',
amount,
shares,
outcome,
'for M$',
saleValue,
@ -117,10 +120,6 @@ export const getCpmmSellBetInfo = (
probBefore,
probAfter,
createdTime: Date.now(),
sale: {
amount: saleValue,
betId,
},
fees,
}
@ -129,6 +128,7 @@ export const getCpmmSellBetInfo = (
return {
newBet,
newPool,
newP,
newBalance,
fees,
}

View File

@ -7,6 +7,7 @@ export * from './place-bet'
export * from './resolve-market'
export * from './stripe'
export * from './sell-bet'
export * from './sell-shares'
export * from './create-contract'
export * from './create-user'
export * from './create-fold'

View File

@ -4,7 +4,7 @@ import * as functions from 'firebase-functions'
import { Contract } from '../../common/contract'
import { User } from '../../common/user'
import { Bet } from '../../common/bet'
import { getCpmmSellBetInfo, getSellBetInfo } from '../../common/sell-bet'
import { getSellBetInfo } from '../../common/sell-bet'
import { addObjects, removeUndefinedProps } from '../../common/util/object'
import { Fees } from '../../common/fees'
@ -34,8 +34,14 @@ export const sellBet = functions.runWith({ minInstances: 1 }).https.onCall(
if (!contractSnap.exists)
return { status: 'error', message: 'Invalid contract' }
const contract = contractSnap.data() as Contract
const { closeTime, mechanism, collectedFees, volume } = contract
if (mechanism !== 'dpm-2')
return {
status: 'error',
message: 'Sell shares only works with mechanism dpm-2',
}
if (closeTime && Date.now() > closeTime)
return { status: 'error', message: 'Trading is closed' }
@ -57,15 +63,7 @@ export const sellBet = functions.runWith({ minInstances: 1 }).https.onCall(
newTotalBets,
newBalance,
fees,
} =
mechanism === 'dpm-2'
? getSellBetInfo(user, bet, contract, newBetDoc.id)
: (getCpmmSellBetInfo(
user,
bet,
contract as any,
newBetDoc.id
) as any)
} = getSellBetInfo(user, bet, contract, newBetDoc.id)
if (!isFinite(newBalance)) {
throw new Error('Invalid user balance for ' + user.username)
@ -81,7 +79,7 @@ export const sellBet = functions.runWith({ minInstances: 1 }).https.onCall(
totalShares: newTotalShares,
totalBets: newTotalBets,
collectedFees: addObjects<Fees>(fees ?? {}, collectedFees ?? {}),
volume: volume + bet.amount,
volume: volume + Math.abs(newBet.amount),
})
)

View File

@ -0,0 +1,111 @@
import * as _ from 'lodash'
import * as admin from 'firebase-admin'
import * as functions from 'firebase-functions'
import { Binary, CPMM, FullContract } from '../../common/contract'
import { User } from '../../common/user'
import { getCpmmSellBetInfo } from '../../common/sell-bet'
import { addObjects, removeUndefinedProps } from '../../common/util/object'
import { getValues } from './utils'
import { Bet } from '../../common/bet'
export const sellShares = functions.runWith({ minInstances: 1 }).https.onCall(
async (
data: {
contractId: string
shares: number
outcome: 'YES' | 'NO'
},
context
) => {
const userId = context?.auth?.uid
if (!userId) return { status: 'error', message: 'Not authorized' }
const { contractId, shares, outcome } = data
// Run as transaction to prevent race conditions.
return await firestore.runTransaction(async (transaction) => {
const userDoc = firestore.doc(`users/${userId}`)
const userSnap = await transaction.get(userDoc)
if (!userSnap.exists)
return { status: 'error', message: 'User not found' }
const user = userSnap.data() as User
const contractDoc = firestore.doc(`contracts/${contractId}`)
const contractSnap = await transaction.get(contractDoc)
if (!contractSnap.exists)
return { status: 'error', message: 'Invalid contract' }
const contract = contractSnap.data() as FullContract<CPMM, Binary>
const { closeTime, mechanism, collectedFees, volume } = contract
if (mechanism !== 'cpmm-1')
return {
status: 'error',
message: 'Sell shares only works with mechanism cpmm-1',
}
if (closeTime && Date.now() > closeTime)
return { status: 'error', message: 'Trading is closed' }
const userBets = await getValues<Bet>(
contractDoc.collection('bets').where('userId', '==', userId)
)
const [yesBets, noBets] = _.partition(
userBets ?? [],
(bet) => bet.outcome === 'YES'
)
const [yesShares, noShares] = [
_.sumBy(yesBets, (bet) => bet.shares),
_.sumBy(noBets, (bet) => bet.shares),
]
const maxShares = outcome === 'YES' ? yesShares : noShares
if (shares > maxShares + 0.000000000001) {
return {
status: 'error',
message: `You can only sell ${maxShares} shares`,
}
}
const newBetDoc = firestore
.collection(`contracts/${contractId}/bets`)
.doc()
const { newBet, newPool, newP, newBalance, fees } = getCpmmSellBetInfo(
user,
shares,
outcome,
contract,
newBetDoc.id
)
if (!isFinite(newP)) {
return {
status: 'error',
message: 'Trade rejected due to overflow error.',
}
}
if (!isFinite(newBalance)) {
throw new Error('Invalid user balance for ' + user.username)
}
transaction.update(userDoc, { balance: newBalance })
transaction.create(newBetDoc, newBet)
transaction.update(
contractDoc,
removeUndefinedProps({
pool: newPool,
p: newP,
collectedFees: addObjects(fees ?? {}, collectedFees ?? {}),
volume: volume + Math.abs(newBet.amount),
})
)
return { status: 'success' }
})
}
)
const firestore = admin.firestore()

View File

@ -1,50 +1,39 @@
import clsx from 'clsx'
import _ from 'lodash'
import { useUser } from '../hooks/use-user'
import { formatMoney } from '../../common/util/format'
import { formatMoney, formatWithCommas } from '../../common/util/format'
import { Col } from './layout/col'
import { Row } from './layout/row'
import { useUserContractBets } from '../hooks/use-user-bets'
import { MAX_LOAN_PER_CONTRACT } from '../../common/bet'
import { Bet, MAX_LOAN_PER_CONTRACT } from '../../common/bet'
import { InfoTooltip } from './info-tooltip'
import { Spacer } from './layout/spacer'
import { calculateCpmmSale } from '../../common/calculate-cpmm'
import { Binary, CPMM, FullContract } from '../../common/contract'
export function AmountInput(props: {
amount: number | undefined
onChange: (newAmount: number | undefined) => void
error: string | undefined
setError: (error: string | undefined) => void
contractIdForLoan: string | undefined
minimumAmount?: number
label: string
disabled?: boolean
className?: string
inputClassName?: string
// Needed to focus the amount input
inputRef?: React.MutableRefObject<any>
children?: any
}) {
const {
amount,
onChange,
error,
setError,
contractIdForLoan,
label,
disabled,
className,
inputClassName,
minimumAmount,
inputRef,
children,
} = props
const user = useUser()
const userBets = useUserContractBets(user?.id, contractIdForLoan) ?? []
const openUserBets = userBets.filter((bet) => !bet.isSold && !bet.sale)
const prevLoanAmount = _.sumBy(openUserBets, (bet) => bet.loanAmount ?? 0)
const loanAmount = contractIdForLoan
? Math.min(amount ?? 0, MAX_LOAN_PER_CONTRACT - prevLoanAmount)
: 0
const onAmountChange = (str: string) => {
if (str.includes('-')) {
onChange(undefined)
@ -56,28 +45,12 @@ export function AmountInput(props: {
if (amount >= 10 ** 9) return
onChange(str ? amount : undefined)
const loanAmount = contractIdForLoan
? Math.min(amount, MAX_LOAN_PER_CONTRACT - prevLoanAmount)
: 0
const amountNetLoan = amount - loanAmount
if (user && user.balance < amountNetLoan) {
setError('Insufficient balance')
} else if (minimumAmount && amount < minimumAmount) {
setError('Minimum amount: ' + formatMoney(minimumAmount))
} else {
setError(undefined)
}
}
const amountNetLoan = (amount ?? 0) - loanAmount
const remainingBalance = Math.max(0, (user?.balance ?? 0) - amountNetLoan)
return (
<Col className={className}>
<label className="input-group">
<span className="bg-gray-200 text-sm">M$</span>
<span className="bg-gray-200 text-sm">{label}</span>
<input
className={clsx(
'input input-bordered',
@ -101,6 +74,79 @@ export function AmountInput(props: {
{error}
</div>
)}
{children}
</Col>
)
}
export function BuyAmountInput(props: {
amount: number | undefined
onChange: (newAmount: number | undefined) => void
error: string | undefined
setError: (error: string | undefined) => void
contractIdForLoan: string | undefined
userBets?: Bet[]
minimumAmount?: number
disabled?: boolean
className?: string
inputClassName?: string
// Needed to focus the amount input
inputRef?: React.MutableRefObject<any>
}) {
const {
amount,
onChange,
userBets,
error,
setError,
contractIdForLoan,
disabled,
className,
inputClassName,
minimumAmount,
inputRef,
} = props
const user = useUser()
const openUserBets = (userBets ?? []).filter(
(bet) => !bet.isSold && !bet.sale
)
const prevLoanAmount = _.sumBy(openUserBets, (bet) => bet.loanAmount ?? 0)
const loanAmount = contractIdForLoan
? Math.min(amount ?? 0, MAX_LOAN_PER_CONTRACT - prevLoanAmount)
: 0
const onAmountChange = (amount: number | undefined) => {
onChange(amount)
// Check for errors.
if (amount !== undefined) {
const amountNetLoan = amount - loanAmount
if (user && user.balance < amountNetLoan) {
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}
>
{user && (
<Col className="gap-3 text-sm">
{contractIdForLoan && (
@ -116,14 +162,106 @@ export function AmountInput(props: {
<span className="text-neutral">{formatMoney(loanAmount)}</span>{' '}
</Row>
)}
<Row className="items-center justify-between gap-2 text-gray-500">
Remaining balance{' '}
<span className="text-neutral">
{formatMoney(Math.floor(remainingBalance))}
</span>
</Row>
</Col>
)}
</Col>
</AmountInput>
)
}
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
const shares = yesShares || noShares
const prevLoanAmount = _.sumBy(openUserBets, (bet) => bet.loanAmount ?? 0)
const sharesSold = Math.min(amount ?? 0, yesShares || noShares)
const { saleValue } = calculateCpmmSale(contract, {
shares: sharesSold,
outcome: sellOutcome as 'YES' | 'NO',
})
const loanRepaid = Math.min(prevLoanAmount, saleValue)
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>
{!!prevLoanAmount && (
<Row className="items-center justify-between gap-2 text-gray-500">
<Row className="items-center gap-2">
Loan repaid{' '}
<InfoTooltip
text={`Sold shares go toward paying off loans first.`}
/>
</Row>
<span className="text-neutral">{formatMoney(loanRepaid)}</span>{' '}
</Row>
)}
</Col>
)}
</AmountInput>
)
}

View File

@ -5,7 +5,7 @@ import { XIcon } from '@heroicons/react/solid'
import { Answer } from '../../../common/answer'
import { DPM, FreeResponse, FullContract } from '../../../common/contract'
import { AmountInput } from '../amount-input'
import { BuyAmountInput } from '../amount-input'
import { Col } from '../layout/col'
import { placeBet } from '../../lib/firebase/api-call'
import { Row } from '../layout/row'
@ -114,7 +114,7 @@ export function AnswerBetPanel(props: {
)}
</Row>
<div className="my-3 text-left text-sm text-gray-500">Amount </div>
<AmountInput
<BuyAmountInput
inputClassName="w-full"
amount={betAmount}
onChange={setBetAmount}

View File

@ -4,7 +4,7 @@ import { useState } from 'react'
import Textarea from 'react-expanding-textarea'
import { DPM, FreeResponse, FullContract } from '../../../common/contract'
import { AmountInput } from '../amount-input'
import { BuyAmountInput } from '../amount-input'
import { Col } from '../layout/col'
import { createAnswer } from '../../lib/firebase/api-call'
import { Row } from '../layout/row'
@ -97,7 +97,7 @@ export function CreateAnswerPanel(props: {
<>
<Col className="mt-1 gap-2">
<div className="text-sm text-gray-500">Buy amount</div>
<AmountInput
<BuyAmountInput
amount={betAmount}
onChange={setBetAmount}
error={amountError}

View File

@ -1,5 +1,6 @@
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'
@ -13,10 +14,10 @@ import {
formatWithCommas,
} from '../../common/util/format'
import { Title } from './title'
import { firebaseLogin } from '../lib/firebase/users'
import { firebaseLogin, User } from '../lib/firebase/users'
import { Bet } from '../../common/bet'
import { placeBet } from '../lib/firebase/api-call'
import { AmountInput } from './amount-input'
import { placeBet, sellShares } from '../lib/firebase/api-call'
import { BuyAmountInput, SellAmountInput } from './amount-input'
import { InfoTooltip } from './info-tooltip'
import { OutcomeLabel } from './outcome-label'
import {
@ -26,30 +27,219 @@ import {
getOutcomeProbabilityAfterBet,
} from '../../common/calculate'
import { useFocus } from '../hooks/use-focus'
import { useUserContractBets } from '../hooks/use-user-bets'
import {
calculateCpmmSale,
getCpmmProbability,
} from '../../common/calculate-cpmm'
import { Modal } from './layout/modal'
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 [showSellModal, setShowSellModal] = useState(false)
const { yesShares, noShares } = useSaveShares(contract, userBets)
const shares = yesShares || noShares
const sharesOutcome = yesShares ? 'YES' : noShares ? 'NO' : undefined
return (
<Col className={className}>
{sharesOutcome && user && mechanism === 'cpmm-1' && (
<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))}{' '}
<OutcomeLabel 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',
!sharesOutcome && 'rounded-t-md',
className
)}
>
<Title className={clsx('!mt-0')} text="Place a trade" />
<BuyPanel contract={contract} user={user} userBets={userBets ?? []} />
{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}
>
Sign in to trade!
</button>
)}
</Col>
</Col>
)
}
export function BetPanelSwitcher(props: {
contract: FullContract<DPM | CPMM, Binary>
className?: string
title?: string // Set if BetPanel is on a feed modal
selected?: 'YES' | 'NO'
onBetSuccess?: () => void
}) {
const { contract, className, title, selected, onBetSuccess } = props
const { mechanism } = contract
const user = useUser()
const userBets = useUserContractBets(user?.id, contract.id)
const [tradeType, setTradeType] = useState<'BUY' | 'SELL'>('BUY')
const { yesShares, noShares } = useSaveShares(contract, userBets)
const shares = yesShares || noShares
const sharesOutcome = yesShares ? 'YES' : noShares ? 'NO' : undefined
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>
You have {formatWithCommas(Math.floor(shares))}{' '}
<OutcomeLabel outcome={sharesOutcome} /> shares
</div>
<button
className="btn btn-sm"
style={{
backgroundColor: 'white',
border: '2px solid',
color: '#3D4451',
}}
onClick={() =>
tradeType === 'BUY' ? setTradeType('SELL') : setTradeType('BUY')
}
>
{tradeType === 'BUY' ? 'Sell' : 'Buy'}
</button>
</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}
userBets={userBets ?? []}
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}
>
Sign in to trade!
</button>
)}
</Col>
</Col>
)
}
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 [betChoice, setBetChoice] = useState<'YES' | 'NO' | undefined>(selected)
const [betAmount, setBetAmount] = useState<number | undefined>(undefined)
const [error, setError] = useState<string | undefined>()
const [isSubmitting, setIsSubmitting] = useState(false)
const [wasSubmitted, setWasSubmitted] = useState(false)
const [inputRef, focusAmountInput] = useFocus()
useEffect(() => {
// warm up cloud function
placeBet({}).catch()
}, [])
const { contract, className, title, selected, onBetSuccess } = props
const user = useUser()
const [betChoice, setBetChoice] = useState<'YES' | 'NO' | undefined>(selected)
const [betAmount, setBetAmount] = useState<number | undefined>(undefined)
const [inputRef, focusAmountInput] = useFocus()
const [error, setError] = useState<string | undefined>()
const [isSubmitting, setIsSubmitting] = useState(false)
const [wasSubmitted, setWasSubmitted] = useState(false)
useEffect(() => {
if (selected) focusAmountInput()
}, [selected, focusAmountInput])
function onBetChoice(choice: 'YES' | 'NO') {
setBetChoice(choice)
@ -83,9 +273,9 @@ export function BetPanel(props: {
setIsSubmitting(false)
setWasSubmitted(true)
setBetAmount(undefined)
if (onBetSuccess) onBetSuccess()
if (onBuySuccess) onBuySuccess()
} else {
setError(result?.error || 'Error placing bet')
setError(result?.message || 'Error placing bet')
setIsSubmitting(false)
}
}
@ -114,11 +304,6 @@ export function BetPanel(props: {
const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0
const currentReturnPercent = formatPercent(currentReturn)
const panelTitle = title ?? 'Place a trade'
if (title) {
focusAmountInput()
}
const dpmTooltip =
contract.mechanism === 'dpm-2'
? `Current payout for ${formatWithCommas(shares)} / ${formatWithCommas(
@ -129,25 +314,19 @@ export function BetPanel(props: {
: 0)
)} ${betChoice ?? 'YES'} shares`
: undefined
return (
<Col className={clsx('rounded-md bg-white px-8 py-6', className)}>
<Title
className={clsx('!mt-0', title ? '!text-xl' : '')}
text={panelTitle}
/>
<>
<YesNoSelector
className="mb-4"
selected={betChoice}
onSelect={(choice) => onBetChoice(choice)}
/>
<div className="my-3 text-left text-sm text-gray-500">Amount </div>
<AmountInput
<div className="my-3 text-left text-sm text-gray-500">Amount</div>
<BuyAmountInput
inputClassName="w-full"
amount={betAmount}
onChange={onBetChange}
userBets={userBets}
error={error}
setError={setError}
disabled={isSubmitting}
@ -206,19 +385,180 @@ export function BetPanel(props: {
)}
onClick={betDisabled ? undefined : submitBet}
>
{isSubmitting ? 'Submitting...' : 'Submit trade'}
</button>
)}
{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}
>
Sign in to trade!
{isSubmitting ? 'Submitting...' : 'Submit Buy'}
</button>
)}
{wasSubmitted && <div className="mt-4">Trade submitted!</div>}
</Col>
{wasSubmitted && <div className="mt-4">Buy submitted!</div>}
</>
)
}
function SellPanel(props: {
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)
const { newPool } = calculateCpmmSale(contract, {
shares: Math.min(amount ?? 0, shares),
outcome: sharesOutcome,
})
const resultProb = getCpmmProbability(newPool, contract.p)
return (
<>
<SellAmountInput
inputClassName="w-full"
contract={contract}
amount={amount ? Math.floor(amount) : undefined}
onChange={setAmount}
userBets={userBets}
error={error}
setError={setError}
disabled={isSubmitting}
/>
<Col className="mt-3 w-full gap-3">
<Row className="items-center justify-between text-sm">
<div className="text-gray-500">Probability</div>
<Row>
<div>{formatPercent(initialProb)}</div>
<div className="mx-2"></div>
<div>{formatPercent(resultProb)}</div>
</Row>
</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>}
</>
)
}
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} /> shares
</div>
<SellPanel
contract={contract}
shares={shares}
sharesOutcome={sharesOutcome}
user={user}
userBets={userBets ?? []}
onSellSuccess={() => setOpen(false)}
/>
</Col>
</Modal>
)
}

View File

@ -1,11 +1,11 @@
import clsx from 'clsx'
import { Fragment, useState } from 'react'
import { Dialog, Transition } from '@headlessui/react'
import { useState } from 'react'
import { BetPanel } from './bet-panel'
import { BetPanelSwitcher } from './bet-panel'
import { Row } from './layout/row'
import { YesNoSelector } from './yes-no-selector'
import { Binary, CPMM, DPM, FullContract } from '../../common/contract'
import { Modal } from './layout/modal'
// Inline version of a bet panel. Opens BetPanel in a new modal.
export default function BetRow(props: {
@ -27,7 +27,7 @@ export default function BetRow(props: {
Place a trade
</div>
<YesNoSelector
btnClassName="btn-sm w-20"
btnClassName="btn-sm w-24"
onSelect={(choice) => {
setOpen(true)
setBetChoice(choice)
@ -35,7 +35,7 @@ export default function BetRow(props: {
/>
</Row>
<Modal open={open} setOpen={setOpen}>
<BetPanel
<BetPanelSwitcher
contract={props.contract}
title={props.contract.question}
selected={betChoice}
@ -46,57 +46,3 @@ export default function BetRow(props: {
</>
)
}
// From https://tailwindui.com/components/application-ui/overlays/modals
export function Modal(props: {
children: React.ReactNode
open: boolean
setOpen: (open: boolean) => void
}) {
const { children, open, setOpen } = props
return (
<Transition.Root show={open} as={Fragment}>
<Dialog
as="div"
className="fixed inset-0 z-50 overflow-y-auto"
onClose={setOpen}
>
<div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
{/* This element is to trick the browser into centering the modal contents. */}
<span
className="hidden sm:inline-block sm:h-screen sm:align-middle"
aria-hidden="true"
>
&#8203;
</span>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div className="inline-block transform overflow-hidden text-left align-bottom transition-all sm:my-8 sm:w-full sm:max-w-md sm:p-6 sm:align-middle">
{children}
</div>
</Transition.Child>
</div>
</Dialog>
</Transition.Root>
)
}

View File

@ -472,6 +472,7 @@ export function ContractBetsTable(props: {
<thead>
<tr className="p-2">
<th></th>
{isCPMM && <th>Type</th>}
<th>Outcome</th>
<th>Amount</th>
{!isCPMM && <th>{isResolved ? <>Payout</> : <>Sale price</>}</th>}
@ -541,13 +542,14 @@ function BetRow(props: { bet: Bet; contract: Contract; saleBet?: Bet }) {
<SellButton contract={contract} bet={bet} />
)}
</td>
{isCPMM && <td>{shares >= 0 ? 'BUY' : 'SELL'}</td>}
<td>
<OutcomeLabel outcome={outcome} />
</td>
<td>{formatMoney(amount)}</td>
<td>{formatMoney(Math.abs(amount))}</td>
{!isCPMM && <td>{saleDisplay}</td>}
{!isCPMM && !isResolved && <td>{payoutIfChosenDisplay}</td>}
<td>{formatWithCommas(shares)}</td>
<td>{formatWithCommas(Math.abs(shares))}</td>
<td>
{formatPercent(probBefore)} {formatPercent(probAfter)}
</td>

View File

@ -36,7 +36,7 @@ import { DateTimeTooltip } from '../datetime-tooltip'
import { Bet } from '../../lib/firebase/bets'
import { JoinSpans } from '../join-spans'
import { fromNow } from '../../lib/util/time'
import BetRow, { Modal } from '../bet-row'
import BetRow from '../bet-row'
import { parseTags } from '../../../common/util/parse'
import { Avatar } from '../avatar'
import { useAdmin } from '../../hooks/use-admin'
@ -48,6 +48,7 @@ import { getDpmOutcomeProbability } from '../../../common/calculate-dpm'
import { AnswerBetPanel } from '../answers/answer-bet-panel'
import { useSaveSeenContract } from '../../hooks/use-seen-contracts'
import { User } from '../../../common/user'
import { Modal } from '../layout/modal'
export function FeedItems(props: {
contract: Contract

View File

@ -0,0 +1,56 @@
import { Fragment } from 'react'
import { Dialog, Transition } from '@headlessui/react'
// From https://tailwindui.com/components/application-ui/overlays/modals
export function Modal(props: {
children: React.ReactNode
open: boolean
setOpen: (open: boolean) => void
}) {
const { children, open, setOpen } = props
return (
<Transition.Root show={open} as={Fragment}>
<Dialog
as="div"
className="fixed inset-0 z-50 overflow-y-auto"
onClose={setOpen}
>
<div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
{/* This element is to trick the browser into centering the modal contents. */}
<span
className="hidden sm:inline-block sm:h-screen sm:align-middle"
aria-hidden="true"
>
&#8203;
</span>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div className="inline-block transform overflow-hidden text-left align-bottom transition-all sm:my-8 sm:w-full sm:max-w-md sm:p-6 sm:align-middle">
{children}
</div>
</Transition.Child>
</div>
</Dialog>
</Transition.Root>
)
}

View File

@ -12,11 +12,15 @@ export function YesNoSelector(props: {
}) {
const { selected, onSelect, className, btnClassName } = 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
className={clsx(
'hover:bg-primary-focus border-primary hover:border-primary-focus inline-flex flex-1 items-center justify-center rounded-lg border-2 p-2 hover:text-white',
commonClassNames,
'hover:bg-primary-focus border-primary hover:border-primary-focus hover:text-white',
selected == 'YES'
? 'bg-primary text-white'
: 'text-primary bg-transparent',
@ -28,7 +32,8 @@ export function YesNoSelector(props: {
</button>
<button
className={clsx(
'inline-flex flex-1 items-center justify-center rounded-lg border-2 border-red-400 p-2 hover:border-red-500 hover:bg-red-500 hover:text-white',
commonClassNames,
'border-red-400 hover:border-red-500 hover:bg-red-500 hover:text-white',
selected == 'NO'
? 'bg-red-400 text-white'
: 'bg-transparent text-red-400',
@ -50,7 +55,7 @@ export function YesNoCancelSelector(props: {
}) {
const { selected, onSelect } = props
const btnClassName = clsx('px-6 flex-1', props.btnClassName)
const btnClassName = clsx('px-6 flex-1 rounded-3xl', props.btnClassName)
return (
<Col className="gap-2">

View File

@ -18,6 +18,13 @@ export const createFold = cloudFunction<
export const placeBet = cloudFunction('placeBet')
export const sellBet = cloudFunction('sellBet')
export const sellShares = cloudFunction<
{ contractId: string; shares: number; outcome: 'YES' | 'NO' },
{ status: 'error' | 'success'; message?: string }
>('sellShares')
export const createAnswer = cloudFunction<
{ contractId: string; text: string; amount: number },
{
@ -38,8 +45,6 @@ export const resolveMarket = cloudFunction<
{ status: 'error' | 'success'; message?: string }
>('resolveMarket')
export const sellBet = cloudFunction('sellBet')
export const createUser: () => Promise<User | null> = () => {
let deviceToken = window.localStorage.getItem('device-token')
if (!deviceToken) {

View File

@ -8,7 +8,7 @@ import { Spacer } from '../components/layout/spacer'
import { useUser } from '../hooks/use-user'
import { Contract, contractPath } from '../lib/firebase/contracts'
import { createContract } from '../lib/firebase/api-call'
import { AmountInput } from '../components/amount-input'
import { BuyAmountInput } from '../components/amount-input'
import { MINIMUM_ANTE } from '../../common/antes'
import { InfoTooltip } from '../components/info-tooltip'
import { CREATOR_FEE } from '../../common/fees'
@ -241,7 +241,7 @@ export function NewContract(props: { question: string; tag?: string }) {
text={`Provide liquidity to encourage traders to participate.`}
/>
</label>
<AmountInput
<BuyAmountInput
amount={ante ?? undefined}
minimumAmount={MINIMUM_ANTE}
onChange={setAnte}

View File

@ -7,7 +7,7 @@ import Textarea from 'react-expanding-textarea'
import { getProbability } from '../../common/calculate'
import { Binary, CPMM, DPM, FullContract } from '../../common/contract'
import { parseWordsAsTags } from '../../common/util/parse'
import { AmountInput } from '../components/amount-input'
import { BuyAmountInput } from '../components/amount-input'
import { InfoTooltip } from '../components/info-tooltip'
import { Col } from '../components/layout/col'
import { Row } from '../components/layout/row'
@ -241,7 +241,7 @@ ${TEST_VALUE}
You earn ${0.01 * 100}% of trading volume.`}
/>
</label>
<AmountInput
<BuyAmountInput
amount={ante}
minimumAmount={10}
onChange={setAnte}