Merge branch 'main' into automated-market-resolution
This commit is contained in:
Milli
commit
5f8031c155
|
|
@ -63,10 +63,8 @@ export function getCpmmLiquidityFee(
|
|||
bet: number,
|
||||
outcome: string
|
||||
) {
|
||||
const probBefore = getCpmmProbability(contract.pool, contract.p)
|
||||
const probAfter = getCpmmProbabilityAfterBetBeforeFees(contract, outcome, bet)
|
||||
const probMid = Math.sqrt(probBefore * probAfter)
|
||||
const betP = outcome === 'YES' ? 1 - probMid : probMid
|
||||
const prob = getCpmmProbabilityAfterBetBeforeFees(contract, outcome, bet)
|
||||
const betP = outcome === 'YES' ? 1 - prob : prob
|
||||
|
||||
const liquidityFee = LIQUIDITY_FEE * betP * bet
|
||||
const platformFee = PLATFORM_FEE * betP * bet
|
||||
|
|
|
|||
|
|
@ -24,8 +24,9 @@ Adapted from https://firebase.google.com/docs/functions/get-started
|
|||
|
||||
0. `$ firebase functions:config:get > .runtimeconfig.json` to cache secrets for local dev
|
||||
1. [Install](https://cloud.google.com/sdk/docs/install) gcloud CLI
|
||||
2. `$ brew install java` to install java if you don't already have it
|
||||
1. `$ echo 'export PATH="/usr/local/opt/openjdk/bin:$PATH"' >> ~/.zshrc` to add java to your path
|
||||
2. If you don't have java (or see the error `Error: Process java -version has exited with code 1. Please make sure Java is installed and on your system PATH.`):
|
||||
1. `$ brew install java`
|
||||
2. `$ sudo ln -sfn /opt/homebrew/opt/openjdk/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk.jdk`
|
||||
3. `$ gcloud auth login` to authenticate the CLI tools to Google Cloud
|
||||
4. `$ gcloud config set project <project-id>` to choose the project (`$ gcloud projects list` to see options)
|
||||
5. `$ mkdir firestore_export` to create a folder to store the exported database
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import {
|
|||
formatWithCommas,
|
||||
} from 'common/util/format'
|
||||
import { Title } from './title'
|
||||
import { firebaseLogin, User } from 'web/lib/firebase/users'
|
||||
import { User } from 'web/lib/firebase/users'
|
||||
import { Bet } from 'common/bet'
|
||||
import { APIError, placeBet } from 'web/lib/firebase/api-call'
|
||||
import { sellShares } from 'web/lib/firebase/fn-call'
|
||||
|
|
@ -36,6 +36,7 @@ import {
|
|||
} from 'common/calculate-cpmm'
|
||||
import { SellRow } from './sell-row'
|
||||
import { useSaveShares } from './use-save-shares'
|
||||
import { SignUpPrompt } from './sign-up-prompt'
|
||||
|
||||
export function BetPanel(props: {
|
||||
contract: FullContract<DPM | CPMM, Binary>
|
||||
|
|
@ -70,14 +71,7 @@ export function BetPanel(props: {
|
|||
|
||||
<BuyPanel contract={contract} user={user} />
|
||||
|
||||
{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 up to bet!
|
||||
</button>
|
||||
)}
|
||||
<SignUpPrompt />
|
||||
</Col>
|
||||
</Col>
|
||||
)
|
||||
|
|
@ -183,14 +177,7 @@ export function BetPanelSwitcher(props: {
|
|||
/>
|
||||
)}
|
||||
|
||||
{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 up to bet!
|
||||
</button>
|
||||
)}
|
||||
<SignUpPrompt />
|
||||
</Col>
|
||||
</Col>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import {
|
|||
Contract,
|
||||
contractPath,
|
||||
getBinaryProbPercent,
|
||||
listenForContract,
|
||||
} from 'web/lib/firebase/contracts'
|
||||
import { Col } from '../layout/col'
|
||||
import {
|
||||
|
|
@ -26,8 +25,7 @@ import {
|
|||
import { getOutcomeProbability, getTopAnswer } from 'common/calculate'
|
||||
import { AvatarDetails, MiscDetails } from './contract-details'
|
||||
import { getExpectedValue, getValueFromBucket } from 'common/calculate-dpm'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { QuickBet, QuickOutcomeView, ProbBar, getColor } from './quick-bet'
|
||||
import { QuickBet, ProbBar, getColor } from './quick-bet'
|
||||
import { useContractWithPreload } from 'web/hooks/use-contract'
|
||||
|
||||
export function ContractCard(props: {
|
||||
|
|
@ -39,6 +37,7 @@ export function ContractCard(props: {
|
|||
const { showHotVolume, showCloseTime, className } = props
|
||||
const contract = useContractWithPreload(props.contract) ?? props.contract
|
||||
const { question, outcomeType } = contract
|
||||
const { resolution } = contract
|
||||
|
||||
const marketClosed = (contract.closeTime || Infinity) < Date.now()
|
||||
const showQuickBet = !(
|
||||
|
|
@ -54,7 +53,7 @@ export function ContractCard(props: {
|
|||
className
|
||||
)}
|
||||
>
|
||||
<Row className={clsx(showQuickBet ? 'divide-x' : '')}>
|
||||
<Row>
|
||||
<Col className="relative flex-1 gap-3 pr-1">
|
||||
<div
|
||||
className={clsx(
|
||||
|
|
@ -69,18 +68,25 @@ export function ContractCard(props: {
|
|||
</div>
|
||||
<AvatarDetails contract={contract} />
|
||||
<p
|
||||
className="break-words font-medium text-indigo-700 peer-hover:underline peer-hover:decoration-indigo-400 peer-hover:decoration-2"
|
||||
className="break-words font-semibold text-indigo-700 peer-hover:underline peer-hover:decoration-indigo-400 peer-hover:decoration-2"
|
||||
style={{ /* For iOS safari */ wordBreak: 'break-word' }}
|
||||
>
|
||||
{question}
|
||||
</p>
|
||||
|
||||
{outcomeType === 'FREE_RESPONSE' && (
|
||||
<FreeResponseTopAnswer
|
||||
contract={contract as FullContract<DPM, FreeResponse>}
|
||||
truncate="long"
|
||||
/>
|
||||
)}
|
||||
{outcomeType === 'FREE_RESPONSE' &&
|
||||
(resolution ? (
|
||||
<FreeResponseOutcomeLabel
|
||||
contract={contract as FreeResponseContract}
|
||||
resolution={resolution}
|
||||
truncate={'long'}
|
||||
/>
|
||||
) : (
|
||||
<FreeResponseTopAnswer
|
||||
contract={contract as FullContract<DPM, FreeResponse>}
|
||||
truncate="long"
|
||||
/>
|
||||
))}
|
||||
|
||||
<MiscDetails
|
||||
contract={contract}
|
||||
|
|
@ -92,11 +98,31 @@ export function ContractCard(props: {
|
|||
<QuickBet contract={contract} />
|
||||
) : (
|
||||
<Col className="m-auto pl-2">
|
||||
<QuickOutcomeView contract={contract} />
|
||||
{outcomeType === 'BINARY' && (
|
||||
<BinaryResolutionOrChance
|
||||
className="items-center"
|
||||
contract={contract}
|
||||
/>
|
||||
)}
|
||||
|
||||
{outcomeType === 'NUMERIC' && (
|
||||
<NumericResolutionOrExpectation
|
||||
className="items-center"
|
||||
contract={contract as NumericContract}
|
||||
/>
|
||||
)}
|
||||
|
||||
{outcomeType === 'FREE_RESPONSE' && (
|
||||
<FreeResponseResolutionOrChance
|
||||
className="self-end text-gray-600"
|
||||
contract={contract as FullContract<DPM, FreeResponse>}
|
||||
truncate="long"
|
||||
/>
|
||||
)}
|
||||
<ProbBar contract={contract} />
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
<ProbBar contract={contract} />
|
||||
</Col>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -106,9 +132,8 @@ export function BinaryResolutionOrChance(props: {
|
|||
contract: FullContract<DPM | CPMM, Binary>
|
||||
large?: boolean
|
||||
className?: string
|
||||
hideText?: boolean
|
||||
}) {
|
||||
const { contract, large, className, hideText } = props
|
||||
const { contract, large, className } = props
|
||||
const { resolution } = contract
|
||||
const textColor = `text-${getColor(contract)}`
|
||||
|
||||
|
|
@ -129,11 +154,9 @@ export function BinaryResolutionOrChance(props: {
|
|||
) : (
|
||||
<>
|
||||
<div className={textColor}>{getBinaryProbPercent(contract)}</div>
|
||||
{!hideText && (
|
||||
<div className={clsx(textColor, large ? 'text-xl' : 'text-base')}>
|
||||
chance
|
||||
</div>
|
||||
)}
|
||||
<div className={clsx(textColor, large ? 'text-xl' : 'text-base')}>
|
||||
chance
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Col>
|
||||
|
|
@ -162,9 +185,8 @@ export function FreeResponseResolutionOrChance(props: {
|
|||
contract: FreeResponseContract
|
||||
truncate: 'short' | 'long' | 'none'
|
||||
className?: string
|
||||
hideText?: boolean
|
||||
}) {
|
||||
const { contract, truncate, className, hideText } = props
|
||||
const { contract, truncate, className } = props
|
||||
const { resolution } = contract
|
||||
|
||||
const topAnswer = getTopAnswer(contract)
|
||||
|
|
@ -174,13 +196,17 @@ export function FreeResponseResolutionOrChance(props: {
|
|||
<Col className={clsx(resolution ? 'text-3xl' : 'text-xl', className)}>
|
||||
{resolution ? (
|
||||
<>
|
||||
<div className={clsx('text-base text-gray-500')}>Resolved</div>
|
||||
<FreeResponseOutcomeLabel
|
||||
contract={contract}
|
||||
resolution={resolution}
|
||||
truncate={truncate}
|
||||
answerClassName="text-xl"
|
||||
/>
|
||||
<div className={clsx('text-base text-gray-500 sm:hidden')}>
|
||||
Resolved
|
||||
</div>
|
||||
{(resolution === 'CANCEL' || resolution === 'MKT') && (
|
||||
<FreeResponseOutcomeLabel
|
||||
contract={contract}
|
||||
resolution={resolution}
|
||||
truncate={truncate}
|
||||
answerClassName="text-3xl uppercase text-blue-500"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
topAnswer && (
|
||||
|
|
@ -189,7 +215,7 @@ export function FreeResponseResolutionOrChance(props: {
|
|||
<div>
|
||||
{formatPercent(getOutcomeProbability(contract, topAnswer.id))}
|
||||
</div>
|
||||
{!hideText && <div className="text-base">chance</div>}
|
||||
<div className="text-base">chance</div>
|
||||
</Col>
|
||||
</Row>
|
||||
)
|
||||
|
|
@ -201,9 +227,8 @@ export function FreeResponseResolutionOrChance(props: {
|
|||
export function NumericResolutionOrExpectation(props: {
|
||||
contract: NumericContract
|
||||
className?: string
|
||||
hideText?: boolean
|
||||
}) {
|
||||
const { contract, className, hideText } = props
|
||||
const { contract, className } = props
|
||||
const { resolution } = contract
|
||||
const textColor = `text-${getColor(contract)}`
|
||||
|
||||
|
|
@ -222,9 +247,7 @@ export function NumericResolutionOrExpectation(props: {
|
|||
<div className={clsx('text-3xl', textColor)}>
|
||||
{formatLargeNumber(getExpectedValue(contract))}
|
||||
</div>
|
||||
{!hideText && (
|
||||
<div className={clsx('text-base', textColor)}>expected</div>
|
||||
)}
|
||||
<div className={clsx('text-base', textColor)}>expected</div>
|
||||
</>
|
||||
)}
|
||||
</Col>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import { UserLink } from '../user-page'
|
|||
import {
|
||||
Contract,
|
||||
contractMetrics,
|
||||
contractPool,
|
||||
updateContract,
|
||||
} from 'web/lib/firebase/contracts'
|
||||
import { Col } from '../layout/col'
|
||||
|
|
@ -43,10 +44,6 @@ export function MiscDetails(props: {
|
|||
|
||||
return (
|
||||
<Row className="items-center gap-3 text-sm text-gray-400">
|
||||
{categories.length > 0 && (
|
||||
<TagsList className="text-gray-400" tags={categories} noLabel />
|
||||
)}
|
||||
|
||||
{showHotVolume ? (
|
||||
<Row className="gap-0.5">
|
||||
<TrendingUpIcon className="h-5 w-5" /> {formatMoney(volume24Hours)}
|
||||
|
|
@ -58,10 +55,14 @@ export function MiscDetails(props: {
|
|||
{fromNow(closeTime || 0)}
|
||||
</Row>
|
||||
) : volume > 0 ? (
|
||||
<Row>{volumeLabel}</Row>
|
||||
<Row>{contractPool(contract)} pool</Row>
|
||||
) : (
|
||||
<NewContractBadge />
|
||||
)}
|
||||
|
||||
{categories.length > 0 && (
|
||||
<TagsList className="text-gray-400" tags={categories} noLabel />
|
||||
)}
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
|
|
@ -71,7 +72,7 @@ export function AvatarDetails(props: { contract: Contract }) {
|
|||
const { creatorName, creatorUsername } = contract
|
||||
|
||||
return (
|
||||
<Row className="items-center gap-2 text-sm text-gray-500">
|
||||
<Row className="items-center gap-2 text-sm text-gray-400">
|
||||
<Avatar
|
||||
username={creatorUsername}
|
||||
avatarUrl={contract.creatorAvatarUrl}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,12 @@ import { Bet } from 'common/bet'
|
|||
|
||||
import { Contract } from 'common/contract'
|
||||
import { formatMoney } from 'common/util/format'
|
||||
import { contractPath, getBinaryProbPercent } from 'web/lib/firebase/contracts'
|
||||
import {
|
||||
contractMetrics,
|
||||
contractPath,
|
||||
contractPool,
|
||||
getBinaryProbPercent,
|
||||
} from 'web/lib/firebase/contracts'
|
||||
import { AddLiquidityPanel } from '../add-liquidity-panel'
|
||||
import { CopyLinkButton } from '../copy-link-button'
|
||||
import { Col } from '../layout/col'
|
||||
|
|
@ -98,19 +103,10 @@ export function ContractInfoDialog(props: { contract: Contract; bets: Bet[] }) {
|
|||
<td>{tradersCount}</td>
|
||||
</tr>
|
||||
|
||||
{contract.mechanism === 'cpmm-1' && (
|
||||
<tr>
|
||||
<td>Liquidity</td>
|
||||
<td>{formatMoney(contract.totalLiquidity)}</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{contract.mechanism === 'dpm-2' && (
|
||||
<tr>
|
||||
<td>Pool</td>
|
||||
<td>{formatMoney(sum(Object.values(contract.pool)))}</td>
|
||||
</tr>
|
||||
)}
|
||||
<tr>
|
||||
<td>Pool</td>
|
||||
<td>{contractPool(contract)}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
import clsx from 'clsx'
|
||||
import { getOutcomeProbability, getTopAnswer } from 'common/calculate'
|
||||
import {
|
||||
getOutcomeProbability,
|
||||
getOutcomeProbabilityAfterBet,
|
||||
getTopAnswer,
|
||||
} from 'common/calculate'
|
||||
import { getExpectedValue } from 'common/calculate-dpm'
|
||||
import {
|
||||
Contract,
|
||||
|
|
@ -8,55 +12,81 @@ import {
|
|||
DPM,
|
||||
Binary,
|
||||
NumericContract,
|
||||
FreeResponse,
|
||||
FreeResponseContract,
|
||||
} from 'common/contract'
|
||||
import { formatMoney } from 'common/util/format'
|
||||
import {
|
||||
formatLargeNumber,
|
||||
formatMoney,
|
||||
formatPercent,
|
||||
} from 'common/util/format'
|
||||
import { useState } from 'react'
|
||||
import toast from 'react-hot-toast'
|
||||
import { useUser } from 'web/hooks/use-user'
|
||||
import { useUserContractBets } from 'web/hooks/use-user-bets'
|
||||
import { placeBet } from 'web/lib/firebase/api-call'
|
||||
import { getBinaryProb } from 'web/lib/firebase/contracts'
|
||||
import { getBinaryProb, getBinaryProbPercent } from 'web/lib/firebase/contracts'
|
||||
import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon'
|
||||
import TriangleFillIcon from 'web/lib/icons/triangle-fill-icon'
|
||||
import { Col } from '../layout/col'
|
||||
import { OUTCOME_TO_COLOR } from '../outcome-label'
|
||||
import { useSaveShares } from '../use-save-shares'
|
||||
import {
|
||||
BinaryResolutionOrChance,
|
||||
NumericResolutionOrExpectation,
|
||||
FreeResponseResolutionOrChance,
|
||||
} from './contract-card'
|
||||
|
||||
const BET_SIZE = 10
|
||||
|
||||
export function QuickBet(props: { contract: Contract }) {
|
||||
const { contract } = props
|
||||
|
||||
const user = useUser()
|
||||
const userBets = useUserContractBets(user?.id, contract.id)
|
||||
const { yesFloorShares, noFloorShares, yesShares, noShares } = useSaveShares(
|
||||
const { yesFloorShares, noFloorShares } = useSaveShares(
|
||||
contract as FullContract<CPMM | DPM, Binary>,
|
||||
userBets
|
||||
)
|
||||
// TODO: For some reason, Floor Shares are inverted for non-BINARY markets
|
||||
// TODO: This relies on a hack in useSaveShares, where noFloorShares includes
|
||||
// all non-YES shares. Ideally, useSaveShares should group by all outcomes
|
||||
const hasUpShares =
|
||||
contract.outcomeType === 'BINARY' ? yesFloorShares : noFloorShares
|
||||
const hasDownShares =
|
||||
contract.outcomeType === 'BINARY' ? noFloorShares : yesFloorShares
|
||||
|
||||
const color = getColor(contract)
|
||||
const [upHover, setUpHover] = useState(false)
|
||||
const [downHover, setDownHover] = useState(false)
|
||||
|
||||
let previewProb = undefined
|
||||
try {
|
||||
previewProb = upHover
|
||||
? getOutcomeProbabilityAfterBet(
|
||||
contract,
|
||||
quickOutcome(contract, 'UP') || '',
|
||||
BET_SIZE
|
||||
)
|
||||
: downHover
|
||||
? 1 -
|
||||
getOutcomeProbabilityAfterBet(
|
||||
contract,
|
||||
quickOutcome(contract, 'DOWN') || '',
|
||||
BET_SIZE
|
||||
)
|
||||
: undefined
|
||||
} catch (e) {
|
||||
// Catch any errors from hovering on an invalid option
|
||||
}
|
||||
|
||||
const color = getColor(contract, previewProb)
|
||||
|
||||
async function placeQuickBet(direction: 'UP' | 'DOWN') {
|
||||
const betPromise = async () => {
|
||||
const outcome = quickOutcome(contract, direction)
|
||||
return await placeBet({
|
||||
amount: 10,
|
||||
amount: BET_SIZE,
|
||||
outcome,
|
||||
contractId: contract.id,
|
||||
})
|
||||
}
|
||||
const shortQ = contract.question.slice(0, 20)
|
||||
toast.promise(betPromise(), {
|
||||
loading: `${formatMoney(10)} on "${shortQ}"...`,
|
||||
success: `${formatMoney(10)} on "${shortQ}"...`,
|
||||
loading: `${formatMoney(BET_SIZE)} on "${shortQ}"...`,
|
||||
success: `${formatMoney(BET_SIZE)} on "${shortQ}"...`,
|
||||
error: (err) => `${err.message}`,
|
||||
})
|
||||
}
|
||||
|
|
@ -68,7 +98,7 @@ export function QuickBet(props: { contract: Contract }) {
|
|||
if (contract.outcomeType === 'FREE_RESPONSE') {
|
||||
// TODO: Implement shorting of free response answers
|
||||
if (direction === 'DOWN') {
|
||||
throw new Error("Can't short free response answers")
|
||||
throw new Error("Can't bet against free response answers")
|
||||
}
|
||||
return getTopAnswer(contract)?.id
|
||||
}
|
||||
|
|
@ -81,18 +111,19 @@ export function QuickBet(props: { contract: Contract }) {
|
|||
return (
|
||||
<Col
|
||||
className={clsx(
|
||||
'relative -my-4 -mr-5 min-w-[6rem] justify-center gap-2 pr-5 pl-3 align-middle',
|
||||
'relative -my-4 -mr-5 min-w-[5.5rem] justify-center gap-2 pr-5 pl-1 align-middle'
|
||||
// Use this for colored QuickBet panes
|
||||
// `bg-opacity-10 bg-${color}`
|
||||
'bg-gray-50'
|
||||
)}
|
||||
>
|
||||
{/* Up bet triangle */}
|
||||
<div>
|
||||
<div
|
||||
className="peer absolute top-0 left-0 right-0 h-[50%]"
|
||||
onMouseEnter={() => setUpHover(true)}
|
||||
onMouseLeave={() => setUpHover(false)}
|
||||
onClick={() => placeQuickBet('UP')}
|
||||
></div>
|
||||
/>
|
||||
<div className="mt-2 text-center text-xs text-transparent peer-hover:text-gray-400">
|
||||
{formatMoney(10)}
|
||||
</div>
|
||||
|
|
@ -101,31 +132,43 @@ export function QuickBet(props: { contract: Contract }) {
|
|||
<TriangleFillIcon
|
||||
className={clsx(
|
||||
'mx-auto h-5 w-5',
|
||||
`text-${color} text-opacity-70 peer-hover:text-gray-400`
|
||||
upHover ? `text-${color}` : 'text-gray-400'
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<TriangleFillIcon className="mx-auto h-5 w-5 text-gray-200 peer-hover:text-gray-400" />
|
||||
<TriangleFillIcon
|
||||
className={clsx(
|
||||
'mx-auto h-5 w-5',
|
||||
upHover ? `text-${color}` : 'text-gray-200'
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<QuickOutcomeView contract={contract} />
|
||||
<QuickOutcomeView contract={contract} previewProb={previewProb} />
|
||||
|
||||
{/* Down bet triangle */}
|
||||
<div>
|
||||
<div
|
||||
className="peer absolute bottom-0 left-0 right-0 h-[50%]"
|
||||
onMouseEnter={() => setDownHover(true)}
|
||||
onMouseLeave={() => setDownHover(false)}
|
||||
onClick={() => placeQuickBet('DOWN')}
|
||||
></div>
|
||||
{hasDownShares > 0 ? (
|
||||
<TriangleDownFillIcon
|
||||
className={clsx(
|
||||
'mx-auto h-5 w-5',
|
||||
`text-${color} text-opacity-70 peer-hover:text-gray-400`
|
||||
downHover ? `text-${color}` : 'text-gray-400'
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<TriangleDownFillIcon className="mx-auto h-5 w-5 text-gray-200 peer-hover:text-gray-400" />
|
||||
<TriangleDownFillIcon
|
||||
className={clsx(
|
||||
'mx-auto h-5 w-5',
|
||||
downHover ? `text-${color}` : 'text-gray-200'
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<div className="mb-2 text-center text-xs text-transparent peer-hover:text-gray-400">
|
||||
{formatMoney(10)}
|
||||
|
|
@ -135,10 +178,10 @@ export function QuickBet(props: { contract: Contract }) {
|
|||
)
|
||||
}
|
||||
|
||||
export function ProbBar(props: { contract: Contract }) {
|
||||
const { contract } = props
|
||||
const color = getColor(contract)
|
||||
const prob = getProb(contract)
|
||||
export function ProbBar(props: { contract: Contract; previewProb?: number }) {
|
||||
const { contract, previewProb } = props
|
||||
const color = getColor(contract, previewProb)
|
||||
const prob = previewProb ?? getProb(contract)
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
|
|
@ -147,7 +190,7 @@ export function ProbBar(props: { contract: Contract }) {
|
|||
'bg-gray-200'
|
||||
)}
|
||||
style={{ height: `${100 * (1 - prob)}%` }}
|
||||
></div>
|
||||
/>
|
||||
<div
|
||||
className={clsx(
|
||||
'absolute right-0 bottom-0 w-2 rounded-br-md transition-all',
|
||||
|
|
@ -156,41 +199,45 @@ export function ProbBar(props: { contract: Contract }) {
|
|||
prob === 1 ? 'rounded-tr-md' : ''
|
||||
)}
|
||||
style={{ height: `${100 * prob}%` }}
|
||||
></div>
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export function QuickOutcomeView(props: { contract: Contract }) {
|
||||
const { contract } = props
|
||||
function QuickOutcomeView(props: {
|
||||
contract: Contract
|
||||
previewProb?: number
|
||||
caption?: 'chance' | 'expected'
|
||||
}) {
|
||||
const { contract, previewProb, caption } = props
|
||||
const { outcomeType } = contract
|
||||
// If there's a preview prob, display that instead of the current prob
|
||||
const override =
|
||||
previewProb === undefined ? undefined : formatPercent(previewProb)
|
||||
const textColor = `text-${getColor(contract, previewProb)}`
|
||||
|
||||
let display: string | undefined
|
||||
switch (outcomeType) {
|
||||
case 'BINARY':
|
||||
display = getBinaryProbPercent(contract)
|
||||
break
|
||||
case 'NUMERIC':
|
||||
display = formatLargeNumber(getExpectedValue(contract as NumericContract))
|
||||
break
|
||||
case 'FREE_RESPONSE':
|
||||
const topAnswer = getTopAnswer(contract as FreeResponseContract)
|
||||
display =
|
||||
topAnswer &&
|
||||
formatPercent(getOutcomeProbability(contract, topAnswer.id))
|
||||
break
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{outcomeType === 'BINARY' && (
|
||||
<BinaryResolutionOrChance
|
||||
className="items-center"
|
||||
contract={contract}
|
||||
hideText
|
||||
/>
|
||||
)}
|
||||
|
||||
{outcomeType === 'NUMERIC' && (
|
||||
<NumericResolutionOrExpectation
|
||||
className="items-center"
|
||||
contract={contract as NumericContract}
|
||||
hideText
|
||||
/>
|
||||
)}
|
||||
|
||||
{outcomeType === 'FREE_RESPONSE' && (
|
||||
<FreeResponseResolutionOrChance
|
||||
className="self-end text-gray-600"
|
||||
contract={contract as FullContract<DPM, FreeResponse>}
|
||||
truncate="long"
|
||||
hideText
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
<Col className={clsx('items-center text-3xl', textColor)}>
|
||||
{override ?? display}
|
||||
{caption && <div className="text-base">{caption}</div>}
|
||||
<ProbBar contract={contract} previewProb={previewProb} />
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -215,15 +262,14 @@ function getNumericScale(contract: NumericContract) {
|
|||
return (ev - min) / (max - min)
|
||||
}
|
||||
|
||||
export function getColor(contract: Contract) {
|
||||
export function getColor(contract: Contract, previewProb?: number) {
|
||||
// TODO: Not sure why eg green-400 doesn't work here; try upgrading Tailwind
|
||||
// TODO: Try injecting a gradient here
|
||||
// return 'primary'
|
||||
const { resolution } = contract
|
||||
if (resolution) {
|
||||
return (
|
||||
// @ts-ignore; TODO: Have better typing for contract.resolution?
|
||||
OUTCOME_TO_COLOR[resolution] ||
|
||||
OUTCOME_TO_COLOR[resolution as 'YES' | 'NO' | 'CANCEL' | 'MKT'] ??
|
||||
// If resolved to a FR answer, use 'primary'
|
||||
'primary'
|
||||
)
|
||||
|
|
@ -233,9 +279,6 @@ export function getColor(contract: Contract) {
|
|||
}
|
||||
|
||||
const marketClosed = (contract.closeTime || Infinity) < Date.now()
|
||||
return marketClosed
|
||||
? 'gray-400'
|
||||
: getProb(contract) >= 0.5
|
||||
? 'primary'
|
||||
: 'red-400'
|
||||
const prob = previewProb ?? getProb(contract)
|
||||
return marketClosed ? 'gray-400' : prob >= 0.5 ? 'primary' : 'red-400'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,12 +12,13 @@ import { formatPercent, formatMoney } from 'common/util/format'
|
|||
|
||||
import { useUser } from '../hooks/use-user'
|
||||
import { APIError, placeBet } from '../lib/firebase/api-call'
|
||||
import { firebaseLogin, User } from '../lib/firebase/users'
|
||||
import { User } from '../lib/firebase/users'
|
||||
import { BuyAmountInput } from './amount-input'
|
||||
import { BucketInput } from './bucket-input'
|
||||
import { Col } from './layout/col'
|
||||
import { Row } from './layout/row'
|
||||
import { Spacer } from './layout/spacer'
|
||||
import { SignUpPrompt } from './sign-up-prompt'
|
||||
|
||||
export function NumericBetPanel(props: {
|
||||
contract: NumericContract
|
||||
|
|
@ -32,14 +33,7 @@ export function NumericBetPanel(props: {
|
|||
|
||||
<NumericBuyPanel contract={contract} user={user} />
|
||||
|
||||
{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 up to trade!
|
||||
</button>
|
||||
)}
|
||||
<SignUpPrompt />
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
16
web/components/sign-up-prompt.tsx
Normal file
16
web/components/sign-up-prompt.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import React from 'react'
|
||||
import { useUser } from 'web/hooks/use-user'
|
||||
import { firebaseLogin } from 'web/lib/firebase/users'
|
||||
|
||||
export function SignUpPrompt() {
|
||||
const user = useUser()
|
||||
|
||||
return 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 up to bet!
|
||||
</button>
|
||||
) : null
|
||||
}
|
||||
|
|
@ -13,7 +13,7 @@ import {
|
|||
updateDoc,
|
||||
limit,
|
||||
} from 'firebase/firestore'
|
||||
import { range, sortBy } from 'lodash'
|
||||
import { range, sortBy, sum } from 'lodash'
|
||||
|
||||
import { app } from './init'
|
||||
import { getValues, listenForValue, listenForValues } from './utils'
|
||||
|
|
@ -56,6 +56,14 @@ export function contractMetrics(contract: Contract) {
|
|||
return { volumeLabel, createdDate, automaticResolutionDate, resolvedDate }
|
||||
}
|
||||
|
||||
export function contractPool(contract: Contract) {
|
||||
return contract.mechanism === 'cpmm-1'
|
||||
? formatMoney(contract.totalLiquidity)
|
||||
: contract.mechanism === 'dpm-2'
|
||||
? formatMoney(sum(Object.values(contract.pool)))
|
||||
: 'Empty pool'
|
||||
}
|
||||
|
||||
export function getBinaryProb(contract: FullContract<any, Binary>) {
|
||||
const { totalShares, pool, p, resolutionProbability, mechanism } = contract
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export default function TriangleDownFillIcon(props: { className?: string }) {
|
|||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
fillRule="evenodd"
|
||||
transform="rotate(-180 8 8)"
|
||||
d="M7.022 1.566a1.13 1.13 0 0 1 1.96 0l6.857 11.667c.457.778-.092 1.767-.98 1.767H1.144c-.889 0-1.437-.99-.98-1.767L7.022 1.566z"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export default function TriangleFillIcon(props: { className?: string }) {
|
|||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
fillRule="evenodd"
|
||||
d="M7.022 1.566a1.13 1.13 0 0 1 1.96 0l6.857 11.667c.457.778-.092 1.767-.98 1.767H1.144c-.889 0-1.437-.99-.98-1.767L7.022 1.566z"
|
||||
/>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ export type LiteMarket = {
|
|||
description: string
|
||||
tags: string[]
|
||||
url: string
|
||||
outcomeType: string
|
||||
mechanism: string
|
||||
|
||||
pool: number
|
||||
|
|
@ -57,6 +58,7 @@ export function toLiteMarket(contract: Contract): LiteMarket {
|
|||
tags,
|
||||
slug,
|
||||
pool,
|
||||
outcomeType,
|
||||
mechanism,
|
||||
volume7Days,
|
||||
volume24Hours,
|
||||
|
|
@ -88,6 +90,7 @@ export function toLiteMarket(contract: Contract): LiteMarket {
|
|||
probability,
|
||||
p,
|
||||
totalLiquidity,
|
||||
outcomeType,
|
||||
mechanism,
|
||||
volume7Days,
|
||||
volume24Hours,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user