From cc0beb4ca4b2d4f4a0416d2463f1c76c29fac3af Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Tue, 22 Mar 2022 00:18:08 -0500
Subject: [PATCH] DPM: label payout 'Estimated' in bet panel

---
 web/components/answers/answer-bet-panel.tsx    |  6 ++++--
 web/components/answers/create-answer-panel.tsx |  6 ++++--
 web/components/bet-panel.tsx                   | 17 +++++++++++++----
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/web/components/answers/answer-bet-panel.tsx b/web/components/answers/answer-bet-panel.tsx
index 65758f0b..4e1f61cb 100644
--- a/web/components/answers/answer-bet-panel.tsx
+++ b/web/components/answers/answer-bet-panel.tsx
@@ -134,9 +134,11 @@ export function AnswerBetPanel(props: {
           </Row>
         </Row>
 
-        <Row className="items-start justify-between gap-2 text-sm">
+        <Row className="items-center justify-between gap-2 text-sm">
           <Row className="flex-nowrap items-center gap-2 whitespace-nowrap text-gray-500">
-            <div>Payout if chosen</div>
+            <div>
+              Estimated <br /> payout if chosen
+            </div>
             <InfoTooltip
               text={`Current payout for ${formatWithCommas(
                 shares
diff --git a/web/components/answers/create-answer-panel.tsx b/web/components/answers/create-answer-panel.tsx
index 35e04db2..9026a666 100644
--- a/web/components/answers/create-answer-panel.tsx
+++ b/web/components/answers/create-answer-panel.tsx
@@ -117,9 +117,11 @@ export function CreateAnswerPanel(props: {
                   </Row>
                 </Row>
 
-                <Row className="justify-between gap-2 text-sm">
+                <Row className="justify-between gap-4 text-sm items-center">
                   <Row className="flex-nowrap items-center gap-2 whitespace-nowrap text-gray-500">
-                    <div>Payout if chosen</div>
+                    <div>
+                      Estimated <br /> payout if chosen
+                    </div>
                     <InfoTooltip
                       text={`Current payout for ${formatWithCommas(
                         shares
diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index 16fb2a4f..fab562b2 100644
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@@ -119,7 +119,7 @@ export function BetPanel(props: {
     focusAmountInput()
   }
 
-  const tooltip =
+  const dpmTooltip =
     contract.mechanism === 'dpm-2'
       ? `Current payout for ${formatWithCommas(shares)} / ${formatWithCommas(
           shares +
@@ -165,13 +165,22 @@ export function BetPanel(props: {
           </Row>
         </Row>
 
-        <Row className="items-start justify-between gap-2 text-sm">
+        <Row className="items-center justify-between gap-2 text-sm">
           <Row className="flex-nowrap items-center gap-2 whitespace-nowrap text-gray-500">
             <div>
-              Payout if <OutcomeLabel outcome={betChoice ?? 'YES'} />
+              {contract.mechanism === 'dpm-2' ? (
+                <>
+                  Estimated
+                  <br /> payout if <OutcomeLabel outcome={betChoice ?? 'YES'} />
+                </>
+              ) : (
+                <>
+                  Payout if <OutcomeLabel outcome={betChoice ?? 'YES'} />
+                </>
+              )}
             </div>
 
-            {tooltip && <InfoTooltip text={tooltip} />}
+            {dpmTooltip && <InfoTooltip text={dpmTooltip} />}
           </Row>
           <Row className="flex-wrap items-end justify-end gap-2">
             <span className="whitespace-nowrap">