Show the value to 2 decimal places on hover

This commit is contained in:
Austin Chen 2022-08-02 14:59:47 -07:00
parent b83caf4dd9
commit 53d89fa4ac

View File

@ -30,7 +30,7 @@ import { useContractWithPreload } from 'web/hooks/use-contract'
import { useUser } from 'web/hooks/use-user' import { useUser } from 'web/hooks/use-user'
import { track } from '@amplitude/analytics-browser' import { track } from '@amplitude/analytics-browser'
import { trackCallback } from 'web/lib/service/analytics' import { trackCallback } from 'web/lib/service/analytics'
import { formatNumericProbability } from 'common/pseudo-numeric' import { formatNumericProbability, getMappedValue } from 'common/pseudo-numeric'
export function ContractCard(props: { export function ContractCard(props: {
contract: Contract contract: Contract
@ -317,6 +317,12 @@ export function PseudoNumericResolutionOrExpectation(props: {
const { resolution, resolutionValue, resolutionProbability } = contract const { resolution, resolutionValue, resolutionProbability } = contract
const textColor = `text-blue-400` const textColor = `text-blue-400`
const value = resolution
? resolutionValue
? resolutionValue
: getMappedValue(contract)(resolutionProbability ?? 0)
: getMappedValue(contract)(getProbability(contract))
return ( return (
<Col className={clsx(resolution ? 'text-3xl' : 'text-xl', className)}> <Col className={clsx(resolution ? 'text-3xl' : 'text-xl', className)}>
{resolution ? ( {resolution ? (
@ -326,20 +332,21 @@ export function PseudoNumericResolutionOrExpectation(props: {
{resolution === 'CANCEL' ? ( {resolution === 'CANCEL' ? (
<CancelLabel /> <CancelLabel />
) : ( ) : (
<div className="text-blue-400"> <div
{resolutionValue className={clsx('tooltip', textColor)}
? formatLargeNumber(resolutionValue) data-tip={value.toFixed(2)}
: formatNumericProbability( >
resolutionProbability ?? 0, {formatLargeNumber(value)}
contract
)}
</div> </div>
)} )}
</> </>
) : ( ) : (
<> <>
<div className={clsx('text-3xl', textColor)}> <div
{formatNumericProbability(getProbability(contract), contract)} className={clsx('tooltip text-3xl', textColor)}
data-tip={value.toFixed(2)}
>
{formatLargeNumber(value)}
</div> </div>
<div className={clsx('text-base', textColor)}>expected</div> <div className={clsx('text-base', textColor)}>expected</div>
</> </>