From 905e5c0de8603641741aa84792e784cbfe321da9 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <sinclair@daommo.com>
Date: Thu, 26 May 2022 16:00:16 -0700
Subject: [PATCH] Add quick bet arrows to embedded markets

---
 web/components/contract/contract-card.tsx     |  2 +-
 web/components/contract/quick-bet.tsx         | 22 +++++++++----
 web/pages/embed/[username]/[contractSlug].tsx | 32 ++++---------------
 3 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index 84e2db8f..15dbad67 100644
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@@ -96,7 +96,7 @@ export function ContractCard(props: {
             />
           </Col>
           {showQuickBet ? (
-            <QuickBet contract={contract} />
+            <QuickBet contract={contract} className="-my-4" showBar />
           ) : (
             <Col className="m-auto pl-2">
               {outcomeType === 'BINARY' && (
diff --git a/web/components/contract/quick-bet.tsx b/web/components/contract/quick-bet.tsx
index c4b1ec16..ac9b7047 100644
--- a/web/components/contract/quick-bet.tsx
+++ b/web/components/contract/quick-bet.tsx
@@ -33,8 +33,12 @@ import { useSaveShares } from '../use-save-shares'
 
 const BET_SIZE = 10
 
-export function QuickBet(props: { contract: Contract }) {
-  const { contract } = props
+export function QuickBet(props: {
+  contract: Contract
+  className?: string
+  showBar?: boolean
+}) {
+  const { contract, className, showBar } = props
 
   const user = useUser()
   const userBets = useUserContractBets(user?.id, contract.id)
@@ -116,9 +120,10 @@ export function QuickBet(props: { contract: Contract }) {
   return (
     <Col
       className={clsx(
-        'relative -my-4 -mr-5 min-w-[5.5rem] justify-center gap-2 pr-5 pl-1 align-middle'
+        'relative -mr-5 min-w-[5.5rem] justify-center gap-2 pr-5 pl-1 align-middle',
         // Use this for colored QuickBet panes
         // `bg-opacity-10 bg-${color}`
+        className
       )}
     >
       {/* Up bet triangle */}
@@ -150,7 +155,11 @@ export function QuickBet(props: { contract: Contract }) {
         )}
       </div>
 
-      <QuickOutcomeView contract={contract} previewProb={previewProb} />
+      <QuickOutcomeView
+        contract={contract}
+        previewProb={previewProb}
+        showBar={showBar}
+      />
 
       {/* Down bet triangle */}
       <div>
@@ -213,8 +222,9 @@ function QuickOutcomeView(props: {
   contract: Contract
   previewProb?: number
   caption?: 'chance' | 'expected'
+  showBar?: boolean
 }) {
-  const { contract, previewProb, caption } = props
+  const { contract, previewProb, caption, showBar } = props
   const { outcomeType } = contract
   // If there's a preview prob, display that instead of the current prob
   const override =
@@ -242,7 +252,7 @@ function QuickOutcomeView(props: {
     <Col className={clsx('items-center text-3xl', textColor)}>
       {override ?? display}
       {caption && <div className="text-base">{caption}</div>}
-      <ProbBar contract={contract} previewProb={previewProb} />
+      {showBar && <ProbBar contract={contract} previewProb={previewProb} />}
     </Col>
   )
 }
diff --git a/web/pages/embed/[username]/[contractSlug].tsx b/web/pages/embed/[username]/[contractSlug].tsx
index ff485aae..46c671d2 100644
--- a/web/pages/embed/[username]/[contractSlug].tsx
+++ b/web/pages/embed/[username]/[contractSlug].tsx
@@ -8,16 +8,13 @@ import {
   NumericContract,
 } from 'common/contract'
 import { DOMAIN } from 'common/envs/constants'
+import { useEffect } from 'react'
 import { AnswersGraph } from 'web/components/answers/answers-graph'
 import BetRow from 'web/components/bet-row'
-import {
-  BinaryResolutionOrChance,
-  FreeResponseResolutionOrChance,
-  NumericResolutionOrExpectation,
-} from 'web/components/contract/contract-card'
 import { ContractDetails } from 'web/components/contract/contract-details'
 import { ContractProbGraph } from 'web/components/contract/contract-prob-graph'
 import { NumericGraph } from 'web/components/contract/numeric-graph'
+import { QuickBet } from 'web/components/contract/quick-bet'
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
 import { Spacer } from 'web/components/layout/spacer'
@@ -114,31 +111,16 @@ function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
             isCreator={false}
             disabled
           />
-
-          {isBinary && (
-            <Row className="items-center gap-4">
+          <Row className="items-center gap-4">
+            {isBinary && (
               <BetRow
                 contract={contract as BinaryContract}
                 betPanelClassName="scale-75"
               />
-              <BinaryResolutionOrChance contract={contract} />
-            </Row>
-          )}
-
-          {outcomeType === 'FREE_RESPONSE' && (
-            <FreeResponseResolutionOrChance
-              contract={contract}
-              truncate="long"
-            />
-          )}
-
-          {outcomeType === 'NUMERIC' && (
-            <NumericResolutionOrExpectation
-              contract={contract as NumericContract}
-            />
-          )}
+            )}
+            <QuickBet contract={contract} />
+          </Row>
         </Row>
-
         <Spacer h={2} />
       </div>