Clean up Resolve Market panel

This commit is contained in:
Austin Chen 2022-02-13 15:41:08 -08:00
parent e2de257372
commit 5c3370ded8
2 changed files with 50 additions and 56 deletions

View File

@ -64,9 +64,9 @@ export function ResolutionPanel(props: {
return ( return (
<Col className={clsx('rounded-md bg-white px-8 py-6', className)}> <Col className={clsx('rounded-md bg-white px-8 py-6', className)}>
<Title className="mt-0" text="Your market" /> <Title className="mt-0" text="Resolve market" />
<div className="pt-2 pb-1 text-sm text-gray-500">Resolve outcome</div> <div className="pt-2 pb-1 text-sm text-gray-500">Outcome</div>
<YesNoCancelSelector <YesNoCancelSelector
className="mx-auto my-2" className="mx-auto my-2"
@ -80,20 +80,30 @@ export function ResolutionPanel(props: {
<div> <div>
{outcome === 'YES' ? ( {outcome === 'YES' ? (
<> <>
Winnings will be paid out to YES bettors. You earn{' '} Winnings will be paid out to YES bettors.
{CREATOR_FEE * 100}% of trader profits. <br />
<br />
You earn {CREATOR_FEE * 100}% of trader profits.
</> </>
) : outcome === 'NO' ? ( ) : outcome === 'NO' ? (
<> <>
Winnings will be paid out to NO bettors. You earn{' '} Winnings will be paid out to NO bettors.
{CREATOR_FEE * 100}% of trader profits. <br />
<br />
You earn {CREATOR_FEE * 100}% of trader profits.
</> </>
) : outcome === 'CANCEL' ? ( ) : outcome === 'CANCEL' ? (
<>The pool will be returned to traders with no fees.</> <>The pool will be returned to traders with no fees.</>
) : outcome === 'MKT' ? ( ) : outcome === 'MKT' ? (
<> <>
Traders will be paid out at the probability you specify. You earn{' '} Traders will be paid out at the probability you specify:
{CREATOR_FEE * 100}% of trader profits. <Spacer h={2} />
<ProbabilitySelector
probabilityInt={Math.round(prob)}
setProbabilityInt={setProb}
/>
<Spacer h={2} />
You earn {CREATOR_FEE * 100}% of trader profits.
</> </>
) : ( ) : (
<>Resolving this market will immediately pay out traders.</> <>Resolving this market will immediately pay out traders.</>
@ -123,20 +133,7 @@ export function ResolutionPanel(props: {
}} }}
onSubmit={resolve} onSubmit={resolve}
> >
{outcome === 'MKT' ? (
<>
<p className="mb-4">
What probability would you like to resolve the market to?
</p>
<ProbabilitySelector
probabilityInt={Math.round(prob)}
setProbabilityInt={setProb}
/>
</>
) : (
<p>Are you sure you want to resolve this market?</p> <p>Are you sure you want to resolve this market?</p>
)}
</ConfirmationButton> </ConfirmationButton>
</Col> </Col>
) )

View File

@ -48,13 +48,13 @@ export function YesNoCancelSelector(props: {
className?: string className?: string
btnClassName?: string btnClassName?: string
}) { }) {
const { selected, onSelect, className } = props const { selected, onSelect } = props
const btnClassName = clsx('px-6 flex-1', props.btnClassName) const btnClassName = clsx('px-6 flex-1', props.btnClassName)
return ( return (
<Col> <Col className="gap-2">
<Row className={clsx('w-full space-x-3', className)}> {/* Should ideally use a radio group instead of buttons */}
<Button <Button
color={selected === 'YES' ? 'green' : 'gray'} color={selected === 'YES' ? 'green' : 'gray'}
onClick={() => onSelect('YES')} onClick={() => onSelect('YES')}
@ -70,9 +70,7 @@ export function YesNoCancelSelector(props: {
> >
NO NO
</Button> </Button>
</Row>
<Row className={clsx('w-full space-x-3', className)}>
<Button <Button
color={selected === 'MKT' ? 'blue' : 'gray'} color={selected === 'MKT' ? 'blue' : 'gray'}
onClick={() => onSelect('MKT')} onClick={() => onSelect('MKT')}
@ -88,7 +86,6 @@ export function YesNoCancelSelector(props: {
> >
N/A N/A
</Button> </Button>
</Row>
</Col> </Col>
) )
} }