most kinks down

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">
+      <Col className={className}>
-        <span className="bg-gray-200 text-sm">{label}</span>
+        <label>
-        <input
+          {/* <span className="bg-gray-200 text-sm">{label}</span> */}
-          className={clsx(
+          <span
-            'input input-bordered max-w-[200px] text-lg placeholder:text-gray-400',
+            className={clsx(
-            error && 'input-error',
+              'text-greyscale-4 absolute ml-2 mt-[9px]',
-            inputClassName
+              isMobile ? 'font-sm' : 'font-lg'
-          )}
+            )}
-          ref={inputRef}
+          >
-          type="text"
+            {label}
-          pattern="[0-9]*"
+          </span>
-          inputMode="numeric"
+          <input
-          placeholder="0"
+            className={clsx(
-          maxLength={6}
+              'placeholder:text-greyscale-4 border-greyscale-2 rounded-md pl-9',
-          autoFocus={!isMobile}
+              error && 'input-error',
-          value={amount ?? ''}
+              isMobile ? 'font-sm w-24' : 'font-lg',
-          disabled={disabled}
+              inputClassName
-          onChange={(e) => onAmountChange(e.target.value)}
+            )}
-        />
+            ref={inputRef}
-      </label>
+            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 && (
+        {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' ? (
+            {error === 'Insufficient balance' ? (
-            <>
+              <>
-              Not enough funds.
+                Not enough funds.
-              <span className="ml-1 text-indigo-500">
+                <span className="ml-1 text-indigo-500">
-                <SiteLink href="/add-funds">Buy more?</SiteLink>
+                  <SiteLink href="/add-funds">Buy more?</SiteLink>
-              </span>
+                </span>
-            </>
+              </>
-          ) : (
+            ) : (
-            error
+              error
-          )}
+            )}
-        </div>
+          </div>
-      )}
+        )}
-    </Col>
+      </Col>
+    </>
   )
 }
 
@@ -136,27 +149,29 @@ export function BuyAmountInput(props: {
 
   return (
     <>
-      <AmountInput
+      <Row className="gap-4">
-        amount={amount}
+        <AmountInput
-        onChange={onAmountChange}
+          amount={amount}
-        label={ENV_CONFIG.moneyMoniker}
+          onChange={onAmountChange}
-        error={error}
+          label={ENV_CONFIG.moneyMoniker}
-        disabled={disabled}
+          error={error}
-        className={className}
+          disabled={disabled}
-        inputClassName={inputClassName}
+          className={className}
-        inputRef={inputRef}
+          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"
         />
-      )}
+        {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>
     </>
   )
 }

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}

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>
     </>
   )

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 windowSize = useWindowSize()
-  const [betAmount, setBetAmount] = useState<number | undefined>(undefined)
+  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'
+                ? 'btn-disabled bg-greyscale-1'
-                : outcome === 'YES'
+                : outcome === 'NO'
-                ? 'btn-primary'
+                ? 'border-none bg-red-400 hover:bg-red-500'
-                : '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
+          amount ? (Math.round(amount) === 0 ? 0 : Math.floor(amount)) : 0
-            ? Math.round(amount) === 0
-              ? 0
-              : Math.floor(amount)
-            : undefined
         }
         onChange={onAmountChange}
         label="Qty"

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'
 }

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() {

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',

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-greyscale-3 text-greyscale-3 bg-white hover:border-red-400 hover:text-red-400'
-              : 'border-red-500 bg-white text-red-500 hover:bg-red-50',
+              : 'border-red-400 bg-white text-red-400 hover:bg-red-50',
             btnClassName
           )}
           onClick={() => onSelect('NO')}

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',