market share row

This commit is contained in:
mantikoros 2022-08-04 21:30:15 -07:00
parent 88c6c1f793
commit b8bb184ff9
5 changed files with 106 additions and 95 deletions

View File

@ -52,7 +52,7 @@ export function Button(props: {
color === 'gradient' &&
'bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
color === 'gray-white' &&
'text-greyscale-6 hover:bg-greyscale-2 bg-white',
'border-none bg-white text-gray-500 shadow-none hover:bg-gray-200',
className
)}
disabled={disabled}

View File

@ -2,6 +2,7 @@ import clsx from 'clsx'
import dayjs from 'dayjs'
import React, { useEffect, useState } from 'react'
import { LinkIcon, SwitchVerticalIcon } from '@heroicons/react/outline'
import toast from 'react-hot-toast'
import { Col } from '../layout/col'
import { Row } from '../layout/row'
@ -16,7 +17,6 @@ import { formatMoney } from 'common/util/format'
import { NoLabel, YesLabel } from '../outcome-label'
import { QRCode } from '../qr-code'
import { copyToClipboard } from 'web/lib/util/copy'
import toast from 'react-hot-toast'
type challengeInfo = {
amount: number
@ -25,48 +25,41 @@ type challengeInfo = {
outcome: 'YES' | 'NO' | number
acceptorAmount: number
}
export function CreateChallengeButton(props: {
export function CreateChallengeModal(props: {
user: User | null | undefined
contract: BinaryContract
isOpen: boolean
setOpen: (open: boolean) => void
}) {
const { user, contract } = props
const [open, setOpen] = useState(false)
const { user, contract, isOpen, setOpen } = props
const [challengeSlug, setChallengeSlug] = useState('')
return (
<>
<Modal open={open} setOpen={(newOpen) => setOpen(newOpen)} size={'sm'}>
<Col className="gap-4 rounded-md bg-white px-8 py-6">
{/*// add a sign up to challenge button?*/}
{user && (
<CreateChallengeForm
user={user}
contract={contract}
onCreate={async (newChallenge) => {
const challenge = await createChallenge({
creator: user,
creatorAmount: newChallenge.amount,
expiresTime: newChallenge.expiresTime,
message: newChallenge.message,
acceptorAmount: newChallenge.acceptorAmount,
outcome: newChallenge.outcome,
contract: contract,
})
challenge && setChallengeSlug(getChallengeUrl(challenge))
}}
challengeSlug={challengeSlug}
/>
)}
</Col>
</Modal>
<button
onClick={() => setOpen(true)}
className="btn btn-outline mb-4 max-w-xs whitespace-nowrap normal-case"
>
Challenge a friend
</button>
</>
<Modal open={isOpen} setOpen={setOpen} size={'sm'}>
<Col className="gap-4 rounded-md bg-white px-8 py-6">
{/*// add a sign up to challenge button?*/}
{user && (
<CreateChallengeForm
user={user}
contract={contract}
onCreate={async (newChallenge) => {
const challenge = await createChallenge({
creator: user,
creatorAmount: newChallenge.amount,
expiresTime: newChallenge.expiresTime,
message: newChallenge.message,
acceptorAmount: newChallenge.acceptorAmount,
outcome: newChallenge.outcome,
contract: contract,
})
challenge && setChallengeSlug(getChallengeUrl(challenge))
}}
challengeSlug={challengeSlug}
/>
)}
</Col>
</Modal>
)
}

View File

@ -5,13 +5,13 @@ import {
TrendingUpIcon,
UserGroupIcon,
} from '@heroicons/react/outline'
import { Row } from '../layout/row'
import { formatMoney } from 'common/util/format'
import { UserLink } from '../user-page'
import {
Contract,
contractMetrics,
contractPath,
updateContract,
} from 'web/lib/firebase/contracts'
import dayjs from 'dayjs'
@ -24,11 +24,9 @@ import { Bet } from 'common/bet'
import NewContractBadge from '../new-contract-badge'
import { UserFollowButton } from '../follow-button'
import { DAY_MS } from 'common/util/time'
import { ShareIconButton } from 'web/components/share-icon-button'
import { useUser } from 'web/hooks/use-user'
import { Editor } from '@tiptap/react'
import { exhibitExts } from 'common/util/parse'
import { ENV_CONFIG } from 'common/envs/constants'
import { Button } from 'web/components/button'
import { Modal } from 'web/components/layout/modal'
import { Col } from 'web/components/layout/col'
@ -228,14 +226,6 @@ export function ContractDetails(props: {
<div className="whitespace-nowrap">{volumeLabel}</div>
</Row>
<ShareIconButton
copyPayload={`https://${ENV_CONFIG.domain}${contractPath(contract)}${
user?.username && contract.creatorUsername !== user?.username
? '?referrer=' + user?.username
: ''
}`}
toastClassName={'sm:-left-40 -left-24 min-w-[250%]'}
/>
{!disabled && <ContractInfoDialog contract={contract} bets={bets} />}
</Row>

View File

@ -1,12 +1,13 @@
import { contractUrl, tradingAllowed } from 'web/lib/firebase/contracts'
import React from 'react'
import clsx from 'clsx'
import { tradingAllowed } from 'web/lib/firebase/contracts'
import { Col } from '../layout/col'
import { Spacer } from '../layout/spacer'
import { ContractProbGraph } from './contract-prob-graph'
import { useUser } from 'web/hooks/use-user'
import { Row } from '../layout/row'
import { Linkify } from '../linkify'
import clsx from 'clsx'
import {
BinaryResolutionOrChance,
FreeResponseResolutionOrChance,
@ -20,12 +21,7 @@ import { Contract, CPMMBinaryContract } from 'common/contract'
import { ContractDescription } from './contract-description'
import { ContractDetails } from './contract-details'
import { NumericGraph } from './numeric-graph'
import { CreateChallengeButton } from 'web/components/challenges/create-challenge-button'
import React from 'react'
import { copyToClipboard } from 'web/lib/util/copy'
import toast from 'react-hot-toast'
import { LinkIcon } from '@heroicons/react/outline'
import { CHALLENGES_ENABLED } from 'common/challenge'
import { ShareRow } from './share-row'
export const ContractOverview = (props: {
contract: Contract
@ -40,7 +36,6 @@ export const ContractOverview = (props: {
const isBinary = outcomeType === 'BINARY'
const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
const showChallenge = user && isBinary && !resolution && CHALLENGES_ENABLED
return (
<Col className={clsx('mb-6', className)}>
@ -123,47 +118,12 @@ export const ContractOverview = (props: {
<AnswersGraph contract={contract} bets={bets} />
)}
{outcomeType === 'NUMERIC' && <NumericGraph contract={contract} />}
{/* {(contract.description || isCreator) && <Spacer h={6} />} */}
<ShareRow user={user} contract={contract} />
<ContractDescription
className="px-2"
contract={contract}
isCreator={isCreator}
/>
{/*<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 && (
<Col className="gap-3">
<CreateChallengeButton user={user} contract={contract} />
</Col>
)}
{isCreator && (
<Col className="gap-3">
<button
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>
)}
</Row>
</Col>
)
}

View File

@ -0,0 +1,68 @@
import { LinkIcon } from '@heroicons/react/outline'
import clsx from 'clsx'
import toast from 'react-hot-toast'
import { Row } from '../layout/row'
import { Contract, contractPath } from 'web/lib/firebase/contracts'
import { useState } from 'react'
import { ENV_CONFIG } from 'common/envs/constants'
import { Button } from 'web/components/button'
import { copyToClipboard } from 'web/lib/util/copy'
import { track } from 'web/lib/service/analytics'
import { CreateChallengeModal } from '../challenges/create-challenge-modal'
import { User } from 'common/user'
import { CHALLENGES_ENABLED } from 'common/challenge'
export function ShareRow(props: {
contract: Contract
user: User | undefined | null
}) {
const { user, contract } = props
const { outcomeType, resolution } = contract
const showChallenge =
user && outcomeType === 'BINARY' && !resolution && CHALLENGES_ENABLED
const copyPayload = `https://${ENV_CONFIG.domain}${contractPath(contract)}${
user?.username && contract.creatorUsername !== user?.username
? '?referrer=' + user?.username
: ''
}`
const linkIcon = (
<LinkIcon className={clsx('mr-2 h-[24px] w-5')} aria-hidden="true" />
)
const [isOpen, setIsOpen] = useState(false)
return (
<Row className="mt-2">
<Button
size="lg"
color="gray-white"
className={'flex'}
onClick={() => {
copyToClipboard(copyPayload)
track('copy share link')
toast.success('Link copied!', {
icon: linkIcon,
})
}}
>
{linkIcon} Share
</Button>
{showChallenge && (
<Button size="lg" color="gray-white" onClick={() => setIsOpen(true)}>
Challenge
<CreateChallengeModal
isOpen={isOpen}
setOpen={setIsOpen}
user={user}
contract={contract}
/>
</Button>
)}
</Row>
)
}