Changes to contract buttons and create challenge modal

This commit is contained in:
Ian Philips 2022-08-04 14:43:21 -06:00
parent eeb50fe54a
commit 5890673b01
2 changed files with 104 additions and 78 deletions

View File

@ -1,7 +1,7 @@
import clsx from 'clsx' import clsx from 'clsx'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { DuplicateIcon } from '@heroicons/react/outline' import { LinkIcon, SwitchVerticalIcon } from '@heroicons/react/outline'
import { Col } from '../layout/col' import { Col } from '../layout/col'
import { Row } from '../layout/row' import { Row } from '../layout/row'
@ -11,12 +11,12 @@ import { Modal } from 'web/components/layout/modal'
import { Button } from '../button' import { Button } from '../button'
import { createChallenge, getChallengeUrl } from 'web/lib/firebase/challenges' import { createChallenge, getChallengeUrl } from 'web/lib/firebase/challenges'
import { BinaryContract } from 'common/contract' import { BinaryContract } from 'common/contract'
import { CopyLinkButton } from 'web/components/copy-link-button'
import { SiteLink } from 'web/components/site-link' import { SiteLink } from 'web/components/site-link'
import { formatMoney } from 'common/util/format' import { formatMoney } from 'common/util/format'
import { Spacer } from '../layout/spacer'
import { NoLabel, YesLabel } from '../outcome-label' import { NoLabel, YesLabel } from '../outcome-label'
import { QRCode } from '../qr-code' import { QRCode } from '../qr-code'
import { copyToClipboard } from 'web/lib/util/copy'
import toast from 'react-hot-toast'
type challengeInfo = { type challengeInfo = {
amount: number amount: number
@ -31,11 +31,11 @@ export function CreateChallengeButton(props: {
}) { }) {
const { user, contract } = props const { user, contract } = props
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const [highlightedSlug, setHighlightedSlug] = useState('') const [challengeSlug, setChallengeSlug] = useState('')
return ( return (
<> <>
<Modal open={open} setOpen={(newOpen) => setOpen(newOpen)}> <Modal open={open} setOpen={(newOpen) => setOpen(newOpen)} size={'sm'}>
<Col className="gap-4 rounded-md bg-white px-8 py-6"> <Col className="gap-4 rounded-md bg-white px-8 py-6">
{/*// add a sign up to challenge button?*/} {/*// add a sign up to challenge button?*/}
{user && ( {user && (
@ -52,9 +52,9 @@ export function CreateChallengeButton(props: {
outcome: newChallenge.outcome, outcome: newChallenge.outcome,
contract: contract, contract: contract,
}) })
challenge && setHighlightedSlug(getChallengeUrl(challenge)) challenge && setChallengeSlug(getChallengeUrl(challenge))
}} }}
highlightedSlug={highlightedSlug} challengeSlug={challengeSlug}
/> />
)} )}
</Col> </Col>
@ -62,9 +62,9 @@ export function CreateChallengeButton(props: {
<button <button
onClick={() => setOpen(true)} onClick={() => setOpen(true)}
className="btn btn-outline mb-4 max-w-xs" className="btn btn-outline mb-4 max-w-xs whitespace-nowrap normal-case"
> >
Challenge Challenge a friend
</button> </button>
</> </>
) )
@ -74,9 +74,9 @@ function CreateChallengeForm(props: {
user: User user: User
contract: BinaryContract contract: BinaryContract
onCreate: (m: challengeInfo) => Promise<void> onCreate: (m: challengeInfo) => Promise<void>
highlightedSlug: string challengeSlug: string
}) { }) {
const { user, onCreate, contract, highlightedSlug } = props const { user, onCreate, contract, challengeSlug } = props
const [isCreating, setIsCreating] = useState(false) const [isCreating, setIsCreating] = useState(false)
const [finishedCreating, setFinishedCreating] = useState(false) const [finishedCreating, setFinishedCreating] = useState(false)
const [error, setError] = useState<string>('') const [error, setError] = useState<string>('')
@ -112,19 +112,20 @@ function CreateChallengeForm(props: {
}} }}
> >
<Title className="!mt-2" text="Challenge a friend to bet " /> <Title className="!mt-2" text="Challenge a friend to bet " />
<div className="mt-2 flex flex-col flex-wrap gap-x-5 gap-y-2"> <div className="mt-2 flex flex-col flex-wrap justify-center gap-x-5 gap-y-2">
{/*<div>Question:</div>*/} <div>You'll bet:</div>
{/*<div className="mb-4 italic">{contract.question}</div>*/} <Row
className={
<div>You are betting:</div> 'form-control w-full max-w-xs items-center justify-between gap-4 pr-3'
<Row className={'form-control w-full justify-start gap-4'}> }
>
<Col> <Col>
<div className="relative"> <div className="relative">
<span className="absolute mx-3 mt-3.5 text-sm text-gray-400"> <span className="absolute mx-3 mt-3.5 text-sm text-gray-400">
M$ M$
</span> </span>
<input <input
className="input input-bordered w-40 pl-10" className="input input-bordered w-32 pl-10"
type="number" type="number"
min={1} min={1}
value={challengeInfo.amount} value={challengeInfo.amount}
@ -142,29 +143,28 @@ function CreateChallengeForm(props: {
/> />
</div> </div>
</Col> </Col>
<Col className={'mt-3 ml-1 text-gray-600'}>on</Col> <span className={''}>on</span>
<Col> {challengeInfo.outcome === 'YES' ? <YesLabel /> : <NoLabel />}
<select </Row>
className="form-select h-12 rounded-lg border-gray-300" <Row className={'max-w-xs justify-end'}>
value={challengeInfo.outcome} <Button
onChange={(e) => color={'gradient'}
className={'opacity-80'}
onClick={() =>
setChallengeInfo((m: challengeInfo) => { setChallengeInfo((m: challengeInfo) => {
return { return {
...m, ...m,
outcome: e.target.value as 'YES' | 'NO', outcome: m.outcome === 'YES' ? 'NO' : 'YES',
} }
}) })
} }
> >
<option value="YES">YES</option> <SwitchVerticalIcon className={'h-4 w-4'} />
<option value="NO">NO</option> </Button>
</select>
</Col>
</Row> </Row>
<Spacer h={2} /> <Row className={'items-center'}>If they bet:</Row>
<Row className={'items-center'}>They will bet:</Row> <Row className={'max-w-xs items-center justify-between gap-4 pr-3'}>
<Row className={'items-center gap-2'}> <div className={'w-32 sm:mr-1'}>
<div className={'ml-1 min-w-[90px]'}>
{editingAcceptorAmount ? ( {editingAcceptorAmount ? (
<Col> <Col>
<div className="relative"> <div className="relative">
@ -172,7 +172,7 @@ function CreateChallengeForm(props: {
M$ M$
</span> </span>
<input <input
className="input input-bordered w-40 pl-10" className="input input-bordered w-32 pl-10"
type="number" type="number"
min={1} min={1}
value={challengeInfo.acceptorAmount} value={challengeInfo.acceptorAmount}
@ -188,36 +188,34 @@ function CreateChallengeForm(props: {
</div> </div>
</Col> </Col>
) : ( ) : (
<span className="font-bold"> <span className="ml-1 font-bold">
{formatMoney(challengeInfo.acceptorAmount)} {formatMoney(challengeInfo.acceptorAmount)}
</span> </span>
)} )}
</div> </div>
<Row className={'items-center gap-3'}> <span>on</span>
on
{challengeInfo.outcome === 'YES' ? <NoLabel /> : <YesLabel />} {challengeInfo.outcome === 'YES' ? <NoLabel /> : <YesLabel />}
</Row>
</div>
<Row
className={clsx(
'mt-8',
!editingAcceptorAmount ? 'justify-between' : 'justify-end'
)}
>
{!editingAcceptorAmount && ( {!editingAcceptorAmount && (
<Button <Button
color={'gray'} color={'gray-white'}
onClick={() => onClick={() => setEditingAcceptorAmount(!editingAcceptorAmount)}
setEditingAcceptorAmount(!editingAcceptorAmount)
}
className={
'flex flex-row gap-2 !bg-transparent py-1 hover:!bg-gray-100'
}
> >
Edit Edit
</Button> </Button>
)} )}
</Row>
</Row>
</div>
<Row className={'justify-end'}>
<Button <Button
type="submit" type="submit"
color={'indigo'} color={'indigo'}
className={clsx( className={clsx(
'mt-8 whitespace-nowrap drop-shadow-md', 'whitespace-nowrap drop-shadow-md',
isCreating ? 'disabled' : '' isCreating ? 'disabled' : ''
)} )}
> >
@ -232,16 +230,18 @@ function CreateChallengeForm(props: {
<Title className="!my-0" text="Challenge Created!" /> <Title className="!my-0" text="Challenge Created!" />
<div>Share the challenge using the link.</div> <div>Share the challenge using the link.</div>
<CopyLinkButton <button
url={highlightedSlug} onClick={() => {
buttonClassName="btn-md rounded-l-none" copyToClipboard(challengeSlug)
displayUrl={ toast('Link copied to clipboard!')
'...challenges/' + highlightedSlug.split('/challenges/')[1] }}
} className={'btn btn-outline mb-4 whitespace-nowrap normal-case'}
toastClassName={'-left-40 -top-20 mt-1'} >
icon={DuplicateIcon} <LinkIcon className={'mr-2 h-5 w-5'} />
/> Copy link
<QRCode url={highlightedSlug} className="self-center" /> </button>
<QRCode url={challengeSlug} className="self-center" />
<Row className={'gap-1 text-gray-500'}> <Row className={'gap-1 text-gray-500'}>
See your other See your other
<SiteLink className={'underline'} href={'/challenges'}> <SiteLink className={'underline'} href={'/challenges'}>

View File

@ -1,4 +1,4 @@
import { tradingAllowed } from 'web/lib/firebase/contracts' import { contractUrl, tradingAllowed } from 'web/lib/firebase/contracts'
import { Col } from '../layout/col' import { Col } from '../layout/col'
import { Spacer } from '../layout/spacer' import { Spacer } from '../layout/spacer'
import { ContractProbGraph } from './contract-prob-graph' import { ContractProbGraph } from './contract-prob-graph'
@ -23,6 +23,11 @@ import { ShareMarketButton } from '../share-market-button'
import { NumericGraph } from './numeric-graph' import { NumericGraph } from './numeric-graph'
import { CreateChallengeButton } from 'web/components/challenges/create-challenge-button' import { CreateChallengeButton } from 'web/components/challenges/create-challenge-button'
import React from 'react' import React from 'react'
import { copyToClipboard } from 'web/lib/util/copy'
import { getChallengeUrl } from 'web/lib/firebase/challenges'
import toast from 'react-hot-toast'
import { ClipboardCopyIcon, LinkIcon } from '@heroicons/react/outline'
import { Button } from 'web/components/button'
export const ContractOverview = (props: { export const ContractOverview = (props: {
contract: Contract contract: Contract
@ -126,20 +131,41 @@ export const ContractOverview = (props: {
contract={contract} contract={contract}
isCreator={isCreator} isCreator={isCreator}
/> />
<Col className="mx-4 mt-4 justify-around sm:flex-row"> {/*<Row className="mx-4 mt-4 hidden justify-around sm:block">*/}
{/* {showChallenge && (*/}
{/* <Col className="gap-3">*/}
{/* <div className="text-lg">⚔️ Challenge a friend ⚔️</div>*/}
{/* <CreateChallengeButton user={user} contract={contract} />*/}
{/* </Col>*/}
{/* )}*/}
{/* {isCreator && (*/}
{/* <Col className="gap-3">*/}
{/* <div className="text-lg">Share your market</div>*/}
{/* <ShareMarketButton contract={contract} />*/}
{/* </Col>*/}
{/* )}*/}
{/*</Row>*/}
<Row className="mx-4 mt-6 block justify-around">
{showChallenge && ( {showChallenge && (
<Col className="gap-3"> <Col className="gap-3">
<div className="text-lg"> Challenge a friend </div>
<CreateChallengeButton user={user} contract={contract} /> <CreateChallengeButton user={user} contract={contract} />
</Col> </Col>
)} )}
{isCreator && ( {isCreator && (
<Col className="gap-3"> <Col className="gap-3">
<div className="text-lg">Share your market</div> <button
<ShareMarketButton contract={contract} /> onClick={() => {
copyToClipboard(contractUrl(contract))
toast('Link copied to clipboard!')
}}
className={'btn btn-outline mb-4 whitespace-nowrap normal-case'}
>
<LinkIcon className={'mr-2 h-5 w-5'} />
Share market
</button>
</Col> </Col>
)} )}
</Col> </Row>
</Col> </Col>
) )
} }