diff --git a/web/components/contract/contract-info-dialog.tsx b/web/components/contract/contract-info-dialog.tsx
index a1f79479..168ada50 100644
--- a/web/components/contract/contract-info-dialog.tsx
+++ b/web/components/contract/contract-info-dialog.tsx
@@ -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[] }) {
- Share
-
-
-
-
-
-
-
-
- Stats
-
@@ -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}`
-}
diff --git a/web/components/contract/share-modal.tsx b/web/components/contract/share-modal.tsx
new file mode 100644
index 00000000..c173b172
--- /dev/null
+++ b/web/components/contract/share-modal.tsx
@@ -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 = (
+
+ )
+
+ const copyPayload = `https://${ENV_CONFIG.domain}${contractPath(contract)}${
+ user?.username && contract.creatorUsername !== user?.username
+ ? '?referrer=' + user?.username
+ : ''
+ }`
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+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}`
+}
diff --git a/web/components/contract/share-row.tsx b/web/components/contract/share-row.tsx
index a94c6a02..fd872c5a 100644
--- a/web/components/contract/share-row.tsx
+++ b/web/components/contract/share-row.tsx
@@ -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 = (
-
- )
-
const [isOpen, setIsOpen] = useState(false)
+ const [isShareOpen, setShareOpen] = useState(false)
return (
@@ -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
+
+ Share
+
{showChallenge && (