From 0a178a75190abfcdd11c1385fabb8ee616fb319e Mon Sep 17 00:00:00 2001 From: James Grugett Date: Tue, 15 Feb 2022 18:08:21 -0600 Subject: [PATCH] Resolve answer UI --- web/components/answers-panel.tsx | 129 +++++++++++++++++++++++-- web/components/confirmation-button.tsx | 33 +++++++ web/components/outcome-label.tsx | 2 +- web/components/resolution-panel.tsx | 29 ++---- web/components/yes-no-selector.tsx | 33 ++++++- 5 files changed, 192 insertions(+), 34 deletions(-) diff --git a/web/components/answers-panel.tsx b/web/components/answers-panel.tsx index a49523be..0f36f588 100644 --- a/web/components/answers-panel.tsx +++ b/web/components/answers-panel.tsx @@ -14,7 +14,7 @@ import { Avatar } from './avatar' import { SiteLink } from './site-link' import { DateTimeTooltip } from './datetime-tooltip' import dayjs from 'dayjs' -import { BuyButton } from './yes-no-selector' +import { BuyButton, ChooseCancelSelector } from './yes-no-selector' import { Spacer } from './layout/spacer' import { formatMoney, @@ -32,6 +32,7 @@ import { import { firebaseLogin } from '../lib/firebase/users' import { Bet } from '../../common/bet' import { useAnswers } from '../hooks/use-answers' +import { ResolveConfirmationButton } from './confirmation-button' export function AnswersPanel(props: { contract: Contract<'MULTI'> @@ -45,18 +46,49 @@ export function AnswersPanel(props: { (answer) => -1 * getOutcomeProbability(contract.totalShares, answer.id) ) + const user = useUser() + + const [resolveOption, setResolveOption] = useState< + 'CHOOSE' | 'CANCEL' | undefined + >() + const [answerChoice, setAnswerChoice] = useState() + return ( {sortedAnswers.map((answer) => ( - + setAnswerChoice(answer.id)} + /> ))} + + + {user?.id === contract.creatorId && ( + setAnswerChoice(undefined)} + /> + )} ) } -function AnswerItem(props: { answer: Answer; contract: Contract<'MULTI'> }) { - const { answer, contract } = props +function AnswerItem(props: { + answer: Answer + contract: Contract<'MULTI'> + showChoice: boolean + isChosen: boolean + onChoose: () => void +}) { + const { answer, contract, showChoice, isChosen, onChoose } = props const { username, avatarUrl, name, createdTime, number, text } = answer const createdDate = dayjs(createdTime).format('MMM D') @@ -99,12 +131,28 @@ function AnswerItem(props: { answer: Answer; contract: Contract<'MULTI'> }) { ) : (
{probPercent}
- { - setIsBetting(true) - }} - /> + {showChoice ? ( +
+ +
+ ) : ( + { + setIsBetting(true) + }} + /> + )}
)} @@ -327,3 +375,64 @@ function CreateAnswerInput(props: { contract: Contract<'MULTI'> }) { ) } + +function AnswerResolvePanel(props: { + contract: Contract<'MULTI'> + resolveOption: 'CHOOSE' | 'CANCEL' | undefined + setResolveOption: (option: 'CHOOSE' | 'CANCEL' | undefined) => void + answer: string | undefined + clearAnswerChoice: () => void +}) { + const { + contract, + resolveOption, + setResolveOption, + answer, + clearAnswerChoice, + } = props + + const resolutionButtonClass = + resolveOption === 'CANCEL' + ? 'bg-yellow-400 hover:bg-yellow-500' + : resolveOption === 'CHOOSE' && answer + ? 'btn-primary' + : 'btn-disabled' + + return ( + +
Resolve your market
+ + + + + {resolveOption && ( + + )} + {}} + isSubmitting={false} + openModelButtonClass={resolutionButtonClass} + submitButtonClass={resolutionButtonClass} + /> + + + + ) +} diff --git a/web/components/confirmation-button.tsx b/web/components/confirmation-button.tsx index 8cb43070..cd894968 100644 --- a/web/components/confirmation-button.tsx +++ b/web/components/confirmation-button.tsx @@ -51,3 +51,36 @@ export function ConfirmationButton(props: { ) } + +export function ResolveConfirmationButton(props: { + onResolve: () => void + isSubmitting: boolean + openModelButtonClass?: string + submitButtonClass?: string +}) { + const { onResolve, isSubmitting, openModelButtonClass, submitButtonClass } = + props + return ( + +

Are you sure you want to resolve this market?

+
+ ) +} diff --git a/web/components/outcome-label.tsx b/web/components/outcome-label.tsx index 8b2d399e..cc126215 100644 --- a/web/components/outcome-label.tsx +++ b/web/components/outcome-label.tsx @@ -27,5 +27,5 @@ export function ProbLabel() { } export function AnswerNumberLabel(props: { number: string }) { - return #{props.number} + return #{props.number} } diff --git a/web/components/resolution-panel.tsx b/web/components/resolution-panel.tsx index cae4f53a..304ee9d2 100644 --- a/web/components/resolution-panel.tsx +++ b/web/components/resolution-panel.tsx @@ -7,7 +7,7 @@ import { Title } from './title' import { User } from '../lib/firebase/users' import { YesNoCancelSelector } from './yes-no-selector' import { Spacer } from './layout/spacer' -import { ConfirmationButton as ConfirmationButton } from './confirmation-button' +import { ResolveConfirmationButton } from './confirmation-button' import { resolveMarket } from '../lib/firebase/api-call' import { ProbabilitySelector } from './probability-selector' import { getProbability } from '../../common/calculate' @@ -114,27 +114,12 @@ export function ResolutionPanel(props: { {!!error &&
{error}
} - -

Are you sure you want to resolve this market?

-
+ ) } diff --git a/web/components/yes-no-selector.tsx b/web/components/yes-no-selector.tsx index 35cbf183..ebc0ab7b 100644 --- a/web/components/yes-no-selector.tsx +++ b/web/components/yes-no-selector.tsx @@ -90,6 +90,37 @@ export function YesNoCancelSelector(props: { ) } +export function ChooseCancelSelector(props: { + selected: 'CHOOSE' | 'CANCEL' | undefined + onSelect: (selected: 'CHOOSE' | 'CANCEL') => void + className?: string + btnClassName?: string +}) { + const { selected, onSelect, className } = props + + const btnClassName = clsx('px-6 flex-1', props.btnClassName) + + return ( + + + + + + ) +} + const fundAmounts = [500, 1000, 2500, 10000] export function FundsSelector(props: { @@ -121,7 +152,7 @@ export function BuyButton(props: { className?: string; onClick?: () => void }) { const { className, onClick } = props return ( ) }