share modal

This commit is contained in:
mantikoros 2022-08-04 22:00:37 -07:00
parent 8f17284707
commit f6b9f74328
3 changed files with 94 additions and 52 deletions

View File

@ -7,16 +7,12 @@ import { Bet } from 'common/bet'
import { Contract } from 'common/contract'
import { formatMoney } from 'common/util/format'
import { contractPath, contractPool } from 'web/lib/firebase/contracts'
import { contractPool } from 'web/lib/firebase/contracts'
import { LiquidityPanel } from '../liquidity-panel'
import { Col } from '../layout/col'
import { Modal } from '../layout/modal'
import { Row } from '../layout/row'
import { ShareEmbedButton } from '../share-embed-button'
import { Title } from '../title'
import { TweetButton } from '../tweet-button'
import { InfoTooltip } from '../info-tooltip'
import { DuplicateContractButton } from '../copy-contract-button'
export const contractDetailsButtonClassName =
'group flex items-center rounded-md px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-100 text-gray-400 hover:text-gray-500'
@ -61,20 +57,6 @@ export function ContractInfoDialog(props: { contract: Contract; bets: Bet[] }) {
<Col className="gap-4 rounded bg-white p-6">
<Title className="!mt-0 !mb-0" text="Market info" />
<div>Share</div>
<Row className="justify-start gap-4">
<TweetButton
className="self-start"
tweetText={getTweetText(contract)}
/>
<ShareEmbedButton contract={contract} toastClassName={'-left-20'} />
<DuplicateContractButton contract={contract} />
</Row>
<div />
<div>Stats</div>
<table className="table-compact table-zebra table w-full text-gray-500">
<tbody>
<tr>
@ -150,14 +132,3 @@ export function ContractInfoDialog(props: { contract: Contract; bets: Bet[] }) {
</>
)
}
const getTweetText = (contract: Contract) => {
const { question, resolution } = contract
const tweetDescription = resolution ? `\n\nResolved ${resolution}!` : ''
const timeParam = `${Date.now()}`.substring(7)
const url = `https://manifold.markets${contractPath(contract)}?t=${timeParam}`
return `${question}\n\n${url}${tweetDescription}`
}

View File

@ -0,0 +1,80 @@
import { LinkIcon } from '@heroicons/react/outline'
import toast from 'react-hot-toast'
import clsx from 'clsx'
import { Contract } from 'common/contract'
import { contractPath } from 'web/lib/firebase/contracts'
import { Col } from '../layout/col'
import { Modal } from '../layout/modal'
import { Row } from '../layout/row'
import { ShareEmbedButton } from '../share-embed-button'
import { Title } from '../title'
import { TweetButton } from '../tweet-button'
import { DuplicateContractButton } from '../copy-contract-button'
import { Button } from '../button'
import { copyToClipboard } from 'web/lib/util/copy'
import { track } from 'web/lib/service/analytics'
import { ENV_CONFIG } from 'common/envs/constants'
import { User } from 'common/user'
export function ShareModal(props: {
contract: Contract
user: User | undefined | null
isOpen: boolean
setOpen: (open: boolean) => void
}) {
const { contract, user, isOpen, setOpen } = props
const linkIcon = (
<LinkIcon className={clsx('mr-2 h-[24px] w-5')} aria-hidden="true" />
)
const copyPayload = `https://${ENV_CONFIG.domain}${contractPath(contract)}${
user?.username && contract.creatorUsername !== user?.username
? '?referrer=' + user?.username
: ''
}`
return (
<Modal open={isOpen} setOpen={setOpen}>
<Col className="gap-4 rounded bg-white p-4">
<Title className="!mt-0 mb-2" text="Share this market" />
<Button
size="2xl"
color="gradient"
className={'mb-2 flex max-w-xs self-center'}
onClick={() => {
copyToClipboard(copyPayload)
track('copy share link')
toast.success('Link copied!', {
icon: linkIcon,
})
}}
>
{linkIcon} Copy link
</Button>
<Row className="justify-start gap-4 self-center">
<TweetButton
className="self-start"
tweetText={getTweetText(contract)}
/>
<ShareEmbedButton contract={contract} toastClassName={'-left-20'} />
<DuplicateContractButton contract={contract} />
</Row>
</Col>
</Modal>
)
}
const getTweetText = (contract: Contract) => {
const { question, resolution } = contract
const tweetDescription = resolution ? `\n\nResolved ${resolution}!` : ''
const timeParam = `${Date.now()}`.substring(7)
const url = `https://manifold.markets${contractPath(contract)}?t=${timeParam}`
return `${question}\n\n${url}${tweetDescription}`
}

View File

@ -1,17 +1,14 @@
import { LinkIcon } from '@heroicons/react/outline'
import clsx from 'clsx'
import toast from 'react-hot-toast'
import { ShareIcon } from '@heroicons/react/outline'
import { Row } from '../layout/row'
import { Contract, contractPath } from 'web/lib/firebase/contracts'
import { Contract } 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'
import { ShareModal } from './share-modal'
export function ShareRow(props: {
contract: Contract
@ -23,17 +20,8 @@ export function ShareRow(props: {
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)
const [isShareOpen, setShareOpen] = useState(false)
return (
<Row className="mt-2">
@ -42,14 +30,17 @@ export function ShareRow(props: {
color="gray-white"
className={'flex'}
onClick={() => {
copyToClipboard(copyPayload)
track('copy share link')
toast.success('Link copied!', {
icon: linkIcon,
})
setShareOpen(true)
}}
>
{linkIcon} Share
<ShareIcon className={clsx('mr-2 h-[24px] w-5')} aria-hidden="true" />
Share
<ShareModal
isOpen={isShareOpen}
setOpen={setShareOpen}
contract={contract}
user={user}
/>
</Button>
{showChallenge && (