Animate the prob bar change too

web/components/contract/contract-card.tsx

@@ -94,7 +94,6 @@ export function ContractCard(props: {
             </Col>
           )}
         </Row>
-        <ProbBar contract={contract} />
       </Col>
     </div>
   )

web/components/contract/quick-bet.tsx

@@ -51,25 +51,21 @@ export function QuickBet(props: { contract: Contract }) {
   const [upHover, setUpHover] = useState(false)
   const [downHover, setDownHover] = useState(false)
 
-  let override
+  let previewProb = undefined
   try {
-    override = upHover
-      ? formatPercent(
-          getOutcomeProbabilityAfterBet(
+    previewProb = upHover
+      ? getOutcomeProbabilityAfterBet(
           contract,
           quickOutcome(contract, 'UP') || '',
           10
         )
-        )
       : downHover
-      ? formatPercent(
-          1 -
+      ? 1 -
         getOutcomeProbabilityAfterBet(
           contract,
           quickOutcome(contract, 'DOWN') || '',
           10
         )
-        )
       : undefined
   } catch (e) {
     // Catch any errors from hovering on an invalid option
@@ -144,7 +140,7 @@ export function QuickBet(props: { contract: Contract }) {
         )}
       </div>
 
-      <QuickOutcomeView contract={contract} override={override} />
+      <QuickOutcomeView contract={contract} previewProb={previewProb} />
 
       {/* Down bet triangle */}
       <div>
@@ -172,10 +168,11 @@ export function QuickBet(props: { contract: Contract }) {
   )
 }
 
-export function ProbBar(props: { contract: Contract }) {
-  const { contract } = props
+export function ProbBar(props: { contract: Contract; previewProb?: number }) {
+  const { contract, previewProb } = props
+  // TODO: Switch preview color as it changes from green to red
   const color = getColor(contract)
-  const prob = getProb(contract)
+  const prob = previewProb ?? getProb(contract)
   return (
     <>
       <div
@@ -202,10 +199,12 @@ export function ProbBar(props: { contract: Contract }) {
 // code resuse. Too many differences anyways
 export function QuickOutcomeView(props: {
   contract: Contract
-  override?: string
+  previewProb?: number
 }) {
-  const { contract, override } = props
+  const { contract, previewProb } = props
   const { outcomeType } = contract
+  const override =
+    previewProb === undefined ? undefined : formatPercent(previewProb)
   return (
     <>
       {outcomeType === 'BINARY' && (
@@ -235,6 +234,7 @@ export function QuickOutcomeView(props: {
           override={override}
         />
       )}
+      <ProbBar contract={contract} previewProb={previewProb} />
     </>
   )
 }