Replace bet modal in embed with inline betting

- Also simplifies graph height calculation

web/components/amount-input.tsx

@@ -37,7 +37,7 @@ export function AmountInput(props: {
 
   return (
     <Col className={className}>
-      <label className="input-group">
+      <label className="input-group mb-4">
         <span className="bg-gray-200 text-sm">{label}</span>
         <input
           className={clsx(
@@ -57,8 +57,6 @@ export function AmountInput(props: {
         />
       </label>
 
-      <Spacer h={4} />
-
       {error && (
         <div className="mb-2 mr-auto self-center whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
           {error === 'Insufficient balance' ? (

web/components/bet-inline.tsx

@@ -0,0 +1,86 @@
+import { track } from '@amplitude/analytics-browser'
+import clsx from 'clsx'
+import { CPMMBinaryContract, PseudoNumericContract } from 'common/contract'
+import { APIError } from 'web/lib/firebase/api'
+import { useState } from 'react'
+import { useMutation } from 'react-query'
+import { placeBet } from 'web/lib/firebase/api'
+import { BuyAmountInput } from './amount-input'
+import { Button } from './button'
+import { Row } from './layout/row'
+import { YesNoSelector } from './yes-no-selector'
+
+export function BetInline(props: {
+  contract: CPMMBinaryContract | PseudoNumericContract
+  className?: string
+}) {
+  const { contract, className } = props
+
+  const [outcome, setOutcome] = useState<'YES' | 'NO'>('YES')
+
+  const [amount, setAmount] = useState<number>()
+  const [error, setError] = useState<string>()
+
+  // adapted from bet-panel.ts submitBet()
+  const submitBet = useMutation(
+    () => placeBet({ outcome, amount, contractId: contract.id }),
+    {
+      onError: (e) =>
+        setError(e instanceof APIError ? e.toString() : 'Error placing bet'),
+      onSuccess: () => {
+        track('bet', {
+          location: 'embed',
+          outcomeType: contract.outcomeType,
+          slug: contract.slug,
+          contractId: contract.id,
+          amount,
+          outcome,
+          isLimitOrder: false,
+        })
+      },
+    }
+  )
+
+  const betDisabled = submitBet.isLoading || submitBet.isError || !amount
+
+  return (
+    <Row
+      className={clsx(
+        'align-stretch mb-4 h-8 items-stretch justify-center gap-3',
+        className
+      )}
+    >
+      <div className="text-xl">Bet</div>
+      <YesNoSelector
+        className="space-x-0"
+        btnClassName="rounded-none first:rounded-l-2xl last:rounded-r-2xl"
+        selected={outcome}
+        onSelect={setOutcome}
+        isPseudoNumeric={false}
+      />
+      <BuyAmountInput
+        className="-mb-4"
+        inputClassName={clsx(
+          'input-sm w-[100px] !text-base',
+          error && 'input-error'
+        )}
+        amount={amount}
+        onChange={setAmount}
+        error="" // handle error ourselves
+        setError={setError}
+      />
+      <Button
+        color={({ YES: 'green', NO: 'red' } as const)[outcome]}
+        size="xs"
+        disabled={betDisabled}
+        onClick={() => submitBet.mutate()}
+      >
+        {submitBet.isLoading
+          ? 'Submitting'
+          : submitBet.isSuccess
+          ? 'Success!'
+          : 'Submit'}
+      </Button>
+    </Row>
+  )
+}

web/pages/embed/[username]/[contractSlug].tsx

@@ -1,8 +1,10 @@
 import { Bet } from 'common/bet'
 import { Contract, CPMMBinaryContract } from 'common/contract'
 import { DOMAIN } from 'common/envs/constants'
+import { useState } from 'react'
 import { AnswersGraph } from 'web/components/answers/answers-graph'
-import BetButton from 'web/components/bet-button'
+import { BetInline } from 'web/components/bet-inline'
+import { Button } from 'web/components/button'
 import {
   BinaryResolutionOrChance,
   FreeResponseResolutionOrChance,
@@ -19,7 +21,6 @@ import { SiteLink } from 'web/components/site-link'
 import { useContractWithPreload } from 'web/hooks/use-contract'
 import { useMeasureSize } from 'web/hooks/use-measure-size'
 import { fromPropz, usePropz } from 'web/hooks/use-propz'
-import { useWindowSize } from 'web/hooks/use-window-size'
 import { listAllBets } from 'web/lib/firebase/bets'
 import {
   contractPath,
@@ -88,18 +89,13 @@ export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
 
   const href = `https://${DOMAIN}${contractPath(contract)}`
 
-  const { height: windowHeight } = useWindowSize()
+  const { setElem, height: graphHeight } = useMeasureSize()
-  const { setElem, height: topSectionHeight } = useMeasureSize()
-  const paddingBottom = 8
 
-  const graphHeight =
+  const [betPanelOpen, setBetPanelOpen] = useState(false)
-    windowHeight && topSectionHeight
-      ? windowHeight - topSectionHeight - paddingBottom
-      : 0
 
   return (
-    <Col className="w-full flex-1 bg-white">
+    <Col className="h-[100vh] w-full bg-white">
-      <div className="relative flex flex-col pt-2" ref={setElem}>
+      <div className="relative flex flex-col pt-2">
         <div className="px-3 text-xl text-indigo-700 md:text-2xl">
           <SiteLink href={href}>{question}</SiteLink>
         </div>
@@ -114,25 +110,19 @@ export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
             disabled
           />
 
-          {isBinary && (
+          {(isBinary || isPseudoNumeric) && tradingAllowed(contract) && (
-            <Row className="items-center gap-4">
+            <Button
-              {tradingAllowed(contract) && (
+              color="gradient"
-                <BetButton
+              onClick={() => setBetPanelOpen((open) => !open)}
-                  contract={contract as CPMMBinaryContract}
+            >
-                  betPanelClassName="scale-75"
+              {betPanelOpen ? 'Cancel' : 'Bet'}
-                />
+            </Button>
-              )}
-              <BinaryResolutionOrChance contract={contract} />
-            </Row>
           )}
 
+          {isBinary && <BinaryResolutionOrChance contract={contract} />}
+
           {isPseudoNumeric && (
-            <Row className="items-center gap-4">
+            <PseudoNumericResolutionOrExpectation contract={contract} />
-              {tradingAllowed(contract) && (
-                <BetButton contract={contract} betPanelClassName="scale-75" />
-              )}
-              <PseudoNumericResolutionOrExpectation contract={contract} />
-            </Row>
           )}
 
           {outcomeType === 'FREE_RESPONSE' && (
@@ -150,7 +140,7 @@ export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
         <Spacer h={2} />
       </div>
 
-      <div className="mx-1" style={{ paddingBottom }}>
+      <div className="mx-1 mb-2 min-h-0 flex-1" ref={setElem}>
         {(isBinary || isPseudoNumeric) && (
           <ContractProbGraph
             contract={contract}
@@ -167,6 +157,9 @@ export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
           <NumericGraph contract={contract} height={graphHeight} />
         )}
       </div>
+      {(isBinary || isPseudoNumeric) && betPanelOpen && (
+        <BetInline contract={contract as any} />
+      )}
     </Col>
   )
 }