market share row

web/components/button.tsx

@@ -52,7 +52,7 @@ export function Button(props: {
         color === 'gradient' &&
           'bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
         color === 'gray-white' &&
-          'text-greyscale-6 hover:bg-greyscale-2 bg-white',
+          'border-none bg-white text-gray-500 shadow-none hover:bg-gray-200',
         className
       )}
       disabled={disabled}

web/components/challenges/create-challenge-modal.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx'
 import dayjs from 'dayjs'
 import React, { useEffect, useState } from 'react'
 import { LinkIcon, SwitchVerticalIcon } from '@heroicons/react/outline'
+import toast from 'react-hot-toast'
 
 import { Col } from '../layout/col'
 import { Row } from '../layout/row'
@@ -16,7 +17,6 @@ import { formatMoney } from 'common/util/format'
 import { NoLabel, YesLabel } from '../outcome-label'
 import { QRCode } from '../qr-code'
 import { copyToClipboard } from 'web/lib/util/copy'
-import toast from 'react-hot-toast'
 
 type challengeInfo = {
   amount: number
@@ -25,48 +25,41 @@ type challengeInfo = {
   outcome: 'YES' | 'NO' | number
   acceptorAmount: number
 }
-export function CreateChallengeButton(props: {
+
+export function CreateChallengeModal(props: {
   user: User | null | undefined
   contract: BinaryContract
+  isOpen: boolean
+  setOpen: (open: boolean) => void
 }) {
-  const { user, contract } = props
+  const { user, contract, isOpen, setOpen } = props
-  const [open, setOpen] = useState(false)
   const [challengeSlug, setChallengeSlug] = useState('')
 
   return (
-    <>
+    <Modal open={isOpen} setOpen={setOpen} size={'sm'}>
-      <Modal open={open} setOpen={(newOpen) => setOpen(newOpen)} size={'sm'}>
+      <Col className="gap-4 rounded-md bg-white px-8 py-6">
-        <Col className="gap-4 rounded-md bg-white px-8 py-6">
+        {/*// add a sign up to challenge button?*/}
-          {/*// add a sign up to challenge button?*/}
+        {user && (
-          {user && (
+          <CreateChallengeForm
-            <CreateChallengeForm
+            user={user}
-              user={user}
+            contract={contract}
-              contract={contract}
+            onCreate={async (newChallenge) => {
-              onCreate={async (newChallenge) => {
+              const challenge = await createChallenge({
-                const challenge = await createChallenge({
+                creator: user,
-                  creator: user,
+                creatorAmount: newChallenge.amount,
-                  creatorAmount: newChallenge.amount,
+                expiresTime: newChallenge.expiresTime,
-                  expiresTime: newChallenge.expiresTime,
+                message: newChallenge.message,
-                  message: newChallenge.message,
+                acceptorAmount: newChallenge.acceptorAmount,
-                  acceptorAmount: newChallenge.acceptorAmount,
+                outcome: newChallenge.outcome,
-                  outcome: newChallenge.outcome,
+                contract: contract,
-                  contract: contract,
+              })
-                })
+              challenge && setChallengeSlug(getChallengeUrl(challenge))
-                challenge && setChallengeSlug(getChallengeUrl(challenge))
+            }}
-              }}
+            challengeSlug={challengeSlug}
-              challengeSlug={challengeSlug}
+          />
-            />
+        )}
-          )}
+      </Col>
-        </Col>
+    </Modal>
-      </Modal>
-
-      <button
-        onClick={() => setOpen(true)}
-        className="btn btn-outline mb-4 max-w-xs whitespace-nowrap normal-case"
-      >
-        Challenge a friend
-      </button>
-    </>
   )
 }
 

web/components/contract/contract-details.tsx

@@ -5,13 +5,13 @@ import {
   TrendingUpIcon,
   UserGroupIcon,
 } from '@heroicons/react/outline'
+
 import { Row } from '../layout/row'
 import { formatMoney } from 'common/util/format'
 import { UserLink } from '../user-page'
 import {
   Contract,
   contractMetrics,
-  contractPath,
   updateContract,
 } from 'web/lib/firebase/contracts'
 import dayjs from 'dayjs'
@@ -24,11 +24,9 @@ import { Bet } from 'common/bet'
 import NewContractBadge from '../new-contract-badge'
 import { UserFollowButton } from '../follow-button'
 import { DAY_MS } from 'common/util/time'
-import { ShareIconButton } from 'web/components/share-icon-button'
 import { useUser } from 'web/hooks/use-user'
 import { Editor } from '@tiptap/react'
 import { exhibitExts } from 'common/util/parse'
-import { ENV_CONFIG } from 'common/envs/constants'
 import { Button } from 'web/components/button'
 import { Modal } from 'web/components/layout/modal'
 import { Col } from 'web/components/layout/col'
@@ -228,14 +226,6 @@ export function ContractDetails(props: {
 
         <div className="whitespace-nowrap">{volumeLabel}</div>
       </Row>
-      <ShareIconButton
-        copyPayload={`https://${ENV_CONFIG.domain}${contractPath(contract)}${
-          user?.username && contract.creatorUsername !== user?.username
-            ? '?referrer=' + user?.username
-            : ''
-        }`}
-        toastClassName={'sm:-left-40 -left-24 min-w-[250%]'}
-      />
 
       {!disabled && <ContractInfoDialog contract={contract} bets={bets} />}
     </Row>

web/components/contract/contract-overview.tsx

@@ -1,12 +1,13 @@
-import { contractUrl, tradingAllowed } from 'web/lib/firebase/contracts'
+import React from 'react'
+import clsx from 'clsx'
+
+import { tradingAllowed } from 'web/lib/firebase/contracts'
 import { Col } from '../layout/col'
 import { Spacer } from '../layout/spacer'
 import { ContractProbGraph } from './contract-prob-graph'
 import { useUser } from 'web/hooks/use-user'
 import { Row } from '../layout/row'
 import { Linkify } from '../linkify'
-import clsx from 'clsx'
-
 import {
   BinaryResolutionOrChance,
   FreeResponseResolutionOrChance,
@@ -20,12 +21,7 @@ import { Contract, CPMMBinaryContract } from 'common/contract'
 import { ContractDescription } from './contract-description'
 import { ContractDetails } from './contract-details'
 import { NumericGraph } from './numeric-graph'
-import { CreateChallengeButton } from 'web/components/challenges/create-challenge-button'
+import { ShareRow } from './share-row'
-import React from 'react'
-import { copyToClipboard } from 'web/lib/util/copy'
-import toast from 'react-hot-toast'
-import { LinkIcon } from '@heroicons/react/outline'
-import { CHALLENGES_ENABLED } from 'common/challenge'
 
 export const ContractOverview = (props: {
   contract: Contract
@@ -40,7 +36,6 @@ export const ContractOverview = (props: {
 
   const isBinary = outcomeType === 'BINARY'
   const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
-  const showChallenge = user && isBinary && !resolution && CHALLENGES_ENABLED
 
   return (
     <Col className={clsx('mb-6', className)}>
@@ -123,47 +118,12 @@ export const ContractOverview = (props: {
         <AnswersGraph contract={contract} bets={bets} />
       )}
       {outcomeType === 'NUMERIC' && <NumericGraph contract={contract} />}
-      {/* {(contract.description || isCreator) && <Spacer h={6} />} */}
+      <ShareRow user={user} contract={contract} />
       <ContractDescription
         className="px-2"
         contract={contract}
         isCreator={isCreator}
       />
-      {/*<Row className="mx-4 mt-4 hidden justify-around sm:block">*/}
-      {/*  {showChallenge && (*/}
-      {/*    <Col className="gap-3">*/}
-      {/*      <div className="text-lg">⚔️ Challenge a friend ⚔️</div>*/}
-      {/*      <CreateChallengeButton user={user} contract={contract} />*/}
-      {/*    </Col>*/}
-      {/*  )}*/}
-      {/*  {isCreator && (*/}
-      {/*    <Col className="gap-3">*/}
-      {/*      <div className="text-lg">Share your market</div>*/}
-      {/*      <ShareMarketButton contract={contract} />*/}
-      {/*    </Col>*/}
-      {/*  )}*/}
-      {/*</Row>*/}
-      <Row className="mx-4 mt-6 block justify-around">
-        {showChallenge && (
-          <Col className="gap-3">
-            <CreateChallengeButton user={user} contract={contract} />
-          </Col>
-        )}
-        {isCreator && (
-          <Col className="gap-3">
-            <button
-              onClick={() => {
-                copyToClipboard(contractUrl(contract))
-                toast('Link copied to clipboard!')
-              }}
-              className={'btn btn-outline mb-4 whitespace-nowrap normal-case'}
-            >
-              <LinkIcon className={'mr-2 h-5 w-5'} />
-              Share market
-            </button>
-          </Col>
-        )}
-      </Row>
     </Col>
   )
 }

web/components/contract/share-row.tsx

@@ -0,0 +1,68 @@
+import { LinkIcon } from '@heroicons/react/outline'
+import clsx from 'clsx'
+import toast from 'react-hot-toast'
+
+import { Row } from '../layout/row'
+import { Contract, contractPath } 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'
+
+export function ShareRow(props: {
+  contract: Contract
+  user: User | undefined | null
+}) {
+  const { user, contract } = props
+  const { outcomeType, resolution } = contract
+
+  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)
+
+  return (
+    <Row className="mt-2">
+      <Button
+        size="lg"
+        color="gray-white"
+        className={'flex'}
+        onClick={() => {
+          copyToClipboard(copyPayload)
+          track('copy share link')
+          toast.success('Link copied!', {
+            icon: linkIcon,
+          })
+        }}
+      >
+        {linkIcon} Share
+      </Button>
+
+      {showChallenge && (
+        <Button size="lg" color="gray-white" onClick={() => setIsOpen(true)}>
+          ⚔️ Challenge
+          <CreateChallengeModal
+            isOpen={isOpen}
+            setOpen={setIsOpen}
+            user={user}
+            contract={contract}
+          />
+        </Button>
+      )}
+    </Row>
+  )
+}