share modal
This commit is contained in:
parent
8f17284707
commit
f6b9f74328
|
@ -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}`
|
||||
}
|
||||
|
|
80
web/components/contract/share-modal.tsx
Normal file
80
web/components/contract/share-modal.tsx
Normal 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}`
|
||||
}
|
|
@ -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 && (
|
||||
|
|
Loading…
Reference in New Issue
Block a user