Show amount moved in probability

web/components/contract/contract-card.tsx

@@ -6,7 +6,6 @@ import {
   Contract,
   contractPath,
   getBinaryProbPercent,
-  listenForContract,
 } from 'web/lib/firebase/contracts'
 import { Col } from '../layout/col'
 import {
@@ -26,7 +25,6 @@ import {
 import { getOutcomeProbability, getTopAnswer } from 'common/calculate'
 import { AvatarDetails, MiscDetails } from './contract-details'
 import { getExpectedValue, getValueFromBucket } from 'common/calculate-dpm'
-import { useEffect, useState } from 'react'
 import { QuickBet, QuickOutcomeView, ProbBar, getColor } from './quick-bet'
 import { useContractWithPreload } from 'web/hooks/use-contract'
 
@@ -107,8 +105,9 @@ export function BinaryResolutionOrChance(props: {
   large?: boolean
   className?: string
   hideText?: boolean
+  override?: string
 }) {
-  const { contract, large, className, hideText } = props
+  const { contract, large, className, hideText, override } = props
   const { resolution } = contract
   const textColor = `text-${getColor(contract)}`
 
@@ -128,7 +127,9 @@ export function BinaryResolutionOrChance(props: {
         </>
       ) : (
         <>
-          <div className={textColor}>{getBinaryProbPercent(contract)}</div>
+          <div className={clsx(textColor, 'transition-all')}>
+            {override ?? getBinaryProbPercent(contract)}
+          </div>
           {!hideText && (
             <div className={clsx(textColor, large ? 'text-xl' : 'text-base')}>
               chance
@@ -163,8 +164,9 @@ export function FreeResponseResolutionOrChance(props: {
   truncate: 'short' | 'long' | 'none'
   className?: string
   hideText?: boolean
+  override?: string
 }) {
-  const { contract, truncate, className, hideText } = props
+  const { contract, truncate, className, hideText, override } = props
   const { resolution } = contract
 
   const topAnswer = getTopAnswer(contract)
@@ -187,7 +189,8 @@ export function FreeResponseResolutionOrChance(props: {
           <Row className="items-center gap-6">
             <Col className={clsx('text-3xl', textColor)}>
               <div>
-                {formatPercent(getOutcomeProbability(contract, topAnswer.id))}
+                {override ??
+                  formatPercent(getOutcomeProbability(contract, topAnswer.id))}
               </div>
               {!hideText && <div className="text-base">chance</div>}
             </Col>
@@ -202,8 +205,9 @@ export function NumericResolutionOrExpectation(props: {
   contract: NumericContract
   className?: string
   hideText?: boolean
+  override?: string
 }) {
-  const { contract, className, hideText } = props
+  const { contract, className, hideText, override } = props
   const { resolution } = contract
   const textColor = `text-${getColor(contract)}`
 
@@ -220,7 +224,7 @@ export function NumericResolutionOrExpectation(props: {
       ) : (
         <>
           <div className={clsx('text-3xl', textColor)}>
-            {formatLargeNumber(getExpectedValue(contract))}
+            {override ?? formatLargeNumber(getExpectedValue(contract))}
           </div>
           {!hideText && (
             <div className={clsx('text-base', textColor)}>expected</div>

web/components/contract/quick-bet.tsx

@@ -1,5 +1,9 @@
 import clsx from 'clsx'
-import { getOutcomeProbability, getTopAnswer } from 'common/calculate'
+import {
+  getOutcomeProbability,
+  getOutcomeProbabilityAfterBet,
+  getTopAnswer,
+} from 'common/calculate'
 import { getExpectedValue } from 'common/calculate-dpm'
 import {
   Contract,
@@ -10,7 +14,8 @@ import {
   NumericContract,
   FreeResponse,
 } from 'common/contract'
-import { formatMoney } from 'common/util/format'
+import { formatMoney, formatPercent } from 'common/util/format'
+import { useState } from 'react'
 import toast from 'react-hot-toast'
 import { useUser } from 'web/hooks/use-user'
 import { useUserContractBets } from 'web/hooks/use-user-bets'
@@ -42,6 +47,34 @@ export function QuickBet(props: { contract: Contract }) {
   const hasDownShares =
     contract.outcomeType === 'BINARY' ? noFloorShares : yesFloorShares
 
+  // TODO: Consider making up/down two different components, for code reuse?
+  const [upHover, setUpHover] = useState(false)
+  const [downHover, setDownHover] = useState(false)
+
+  let override
+  try {
+    override = upHover
+      ? formatPercent(
+          getOutcomeProbabilityAfterBet(
+            contract,
+            quickOutcome(contract, 'UP') || '',
+            10
+          )
+        )
+      : downHover
+      ? formatPercent(
+          1 -
+            getOutcomeProbabilityAfterBet(
+              contract,
+              quickOutcome(contract, 'DOWN') || '',
+              10
+            )
+        )
+      : undefined
+  } catch (e) {
+    // Catch any errors from hovering on an invalid option
+  }
+
   const color = getColor(contract)
 
   async function placeQuickBet(direction: 'UP' | 'DOWN') {
@@ -91,6 +124,8 @@ export function QuickBet(props: { contract: Contract }) {
       <div>
         <div
           className="peer absolute top-0 left-0 right-0 h-[50%]"
+          onMouseEnter={() => setUpHover(true)}
+          onMouseLeave={() => setUpHover(false)}
           onClick={() => placeQuickBet('UP')}
         ></div>
         <div className="mt-2 text-center text-xs text-transparent peer-hover:text-gray-400">
@@ -109,12 +144,14 @@ export function QuickBet(props: { contract: Contract }) {
         )}
       </div>
 
-      <QuickOutcomeView contract={contract} />
+      <QuickOutcomeView contract={contract} override={override} />
 
       {/* Down bet triangle */}
       <div>
         <div
           className="peer absolute bottom-0 left-0 right-0 h-[50%]"
+          onMouseEnter={() => setDownHover(true)}
+          onMouseLeave={() => setDownHover(false)}
           onClick={() => placeQuickBet('DOWN')}
         ></div>
         {hasDownShares > 0 ? (
@@ -161,8 +198,13 @@ export function ProbBar(props: { contract: Contract }) {
   )
 }
 
-export function QuickOutcomeView(props: { contract: Contract }) {
-  const { contract } = props
+// TODO: just directly code in the outcomes for quick bet, rather than relying on
+// code resuse. Too many differences anyways
+export function QuickOutcomeView(props: {
+  contract: Contract
+  override?: string
+}) {
+  const { contract, override } = props
   const { outcomeType } = contract
   return (
     <>
@@ -171,6 +213,7 @@ export function QuickOutcomeView(props: { contract: Contract }) {
           className="items-center"
           contract={contract}
           hideText
+          override={override}
         />
       )}
 
@@ -179,6 +222,7 @@ export function QuickOutcomeView(props: { contract: Contract }) {
           className="items-center"
           contract={contract as NumericContract}
           hideText
+          override={override}
         />
       )}
 
@@ -188,6 +232,7 @@ export function QuickOutcomeView(props: { contract: Contract }) {
           contract={contract as FullContract<DPM, FreeResponse>}
           truncate="long"
           hideText
+          override={override}
         />
       )}
     </>