open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Iconify contract details; show relative closing time

Browse Source
This commit is contained in:
Austin Chen 2022-02-17 18:24:10 -08:00
parent 675f0a1599
commit 3dd7b12e71
1 changed files with 36 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
web/components/contract-card.tsx
View File

@ -13,7 +13,7 @@ import { Col } from './layout/col'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { TrendingUpIcon } from '@heroicons/react/solid' import { TrendingUpIcon } from '@heroicons/react/solid'
import { DateTimeTooltip } from './datetime-tooltip' import { DateTimeTooltip } from './datetime-tooltip'
import { ClockIcon } from '@heroicons/react/outline' import { ClockIcon, DatabaseIcon } from '@heroicons/react/outline'
import { fromNow } from '../lib/util/time' import { fromNow } from '../lib/util/time'
import { Avatar } from './avatar' import { Avatar } from './avatar'
import { Spacer } from './layout/spacer' import { Spacer } from './layout/spacer'
@ -48,7 +48,7 @@ export function ContractCard(props: {
<Row className="justify-between gap-4"> <Row className="justify-between gap-4">
<p <p
className="font-medium text-indigo-700 break-words" className="break-words font-medium text-indigo-700"
style={{ /* For iOS safari */ wordBreak: 'break-word' }} style={{ /* For iOS safari */ wordBreak: 'break-word' }}
> >
{question} {question}
@ -141,17 +141,19 @@ function AbbrContractDetails(props: {
</Row> </Row>
{showHotVolume ? ( {showHotVolume ? (
<div className="whitespace-nowrap"> <Row className="gap-1">
<TrendingUpIcon className="inline h-5 w-5 text-gray-500" />{' '} <TrendingUpIcon className="h-5 w-5" /> {formatMoney(volume24Hours)}
{formatMoney(volume24Hours)} </Row>
</div>
) : showCloseTime ? ( ) : showCloseTime ? (
<div className="whitespace-nowrap"> <Row className="gap-1">
<ClockIcon className="-my-1 inline h-5 w-5 text-gray-500" /> Closes{' '} <ClockIcon className="h-5 w-5" />
{fromNow(closeTime || 0)} Closes {fromNow(closeTime || 0)}
</div> </Row>
) : ( ) : (
<div className="whitespace-nowrap">{formatMoney(truePool)} pool</div> <Row className="gap-1">
{/* <DatabaseIcon className="h-5 w-5" /> */}
{formatMoney(truePool)} pool
</Row>
)} )}
</Row> </Row>
</Col> </Col>
@ -165,7 +167,8 @@ export function ContractDetails(props: { contract: Contract }) {
return ( return (
<Col className="gap-2 text-sm text-gray-500 sm:flex-row sm:flex-wrap"> <Col className="gap-2 text-sm text-gray-500 sm:flex-row sm:flex-wrap">
<Row className="flex-wrap items-center gap-2"> <Row className="flex-wrap items-center gap-x-4 gap-y-2">
<Row className="items-center gap-2">
<Avatar <Avatar
username={creatorUsername} username={creatorUsername}
avatarUrl={contract.creatorAvatarUrl} avatarUrl={contract.creatorAvatarUrl}
@ -176,9 +179,11 @@ export function ContractDetails(props: { contract: Contract }) {
name={creatorName} name={creatorName}
username={creatorUsername} username={creatorUsername}
/> />
<div className="">•</div> </Row>
<Row className="items-center gap-1">
<ClockIcon className="h-5 w-5" />
<div className="whitespace-nowrap">
<DateTimeTooltip text="Market created:" time={contract.createdTime}> <DateTimeTooltip text="Market created:" time={contract.createdTime}>
{createdDate} {createdDate}
</DateTimeTooltip> </DateTimeTooltip>
@ -204,15 +209,18 @@ export function ContractDetails(props: { contract: Contract }) {
} }
time={closeTime} time={closeTime}
> >
{dayjs(closeTime).format('MMM D, YYYY')} {dayjs(closeTime).format('MMM D')} ({fromNow(closeTime)})
</DateTimeTooltip> </DateTimeTooltip>
</> </>
)} )}
</div> </Row>
<Row className="items-center gap-1">
<DatabaseIcon className="h-5 w-5" />
<div className="">•</div>
<div className="whitespace-nowrap">{formatMoney(truePool)} pool</div> <div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
</Row> </Row>
</Row>
</Col> </Col>
) )
} }