Hide tip market if creator

common/like.ts

@@ -3,6 +3,6 @@ export type Like = {
   userId: string
   type: 'contract'
   createdTime: number
-  tipTxnId?: string
+  tipTxnId?: string // only holds most recent tip txn id
 }
 export const LIKE_TIP_AMOUNT = 5

web/components/contract/contract-details.tsx

@@ -16,7 +16,7 @@ import { Contract, updateContract } from 'web/lib/firebase/contracts'
 import { DateTimeTooltip } from '../datetime-tooltip'
 import { fromNow } from 'web/lib/util/time'
 import { Avatar } from '../avatar'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { ContractInfoDialog } from './contract-info-dialog'
 import { Bet } from 'common/bet'
 import NewContractBadge from '../new-contract-badge'
@@ -145,7 +145,7 @@ export function ContractDetails(props: {
   isCreator?: boolean
   disabled?: boolean
 }) {
-  const { contract, bets, isCreator, disabled } = props
+  const { contract, isCreator, disabled } = props
   const { closeTime, creatorName, creatorUsername, creatorId, groupLinks } =
     contract
   const { volumeLabel, resolvedDate } = contractMetrics(contract)
@@ -267,7 +267,6 @@ export function ContractDetails(props: {
           {!disabled && (
             <ContractInfoDialog
               contract={contract}
-              bets={bets}
               className={'hidden md:inline-flex'}
             />
           )}
@@ -310,15 +309,11 @@ export function ExtraMobileContractDetails(props: {
         !resolvedDate &&
         contract.closeTime && (
           <Col className={'items-center text-sm'}>
-            <Row className={'text-gray-500'}>
-              <DateTimeTooltip text="Market closes:" time={contract.closeTime}>
             <EditableCloseDate
               closeTime={contract.closeTime}
               contract={contract}
               isCreator={contract.creatorId === user?.id}
             />
-              </DateTimeTooltip>
-            </Row>
             <Row className={'text-gray-400'}>Ends</Row>
           </Col>
         )
@@ -387,10 +382,10 @@ function EditableCloseDate(props: {
   return (
     <>
       {isEditingCloseTime ? (
-        <Row className="mr-1 items-start">
+        <Row className="z-10 mr-2 w-full shrink-0 items-start items-center gap-1">
           <input
             type="date"
-            className="input input-bordered"
+            className="input input-bordered shrink-0"
             onClick={(e) => e.stopPropagation()}
             onChange={(e) => setCloseDate(e.target.value)}
             min={Date.now()}
@@ -398,20 +393,25 @@ function EditableCloseDate(props: {
           />
           <input
             type="time"
-            className="input input-bordered ml-2"
+            className="input input-bordered ml-2 shrink-0"
             onClick={(e) => e.stopPropagation()}
             onChange={(e) => setCloseHoursMinutes(e.target.value)}
             min="00:00"
             value={closeHoursMinutes}
           />
+          <Button size={'xs'} color={'blue'} onClick={onSave}>
+            Done
+          </Button>
         </Row>
       ) : (
         <DateTimeTooltip
           text={closeTime > Date.now() ? 'Trading ends:' : 'Trading ended:'}
           time={closeTime}
-          className={isCreator ? 'cursor-pointer' : ''}
         >
-          <span onClick={() => isCreator && setIsEditingCloseTime(true)}>
+          <span
+            className={isCreator ? 'cursor-pointer' : ''}
+            onClick={() => isCreator && setIsEditingCloseTime(true)}
+          >
             {isSameYear
               ? dayJsCloseTime.format('MMM D')
               : dayJsCloseTime.format('MMM D, YYYY')}
@@ -419,14 +419,6 @@ function EditableCloseDate(props: {
           </span>
         </DateTimeTooltip>
       )}
-
-      {isCreator && isEditingCloseTime && (
-        <Row className={'mt-2 items-center justify-end'}>
-          <button className="btn btn-xs" onClick={onSave}>
-            Done
-          </button>
-        </Row>
-      )}
     </>
   )
 }

web/components/contract/contract-info-dialog.tsx

@@ -1,9 +1,7 @@
 import { DotsHorizontalIcon } from '@heroicons/react/outline'
 import clsx from 'clsx'
 import dayjs from 'dayjs'
-import { uniqBy } from 'lodash'
 import { useState } from 'react'
-import { Bet } from 'common/bet'
 
 import { Contract } from 'common/contract'
 import { formatMoney } from 'common/util/format'
@@ -24,10 +22,9 @@ export const contractDetailsButtonClassName =
 
 export function ContractInfoDialog(props: {
   contract: Contract
-  bets: Bet[]
   className?: string
 }) {
-  const { contract, bets, className } = props
+  const { contract, className } = props
 
   const [open, setOpen] = useState(false)
   const [featured, setFeatured] = useState(
@@ -41,11 +38,7 @@ export function ContractInfoDialog(props: {
   const { createdTime, closeTime, resolutionTime, mechanism, outcomeType, id } =
     contract
 
-  const tradersCount = uniqBy(
-    bets.filter((bet) => !bet.isAnte),
-    'userId'
-  ).length
-
+  const bettorsCount = contract.uniqueBettorCount ?? 'Unknown'
   const typeDisplay =
     outcomeType === 'BINARY'
       ? 'YES / NO'
@@ -140,8 +133,8 @@ export function ContractInfoDialog(props: {
               </tr> */}
 
               <tr>
-                <td>Traders</td>
-                <td>{tradersCount}</td>
+                <td>Bettors</td>
+                <td>{bettorsCount}</td>
               </tr>
 
               <tr>

web/components/contract/contract-overview.tsx

@@ -46,9 +46,9 @@ export const ContractOverview = (props: {
           isCreator={isCreator}
         />
         <Row className="justify-between gap-4">
-          <Col className="gap-2 text-2xl text-indigo-700 md:text-3xl">
+          <div className="text-2xl text-indigo-700 md:text-3xl">
             <Linkify text={question} />
-          </Col>
+          </div>
           <Row className={'hidden gap-3 xl:flex'}>
             {isBinary && (
               <BinaryResolutionOrChance

web/components/contract/extra-contract-actions-row.tsx

@@ -3,7 +3,7 @@ import { ShareIcon } from '@heroicons/react/outline'
 
 import { Row } from '../layout/row'
 import { Contract } from 'web/lib/firebase/contracts'
-import { useState } from 'react'
+import React, { useState } from 'react'
 import { Button } from 'web/components/button'
 import { User } from 'common/user'
 import { ShareModal } from './share-modal'
@@ -49,9 +49,11 @@ export function ExtraContractActionsRow(props: {
       </Button>
 
       <FollowMarketButton contract={contract} user={user} />
+      {user?.id !== contract.creatorId && (
         <LikeMarketButton contract={contract} user={user} />
+      )}
       <Col className={'justify-center md:hidden'}>
-        <ContractInfoDialog contract={contract} bets={bets} />
+        <ContractInfoDialog contract={contract} />
       </Col>
     </Row>
   )