market share row
This commit is contained in:
parent
88c6c1f793
commit
b8bb184ff9
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
68
web/components/contract/share-row.tsx
Normal file
68
web/components/contract/share-row.tsx
Normal 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>
|
||||
)
|
||||
}
|
Loading…
Reference in New Issue
Block a user