Prototyping the one click bet widget (incomplete)

web/components/contract-overview.tsx

@@ -1,4 +1,8 @@
-import { Contract, tradingAllowed } from '../lib/firebase/contracts'
+import {
+  Contract,
+  getBinaryProbPercent,
+  tradingAllowed,
+} from '../lib/firebase/contracts'
 import { Col } from './layout/col'
 import { Spacer } from './layout/spacer'
 import { ContractProbGraph } from './contract-prob-graph'
@@ -35,27 +39,30 @@ export const ContractOverview = (props: {
 
   return (
     <Col className={clsx('mb-6', className)}>
-      <Col className="gap-4 px-2">
-        <Row className="justify-between gap-4">
-          <div className="text-2xl text-indigo-700 md:text-3xl">
-            <Linkify text={question} />
-          </div>
+      <Row>
+        <Col className="gap-4 px-2">
+          <Row className="justify-between gap-4">
+            <div className="text-2xl text-indigo-700 md:text-3xl">
+              <Linkify text={question} />
+            </div>
 
-          {(isBinary || resolution) && (
+            {/* {(isBinary || resolution) && (
             <ResolutionOrChance
               className="items-end xl:flex"
               contract={contract}
               large
             />
-          )}
-        </Row>
+          )} */}
+          </Row>
 
-        <ContractDetails contract={contract} isCreator={isCreator} />
-      </Col>
+          <ContractDetails contract={contract} isCreator={isCreator} />
+        </Col>
+        <QuickBetWidget contract={contract} />
+      </Row>
 
       <Spacer h={4} />
 
-      {isBinary && allowTrade && (
+      {/* {isBinary && allowTrade && (
         <Row className="my-6 items-center justify-between gap-4 lg:justify-center">
           {(isBinary || resolution) && (
             <ResolutionOrChance contract={contract} className="lg:hidden" />
@@ -64,7 +71,7 @@ export const ContractOverview = (props: {
             <BetRow large contract={contract} labelClassName="hidden" />
           )}
         </Row>
-      )}
+      )} */}
 
       {isBinary ? (
         <ContractProbGraph contract={contract} bets={bets} />
@@ -110,3 +117,54 @@ export const ContractOverview = (props: {
     </Col>
   )
 }
+
+function Triangle(props: {
+  direction: 'up' | 'down'
+  width: number
+  color: string
+  className?: string
+}) {
+  const { direction, width, color, className } = props
+
+  return (
+    <div
+      className={clsx(
+        'border-x-solid group h-0 w-0 cursor-pointer border-x-[30px] border-x-transparent transition-colors',
+        'relative',
+        className,
+        direction === 'up' &&
+          'border-b-solid border-b-[30px] border-b-gray-200 hover:border-b-green-300 focus:ring-green-500',
+        direction === 'down' &&
+          'border-t-solid border-t-[30px] border-t-gray-200 hover:border-t-red-300'
+      )}
+      tabIndex={0}
+    >
+      {/* {direction === 'up' && (
+        <div className="absolute top-4 -left-2 select-none text-xs text-gray-500 opacity-0 transition-opacity group-hover:opacity-100">
+          M$
+        </div>
+      )}
+      {direction === 'down' && (
+        <div className="absolute -top-9 -left-2 hidden select-none text-xs text-gray-500 group-hover:block">
+          M$
+        </div>
+      )} */}
+    </div>
+  )
+}
+
+function QuickBetWidget(props: { contract: Contract }) {
+  const { contract } = props
+  return (
+    <Col className="items-center gap-2">
+      <div className="whitespace-nowrap text-sm text-gray-500">
+        Click to trade
+      </div>
+      <Triangle direction="up" width={50} color="#e3e3e3" />
+      <div className="text-primary text-3xl">
+        {getBinaryProbPercent(contract)}
+      </div>
+      <Triangle direction="down" width={50} color="#e3e3e3" />
+    </Col>
+  )
+}