70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
import clsx from 'clsx'
|
||
import { ShareIcon } from '@heroicons/react/outline'
|
||
|
||
import { Row } from '../layout/row'
|
||
import { Contract } from 'web/lib/firebase/contracts'
|
||
import { useState } from 'react'
|
||
import { Button } from 'web/components/button'
|
||
import { CreateChallengeModal } from '../challenges/create-challenge-modal'
|
||
import { User } from 'common/user'
|
||
import { CHALLENGES_ENABLED } from 'common/challenge'
|
||
import { ShareModal } from './share-modal'
|
||
import { withTracking } from 'web/lib/service/analytics'
|
||
import { FollowMarketButton } from 'web/components/follow-market-button'
|
||
|
||
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 [isOpen, setIsOpen] = useState(false)
|
||
const [isShareOpen, setShareOpen] = useState(false)
|
||
|
||
return (
|
||
<Row className="mt-2">
|
||
<Button
|
||
size="lg"
|
||
color="gray-white"
|
||
className={'flex'}
|
||
onClick={() => {
|
||
setShareOpen(true)
|
||
}}
|
||
>
|
||
<ShareIcon className={clsx('mr-2 h-[24px] w-5')} aria-hidden="true" />
|
||
Share
|
||
<ShareModal
|
||
isOpen={isShareOpen}
|
||
setOpen={setShareOpen}
|
||
contract={contract}
|
||
user={user}
|
||
/>
|
||
</Button>
|
||
|
||
{showChallenge && (
|
||
<Button
|
||
size="lg"
|
||
color="gray-white"
|
||
onClick={withTracking(
|
||
() => setIsOpen(true),
|
||
'click challenge button'
|
||
)}
|
||
>
|
||
⚔️ Challenge
|
||
<CreateChallengeModal
|
||
isOpen={isOpen}
|
||
setOpen={setIsOpen}
|
||
user={user}
|
||
contract={contract}
|
||
/>
|
||
</Button>
|
||
)}
|
||
<FollowMarketButton contract={contract} user={user} />
|
||
</Row>
|
||
)
|
||
}
|