Create challenge without previous market (#718)
* Create challenge without previous market * Check if they've balance to create both on fe * Change wording slightly * Finish merge
This commit is contained in:
Ian Philips
GitHub
parent
c3d09e5323
commit
33edd3c0fb
|
|
@ -11,7 +11,7 @@ import { User } from 'common/user'
|
|||
import { Modal } from 'web/components/layout/modal'
|
||||
import { Button } from '../button'
|
||||
import { createChallenge, getChallengeUrl } from 'web/lib/firebase/challenges'
|
||||
import { BinaryContract } from 'common/contract'
|
||||
import { BinaryContract, MAX_QUESTION_LENGTH } from 'common/contract'
|
||||
import { SiteLink } from 'web/components/site-link'
|
||||
import { formatMoney } from 'common/util/format'
|
||||
import { NoLabel, YesLabel } from '../outcome-label'
|
||||
|
|
@ -19,24 +19,32 @@ 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/antes'
|
||||
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'
|
||||
|
||||
type challengeInfo = {
|
||||
amount: number
|
||||
expiresTime: number | null
|
||||
message: string
|
||||
outcome: 'YES' | 'NO' | number
|
||||
acceptorAmount: number
|
||||
question: string
|
||||
}
|
||||
|
||||
export function CreateChallengeModal(props: {
|
||||
user: User | null | undefined
|
||||
contract: BinaryContract
|
||||
isOpen: boolean
|
||||
setOpen: (open: boolean) => void
|
||||
contract?: BinaryContract
|
||||
}) {
|
||||
const { user, contract, isOpen, setOpen } = props
|
||||
const [challengeSlug, setChallengeSlug] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const { editor } = useTextEditor({ placeholder: '' })
|
||||
|
||||
return (
|
||||
<Modal open={isOpen} setOpen={setOpen}>
|
||||
|
|
@ -46,24 +54,42 @@ export function CreateChallengeModal(props: {
|
|||
<CreateChallengeForm
|
||||
user={user}
|
||||
contract={contract}
|
||||
loading={loading}
|
||||
onCreate={async (newChallenge) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const challengeContract = contract
|
||||
? contract
|
||||
: await createMarket(
|
||||
removeUndefinedProps({
|
||||
question: newChallenge.question,
|
||||
outcomeType: 'BINARY',
|
||||
initialProb: 50,
|
||||
description: editor?.getJSON(),
|
||||
ante: FIXED_ANTE,
|
||||
closeTime: dayjs().add(30, 'day').valueOf(),
|
||||
})
|
||||
)
|
||||
const challenge = await createChallenge({
|
||||
creator: user,
|
||||
creatorAmount: newChallenge.amount,
|
||||
expiresTime: newChallenge.expiresTime,
|
||||
message: newChallenge.message,
|
||||
acceptorAmount: newChallenge.acceptorAmount,
|
||||
outcome: newChallenge.outcome,
|
||||
contract: contract,
|
||||
contract: challengeContract as BinaryContract,
|
||||
})
|
||||
if (challenge) {
|
||||
setChallengeSlug(getChallengeUrl(challenge))
|
||||
track('challenge created', {
|
||||
creator: user.username,
|
||||
amount: newChallenge.amount,
|
||||
contractId: contract.id,
|
||||
contractId: challengeContract.id,
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("couldn't create market/challenge:", e)
|
||||
}
|
||||
setLoading(false)
|
||||
}}
|
||||
challengeSlug={challengeSlug}
|
||||
/>
|
||||
|
|
@ -75,25 +101,24 @@ export function CreateChallengeModal(props: {
|
|||
|
||||
function CreateChallengeForm(props: {
|
||||
user: User
|
||||
contract: BinaryContract
|
||||
onCreate: (m: challengeInfo) => Promise<void>
|
||||
challengeSlug: string
|
||||
loading: boolean
|
||||
contract?: BinaryContract
|
||||
}) {
|
||||
const { user, onCreate, contract, challengeSlug } = props
|
||||
const { user, onCreate, contract, challengeSlug, loading } = 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 defaultMessage = `${user.name} is challenging you to a bet! Do you think ${contract.question}`
|
||||
|
||||
const [challengeInfo, setChallengeInfo] = useState<challengeInfo>({
|
||||
expiresTime: dayjs().add(2, defaultExpire).valueOf(),
|
||||
outcome: 'YES',
|
||||
amount: 100,
|
||||
acceptorAmount: 100,
|
||||
message: defaultMessage,
|
||||
question: contract ? contract.question : '',
|
||||
})
|
||||
useEffect(() => {
|
||||
setError('')
|
||||
|
|
@ -106,7 +131,15 @@ function CreateChallengeForm(props: {
|
|||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
if (user.balance < challengeInfo.amount) {
|
||||
setError('You do not have enough mana to create this challenge')
|
||||
setError("You don't have enough mana to create this challenge")
|
||||
return
|
||||
}
|
||||
if (!contract && user.balance < FIXED_ANTE + challengeInfo.amount) {
|
||||
setError(
|
||||
`You don't have enough mana to create this challenge and market. You need ${formatMoney(
|
||||
FIXED_ANTE + challengeInfo.amount
|
||||
)}`
|
||||
)
|
||||
return
|
||||
}
|
||||
setIsCreating(true)
|
||||
|
|
@ -118,7 +151,23 @@ function CreateChallengeForm(props: {
|
|||
|
||||
<div className="mb-8">
|
||||
Challenge a friend to bet on{' '}
|
||||
{contract ? (
|
||||
<span className="underline">{contract.question}</span>
|
||||
) : (
|
||||
<Textarea
|
||||
placeholder="e.g. Will a Democrat be the next president?"
|
||||
className="input input-bordered mt-1 w-full resize-none"
|
||||
autoFocus={true}
|
||||
maxLength={MAX_QUESTION_LENGTH}
|
||||
value={challengeInfo.question}
|
||||
onChange={(e) =>
|
||||
setChallengeInfo({
|
||||
...challengeInfo,
|
||||
question: e.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-2 flex flex-col flex-wrap justify-center gap-x-5 gap-y-2">
|
||||
|
|
@ -187,6 +236,7 @@ function CreateChallengeForm(props: {
|
|||
{challengeInfo.outcome === 'YES' ? <NoLabel /> : <YesLabel />}
|
||||
</Row>
|
||||
</div>
|
||||
{contract && (
|
||||
<Button
|
||||
size="2xs"
|
||||
color="gray"
|
||||
|
|
@ -202,7 +252,7 @@ function CreateChallengeForm(props: {
|
|||
>
|
||||
Use market odds
|
||||
</Button>
|
||||
|
||||
)}
|
||||
<div className="mt-8">
|
||||
If the challenge is accepted, whoever is right will earn{' '}
|
||||
<span className="font-semibold">
|
||||
|
|
@ -210,7 +260,18 @@ function CreateChallengeForm(props: {
|
|||
challengeInfo.acceptorAmount + challengeInfo.amount || 0
|
||||
)}
|
||||
</span>{' '}
|
||||
in total.
|
||||
in total.{' '}
|
||||
<span>
|
||||
{!contract && (
|
||||
<span>
|
||||
Because there's no market yet, you'll be charged
|
||||
<span className={'mx-1 font-semibold'}>
|
||||
{formatMoney(FIXED_ANTE)}
|
||||
</span>
|
||||
to create it.
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Row className="mt-8 items-center">
|
||||
|
|
@ -218,10 +279,8 @@ function CreateChallengeForm(props: {
|
|||
type="submit"
|
||||
color={'gradient'}
|
||||
size="xl"
|
||||
className={clsx(
|
||||
'whitespace-nowrap drop-shadow-md',
|
||||
isCreating ? 'disabled' : ''
|
||||
)}
|
||||
disabled={isCreating || challengeInfo.question === ''}
|
||||
className={clsx('whitespace-nowrap drop-shadow-md')}
|
||||
>
|
||||
Create challenge bet
|
||||
</Button>
|
||||
|
|
@ -229,7 +288,12 @@ function CreateChallengeForm(props: {
|
|||
<Row className={'text-error'}>{error} </Row>
|
||||
</form>
|
||||
)}
|
||||
{finishedCreating && (
|
||||
{loading && (
|
||||
<Col className={'h-56 w-full items-center justify-center'}>
|
||||
<LoadingIndicator />
|
||||
</Col>
|
||||
)}
|
||||
{finishedCreating && !loading && (
|
||||
<>
|
||||
<Title className="!my-0" text="Challenge Created!" />
|
||||
|
||||
|
|
|
|||
|
|
@ -29,13 +29,11 @@ export async function createChallenge(data: {
|
|||
creatorAmount: number
|
||||
acceptorAmount: number
|
||||
expiresTime: number | null
|
||||
message: string
|
||||
}) {
|
||||
const {
|
||||
creator,
|
||||
creatorAmount,
|
||||
expiresTime,
|
||||
message,
|
||||
contract,
|
||||
outcome,
|
||||
acceptorAmount,
|
||||
|
|
@ -73,7 +71,7 @@ export async function createChallenge(data: {
|
|||
acceptedByUserIds: [],
|
||||
acceptances: [],
|
||||
isResolved: false,
|
||||
message,
|
||||
message: '',
|
||||
}
|
||||
|
||||
await setDoc(doc(challenges(contract.id), slug), challenge)
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import {
|
|||
useAcceptedChallenges,
|
||||
useUserChallenges,
|
||||
} from 'web/lib/firebase/challenges'
|
||||
import { Challenge } from 'common/challenge'
|
||||
import { Challenge, CHALLENGES_ENABLED } from 'common/challenge'
|
||||
import { Tabs } from 'web/components/layout/tabs'
|
||||
import { SiteLink } from 'web/components/site-link'
|
||||
import { UserLink } from 'web/components/user-page'
|
||||
|
|
@ -29,6 +29,7 @@ import { copyToClipboard } from 'web/lib/util/copy'
|
|||
import toast from 'react-hot-toast'
|
||||
import { Modal } from 'web/components/layout/modal'
|
||||
import { QRCode } from 'web/components/qr-code'
|
||||
import { CreateChallengeModal } from 'web/components/challenges/create-challenge-modal'
|
||||
|
||||
dayjs.extend(customParseFormat)
|
||||
const columnClass = 'sm:px-5 px-2 py-3.5 max-w-[100px] truncate'
|
||||
|
|
@ -37,6 +38,7 @@ const amountClass = columnClass + ' max-w-[75px] font-bold'
|
|||
export default function ChallengesListPage() {
|
||||
const user = useUser()
|
||||
const challenges = useAcceptedChallenges()
|
||||
const [open, setOpen] = React.useState(false)
|
||||
const userChallenges = useUserChallenges(user?.id)
|
||||
.concat(
|
||||
user ? challenges.filter((c) => c.acceptances[0].userId === user.id) : []
|
||||
|
|
@ -70,6 +72,16 @@ export default function ChallengesListPage() {
|
|||
<Col className="w-full px-8">
|
||||
<Row className="items-center justify-between">
|
||||
<Title text="Challenges" />
|
||||
{CHALLENGES_ENABLED && (
|
||||
<Button size="lg" color="gradient" onClick={() => setOpen(true)}>
|
||||
Create Challenge
|
||||
<CreateChallengeModal
|
||||
isOpen={open}
|
||||
setOpen={setOpen}
|
||||
user={user}
|
||||
/>
|
||||
</Button>
|
||||
)}
|
||||
</Row>
|
||||
<p>
|
||||
<SiteLink className={'font-bold'} href={'/home'}>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user