Show resolution time in market cards when appropriate (#565)

* Show resolution time in market cards when appropriate

* Rebase and fix contract-search-firestore

web/components/contract-search.tsx

@@ -238,12 +238,18 @@ export function ContractSearchInner(props: {
 
   if (isInitialLoad && contracts.length === 0) return <></>
 
+  const showTime = index.endsWith('close-date')
+    ? 'close-date'
+    : index.endsWith('resolve-date')
+    ? 'resolve-date'
+    : undefined
+
   return (
     <ContractsGrid
       contracts={contracts}
       loadMore={showMore}
       hasMore={!isLastPage}
-      showCloseTime={index.endsWith('close-date')}
+      showTime={showTime}
       onContractClick={onContractClick}
     />
   )

web/components/contract/contract-card.tsx

@@ -17,7 +17,7 @@ import {
   FreeResponseOutcomeLabel,
 } from '../outcome-label'
 import { getOutcomeProbability, getTopAnswer } from 'common/calculate'
-import { AvatarDetails, MiscDetails } from './contract-details'
+import { AvatarDetails, MiscDetails, ShowTime } from './contract-details'
 import { getExpectedValue, getValueFromBucket } from 'common/calculate-dpm'
 import { QuickBet, ProbBar, getColor } from './quick-bet'
 import { useContractWithPreload } from 'web/hooks/use-contract'
@@ -28,13 +28,12 @@ import { trackCallback } from 'web/lib/service/analytics'
 export function ContractCard(props: {
   contract: Contract
   showHotVolume?: boolean
-  showCloseTime?: boolean
+  showTime?: ShowTime
   className?: string
   onClick?: () => void
   hideQuickBet?: boolean
 }) {
-  const { showHotVolume, showCloseTime, className, onClick, hideQuickBet } =
-    props
+  const { showHotVolume, showTime, className, onClick, hideQuickBet } = props
   const contract = useContractWithPreload(props.contract) ?? props.contract
   const { question, outcomeType } = contract
   const { resolution } = contract
@@ -118,7 +117,7 @@ export function ContractCard(props: {
             <MiscDetails
               contract={contract}
               showHotVolume={showHotVolume}
-              showCloseTime={showCloseTime}
+              showTime={showTime}
             />
           </Col>
           {showQuickBet ? (

web/components/contract/contract-details.tsx

@@ -30,14 +30,23 @@ import { SiteLink } from 'web/components/site-link'
 import { DAY_MS } from 'common/util/time'
 import { useGroupsWithContract } from 'web/hooks/use-group'
 
+export type ShowTime = 'resolve-date' | 'close-date'
+
 export function MiscDetails(props: {
   contract: Contract
   showHotVolume?: boolean
-  showCloseTime?: boolean
+  showTime?: ShowTime
 }) {
-  const { contract, showHotVolume, showCloseTime } = props
-  const { volume, volume24Hours, closeTime, tags, isResolved, createdTime } =
-    contract
+  const { contract, showHotVolume, showTime } = props
+  const {
+    volume,
+    volume24Hours,
+    closeTime,
+    tags,
+    isResolved,
+    createdTime,
+    resolutionTime,
+  } = contract
   // Show at most one category that this contract is tagged by
   const categories = CATEGORY_LIST.filter((category) =>
     tags.map((t) => t.toLowerCase()).includes(category)
@@ -50,12 +59,18 @@ export function MiscDetails(props: {
         <Row className="gap-0.5">
           <TrendingUpIcon className="h-5 w-5" /> {formatMoney(volume24Hours)}
         </Row>
-      ) : showCloseTime ? (
+      ) : showTime === 'close-date' ? (
         <Row className="gap-0.5">
           <ClockIcon className="h-5 w-5" />
           {(closeTime || 0) < Date.now() ? 'Closed' : 'Closes'}{' '}
           {fromNow(closeTime || 0)}
         </Row>
+      ) : showTime === 'resolve-date' && resolutionTime !== undefined ? (
+        <Row className="gap-0.5">
+          <ClockIcon className="h-5 w-5" />
+          {'Resolved '}
+          {fromNow(resolutionTime || 0)}
+        </Row>
       ) : volume > 0 || !isNew ? (
         <Row>{contractPool(contract)} pool</Row>
       ) : (
@@ -88,9 +103,9 @@ export function AvatarDetails(props: { contract: Contract }) {
 export function AbbrContractDetails(props: {
   contract: Contract
   showHotVolume?: boolean
-  showCloseTime?: boolean
+  showTime?: ShowTime
 }) {
-  const { contract, showHotVolume, showCloseTime } = props
+  const { contract, showHotVolume, showTime } = props
   return (
     <Row className="items-center justify-between">
       <AvatarDetails contract={contract} />
@@ -98,7 +113,7 @@ export function AbbrContractDetails(props: {
       <MiscDetails
         contract={contract}
         showHotVolume={showHotVolume}
-        showCloseTime={showCloseTime}
+        showTime={showTime}
       />
     </Row>
   )

web/components/contract/contracts-list.tsx

@@ -3,6 +3,7 @@ import { User } from '../../lib/firebase/users'
 import { Col } from '../layout/col'
 import { SiteLink } from '../site-link'
 import { ContractCard } from './contract-card'
+import { ShowTime } from './contract-details'
 import { ContractSearch } from '../contract-search'
 import { useIsVisible } from 'web/hooks/use-is-visible'
 import { useEffect, useState } from 'react'
@@ -12,14 +13,14 @@ export function ContractsGrid(props: {
   contracts: Contract[]
   loadMore: () => void
   hasMore: boolean
-  showCloseTime?: boolean
+  showTime?: ShowTime
   onContractClick?: (contract: Contract) => void
   overrideGridClassName?: string
   hideQuickBet?: boolean
 }) {
   const {
     contracts,
-    showCloseTime,
+    showTime,
     hasMore,
     loadMore,
     onContractClick,
@@ -60,7 +61,7 @@ export function ContractsGrid(props: {
           <ContractCard
             contract={contract}
             key={contract.id}
-            showCloseTime={showCloseTime}
+            showTime={showTime}
             onClick={
               onContractClick ? () => onContractClick(contract) : undefined
             }

web/pages/contract-search-firestore.tsx

@@ -62,6 +62,12 @@ export default function ContractSearchFirestore(props: {
     matches = sortBy(matches, ({ volume24Hours }) => -1 * volume24Hours)
   }
 
+  const showTime = ['close-date', 'closed'].includes(sort)
+    ? 'close-date'
+    : sort === 'resolve-date'
+    ? 'resolve-date'
+    : undefined
+
   return (
     <div>
       {/* Show a search input next to a sort dropdown */}
@@ -85,7 +91,6 @@ export default function ContractSearchFirestore(props: {
           <option value="close-date">Closing soon</option>
         </select>
       </div>
-
       {contracts === undefined ? (
         <LoadingIndicator />
       ) : (
@@ -93,7 +98,7 @@ export default function ContractSearchFirestore(props: {
           contracts={matches}
           loadMore={() => {}}
           hasMore={false}
-          showCloseTime={['close-date', 'closed'].includes(sort)}
+          showTime={showTime}
         />
       )}
     </div>