From 8e746ce0cb71205ffbc2cce83d694e72db5381cf Mon Sep 17 00:00:00 2001 From: Austin Chen Date: Tue, 24 May 2022 08:40:43 -0700 Subject: [PATCH] Pull out quick bet display component --- web/components/contract/contract-card.tsx | 58 +++++++++------- web/components/contract/quick-bet.tsx | 82 +++++++++++------------ 2 files changed, 72 insertions(+), 68 deletions(-) diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx index 4881709f..da1b6ac8 100644 --- a/web/components/contract/contract-card.tsx +++ b/web/components/contract/contract-card.tsx @@ -25,7 +25,7 @@ import { import { getOutcomeProbability, getTopAnswer } from 'common/calculate' import { AvatarDetails, MiscDetails } from './contract-details' import { getExpectedValue, getValueFromBucket } from 'common/calculate-dpm' -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: { @@ -90,7 +90,28 @@ export function ContractCard(props: { ) : ( - + {outcomeType === 'BINARY' && ( + + )} + + {outcomeType === 'NUMERIC' && ( + + )} + + {outcomeType === 'FREE_RESPONSE' && ( + } + truncate="long" + /> + )} + )} @@ -103,10 +124,8 @@ export function BinaryResolutionOrChance(props: { contract: FullContract large?: boolean className?: string - hideText?: boolean - override?: string }) { - const { contract, large, className, hideText, override } = props + const { contract, large, className } = props const { resolution } = contract const textColor = `text-${getColor(contract)}` @@ -127,13 +146,11 @@ export function BinaryResolutionOrChance(props: { ) : ( <>
- {override ?? getBinaryProbPercent(contract)} + {getBinaryProbPercent(contract)} +
+
+ chance
- {!hideText && ( -
- chance -
- )} )} @@ -162,10 +179,8 @@ export function FreeResponseResolutionOrChance(props: { contract: FreeResponseContract truncate: 'short' | 'long' | 'none' className?: string - hideText?: boolean - override?: string }) { - const { contract, truncate, className, hideText, override } = props + const { contract, truncate, className } = props const { resolution } = contract const topAnswer = getTopAnswer(contract) @@ -188,10 +203,9 @@ export function FreeResponseResolutionOrChance(props: {
- {override ?? - formatPercent(getOutcomeProbability(contract, topAnswer.id))} + {formatPercent(getOutcomeProbability(contract, topAnswer.id))}
- {!hideText &&
chance
} +
chance
 ) @@ -203,10 +217,8 @@ export function FreeResponseResolutionOrChance(props: { export function NumericResolutionOrExpectation(props: { contract: NumericContract className?: string - hideText?: boolean - override?: string }) { - const { contract, className, hideText, override } = props + const { contract, className } = props const { resolution } = contract const textColor = `text-${getColor(contract)}` @@ -223,11 +235,9 @@ export function NumericResolutionOrExpectation(props: { ) : ( <>
- {override ?? formatLargeNumber(getExpectedValue(contract))} + {formatLargeNumber(getExpectedValue(contract))}
- {!hideText && ( -
expected
- )} +
expected
)} diff --git a/web/components/contract/quick-bet.tsx b/web/components/contract/quick-bet.tsx index 013c94ea..b514f980 100644 --- a/web/components/contract/quick-bet.tsx +++ b/web/components/contract/quick-bet.tsx @@ -13,14 +13,19 @@ import { Binary, NumericContract, FreeResponse, + FreeResponseContract, } from 'common/contract' -import { formatMoney, formatPercent } 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' @@ -71,7 +76,7 @@ export function QuickBet(props: { contract: Contract }) { // Catch any errors from hovering on an invalid option } - const color = getColor(contract) + const color = getColor(contract, previewProb) async function placeQuickBet(direction: 'UP' | 'DOWN') { const betPromise = async () => { @@ -170,8 +175,7 @@ export function QuickBet(props: { contract: Contract }) { export function ProbBar(props: { contract: Contract; previewProb?: number }) { const { contract, previewProb } = props - // TODO: Switch preview color as it changes from green to red - const color = getColor(contract) + const color = getColor(contract, previewProb) const prob = previewProb ?? getProb(contract) return ( <> @@ -195,47 +199,40 @@ export function ProbBar(props: { contract: Contract; previewProb?: number }) { ) } -// TODO: just directly code in the outcomes for quick bet, rather than relying on -// code resuse. Too many differences anyways -export function QuickOutcomeView(props: { +function QuickOutcomeView(props: { contract: Contract previewProb?: number + caption?: 'chance' | 'expected' }) { - const { contract, previewProb } = props + const { contract, previewProb, caption } = props const { outcomeType } = contract + // If there's a preview probability, 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' && ( - - )} - - {outcomeType === 'NUMERIC' && ( - - )} - - {outcomeType === 'FREE_RESPONSE' && ( - } - truncate="long" - hideText - override={override} - /> - )} + + {override ?? display} + {caption &&
{caption}
} - + ) } @@ -260,7 +257,7 @@ 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' @@ -278,9 +275,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' }