Revert "Show challenge on desktop, simplify modal"
This reverts commit 8922b370cc.
This commit is contained in:
mantikoros
parent
8952b100ad
commit
837a4d8949
|
|
@ -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,8 +170,7 @@ function CreateChallengeForm(props: {
|
|||
)}
|
||||
</div>
|
||||
|
||||
<Col className="mt-2 flex-wrap justify-center gap-x-5 gap-y-0 sm:gap-y-2">
|
||||
<Col>
|
||||
<div className="mt-2 flex flex-col flex-wrap justify-center gap-x-5 gap-y-2">
|
||||
<div>You'll bet:</div>
|
||||
<Row
|
||||
className={
|
||||
|
|
@ -186,7 +184,9 @@ function CreateChallengeForm(props: {
|
|||
return {
|
||||
...m,
|
||||
amount: newAmount ?? 0,
|
||||
acceptorAmount: newAmount ?? 0,
|
||||
acceptorAmount: editingAcceptorAmount
|
||||
? m.acceptorAmount
|
||||
: newAmount ?? 0,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -197,7 +197,7 @@ function CreateChallengeForm(props: {
|
|||
<span className={''}>on</span>
|
||||
{challengeInfo.outcome === 'YES' ? <YesLabel /> : <NoLabel />}
|
||||
</Row>
|
||||
<Row className={'max-w-xs justify-end'}>
|
||||
<Row className={'mt-3 max-w-xs justify-end'}>
|
||||
<Button
|
||||
color={'gray-white'}
|
||||
onClick={() =>
|
||||
|
|
@ -212,18 +212,47 @@ function CreateChallengeForm(props: {
|
|||
<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 className={'w-32 sm:mr-1'}>
|
||||
<AmountInput
|
||||
amount={challengeInfo.acceptorAmount || undefined}
|
||||
onChange={(newAmount) => {
|
||||
setEditingAcceptorAmount(true)
|
||||
|
||||
setChallengeInfo((m: challengeInfo) => {
|
||||
return {
|
||||
...m,
|
||||
acceptorAmount: newAmount ?? 0,
|
||||
}
|
||||
})
|
||||
}}
|
||||
error={undefined}
|
||||
label={'M$'}
|
||||
inputClassName="w-24"
|
||||
/>
|
||||
</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">
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user