Add large percent chance indicator. Use primary color instead of green. Round current probability.
This commit is contained in:
parent
7ef00d085f
commit
45640feb81
|
@ -97,11 +97,11 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
|
||||||
<div className="p-2 font-medium">Implied probability</div>
|
<div className="p-2 font-medium">Implied probability</div>
|
||||||
<Row>
|
<Row>
|
||||||
<div className="px-2 font-sans">
|
<div className="px-2 font-sans">
|
||||||
{Math.floor(initialProb * 1000) / 10 + '%'}
|
{Math.round(initialProb * 100) + '%'}
|
||||||
</div>
|
</div>
|
||||||
<div>→</div>
|
<div>→</div>
|
||||||
<div className="px-2 font-sans">
|
<div className="px-2 font-sans">
|
||||||
{Math.floor(resultProb * 1000) / 10 + '%'}
|
{Math.round(resultProb * 100) + '%'}
|
||||||
</div>
|
</div>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
|
@ -120,7 +120,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
|
||||||
betDisabled
|
betDisabled
|
||||||
? 'btn-disabled'
|
? 'btn-disabled'
|
||||||
: betChoice === 'YES'
|
: betChoice === 'YES'
|
||||||
? 'bg-green-500 hover:bg-green-600 focus:ring-green-500'
|
? 'btn-primary'
|
||||||
: 'bg-red-400 hover:bg-red-500 focus:ring-red-400'
|
: 'bg-red-400 hover:bg-red-500 focus:ring-red-400'
|
||||||
)}
|
)}
|
||||||
onClick={betDisabled ? undefined : submitBet}
|
onClick={betDisabled ? undefined : submitBet}
|
||||||
|
|
|
@ -14,13 +14,19 @@ export const ContractOverview = (props: {
|
||||||
const { pot, seedAmounts } = contract
|
const { pot, seedAmounts } = contract
|
||||||
|
|
||||||
const volume = pot.YES + pot.NO - seedAmounts.YES - seedAmounts.NO
|
const volume = pot.YES + pot.NO - seedAmounts.YES - seedAmounts.NO
|
||||||
|
const prob = pot.YES ** 2 / (pot.YES ** 2 + pot.NO ** 2)
|
||||||
|
const probPercent = Math.round(prob * 100) + '%'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Col className={className}>
|
<Col className={className}>
|
||||||
|
<Row className="justify-between">
|
||||||
|
<Col>
|
||||||
<div className="text-3xl font-medium p-2">{contract.question}</div>
|
<div className="text-3xl font-medium p-2">{contract.question}</div>
|
||||||
|
|
||||||
<Row className="flex-wrap text-sm text-gray-600">
|
<Row className="flex-wrap text-sm text-gray-600">
|
||||||
<div className="p-2 whitespace-nowrap">By {contract.creatorName}</div>
|
<div className="p-2 whitespace-nowrap">
|
||||||
|
By {contract.creatorName}
|
||||||
|
</div>
|
||||||
<div className="py-2">•</div>
|
<div className="py-2">•</div>
|
||||||
<div className="p-2 whitespace-nowrap">Dec 9</div>
|
<div className="p-2 whitespace-nowrap">Dec 9</div>
|
||||||
<div className="py-2">•</div>
|
<div className="py-2">•</div>
|
||||||
|
@ -28,6 +34,13 @@ export const ContractOverview = (props: {
|
||||||
{formatWithCommas(volume)} volume
|
{formatWithCommas(volume)} volume
|
||||||
</div>
|
</div>
|
||||||
</Row>
|
</Row>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col className="text-4xl p-2 ml-2 text-primary items-end">
|
||||||
|
{probPercent}
|
||||||
|
<div className="text-xl">chance</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
<Spacer h={4} />
|
<Spacer h={4} />
|
||||||
|
|
||||||
|
|
|
@ -43,7 +43,7 @@ export function ContractProbGraph(props: { contract: Contract }) {
|
||||||
{
|
{
|
||||||
label: 'Implied probability',
|
label: 'Implied probability',
|
||||||
data: probs,
|
data: probs,
|
||||||
borderColor: 'rgb(75, 192, 192)',
|
borderColor: '#11b981',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
|
|
|
@ -48,7 +48,7 @@ function Button(props: {
|
||||||
'inline-flex items-center px-8 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white',
|
'inline-flex items-center px-8 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white',
|
||||||
!hideFocusRing && 'focus:outline-none focus:ring-2 focus:ring-offset-2',
|
!hideFocusRing && 'focus:outline-none focus:ring-2 focus:ring-offset-2',
|
||||||
color === 'green' &&
|
color === 'green' &&
|
||||||
'bg-green-500 hover:bg-green-600 focus:ring-green-500',
|
'btn-primary',
|
||||||
color === 'red' && 'bg-red-400 hover:bg-red-500 focus:ring-red-400',
|
color === 'red' && 'bg-red-400 hover:bg-red-500 focus:ring-red-400',
|
||||||
color === 'deemphasized' &&
|
color === 'deemphasized' &&
|
||||||
'text-gray-700 bg-gray-200 hover:bg-gray-300 focus:ring-gray-300',
|
'text-gray-700 bg-gray-200 hover:bg-gray-300 focus:ring-gray-300',
|
||||||
|
|
Loading…
Reference in New Issue
Block a user