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

Fix feed and cards for multi contracts

Browse Source
This commit is contained in:
James Grugett 2022-02-15 23:02:48 -06:00
parent 212f79aac9
commit 6f5ac2d1d1
4 changed files with 45 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/components/answers-panel.tsx
View File

@ -34,7 +34,6 @@ import { Bet } from '../../common/bet'
import { useAnswers } from '../hooks/use-answers' import { useAnswers } from '../hooks/use-answers'
import { ResolveConfirmationButton } from './confirmation-button' import { ResolveConfirmationButton } from './confirmation-button'
import { tradingAllowed } from '../lib/firebase/contracts' import { tradingAllowed } from '../lib/firebase/contracts'
import { OutcomeLabel } from './outcome-label'
export function AnswersPanel(props: { export function AnswersPanel(props: {
contract: Contract<'MULTI'> contract: Contract<'MULTI'>
@ -65,11 +64,6 @@ export function AnswersPanel(props: {
return ( return (
<Col className="gap-3"> <Col className="gap-3">
{resolution && (
<div>
Resolved to answer <OutcomeLabel outcome={resolution} />:
</div>
)}
{sortedAnswers.map((answer) => ( {sortedAnswers.map((answer) => (
<AnswerItem <AnswerItem
key={answer.id} key={answer.id}
@ -156,14 +150,16 @@ function AnswerItem(props: {
/> />
) : ( ) : (
<Row className="self-end sm:self-start items-center gap-4"> <Row className="self-end sm:self-start items-center gap-4">
<div {!wasResolvedTo && (
className={clsx( <div
'text-2xl', className={clsx(
tradingAllowed(contract) ? 'text-green-500' : 'text-gray-500' 'text-2xl',
)} tradingAllowed(contract) ? 'text-green-500' : 'text-gray-500'
> )}
{probPercent} >
</div> {probPercent}
</div>
)}
{showChoice ? ( {showChoice ? (
<div className="form-control py-1"> <div className="form-control py-1">
<label className="cursor-pointer label gap-2"> <label className="cursor-pointer label gap-2">
@ -189,7 +185,10 @@ function AnswerItem(props: {
/> />
)} )}
{wasResolvedTo && ( {wasResolvedTo && (
<div className="text-green-700 text-xl">Chosen</div> <Col className="items-end">
<div className="text-green-700 text-xl">Chosen</div>
<div className="text-2xl text-gray-500">{probPercent}</div>
</Col>
)} )}
</> </>
)} )}

32
web/components/contract-card.tsx
View File

@ -61,28 +61,30 @@ export function ContractCard(props: {
} }
export function ResolutionOrChance(props: { export function ResolutionOrChance(props: {
resolution?: 'YES' | 'NO' | 'MKT' | 'CANCEL' resolution?: 'YES' | 'NO' | 'MKT' | 'CANCEL' | string
probPercent: string probPercent: string
large?: boolean large?: boolean
className?: string className?: string
}) { }) {
const { resolution, probPercent, large, className } = props const { resolution, probPercent, large, className } = props
const resolutionColor = { const resolutionColor =
YES: 'text-primary', {
NO: 'text-red-400', YES: 'text-primary',
MKT: 'text-blue-400', NO: 'text-red-400',
CANCEL: 'text-yellow-400', MKT: 'text-blue-400',
'': '', // Empty if unresolved CANCEL: 'text-yellow-400',
}[resolution || ''] '': '', // Empty if unresolved
}[resolution || ''] ?? 'text-primary'
const resolutionText = { const resolutionText =
YES: 'YES', {
NO: 'NO', YES: 'YES',
MKT: probPercent, NO: 'NO',
CANCEL: 'N/A', MKT: probPercent,
'': '', CANCEL: 'N/A',
}[resolution || ''] '': '',
}[resolution || ''] ?? `#${resolution}`
return ( return (
<Col className={clsx(large ? 'text-4xl' : 'text-3xl', className)}> <Col className={clsx(large ? 'text-4xl' : 'text-3xl', className)}>

3
web/components/contract-feed.tsx
View File

@ -390,8 +390,9 @@ function OutcomeIcon(props: { outcome?: outcome }) {
case 'NO': case 'NO':
return <XIcon className="h-5 w-5 text-gray-500" aria-hidden="true" /> return <XIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
case 'CANCEL': case 'CANCEL':
default:
return <BanIcon className="h-5 w-5 text-gray-500" aria-hidden="true" /> return <BanIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
default:
return <CheckIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
} }
} }

24
web/components/contract-overview.tsx
View File

@ -48,29 +48,29 @@ export const ContractOverview = (props: {
<Linkify text={question} /> <Linkify text={question} />
</div> </div>
{isBinary && ( <Row className="items-center justify-between gap-4">
<Row className="items-center justify-between gap-4"> {(isBinary || resolution) && (
<ResolutionOrChance <ResolutionOrChance
className="md:hidden" className="md:hidden"
resolution={resolution} resolution={resolution}
probPercent={getBinaryProbPercent(contract)} probPercent={getBinaryProbPercent(contract)}
large large
/> />
)}
{tradingAllowed(contract) && ( {isBinary && tradingAllowed(contract) && (
<BetRow <BetRow
contract={contract} contract={contract}
className="md:hidden" className="md:hidden"
labelClassName="hidden" labelClassName="hidden"
/> />
)} )}
</Row> </Row>
)}
<ContractDetails contract={contract} /> <ContractDetails contract={contract} />
</Col> </Col>
{isBinary && ( {(isBinary || resolution) && (
<Col className="hidden items-end justify-between md:flex"> <Col className="hidden items-end justify-between md:flex">
<ResolutionOrChance <ResolutionOrChance
className="items-end" className="items-end"