Inga/mobilebetting (#911)

* mobile binary betting
2022-09-26 19:28:54 -05:00 · 2022-09-26 19:28:54 -05:00 · e17a59ae23
commit e17a59ae23
parent 2fe9fe593d
10 changed files with 305 additions and 185 deletions
--- a/web/components/amount-input.tsx
+++ b/web/components/amount-input.tsx
@ -5,7 +5,8 @@ import { formatMoney } from 'common/util/format'
 import { Col } from './layout/col'
 import { SiteLink } from './site-link'
 import { ENV_CONFIG } from 'common/envs/constants'
-import { useIsMobile } from 'web/hooks/use-is-mobile'
+import { useWindowSize } from 'web/hooks/use-window-size'
+import { Row } from './layout/row'

 export function AmountInput(props: {
  amount: number | undefined
@ -34,15 +35,22 @@ export function AmountInput(props: {
    const isInvalid = !str || isNaN(amount)
    onChange(isInvalid ? undefined : amount)
  }
-  const isMobile = useIsMobile(768)
+
+  const { width } = useWindowSize()
+  const isMobile = (width ?? 0) < 768
+
  return (
+    <>
      <Col className={className}>
-      <label className="input-group mb-4">
-        <span className="bg-gray-200 text-sm">{label}</span>
+        <label className="font-sm md:font-lg">
+          <span className={clsx('text-greyscale-4 absolute ml-2 mt-[9px]')}>
+            {label}
+          </span>
          <input
            className={clsx(
-            'input input-bordered max-w-[200px] text-lg placeholder:text-gray-400',
+              'placeholder:text-greyscale-4 border-greyscale-2 rounded-md pl-9',
              error && 'input-error',
+              isMobile ? 'w-24' : '',
              inputClassName
            )}
            ref={inputRef}
@ -59,7 +67,7 @@ export function AmountInput(props: {
        </label>

        {error && (
-        <div className="mb-2 mr-auto self-center whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
+          <div className="absolute mt-11 whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
            {error === 'Insufficient balance' ? (
              <>
                Not enough funds.
@ -73,6 +81,7 @@ export function AmountInput(props: {
          </div>
        )}
      </Col>
+    </>
  )
 }

@ -135,6 +144,7 @@ export function BuyAmountInput(props: {

  return (
    <>
+      <Row className="gap-4">
        <AmountInput
          amount={amount}
          onChange={onAmountChange}
@ -152,10 +162,11 @@ export function BuyAmountInput(props: {
            max="205"
            value={getRaw(amount ?? 0)}
            onChange={(e) => onAmountChange(parseRaw(parseInt(e.target.value)))}
-          className="range range-lg only-thumb z-40 mb-2 xl:hidden"
+            className="range range-lg only-thumb z-40 my-auto align-middle xl:hidden"
            step="5"
          />
        )}
+      </Row>
    </>
  )
 }
--- a/web/components/answers/answer-bet-panel.tsx
+++ b/web/components/answers/answer-bet-panel.tsx
@ -182,9 +182,9 @@ export function AnswerBetPanel(props: {
      </Col>

      <Spacer h={6} />
-
      {user ? (
        <WarningConfirmationButton
+          amount={betAmount}
          warning={warning}
          onSubmit={submitBet}
          isSubmitting={isSubmitting}
--- a/web/components/bet-button.tsx
+++ b/web/components/bet-button.tsx
@ -1,8 +1,12 @@
 import { useState } from 'react'
 import clsx from 'clsx'

-import { SimpleBetPanel } from './bet-panel'
-import { CPMMBinaryContract, PseudoNumericContract } from 'common/contract'
+import { BuyPanel, SimpleBetPanel } from './bet-panel'
+import {
+  BinaryContract,
+  CPMMBinaryContract,
+  PseudoNumericContract,
+} from 'common/contract'
 import { Modal } from './layout/modal'
 import { useUser } from 'web/hooks/use-user'
 import { useUserContractBets } from 'web/hooks/use-user-bets'
@ -10,6 +14,9 @@ import { useSaveBinaryShares } from './use-save-binary-shares'
 import { Col } from './layout/col'
 import { Button } from 'web/components/button'
 import { BetSignUpPrompt } from './sign-up-prompt'
+import { User } from 'web/lib/firebase/users'
+import { SellRow } from './sell-row'
+import { useUnfilledBets } from 'web/hooks/use-bets'

 /** Button that opens BetPanel in a new modal */
 export default function BetButton(props: {
@ -64,7 +71,6 @@ export default function BetButton(props: {
        <SimpleBetPanel
          className={betPanelClassName}
          contract={contract}
-          selected="YES"
          onBetSuccess={() => setOpen(false)}
          hasShares={hasYesShares || hasNoShares}
        />
@ -72,3 +78,44 @@ export default function BetButton(props: {
    </>
  )
 }
+
+export function BinaryMobileBetting(props: { contract: BinaryContract }) {
+  const { contract } = props
+  const user = useUser()
+  if (user) {
+    return <SignedInBinaryMobileBetting contract={contract} user={user} />
+  } else {
+    return <BetSignUpPrompt className="w-full" />
+  }
+}
+
+export function SignedInBinaryMobileBetting(props: {
+  contract: BinaryContract
+  user: User
+}) {
+  const { contract, user } = props
+  const unfilledBets = useUnfilledBets(contract.id) ?? []
+
+  return (
+    <>
+      <Col className="w-full gap-2 px-1">
+        <Col>
+          <BuyPanel
+            hidden={false}
+            contract={contract as CPMMBinaryContract}
+            user={user}
+            unfilledBets={unfilledBets}
+            mobileView={true}
+          />
+        </Col>
+        <SellRow
+          contract={contract}
+          user={user}
+          className={
+            'border-greyscale-3 bg-greyscale-1 rounded-md border-2 px-4 py-2'
+          }
+        />
+      </Col>
+    </>
+  )
+}
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@ -43,6 +43,11 @@ import { PlayMoneyDisclaimer } from './play-money-disclaimer'
 import { isAndroid, isIOS } from 'web/lib/util/device'
 import { WarningConfirmationButton } from './warning-confirmation-button'
 import { MarketIntroPanel } from './market-intro-panel'
+import { Modal } from './layout/modal'
+import { Title } from './title'
+import toast from 'react-hot-toast'
+import { CheckIcon } from '@heroicons/react/solid'
+import { useWindowSize } from 'web/hooks/use-window-size'

 export function BetPanel(props: {
  contract: CPMMBinaryContract | PseudoNumericContract
@ -105,11 +110,10 @@ export function BetPanel(props: {
 export function SimpleBetPanel(props: {
  contract: CPMMBinaryContract | PseudoNumericContract
  className?: string
-  selected?: 'YES' | 'NO'
  hasShares?: boolean
  onBetSuccess?: () => void
 }) {
-  const { contract, className, selected, hasShares, onBetSuccess } = props
+  const { contract, className, hasShares, onBetSuccess } = props

  const user = useUser()
  const [isLimitOrder, setIsLimitOrder] = useState(false)
@ -139,7 +143,6 @@ export function SimpleBetPanel(props: {
          contract={contract}
          user={user}
          unfilledBets={unfilledBets}
-          selected={selected}
          onBuySuccess={onBetSuccess}
        />
        <LimitOrderPanel
@ -162,38 +165,52 @@ export function SimpleBetPanel(props: {
  )
 }

-function BuyPanel(props: {
+export function BuyPanel(props: {
  contract: CPMMBinaryContract | PseudoNumericContract
  user: User | null | undefined
  unfilledBets: Bet[]
  hidden: boolean
-  selected?: 'YES' | 'NO'
  onBuySuccess?: () => void
+  mobileView?: boolean
 }) {
-  const { contract, user, unfilledBets, hidden, selected, onBuySuccess } = props
+  const { contract, user, unfilledBets, hidden, onBuySuccess, mobileView } =
+    props

  const initialProb = getProbability(contract)
  const isPseudoNumeric = contract.outcomeType === 'PSEUDO_NUMERIC'

-  const [outcome, setOutcome] = useState<'YES' | 'NO' | undefined>(selected)
-  const [betAmount, setBetAmount] = useState<number | undefined>(undefined)
+  const windowSize = useWindowSize()
+  const initialOutcome =
+    windowSize.width && windowSize.width >= 1280 ? 'YES' : undefined
+  const [outcome, setOutcome] = useState<'YES' | 'NO' | undefined>(
+    initialOutcome
+  )
+  const [betAmount, setBetAmount] = useState<number | undefined>(10)
  const [error, setError] = useState<string | undefined>()
  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [wasSubmitted, setWasSubmitted] = useState(false)

  const [inputRef, focusAmountInput] = useFocus()

  function onBetChoice(choice: 'YES' | 'NO') {
    setOutcome(choice)
-    setWasSubmitted(false)

    if (!isIOS() && !isAndroid()) {
      focusAmountInput()
    }
  }

+  function mobileOnBetChoice(choice: 'YES' | 'NO' | undefined) {
+    if (outcome === choice) {
+      setOutcome(undefined)
+    } else {
+      setOutcome(choice)
+    }
+    if (!isIOS() && !isAndroid()) {
+      focusAmountInput()
+    }
+  }
+
  function onBetChange(newAmount: number | undefined) {
-    setWasSubmitted(false)
    setBetAmount(newAmount)
    if (!outcome) {
      setOutcome('YES')
@ -214,9 +231,13 @@ function BuyPanel(props: {
      .then((r) => {
        console.log('placed bet. Result:', r)
        setIsSubmitting(false)
-        setWasSubmitted(true)
        setBetAmount(undefined)
        if (onBuySuccess) onBuySuccess()
+        else {
+          toast('Trade submitted!', {
+            icon: <CheckIcon className={'text-primary h-5 w-5'} />,
+          })
+        }
      })
      .catch((e) => {
        if (e instanceof APIError) {
@ -249,6 +270,7 @@ function BuyPanel(props: {
    unfilledBets as LimitBet[]
  )

+  const [seeLimit, setSeeLimit] = useState(false)
  const resultProb = getCpmmProbability(newPool, newP)
  const probStayedSame =
    formatPercent(resultProb) === formatPercent(initialProb)
@ -281,22 +303,79 @@ function BuyPanel(props: {

  return (
    <Col className={hidden ? 'hidden' : ''}>
-      <div className="my-3 text-left text-sm text-gray-500">
-        {isPseudoNumeric ? 'Direction' : 'Outcome'}
-      </div>
      <YesNoSelector
        className="mb-4"
        btnClassName="flex-1"
        selected={outcome}
-        onSelect={(choice) => onBetChoice(choice)}
+        onSelect={(choice) => {
+          if (mobileView) {
+            mobileOnBetChoice(choice)
+          } else {
+            onBetChoice(choice)
+          }
+        }}
        isPseudoNumeric={isPseudoNumeric}
      />

-      <Row className="my-3 justify-between text-left text-sm text-gray-500">
-        Amount
-        <span className={'xl:hidden'}>
-          Balance: {formatMoney(user?.balance ?? 0)}
+      <Col
+        className={clsx(
+          mobileView
+            ? outcome === 'NO'
+              ? 'bg-red-25'
+              : outcome === 'YES'
+              ? 'bg-teal-50'
+              : 'hidden'
+            : 'bg-white',
+          mobileView ? 'rounded-lg px-4 py-2' : 'px-0'
+        )}
+      >
+        <Row className="mt-3 w-full gap-3">
+          <Col className="w-1/2 text-sm">
+            <Col className="text-greyscale-4 flex-nowrap whitespace-nowrap text-xs">
+              <div>
+                {isPseudoNumeric ? (
+                  'Max payout'
+                ) : (
+                  <>Payout if {outcome ?? 'YES'}</>
+                )}
+              </div>
+            </Col>
+            <div>
+              <span className="whitespace-nowrap text-xl">
+                {formatMoney(currentPayout)}
              </span>
+              <span className="text-greyscale-4 text-xs">
+                {' '}
+                +{currentReturnPercent}
+              </span>
+            </div>
+          </Col>
+          <Col className="w-1/2 text-sm">
+            <div className="text-greyscale-4 text-xs">
+              {isPseudoNumeric ? 'Estimated value' : 'New Probability'}
+            </div>
+            {probStayedSame ? (
+              <div className="text-xl">{format(initialProb)}</div>
+            ) : (
+              <div className="text-xl">
+                {format(resultProb)}
+                <span className={clsx('text-greyscale-4 text-xs')}>
+                  {isPseudoNumeric ? (
+                    <></>
+                  ) : (
+                    <>
+                      {' '}
+                      {outcome != 'NO' && '+'}
+                      {format(resultProb - initialProb)}
+                    </>
+                  )}
+                </span>
+              </div>
+            )}
+          </Col>
+        </Row>
+        <Row className="text-greyscale-4 mt-4 mb-1 justify-between text-left text-xs">
+          Amount
        </Row>

        <BuyAmountInput
@ -310,63 +389,46 @@ function BuyPanel(props: {
          showSliderOnMobile
        />

-      <Col className="mt-3 w-full gap-3">
-        <Row className="items-center justify-between text-sm">
-          <div className="text-gray-500">
-            {isPseudoNumeric ? 'Estimated value' : 'Probability'}
-          </div>
-          {probStayedSame ? (
-            <div>{format(initialProb)}</div>
-          ) : (
-            <div>
-              {format(initialProb)}
-              <span className="mx-2">→</span>
-              {format(resultProb)}
-            </div>
-          )}
-        </Row>
-
-        <Row className="items-center justify-between gap-2 text-sm">
-          <Row className="flex-nowrap items-center gap-2 whitespace-nowrap text-gray-500">
-            <div>
-              {isPseudoNumeric ? (
-                'Max payout'
-              ) : (
-                <>
-                  Payout if <BinaryOutcomeLabel outcome={outcome ?? 'YES'} />
-                </>
-              )}
-            </div>
-          </Row>
-          <div>
-            <span className="mr-2 whitespace-nowrap">
-              {formatMoney(currentPayout)}
-            </span>
-            (+{currentReturnPercent})
-          </div>
-        </Row>
-      </Col>
-
        <Spacer h={8} />

        {user && (
          <WarningConfirmationButton
+            amount={betAmount}
+            outcome={outcome}
            warning={warning}
            onSubmit={submitBet}
            isSubmitting={isSubmitting}
-          disabled={!!betDisabled}
            openModalButtonClass={clsx(
              'btn mb-2 flex-1',
              betDisabled
-              ? 'btn-disabled'
-              : outcome === 'YES'
-              ? 'btn-primary'
-              : 'border-none bg-red-400 hover:bg-red-500'
+                ? 'btn-disabled bg-greyscale-1'
+                : outcome === 'NO'
+                ? 'border-none bg-red-400 hover:bg-red-500'
+                : 'border-none bg-teal-500 hover:bg-teal-600'
            )}
          />
        )}
-
-      {wasSubmitted && <div className="mt-4">Trade submitted!</div>}
+        <button
+          className="text-greyscale-6 mx-auto select-none text-sm underline xl:hidden"
+          onClick={() => setSeeLimit(true)}
+        >
+          Advanced
+        </button>
+        <Modal
+          open={seeLimit}
+          setOpen={setSeeLimit}
+          position="center"
+          className="rounded-lg bg-white px-4 pb-8"
+        >
+          <Title text="Limit Order" />
+          <LimitOrderPanel
+            hidden={!seeLimit}
+            contract={contract}
+            user={user}
+            unfilledBets={unfilledBets}
+          />
+        </Modal>
+      </Col>
    </Col>
  )
 }
@ -389,7 +451,6 @@ function LimitOrderPanel(props: {
  const betChoice = 'YES'
  const [error, setError] = useState<string | undefined>()
  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [wasSubmitted, setWasSubmitted] = useState(false)

  const rangeError =
    lowLimitProb !== undefined &&
@ -437,7 +498,6 @@ function LimitOrderPanel(props: {
  const noAmount = shares * (1 - (noLimitProb ?? 0))

  function onBetChange(newAmount: number | undefined) {
-    setWasSubmitted(false)
    setBetAmount(newAmount)
  }

@ -482,7 +542,6 @@ function LimitOrderPanel(props: {
      .then((r) => {
        console.log('placed bet. Result:', r)
        setIsSubmitting(false)
-        setWasSubmitted(true)
        setBetAmount(undefined)
        setLowLimitProb(undefined)
        setHighLimitProb(undefined)
@ -718,8 +777,6 @@ function LimitOrderPanel(props: {
            : `Submit order${hasTwoBets ? 's' : ''}`}
        </button>
      )}
-
-      {wasSubmitted && <div className="mt-4">Order submitted!</div>}
    </Col>
  )
 }
@ -866,11 +923,7 @@ export function SellPanel(props: {
    <>
      <AmountInput
        amount={
-          amount
-            ? Math.round(amount) === 0
-              ? 0
-              : Math.floor(amount)
-            : undefined
+          amount ? (Math.round(amount) === 0 ? 0 : Math.floor(amount)) : 0
        }
        onChange={onAmountChange}
        label="Qty"
--- a/web/components/contract/contract-overview.tsx
+++ b/web/components/contract/contract-overview.tsx
@ -13,17 +13,16 @@ import {
  PseudoNumericResolutionOrExpectation,
 } from './contract-card'
 import { Bet } from 'common/bet'
-import BetButton from '../bet-button'
+import BetButton, { BinaryMobileBetting } from '../bet-button'
 import { AnswersGraph } from '../answers/answers-graph'
 import {
  Contract,
-  BinaryContract,
  CPMMContract,
-  CPMMBinaryContract,
  FreeResponseContract,
  MultipleChoiceContract,
  NumericContract,
  PseudoNumericContract,
+  BinaryContract,
 } from 'common/contract'
 import { ContractDetails } from './contract-details'
 import { NumericGraph } from './numeric-graph'
@ -78,19 +77,18 @@ const BinaryOverview = (props: { contract: BinaryContract; bets: Bet[] }) => {
        <Row className="justify-between gap-4">
          <OverviewQuestion text={contract.question} />
          <BinaryResolutionOrChance
-            className="hidden items-end xl:flex"
+            className="flex items-end"
            contract={contract}
            large
          />
        </Row>
-        <Row className="items-center justify-between gap-4 xl:hidden">
-          <BinaryResolutionOrChance contract={contract} />
-          {tradingAllowed(contract) && (
-            <BetWidget contract={contract as CPMMBinaryContract} />
-          )}
-        </Row>
      </Col>
      <ContractProbGraph contract={contract} bets={[...bets].reverse()} />
+      <Row className="items-center justify-between gap-4 xl:hidden">
+        {tradingAllowed(contract) && (
+          <BinaryMobileBetting contract={contract} />
+        )}
+      </Row>
    </Col>
  )
 }
--- a/web/components/contract/quick-bet.tsx
+++ b/web/components/contract/quick-bet.tsx
@ -344,7 +344,7 @@ export function getColor(contract: Contract) {
    return (
      OUTCOME_TO_COLOR[resolution as resolution] ??
      // If resolved to a FR answer, use 'primary'
-      'primary'
+      'teal-500'
    )
  }

@ -355,5 +355,5 @@ export function getColor(contract: Contract) {
  }

  // TODO: Not sure why eg green-400 doesn't work here; try upgrading Tailwind
-  return 'primary'
+  return 'teal-500'
 }
--- a/web/components/outcome-label.tsx
+++ b/web/components/outcome-label.tsx
@ -106,7 +106,7 @@ export const OUTCOME_TO_COLOR = {
 }

 export function YesLabel() {
-  return <span className="text-primary">YES</span>
+  return <span className="text-teal-500">YES</span>
 }

 export function HigherLabel() {
--- a/web/components/warning-confirmation-button.tsx
+++ b/web/components/warning-confirmation-button.tsx
@ -4,8 +4,11 @@ import React from 'react'
 import { Row } from './layout/row'
 import { ConfirmationButton } from './confirmation-button'
 import { ExclamationIcon } from '@heroicons/react/solid'
+import { formatMoney } from 'common/util/format'

 export function WarningConfirmationButton(props: {
+  amount: number | undefined
+  outcome?: 'YES' | 'NO' | undefined
  warning?: string
  onSubmit: () => void
  disabled?: boolean
@ -14,12 +17,14 @@ export function WarningConfirmationButton(props: {
  submitButtonClassName?: string
 }) {
  const {
+    amount,
    onSubmit,
    warning,
    disabled,
    isSubmitting,
    openModalButtonClass,
    submitButtonClassName,
+    outcome,
  } = props

  if (!warning) {
@ -28,12 +33,15 @@ export function WarningConfirmationButton(props: {
        className={clsx(
          openModalButtonClass,
          isSubmitting ? 'loading' : '',
-          disabled && 'btn-disabled'
+          (disabled || !outcome) && 'btn-disabled bg-greyscale-2'
        )}
        onClick={onSubmit}
-        disabled={disabled}
      >
-        {isSubmitting ? 'Submitting...' : 'Submit'}
+        {isSubmitting
+          ? 'Submitting...'
+          : amount
+          ? `Wager ${formatMoney(amount)}`
+          : 'Wager'}
      </button>
    )
  }
@ -45,7 +53,7 @@ export function WarningConfirmationButton(props: {
          openModalButtonClass,
          isSubmitting && 'btn-disabled loading'
        ),
-        label: 'Submit',
+        label: amount ? `Wager ${formatMoney(amount)}` : 'Wager',
      }}
      cancelBtn={{
        label: 'Cancel',
--- a/web/components/yes-no-selector.tsx
+++ b/web/components/yes-no-selector.tsx
@ -35,10 +35,11 @@ export function YesNoSelector(props: {
        <button
          className={clsx(
            commonClassNames,
-            'hover:bg-primary-focus border-primary hover:border-primary-focus hover:text-white',
            selected == 'YES'
-              ? 'bg-primary text-white'
-              : 'text-primary bg-white',
+              ? 'border-teal-500 bg-teal-500 text-white'
+              : selected == 'NO'
+              ? 'border-greyscale-3 text-greyscale-3 bg-white hover:border-teal-500 hover:text-teal-500'
+              : 'border-teal-500 bg-white text-teal-500 hover:bg-teal-50',
            btnClassName
          )}
          onClick={() => onSelect('YES')}
@ -52,10 +53,11 @@ export function YesNoSelector(props: {
        <button
          className={clsx(
            commonClassNames,
-            'border-red-400 hover:border-red-500 hover:bg-red-500 hover:text-white',
            selected == 'NO'
-              ? 'bg-red-400 text-white'
-              : 'bg-white text-red-400',
+              ? 'border-red-400 bg-red-400 text-white'
+              : selected == 'YES'
+              ? 'border-greyscale-3 text-greyscale-3 bg-white hover:border-red-400 hover:text-red-400'
+              : 'border-red-400 bg-white text-red-400 hover:bg-red-50',
            btnClassName
          )}
          onClick={() => onSelect('NO')}
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@ -16,6 +16,7 @@ module.exports = {
    ),
    extend: {
      colors: {
+        'red-25': '#FDF7F6',
        'greyscale-1': '#FBFBFF',
        'greyscale-2': '#E7E7F4',
        'greyscale-3': '#D8D8EB',