Add share market widget shown if you are the creator

web/components/contract/contract-overview.tsx

@@ -17,6 +17,7 @@ import { AnswersGraph } from '../answers/answers-graph'
 import { DPM, FreeResponse, FullContract } from '../../../common/contract'
 import { ContractDescription } from './contract-description'
 import { ContractDetails } from './contract-details'
+import { ShareMarket } from '../share-market'
 
 export const ContractOverview = (props: {
   contract: Contract
@@ -84,7 +85,9 @@ export const ContractOverview = (props: {
         />
       )}
 
-      {contract.description && <Spacer h={6} />}
+      {(contract.description || isCreator) && <Spacer h={6} />}
+
+      {isCreator && <ShareMarket className="px-2" contract={contract} />}
 
       <ContractDescription
         className="px-2"

web/components/copy-link-button.tsx

@@ -1,6 +1,7 @@
 import { Fragment } from 'react'
 import { LinkIcon } from '@heroicons/react/outline'
 import { Menu, Transition } from '@headlessui/react'
+import clsx from 'clsx'
 import { Contract } from '../../common/contract'
 import { copyToClipboard } from '../lib/util/copy'
 import { contractPath } from '../lib/firebase/contracts'
@@ -10,8 +11,11 @@ function copyContractUrl(contract: Contract) {
   copyToClipboard(`https://${ENV_CONFIG.domain}${contractPath(contract)}`)
 }
 
-export function CopyLinkButton(props: { contract: Contract }) {
+export function CopyLinkButton(props: {
-  const { contract } = props
+  contract: Contract
+  buttonClassName?: string
+}) {
+  const { contract, buttonClassName } = props
 
   return (
     <Menu
@@ -20,12 +24,10 @@ export function CopyLinkButton(props: { contract: Contract }) {
       onMouseUp={() => copyContractUrl(contract)}
     >
       <Menu.Button
-        className="btn btn-xs normal-case"
+        className={clsx(
-        style={{
+          'btn btn-xs border-2 border-green-600 bg-white normal-case text-green-600 hover:border-green-600 hover:bg-white',
-          backgroundColor: 'white',
+          buttonClassName
-          border: '2px solid #16A34A',
+        )}
-          color: '#16A34A', // text-green-600
-        }}
       >
         <LinkIcon className="mr-1.5 h-4 w-4" aria-hidden="true" />
         Copy link

web/components/share-market.tsx

@@ -0,0 +1,26 @@
+import clsx from 'clsx'
+import { Contract, contractUrl } from '../lib/firebase/contracts'
+import { CopyLinkButton } from './copy-link-button'
+import { Col } from './layout/col'
+import { Row } from './layout/row'
+
+export function ShareMarket(props: { contract: Contract; className?: string }) {
+  const { contract, className } = props
+
+  return (
+    <Col className={clsx(className, 'gap-3')}>
+      <div>Share your market</div>
+      <Row className="mb-6 items-center">
+        <input
+          className="input input-bordered flex-1 rounded-r-none text-gray-500"
+          type="text"
+          value={contractUrl(contract)}
+        />
+        <CopyLinkButton
+          contract={contract}
+          buttonClassName="btn-md rounded-l-none"
+        />
+      </Row>
+    </Col>
+  )
+}

web/lib/firebase/contracts.ts

@@ -26,6 +26,7 @@ import { DAY_MS } from '../../../common/util/time'
 import { MAX_FEED_CONTRACTS } from '../../../common/recommended-contracts'
 import { Bet } from '../../../common/bet'
 import { Comment } from '../../../common/comment'
+import { ENV_CONFIG } from '../../../common/envs/constants'
 export type { Contract }
 
 export function contractPath(contract: Contract) {
@@ -36,6 +37,10 @@ export function homeContractPath(contract: Contract) {
   return `/home?c=${contract.slug}`
 }
 
+export function contractUrl(contract: Contract) {
+  return `https://${ENV_CONFIG.domain}${contractPath(contract)}`
+}
+
 export function contractMetrics(contract: Contract) {
   const { createdTime, resolutionTime, isResolved } = contract