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

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

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