Bug PM-687: Fix inconsistency between predicted scalar outcomes

src/components/Outcome/OutcomeScalar/index.js

@@ -27,15 +27,14 @@ const OutcomeScalar = ({
     outcomeTokenIndex: 1, // always calc for long when calculating estimation
   })
 
-  const decimals = parseInt(decimalsRaw, 10)
+  const decimals = Math.max(decimalsRaw, 2)
 
-  const upper = Decimal(upperBound).div(10 ** decimals)
   const lower = Decimal(lowerBound).div(10 ** decimals)
 
-  const bounds = upper.sub(lower)
-  let value = Decimal(marginalPrice.toString())
+  const bounds = Decimal(upperBound).sub(lowerBound)
+  let value = Decimal(marginalPrice)
     .times(bounds)
-    .add(lowerBound)
+    .add(lower)
 
   if (showOnlyWinningOutcome) {
     value = Decimal(winningOutcome).div(10 ** decimals)
@@ -57,18 +56,21 @@ const OutcomeScalar = ({
       <div className={cx('scalarOutcome')}>
         <div className={cx('outcomeBound', 'lower')}>
           <DecimalValue value={lowerBound} decimals={decimals} />
-          &nbsp;{unit}
+          &nbsp;
+          {unit}
         </div>
         <div className={cx('currentPrediction')}>
           <div className={cx('currentPredictionLine')} />
           <div className={cx('currentPredictionValue')} style={{ left: `${marginalPrice.mul(100).toFixed(5)}%` }}>
             <DecimalValue value={value} decimals={decimals} />
-            &nbsp;{unit}
+            &nbsp;
+            {unit}
           </div>
         </div>
         <div className={cx('outcomeBound', 'upper')}>
           <DecimalValue value={upperBound} decimals={decimals} />
-          &nbsp;{unit}
+          &nbsp;
+          {unit}
         </div>
       </div>
     </div>

src/routes/MarketDetails/components/ExpandableViews/MarketBuySharesForm/OutcomesSection/OutcomeSectionScalar/ScalarSlider/index.js

@@ -18,10 +18,8 @@ const ScalarSlider = ({
 
   // current value
   const bounds = bigUpperBound.sub(bigLowerBound).div(10 ** decimals)
-
   const value = new Decimal(marginalPriceCurrent).mul(bounds).add(bigLowerBound.div(10 ** displayDecimals))
   const percentage = new Decimal(marginalPriceCurrent).mul(100)
-
   const selectedValue = new Decimal(marginalPriceSelected).mul(bounds).add(bigLowerBound.div(10 ** displayDecimals))
   const selectedPercentage = new Decimal(marginalPriceSelected).mul(100)
 
@@ -33,26 +31,42 @@ const ScalarSlider = ({
     <div className={cx('scalarSlider')}>
       <div className={cx('inner')}>
         <div className={cx('lowerBound')}>
-          <div className={cx('boundValue')}>{`${bigLowerBound.div(10 ** decimals).toFixed(0)} ${unit}`}</div>
-          <div className={cx('boundLabel')}>Lower Bound</div>
+          <div className={cx('boundValue')}>
+            {`${bigLowerBound.div(10 ** decimals).toFixed(0)} ${unit}`}
+          </div>
+          <div className={cx('boundLabel')}>
+            Lower Bound
+          </div>
         </div>
         <div className={cx('bar')} title="Please enter a value on the right!">
           <div className={cx('sliderHandle')} style={currentValueSliderStyle}>
             <div className={cx('handleText')}>
-              <div className={cx('handleTextLabel')}>Predicted Outcome</div>
-              <div className={cx('handleTextValue')}>{`${decimalToText(value.toFixed(displayDecimals))} ${unit}`}</div>
+              <div className={cx('handleTextLabel')}>
+                Predicted Outcome
+              </div>
+              <div className={cx('handleTextValue')}>
+                {`${decimalToText(value.toFixed(displayDecimals))} ${unit}`}
+              </div>
             </div>
           </div>
           <div className={selectedHandleStyle} style={selectedValueSliderStyle}>
             <div className={cx('handleText')}>
-              <div className={cx('handleTextLabel')}>Selected Trade</div>
-              <div className={cx('handleTextValue')}>{`${decimalToText(selectedValue)} ${unit}`}</div>
+              <div className={cx('handleTextLabel')}>
+                Selected Trade
+              </div>
+              <div className={cx('handleTextValue')}>
+                {`${decimalToText(selectedValue)} ${unit}`}
+              </div>
             </div>
           </div>
         </div>
         <div className={cx('upperBound')}>
-          <div className={cx('boundValue')}>{`${bigUpperBound.div(10 ** decimals).toFixed(0)} ${unit}`}</div>
-          <div className={cx('boundLabel')}>Upper Bound</div>
+          <div className={cx('boundValue')}>
+            {`${bigUpperBound.div(10 ** decimals).toFixed(0)} ${unit}`}
+          </div>
+          <div className={cx('boundLabel')}>
+            Upper Bound
+          </div>
         </div>
       </div>
     </div>

src/routes/MarketDetails/components/ExpandableViews/MarketBuySharesForm/OutcomesSection/OutcomeSectionScalar/index.js

@@ -14,43 +14,44 @@ const OutcomeSectionScalar = (props) => {
     selectedBuyInvest,
     selectedOutcome,
     market: {
-      event: { lowerBound, upperBound }, eventDescription: { decimals, unit }, netOutcomeTokensSold, funding,
+      event: { lowerBound, upperBound },
+      eventDescription: { decimals, unit },
+      netOutcomeTokensSold,
+      funding,
     },
     outcomeTokenCount,
   } = props
   const canRunSimulation = selectedBuyInvest && selectedOutcome
 
   const marketTokenCounts = netOutcomeTokensSold.map(value => Decimal(value))
-  const marginalPricesCurrent = marketTokenCounts.map((value, outcomeTokenIndex) => 
-    calcLMSRMarginalPrice({
-      netOutcomeTokensSold: marketTokenCounts,
-      outcomeTokenIndex,
-      funding,
-    }))
+  const marginalPricesCurrent = calcLMSRMarginalPrice({
+    netOutcomeTokensSold: marketTokenCounts,
+    outcomeTokenIndex: 1,
+    funding,
+  })
   let marginalPriceSelected = marginalPricesCurrent
 
   if (canRunSimulation) {
     marketTokenCounts[selectedOutcome] = marketTokenCounts[selectedOutcome].add(outcomeTokenCount)
-    marginalPriceSelected = marketTokenCounts.map((value, outcomeTokenIndex) => 
-      calcLMSRMarginalPrice({
-        netOutcomeTokensSold: marketTokenCounts,
-        outcomeTokenIndex,
-        funding,
-      }))
+    marginalPriceSelected = calcLMSRMarginalPrice({
+      netOutcomeTokensSold: marketTokenCounts,
+      outcomeTokenIndex: 1,
+      funding,
+    })
   }
 
   const scalarOutcomes = [
     {
       index: 0,
       label: 'Short',
       color: COLOR_SCHEME_SCALAR[0],
-      probability: marginalPriceSelected[0].mul(100),
+      probability: Decimal(1).sub(marginalPriceSelected).mul(100),
     },
     {
       index: 1,
       label: 'Long',
       color: COLOR_SCHEME_SCALAR[1],
-      probability: marginalPriceSelected[1].mul(100),
+      probability: marginalPriceSelected.mul(100),
     },
   ]
 
@@ -61,7 +62,13 @@ const OutcomeSectionScalar = (props) => {
           <h2>
             Your Trade
           </h2>
-          <Field component={OutcomeSelection} name="selectedOutcome" outcomes={scalarOutcomes} hideBars hidePercentage />
+          <Field
+            component={OutcomeSelection}
+            name="selectedOutcome"
+            outcomes={scalarOutcomes}
+            hideBars
+            hidePercentage
+          />
         </div>
       </div>
       <div className={cn('row')}>
@@ -71,8 +78,8 @@ const OutcomeSectionScalar = (props) => {
             upperBound={parseInt(upperBound, 10)}
             unit={unit}
             decimals={decimals}
-            marginalPriceCurrent={marginalPricesCurrent[1].toString()}
-            marginalPriceSelected={marginalPriceSelected[1].toString()}
+            marginalPriceCurrent={marginalPricesCurrent.toString()}
+            marginalPriceSelected={marginalPriceSelected.toString()}
           />
         </div>
       </div>