From a05c5dcf6589802b05ade4fbaf436d08c25747b2 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Wed, 16 Feb 2022 16:26:52 -0600
Subject: [PATCH] None option converted to none of the above label at bottom of
 list. Button to resolve none.

---
 web/components/answers-panel.tsx   | 30 +++++++++++++++++++++++-------
 web/components/contract-card.tsx   |  2 ++
 web/components/outcome-label.tsx   |  2 ++
 web/components/yes-no-selector.tsx | 14 +++++++++++---
 4 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/web/components/answers-panel.tsx b/web/components/answers-panel.tsx
index 277e9ccd..740626ef 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, ChooseCancelSelector } from './yes-no-selector'
+import { BuyButton, ChooseNoneCancelSelector } from './yes-no-selector'
 import { Spacer } from './layout/spacer'
 import {
   formatMoney,
@@ -44,7 +44,7 @@ export function AnswersPanel(props: {
 
   const answers = useAnswers(contract.id) ?? props.answers
   const [chosenAnswer, otherAnswers] = _.partition(
-    answers,
+    answers.filter((answer) => answer.id !== '0'),
     (answer) => answer.id === resolution
   )
   const sortedAnswers = [
@@ -58,7 +58,7 @@ export function AnswersPanel(props: {
   const user = useUser()
 
   const [resolveOption, setResolveOption] = useState<
-    'CHOOSE' | 'CANCEL' | undefined
+    'CHOOSE' | 'NONE' | 'CANCEL' | undefined
   >()
   const [answerChoice, setAnswerChoice] = useState<string | undefined>()
 
@@ -75,6 +75,15 @@ export function AnswersPanel(props: {
         />
       ))}
 
+      {sortedAnswers.length === 0 && (
+        <div className="text-gray-500">No answers yet...</div>
+      )}
+
+      <div className="self-end p-4">
+        None of the above:{' '}
+        {formatPercent(getOutcomeProbability(contract.totalShares, '0'))}
+      </div>
+
       {tradingAllowed(contract) && <CreateAnswerInput contract={contract} />}
 
       {user?.id === creatorId && !resolution && (
@@ -418,8 +427,8 @@ function CreateAnswerInput(props: { contract: Contract<'MULTI'> }) {
 
 function AnswerResolvePanel(props: {
   contract: Contract<'MULTI'>
-  resolveOption: 'CHOOSE' | 'CANCEL' | undefined
-  setResolveOption: (option: 'CHOOSE' | 'CANCEL' | undefined) => void
+  resolveOption: 'CHOOSE' | 'NONE' | 'CANCEL' | undefined
+  setResolveOption: (option: 'CHOOSE' | 'NONE' | 'CANCEL' | undefined) => void
   answer: string | undefined
   clearAnswerChoice: () => void
 }) {
@@ -440,7 +449,12 @@ function AnswerResolvePanel(props: {
     setIsSubmitting(true)
 
     const result = await resolveMarket({
-      outcome: resolveOption === 'CHOOSE' ? (answer as string) : 'CANCEL',
+      outcome:
+        resolveOption === 'CHOOSE'
+          ? (answer as string)
+          : resolveOption === 'NONE'
+          ? '0'
+          : 'CANCEL',
       contractId: contract.id,
     }).then((r) => r.data as any)
 
@@ -455,6 +469,8 @@ function AnswerResolvePanel(props: {
   const resolutionButtonClass =
     resolveOption === 'CANCEL'
       ? 'bg-yellow-400 hover:bg-yellow-500'
+      : resolveOption === 'NONE'
+      ? 'bg-red-400 hover:bg-red-500'
       : resolveOption === 'CHOOSE' && answer
       ? 'btn-primary'
       : 'btn-disabled'
@@ -463,7 +479,7 @@ function AnswerResolvePanel(props: {
     <Col className="gap-4 p-4 bg-gray-50 rounded">
       <div>Resolve your market</div>
       <Col className="sm:flex-row sm:items-center gap-4">
-        <ChooseCancelSelector
+        <ChooseNoneCancelSelector
           className="!flex-row flex-wrap items-center"
           selected={resolveOption}
           onSelect={setResolveOption}
diff --git a/web/components/contract-card.tsx b/web/components/contract-card.tsx
index 89c4c7ec..2f731163 100644
--- a/web/components/contract-card.tsx
+++ b/web/components/contract-card.tsx
@@ -76,6 +76,7 @@ export function ResolutionOrChance(props: {
       NO: 'text-red-400',
       MKT: 'text-blue-400',
       CANCEL: 'text-yellow-400',
+      '0': 'text-red-400',
       '': '', // Empty if unresolved
     }[resolution || ''] ?? 'text-primary'
 
@@ -87,6 +88,7 @@ export function ResolutionOrChance(props: {
       NO: 'NO',
       MKT: getBinaryProbPercent(contract),
       CANCEL: 'N/A',
+      '0': 'NONE',
       '': '',
     }[resolution || ''] ?? `#${resolution}`
 
diff --git a/web/components/outcome-label.tsx b/web/components/outcome-label.tsx
index a86ab560..1f01c58c 100644
--- a/web/components/outcome-label.tsx
+++ b/web/components/outcome-label.tsx
@@ -27,5 +27,7 @@ export function ProbLabel() {
 }
 
 export function AnswerNumberLabel(props: { number: string }) {
+  if (props.number == '0') return <span className="text-red-400">NONE</span>
+
   return <span className="text-primary">#{props.number}</span>
 }
diff --git a/web/components/yes-no-selector.tsx b/web/components/yes-no-selector.tsx
index ebc0ab7b..70f91e6a 100644
--- a/web/components/yes-no-selector.tsx
+++ b/web/components/yes-no-selector.tsx
@@ -90,9 +90,9 @@ export function YesNoCancelSelector(props: {
   )
 }
 
-export function ChooseCancelSelector(props: {
-  selected: 'CHOOSE' | 'CANCEL' | undefined
-  onSelect: (selected: 'CHOOSE' | 'CANCEL') => void
+export function ChooseNoneCancelSelector(props: {
+  selected: 'CHOOSE' | 'NONE' | 'CANCEL' | undefined
+  onSelect: (selected: 'CHOOSE' | 'NONE' | 'CANCEL') => void
   className?: string
   btnClassName?: string
 }) {
@@ -110,6 +110,14 @@ export function ChooseCancelSelector(props: {
         Choose an answer
       </Button>
 
+      <Button
+        color={selected === 'NONE' ? 'red' : 'gray'}
+        onClick={() => onSelect('NONE')}
+        className={clsx('whitespace-nowrap', btnClassName)}
+      >
+        None
+      </Button>
+
       <Button
         color={selected === 'CANCEL' ? 'yellow' : 'gray'}
         onClick={() => onSelect('CANCEL')}