open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Clean up Resolve Market panel

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
web/components/resolution-panel.tsx
View File

@ -64,9 +64,9 @@ export function ResolutionPanel(props: {
return (
<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
className="mx-auto my-2"
@ -80,20 +80,30 @@ export function ResolutionPanel(props: {
<div>
{outcome === 'YES' ? (
<>
Winnings will be paid out to YES bettors. You earn{' '}
{CREATOR_FEE * 100}% of trader profits.
Winnings will be paid out to YES bettors.
<br />
<br />
You earn {CREATOR_FEE * 100}% of trader profits.
</>
) : outcome === 'NO' ? (
<>
Winnings will be paid out to NO bettors. You earn{' '}
{CREATOR_FEE * 100}% of trader profits.
Winnings will be paid out to NO bettors.
<br />
<br />
You earn {CREATOR_FEE * 100}% of trader profits.
</>
) : outcome === 'CANCEL' ? (
<>The pool will be returned to traders with no fees.</>
) : outcome === 'MKT' ? (
<>
Traders will be paid out at the probability you specify. You earn{' '}
{CREATOR_FEE * 100}% of trader profits.
Traders will be paid out at the probability you specify:
<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.</>
@ -123,20 +133,7 @@ export function ResolutionPanel(props: {
}}
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>
</Col>
)

65
web/components/yes-no-selector.tsx
View File

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