diff --git a/web/components/contract-search.tsx b/web/components/contract-search.tsx index 2f22918a..4c557648 100644 --- a/web/components/contract-search.tsx +++ b/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 ( ) diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx index bac24586..87239465 100644 --- a/web/components/contract/contract-card.tsx +++ b/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: { {showQuickBet ? ( diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx index 863d8c27..03925a35 100644 --- a/web/components/contract/contract-details.tsx +++ b/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: { {formatMoney(volume24Hours)} - ) : showCloseTime ? ( + ) : showTime === 'close-date' ? ( {(closeTime || 0) < Date.now() ? 'Closed' : 'Closes'}{' '} {fromNow(closeTime || 0)} + ) : showTime === 'resolve-date' && resolutionTime !== undefined ? ( + + + {'Resolved '} + {fromNow(resolutionTime || 0)} + ) : volume > 0 || !isNew ? ( {contractPool(contract)} pool ) : ( @@ -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 ( @@ -98,7 +113,7 @@ export function AbbrContractDetails(props: { ) diff --git a/web/components/contract/contracts-list.tsx b/web/components/contract/contracts-list.tsx index bc8dbe76..e24090d9 100644 --- a/web/components/contract/contracts-list.tsx +++ b/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: { onContractClick(contract) : undefined } diff --git a/web/pages/contract-search-firestore.tsx b/web/pages/contract-search-firestore.tsx index 98a0f6cb..00d8fe49 100644 --- a/web/pages/contract-search-firestore.tsx +++ b/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 (
{/* Show a search input next to a sort dropdown */} @@ -85,7 +91,6 @@ export default function ContractSearchFirestore(props: {
- {contracts === undefined ? ( ) : ( @@ -93,7 +98,7 @@ export default function ContractSearchFirestore(props: { contracts={matches} loadMore={() => {}} hasMore={false} - showCloseTime={['close-date', 'closed'].includes(sort)} + showTime={showTime} /> )}