most kinks down

2022-09-20 21:32:07 -07:00 · 2022-09-20 21:32:07 -07:00 · 0a25561de7
commit 0a25561de7
parent 3d772a8a9b
9 changed files with 201 additions and 172 deletions
--- a/web/components/amount-input.tsx
+++ b/web/components/amount-input.tsx
@ -6,6 +6,7 @@ import { Col } from './layout/col'
 import { SiteLink } from './site-link'
 import { ENV_CONFIG } from 'common/envs/constants'
 import { useWindowSize } from 'web/hooks/use-window-size'
+import { Row } from './layout/row'

 export function AmountInput(props: {
  amount: number | undefined
@ -34,46 +35,58 @@ export function AmountInput(props: {
    const isInvalid = !str || isNaN(amount)
    onChange(isInvalid ? undefined : amount)
  }
+
  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>
-        <input
-          className={clsx(
-            'input input-bordered max-w-[200px] text-lg placeholder:text-gray-400',
-            error && 'input-error',
-            inputClassName
-          )}
-          ref={inputRef}
-          type="text"
-          pattern="[0-9]*"
-          inputMode="numeric"
-          placeholder="0"
-          maxLength={6}
-          autoFocus={!isMobile}
-          value={amount ?? ''}
-          disabled={disabled}
-          onChange={(e) => onAmountChange(e.target.value)}
-        />
-      </label>
+    <>
+      <Col className={className}>
+        <label>
+          {/* <span className="bg-gray-200 text-sm">{label}</span> */}
+          <span
+            className={clsx(
+              'text-greyscale-4 absolute ml-2 mt-[9px]',
+              isMobile ? 'font-sm' : 'font-lg'
+            )}
+          >
+            {label}
+          </span>
+          <input
+            className={clsx(
+              'placeholder:text-greyscale-4 border-greyscale-2 rounded-md pl-9',
+              error && 'input-error',
+              isMobile ? 'font-sm w-24' : 'font-lg',
+              inputClassName
+            )}
+            ref={inputRef}
+            type="text"
+            pattern="[0-9]*"
+            inputMode="numeric"
+            placeholder="0"
+            maxLength={6}
+            autoFocus={!isMobile}
+            value={amount ?? ''}
+            disabled={disabled}
+            onChange={(e) => onAmountChange(e.target.value)}
+          />
+        </label>

-      {error && (
-        <div className="mb-2 mr-auto self-center whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
-          {error === 'Insufficient balance' ? (
-            <>
-              Not enough funds.
-              <span className="ml-1 text-indigo-500">
-                <SiteLink href="/add-funds">Buy more?</SiteLink>
-              </span>
-            </>
-          ) : (
-            error
-          )}
-        </div>
-      )}
-    </Col>
+        {error && (
+          <div className="absolute mt-11 whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
+            {error === 'Insufficient balance' ? (
+              <>
+                Not enough funds.
+                <span className="ml-1 text-indigo-500">
+                  <SiteLink href="/add-funds">Buy more?</SiteLink>
+                </span>
+              </>
+            ) : (
+              error
+            )}
+          </div>
+        )}
+      </Col>
+    </>
  )
 }

@ -136,27 +149,29 @@ export function BuyAmountInput(props: {

  return (
    <>
-      <AmountInput
-        amount={amount}
-        onChange={onAmountChange}
-        label={ENV_CONFIG.moneyMoniker}
-        error={error}
-        disabled={disabled}
-        className={className}
-        inputClassName={inputClassName}
-        inputRef={inputRef}
-      />
-      {showSlider && (
-        <input
-          type="range"
-          min="0"
-          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"
-          step="5"
+      <Row className="gap-4">
+        <AmountInput
+          amount={amount}
+          onChange={onAmountChange}
+          label={ENV_CONFIG.moneyMoniker}
+          error={error}
+          disabled={disabled}
+          className={className}
+          inputClassName={inputClassName}
+          inputRef={inputRef}
        />
-      )}
+        {showSlider && (
+          <input
+            type="range"
+            min="0"
+            max="205"
+            value={getRaw(amount ?? 0)}
+            onChange={(e) => onAmountChange(parseRaw(parseInt(e.target.value)))}
+            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,10 @@ export function AnswerBetPanel(props: {
      </Col>

      <Spacer h={6} />
-
+      {console.log('bet Amount pre', betAmount)}
      {user ? (
        <WarningConfirmationButton
+          amount={betAmount}
          warning={warning}
          onSubmit={submitBet}
          isSubmitting={isSubmitting}
--- a/web/components/bet-button.tsx
+++ b/web/components/bet-button.tsx
@ -25,6 +25,8 @@ import { useFocus } from 'web/hooks/use-focus'
 import { isAndroid, isIOS } from 'web/lib/util/device'
 import { APIError, placeBet } from 'web/lib/firebase/api'
 import { track } from '@amplitude/analytics-browser'
+import toast from 'react-hot-toast'
+import { CheckIcon } from '@heroicons/react/solid'

 /** Button that opens BetPanel in a new modal */
 export default function BetButton(props: {
@ -89,7 +91,7 @@ export default function BetButton(props: {
 }

 export function BinaryMobileBetting(props: {
-  contract: CPMMBinaryContract
+  contract: CPMMBinaryContract | Contract
  className?: string
 }) {
  const { contract, className } = props
@ -110,7 +112,7 @@ export function BinaryMobileBetting(props: {
 }

 export function SignedInBinaryMobileBetting(props: {
-  contract: CPMMBinaryContract
+  contract: CPMMBinaryContract | Contract
  user: User
 }) {
  const { contract, user } = props
@ -122,51 +124,6 @@ export function SignedInBinaryMobileBetting(props: {
  return (
    <>
      <Col className="w-full gap-2 px-1">
-        {/* <SellRow
-          contract={contract}
-          user={user}
-          className={'rounded-t-md bg-gray-100 px-4 py-5'}
-        /> */}
-        {/* <Row className="w-full justify-between gap-4">
-          <button
-            className={clsx(
-              'w-1/2 rounded-full border-2 py-2',
-              betChoice === 'YES'
-                ? 'border-teal-500 bg-teal-500 text-white'
-                : betChoice === 'NO'
-                ? 'border-greyscale-3 text-greyscale-3 bg-white'
-                : 'border-teal-500 bg-white text-teal-500'
-            )}
-            onClick={() => {
-              if (betChoice === 'YES') {
-                setBetChoice(undefined)
-              } else {
-                setBetChoice('YES')
-              }
-            }}
-          >
-            YES
-          </button>
-          <button
-            className={clsx(
-              'w-1/2 rounded-full border-2 py-2',
-              betChoice === 'NO'
-                ? 'border-red-500 bg-red-500 text-white'
-                : betChoice === 'YES'
-                ? 'border-greyscale-3 text-greyscale-3 bg-white'
-                : 'border-red-500 bg-white text-red-500'
-            )}
-            onClick={() => {
-              if (betChoice === 'NO') {
-                setBetChoice(undefined)
-              } else {
-                setBetChoice('NO')
-              }
-            }}
-          >
-            NO
-          </button>
-        </Row> */}
        <Col>
          <BuyPanel
            hidden={false}
@ -175,9 +132,15 @@ export function SignedInBinaryMobileBetting(props: {
            unfilledBets={unfilledBets}
            selected={betChoice}
            mobileView={true}
-            // onBuySuccess={onBetSuccess}>
          />
        </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
@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import React, { useState } from 'react'
-import { clamp, partition, sumBy } from 'lodash'
+import { clamp, floor, partition, sumBy } from 'lodash'

 import { useUser } from 'web/hooks/use-user'
 import { CPMMBinaryContract, PseudoNumericContract } from 'common/contract'
@ -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
@ -116,6 +121,8 @@ export function SimpleBetPanel(props: {

  const unfilledBets = useUnfilledBets(contract.id) ?? []

+  console.log('limit order', isLimitOrder)
+
  return (
    <Col className={className}>
      <SellRow
@ -169,6 +176,7 @@ export function BuyPanel(props: {
  hidden: boolean
  selected?: 'YES' | 'NO'
  onBuySuccess?: () => void
+  onAdvanced?: () => void
  mobileView?: boolean
 }) {
  const {
@ -178,14 +186,21 @@ export function BuyPanel(props: {
    hidden,
    selected,
    onBuySuccess,
+    onAdvanced,
    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
+  console.log('initialOutcome>', initialOutcome)
+  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)
@ -239,6 +254,11 @@ export function BuyPanel(props: {
        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) {
@ -271,6 +291,7 @@ export function BuyPanel(props: {
    unfilledBets as LimitBet[]
  )

+  const [seeLimit, setSeeLimit] = useState(false)
  const resultProb = getCpmmProbability(newPool, newP)
  const probStayedSame =
    formatPercent(resultProb) === formatPercent(initialProb)
@ -305,9 +326,6 @@ export function BuyPanel(props: {
    <Col className={hidden ? 'hidden' : ''}>
      {!mobileView && (
        <>
-          <div className="my-3 text-left text-sm text-gray-500">
-            {isPseudoNumeric ? 'Direction' : 'Outcome'}
-          </div>
          <YesNoSelector
            className="mb-4"
            btnClassName="flex-1"
@ -333,14 +351,59 @@ export function BuyPanel(props: {
        className={clsx(
          mobileView
            ? outcome === 'NO'
-              ? 'bg-red-50'
+              ? 'bg-red-25'
              : outcome === 'YES'
              ? 'bg-teal-50'
              : 'hidden'
-            : 'bg-white'
+            : 'bg-white',
+          mobileView ? 'rounded-lg px-4 py-2' : 'px-0'
        )}
      >
-        <Row className="my-3 justify-between text-left text-sm text-gray-500">
+        <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'
+                    // outcome === 'YES' ? 'text-teal-500' : 'text-red-400'
+                  )}
+                >
+                  {' '}
+                  {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
          {/* <span className={'xl:hidden'}>
          Balance: {formatMoney(user?.balance ?? 0)}
@ -358,63 +421,47 @@ export 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}
            warning={warning}
            onSubmit={submitBet}
            isSubmitting={isSubmitting}
-            disabled={!!betDisabled}
+            // 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>}
+        {/* {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>
  )
@ -915,11 +962,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/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,10 @@ 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
  warning?: string
  onSubmit: () => void
  disabled?: boolean
@ -14,6 +16,7 @@ export function WarningConfirmationButton(props: {
  submitButtonClassName?: string
 }) {
  const {
+    amount,
    onSubmit,
    warning,
    disabled,
@ -31,9 +34,12 @@ export function WarningConfirmationButton(props: {
          disabled && 'btn-disabled'
        )}
        onClick={onSubmit}
-        disabled={disabled}
      >
-        {isSubmitting ? 'Submitting...' : 'Submit'}
+        {isSubmitting
+          ? 'Submitting...'
+          : amount
+          ? `Wager ${formatMoney(amount)}`
+          : 'Wager'}
      </button>
    )
  }
@ -45,7 +51,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
@ -38,7 +38,7 @@ export function YesNoSelector(props: {
            selected == 'YES'
              ? 'border-teal-500 bg-teal-500 text-white'
              : selected == 'NO'
-              ? 'border-greyscale-3 text-greyscale-3 bg-white'
+              ? '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
          )}
@ -54,10 +54,10 @@ export function YesNoSelector(props: {
          className={clsx(
            commonClassNames,
            selected == 'NO'
-              ? 'border-red-500 bg-red-500 text-white'
+              ? 'border-red-400 bg-red-400 text-white'
              : selected == 'YES'
-              ? 'border-greyscale-3 text-greyscale-3 bg-white'
-              : 'border-red-500 bg-white text-red-500 hover:bg-red-50',
+              ? '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
@ -19,6 +19,7 @@ module.exports = {
        'world-trading': "url('/world-trading-background.webp')",
      },
      colors: {
+        'red-25': '#FDF7F6',
        'greyscale-1': '#FBFBFF',
        'greyscale-2': '#E7E7F4',
        'greyscale-3': '#D8D8EB',