share modal

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[] }) {
         <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}`
-}

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 = (
+    <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}`
+}

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 = (
-    <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)
+          setShareOpen(true)
-          track('copy share link')
-          toast.success('Link copied!', {
-            icon: linkIcon,
-          })
         }}
       >
-        {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 && (