From e79235afef5f5d55895af4bfbefa69ad17733f22 Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Wed, 24 Aug 2022 16:41:46 -0600
Subject: [PATCH] Small ux tweaks for signed out market page

---
 web/components/amount-input.tsx               |  5 +-
 web/components/bet-button.tsx                 | 36 +++++-----
 web/components/contract/contract-details.tsx  | 67 ++++++++++++++-----
 web/components/contract/contract-overview.tsx | 10 ++-
 web/components/contract/share-row.tsx         | 36 +++++-----
 5 files changed, 105 insertions(+), 49 deletions(-)

diff --git a/web/components/amount-input.tsx b/web/components/amount-input.tsx
index cb071850..971a5496 100644
--- a/web/components/amount-input.tsx
+++ b/web/components/amount-input.tsx
@@ -5,6 +5,7 @@ import { formatMoney } from 'common/util/format'
 import { Col } from './layout/col'
 import { SiteLink } from './site-link'
 import { ENV_CONFIG } from 'common/envs/constants'
+import { useWindowSize } from 'web/hooks/use-window-size'
 
 export function AmountInput(props: {
   amount: number | undefined
@@ -33,7 +34,8 @@ export function AmountInput(props: {
     const isInvalid = !str || isNaN(amount)
     onChange(isInvalid ? undefined : amount)
   }
-
+  const { width } = useWindowSize()
+  const isMobile = (width ?? 0) < 768
   return (
     <Col className={className}>
       <label className="input-group mb-4">
@@ -50,6 +52,7 @@ export function AmountInput(props: {
           inputMode="numeric"
           placeholder="0"
           maxLength={6}
+          autoFocus={!isMobile}
           value={amount ?? ''}
           disabled={disabled}
           onChange={(e) => onAmountChange(e.target.value)}
diff --git a/web/components/bet-button.tsx b/web/components/bet-button.tsx
index d7d62e7d..2aca1772 100644
--- a/web/components/bet-button.tsx
+++ b/web/components/bet-button.tsx
@@ -8,6 +8,8 @@ import { useUser } from 'web/hooks/use-user'
 import { useUserContractBets } from 'web/hooks/use-user-bets'
 import { useSaveBinaryShares } from './use-save-binary-shares'
 import { Col } from './layout/col'
+import { Button } from 'web/components/button'
+import { firebaseLogin } from 'web/lib/firebase/users'
 
 /** Button that opens BetPanel in a new modal */
 export default function BetButton(props: {
@@ -30,23 +32,27 @@ export default function BetButton(props: {
   return (
     <>
       <Col className={clsx('items-center', className)}>
-        <button
-          className={clsx(
-            'btn btn-lg btn-outline my-auto inline-flex h-10 min-h-0 w-24',
-            btnClassName
-          )}
-          onClick={() => setOpen(true)}
+        <Button
+          size={'lg'}
+          className={clsx('my-auto inline-flex min-w-[75px] ', btnClassName)}
+          onClick={() => {
+            !user ? firebaseLogin() : setOpen(true)
+          }}
         >
-          Bet
-        </button>
+          {user ? 'Bet' : 'Sign up to Bet'}
+        </Button>
 
-        <div className={'mt-1 w-24 text-center text-sm text-gray-500'}>
-          {hasYesShares
-            ? `(${Math.floor(yesShares)} ${isPseudoNumeric ? 'HIGHER' : 'YES'})`
-            : hasNoShares
-            ? `(${Math.floor(noShares)} ${isPseudoNumeric ? 'LOWER' : 'NO'})`
-            : ''}
-        </div>
+        {user && (
+          <div className={'mt-1 w-24 text-center text-sm text-gray-500'}>
+            {hasYesShares
+              ? `(${Math.floor(yesShares)} ${
+                  isPseudoNumeric ? 'HIGHER' : 'YES'
+                })`
+              : hasNoShares
+              ? `(${Math.floor(noShares)} ${isPseudoNumeric ? 'LOWER' : 'NO'})`
+              : ''}
+          </div>
+        )}
       </Col>
 
       <Modal open={open} setOpen={setOpen}>
diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx
index 833b37eb..781cea59 100644
--- a/web/components/contract/contract-details.tsx
+++ b/web/components/contract/contract-details.tsx
@@ -1,7 +1,9 @@
 import {
   ClockIcon,
   DatabaseIcon,
+  LinkIcon,
   PencilIcon,
+  ShareIcon,
   TrendingUpIcon,
   UserGroupIcon,
 } from '@heroicons/react/outline'
@@ -9,7 +11,11 @@ import {
 import { Row } from '../layout/row'
 import { formatMoney } from 'common/util/format'
 import { UserLink } from '../user-page'
-import { Contract, updateContract } from 'web/lib/firebase/contracts'
+import {
+  Contract,
+  contractPath,
+  updateContract,
+} from 'web/lib/firebase/contracts'
 import dayjs from 'dayjs'
 import { DateTimeTooltip } from '../datetime-tooltip'
 import { fromNow } from 'web/lib/util/time'
@@ -32,6 +38,11 @@ import { groupPath } from 'web/lib/firebase/groups'
 import { insertContent } from '../editor/utils'
 import clsx from 'clsx'
 import { contractMetrics } from 'common/contract-details'
+import { User } from 'common/user'
+import { copyToClipboard } from 'web/lib/util/copy'
+import toast from 'react-hot-toast'
+import { track } from 'web/lib/service/analytics'
+import { ENV_CONFIG } from 'common/envs/constants'
 
 export type ShowTime = 'resolve-date' | 'close-date'
 
@@ -134,6 +145,7 @@ export function AbbrContractDetails(props: {
 export function ContractDetails(props: {
   contract: Contract
   bets: Bet[]
+  user: User | null | undefined
   isCreator?: boolean
   disabled?: boolean
 }) {
@@ -146,7 +158,11 @@ export function ContractDetails(props: {
     groupLinks?.sort((a, b) => a.createdTime - b.createdTime)[0] ?? null
   const user = useUser()
   const [open, setOpen] = useState(false)
-
+  const shareUrl = `https://${ENV_CONFIG.domain}${contractPath(contract)}${
+    user?.username && contract.creatorUsername !== user?.username
+      ? '?referrer=' + user?.username
+      : ''
+  }`
   const groupInfo = (
     <Row>
       <UserGroupIcon className="mx-1 inline h-5 w-5 shrink-0" />
@@ -157,7 +173,7 @@ export function ContractDetails(props: {
   )
 
   return (
-    <Row className="flex-1 flex-wrap items-center gap-x-4 gap-y-2 text-sm text-gray-500">
+    <Row className="flex-1 flex-wrap items-center gap-2 text-sm text-gray-500 md:gap-x-4 md:gap-y-2">
       <Row className="items-center gap-2">
         <Avatar
           username={creatorUsername}
@@ -179,6 +195,8 @@ export function ContractDetails(props: {
       <Row>
         {disabled ? (
           groupInfo
+        ) : !groupToDisplay && !user ? (
+          <div />
         ) : (
           <Button
             size={'xs'}
@@ -203,13 +221,30 @@ export function ContractDetails(props: {
           />
         </Col>
       </Modal>
-
+      {!user && (
+        <Row className={'items-center justify-end'}>
+          <Button
+            size="xs"
+            color="gray-white"
+            className={'flex'}
+            onClick={() => {
+              copyToClipboard(shareUrl)
+              toast('Link copied!', {
+                icon: <LinkIcon className="mr-2 h-6 w-6" aria-hidden="true" />,
+              })
+              track('copy share link')
+            }}
+          >
+            <ShareIcon className={clsx('mr-2 h-5 w-5')} aria-hidden="true" />
+            Share
+          </Button>
+        </Row>
+      )}
       {(!!closeTime || !!resolvedDate) && (
         <Row className="items-center gap-1">
-          <ClockIcon className="h-5 w-5" />
-
           {resolvedDate && contract.resolutionTime ? (
             <>
+              <ClockIcon className="h-5 w-5" />
               <DateTimeTooltip
                 text="Market resolved:"
                 time={dayjs(contract.resolutionTime)}
@@ -219,8 +254,9 @@ export function ContractDetails(props: {
             </>
           ) : null}
 
-          {!resolvedDate && closeTime && (
+          {!resolvedDate && closeTime && user && (
             <>
+              <ClockIcon className="h-5 w-5" />
               <EditableCloseDate
                 closeTime={closeTime}
                 contract={contract}
@@ -230,14 +266,15 @@ export function ContractDetails(props: {
           )}
         </Row>
       )}
-
-      <Row className="items-center gap-1">
-        <DatabaseIcon className="h-5 w-5" />
-
-        <div className="whitespace-nowrap">{volumeLabel}</div>
-      </Row>
-
-      {!disabled && <ContractInfoDialog contract={contract} bets={bets} />}
+      {user && (
+        <>
+          <Row className="items-center gap-1">
+            <DatabaseIcon className="h-5 w-5" />
+            <div className="whitespace-nowrap">{volumeLabel}</div>
+          </Row>
+          {!disabled && <ContractInfoDialog contract={contract} bets={bets} />}
+        </>
+      )}
     </Row>
   )
 }
diff --git a/web/components/contract/contract-overview.tsx b/web/components/contract/contract-overview.tsx
index 797921bf..4676f796 100644
--- a/web/components/contract/contract-overview.tsx
+++ b/web/components/contract/contract-overview.tsx
@@ -73,7 +73,14 @@ export const ContractOverview = (props: {
           <Row className="items-center justify-between gap-4 xl:hidden">
             <BinaryResolutionOrChance contract={contract} />
             {tradingAllowed(contract) && (
-              <BetButton contract={contract as CPMMBinaryContract} />
+              <Col>
+                <BetButton contract={contract as CPMMBinaryContract} />
+                {!user && (
+                  <div className="text-sm text-gray-500">
+                    (Don't worry, it's play money!)
+                  </div>
+                )}
+              </Col>
             )}
           </Row>
         ) : isPseudoNumeric ? (
@@ -102,6 +109,7 @@ export const ContractOverview = (props: {
           contract={contract}
           bets={bets}
           isCreator={isCreator}
+          user={user}
         />
       </Col>
       <Spacer h={4} />
diff --git a/web/components/contract/share-row.tsx b/web/components/contract/share-row.tsx
index 0aa0c6b0..b4c3b4f3 100644
--- a/web/components/contract/share-row.tsx
+++ b/web/components/contract/share-row.tsx
@@ -27,23 +27,25 @@ export function ShareRow(props: {
 
   return (
     <Row className="mt-2">
-      <Button
-        size="lg"
-        color="gray-white"
-        className={'flex'}
-        onClick={() => {
-          setShareOpen(true)
-        }}
-      >
-        <ShareIcon className={clsx('mr-2 h-[24px] w-5')} aria-hidden="true" />
-        Share
-        <ShareModal
-          isOpen={isShareOpen}
-          setOpen={setShareOpen}
-          contract={contract}
-          user={user}
-        />
-      </Button>
+      {user && (
+        <Button
+          size="lg"
+          color="gray-white"
+          className={'flex'}
+          onClick={() => {
+            setShareOpen(true)
+          }}
+        >
+          <ShareIcon className={clsx('mr-2 h-[24px] w-5')} aria-hidden="true" />
+          Share
+          <ShareModal
+            isOpen={isShareOpen}
+            setOpen={setShareOpen}
+            contract={contract}
+            user={user}
+          />
+        </Button>
+      )}
 
       {showChallenge && (
         <Button