Revert "Show challenge on desktop, simplify modal"

This reverts commit 8922b370cc.

web/components/challenges/create-challenge-modal.tsx

@@ -18,6 +18,7 @@ import { NoLabel, YesLabel } from '../outcome-label'
 import { QRCode } from '../qr-code'
 import { copyToClipboard } from 'web/lib/util/copy'
 import { AmountInput } from '../amount-input'
+import { getProbability } from 'common/calculate'
 import { createMarket } from 'web/lib/firebase/api'
 import { removeUndefinedProps } from 'common/util/object'
 import { FIXED_ANTE } from 'common/economy'
@@ -25,7 +26,6 @@ import Textarea from 'react-expanding-textarea'
 import { useTextEditor } from 'web/components/editor'
 import { LoadingIndicator } from 'web/components/loading-indicator'
 import { track } from 'web/lib/service/analytics'
-import { useWindowSize } from 'web/hooks/use-window-size'
 
 type challengeInfo = {
   amount: number
@@ -110,9 +110,8 @@ function CreateChallengeForm(props: {
   const [isCreating, setIsCreating] = useState(false)
   const [finishedCreating, setFinishedCreating] = useState(false)
   const [error, setError] = useState<string>('')
+  const [editingAcceptorAmount, setEditingAcceptorAmount] = useState(false)
   const defaultExpire = 'week'
-  const { width } = useWindowSize()
-  const isMobile = (width ?? 0) < 768
 
   const [challengeInfo, setChallengeInfo] = useState<challengeInfo>({
     expiresTime: dayjs().add(2, defaultExpire).valueOf(),
@@ -148,7 +147,7 @@ function CreateChallengeForm(props: {
             setFinishedCreating(true)
           }}
         >
-          <Title className="!mt-2 hidden sm:block" text="Challenge bet " />
+          <Title className="!mt-2" text="Challenge bet " />
 
           <div className="mb-8">
             Challenge a friend to bet on{' '}
@@ -158,7 +157,7 @@ function CreateChallengeForm(props: {
               <Textarea
                 placeholder="e.g. Will a Democrat be the next president?"
                 className="input input-bordered mt-1 w-full resize-none"
-                autoFocus={!isMobile}
+                autoFocus={true}
                 maxLength={MAX_QUESTION_LENGTH}
                 value={challengeInfo.question}
                 onChange={(e) =>
@@ -171,59 +170,89 @@ function CreateChallengeForm(props: {
             )}
           </div>
 
-          <Col className="mt-2 flex-wrap justify-center gap-x-5 gap-y-0 sm:gap-y-2">
+          <div className="mt-2 flex flex-col flex-wrap justify-center gap-x-5 gap-y-2">
-            <Col>
+            <div>You'll bet:</div>
-              <div>You'll bet:</div>
+            <Row
-              <Row
+              className={
-                className={
+                'form-control w-full max-w-xs items-center justify-between gap-4 pr-3'
-                  'form-control w-full max-w-xs items-center justify-between gap-4 pr-3'
+              }
+            >
+              <AmountInput
+                amount={challengeInfo.amount || undefined}
+                onChange={(newAmount) =>
+                  setChallengeInfo((m: challengeInfo) => {
+                    return {
+                      ...m,
+                      amount: newAmount ?? 0,
+                      acceptorAmount: editingAcceptorAmount
+                        ? m.acceptorAmount
+                        : newAmount ?? 0,
+                    }
+                  })
+                }
+                error={undefined}
+                label={'M$'}
+                inputClassName="w-24"
+              />
+              <span className={''}>on</span>
+              {challengeInfo.outcome === 'YES' ? <YesLabel /> : <NoLabel />}
+            </Row>
+            <Row className={'mt-3 max-w-xs justify-end'}>
+              <Button
+                color={'gray-white'}
+                onClick={() =>
+                  setChallengeInfo((m: challengeInfo) => {
+                    return {
+                      ...m,
+                      outcome: m.outcome === 'YES' ? 'NO' : 'YES',
+                    }
+                  })
                 }
               >
+                <SwitchVerticalIcon className={'h-6 w-6'} />
+              </Button>
+            </Row>
+            <Row className={'items-center'}>If they bet:</Row>
+            <Row className={'max-w-xs items-center justify-between gap-4 pr-3'}>
+              <div className={'w-32 sm:mr-1'}>
                 <AmountInput
-                  amount={challengeInfo.amount || undefined}
+                  amount={challengeInfo.acceptorAmount || undefined}
-                  onChange={(newAmount) =>
+                  onChange={(newAmount) => {
+                    setEditingAcceptorAmount(true)
+
                     setChallengeInfo((m: challengeInfo) => {
                       return {
                         ...m,
-                        amount: newAmount ?? 0,
                         acceptorAmount: newAmount ?? 0,
                       }
                     })
-                  }
+                  }}
                   error={undefined}
                   label={'M$'}
                   inputClassName="w-24"
                 />
-                <span className={''}>on</span>
-                {challengeInfo.outcome === 'YES' ? <YesLabel /> : <NoLabel />}
-              </Row>
-              <Row className={'max-w-xs justify-end'}>
-                <Button
-                  color={'gray-white'}
-                  onClick={() =>
-                    setChallengeInfo((m: challengeInfo) => {
-                      return {
-                        ...m,
-                        outcome: m.outcome === 'YES' ? 'NO' : 'YES',
-                      }
-                    })
-                  }
-                >
-                  <SwitchVerticalIcon className={'h-6 w-6'} />
-                </Button>
-              </Row>
-            </Col>
-            <Row className={'items-center'}>If they bet:</Row>
-            <Row className={'max-w-xs items-center justify-between gap-4 pr-3'}>
-              <div className={'mt-1 w-32 sm:mr-1'}>
-                <span className={'ml-2 font-bold'}>
-                  {formatMoney(challengeInfo.acceptorAmount)}
-                </span>
               </div>
               <span>on</span>
               {challengeInfo.outcome === 'YES' ? <NoLabel /> : <YesLabel />}
             </Row>
-          </Col>
+          </div>
+          {contract && (
+            <Button
+              size="2xs"
+              color="gray"
+              onClick={() => {
+                setEditingAcceptorAmount(true)
+
+                const p = getProbability(contract)
+                const prob = challengeInfo.outcome === 'YES' ? p : 1 - p
+                const { amount } = challengeInfo
+                const acceptorAmount = Math.round(amount / prob - amount)
+                setChallengeInfo({ ...challengeInfo, acceptorAmount })
+              }}
+            >
+              Use market odds
+            </Button>
+          )}
           <div className="mt-8">
             If the challenge is accepted, whoever is right will earn{' '}
             <span className="font-semibold">

web/components/contract/share-modal.tsx

@@ -12,15 +12,13 @@ import { TweetButton } from '../tweet-button'
 import { DuplicateContractButton } from '../copy-contract-button'
 import { Button } from '../button'
 import { copyToClipboard } from 'web/lib/util/copy'
-import { track, withTracking } from 'web/lib/service/analytics'
+import { track } from 'web/lib/service/analytics'
 import { ENV_CONFIG } from 'common/envs/constants'
 import { User } from 'common/user'
 import { SiteLink } from '../site-link'
 import { formatMoney } from 'common/util/format'
 import { REFERRAL_AMOUNT } from 'common/economy'
-import { CreateChallengeModal } from 'web/components/challenges/create-challenge-modal'
 import { useState } from 'react'
-import { CHALLENGES_ENABLED } from 'common/challenge'
 
 export function ShareModal(props: {
   contract: Contract
@@ -29,14 +27,9 @@ export function ShareModal(props: {
   setOpen: (open: boolean) => void
 }) {
   const { contract, user, isOpen, setOpen } = props
-  const { outcomeType, resolution } = contract
 
-  const [openCreateChallengeModal, setOpenCreateChallengeModal] =
+  useState(false)
-    useState(false)
   const linkIcon = <LinkIcon className="mr-2 h-6 w-6" aria-hidden="true" />
-  const showChallenge =
-    user && outcomeType === 'BINARY' && !resolution && CHALLENGES_ENABLED
-
   const shareUrl = `https://${ENV_CONFIG.domain}${contractPath(contract)}${
     user?.username && contract.creatorUsername !== user?.username
       ? '?referrer=' + user?.username
@@ -45,7 +38,7 @@ export function ShareModal(props: {
 
   return (
     <Modal open={isOpen} setOpen={setOpen} size="md">
-      <Col className="gap-2.5 rounded  bg-white p-4 sm:gap-4">
+      <Col className="gap-4 rounded bg-white p-4">
         <Title className="!mt-0 !mb-2" text="Share this market" />
         <p>
           Earn{' '}
@@ -57,7 +50,7 @@ export function ShareModal(props: {
         <Button
           size="2xl"
           color="gradient"
-          className={'flex max-w-xs self-center'}
+          className={'mb-2 flex max-w-xs self-center'}
           onClick={() => {
             copyToClipboard(shareUrl)
             toast.success('Link copied!', {
@@ -68,31 +61,6 @@ export function ShareModal(props: {
         >
           {linkIcon} Copy link
         </Button>
-        <Row className={'justify-center'}>or</Row>
-        {showChallenge && (
-          <Button
-            size="2xl"
-            color="gradient"
-            className={'mb-2 flex max-w-xs self-center'}
-            onClick={withTracking(
-              () => setOpenCreateChallengeModal(true),
-              'click challenge button'
-            )}
-          >
-            <span>⚔️ Challenge</span>
-            <CreateChallengeModal
-              isOpen={openCreateChallengeModal}
-              setOpen={(open) => {
-                if (!open) {
-                  setOpenCreateChallengeModal(false)
-                  setOpen(false)
-                } else setOpenCreateChallengeModal(open)
-              }}
-              user={user}
-              contract={contract}
-            />
-          </Button>
-        )}
         <Row className="z-0 flex-wrap justify-center gap-4 self-center">
           <TweetButton
             className="self-start"