manifold/web/components/contract-card.tsx
James Grugett b2501d8145
Free response (#47)
* Answer datatype and MULTI outcome type for Contract

* Create free answer contract

* Automatically sort Tailwind classes with Prettier (#45)

* Add Prettier Tailwind plugin

* Autoformat Tailwind classes with Prettier

* Allow for non-binary contracts in contract page and related components

* logo with white inside, transparent bg

* Create answer

* Some UI for showing answers

* Answer bet panel

* Convert rest of calcuate file to generic multi contracts

* Working betting with ante'd NONE answer

* Numbered answers. Layout & calculation tweaks

* Can bet. More layout tweaks!

* Resolve answer UI

* Resolve multi market

* Resolved market UI

* Fix feed and cards for multi contracts

* Sell bets. Various fixes

* Tweaks for trades page

* Always dev mode

* Create answer bet has isAnte: true

* Fix  card showing 0% for multi contracts

* Fix grouped bets feed for multi outcomes

* None option converted to none of the above label at bottom of list. Button to resolve none.

* Tweaks to no answers yet, resolve button layout

* Show ante bets on new answers in the feed

* Update placeholder text for description

* Consolidate firestore rules for subcollections

* Remove Contract and Bet type params. Use string type for outcomes.

* Increase char limit to 10k for answers. Preserve line breaks.

* Don't show resolve options after answer chosen

* Fix type error in script

* Remove NONE resolution option

* Change outcomeType to include 'MULTI' and 'FREE_RESPONSE'

* Show bet probability change and payout when creating answer

* User info change: also change answers

* Append answers to contract field 'answers'

* sort trades by resolved

* Don't include trailing !:,.; in links

* Stop flooring inputs into formatMoney

* Revert "Stop flooring inputs into formatMoney"

This reverts commit 2f7ab18429.

* Consistently floor user.balance

* Expand create panel on focus

From Richard Hanania's feedback

* welcome email: include link to manifold

* Fix home page in dev on branches that are not free-response

* Close emails (#50)

* script init for stephen dev

* market close emails

* order of operations

* template email

* sendMarketCloseEmail: handle unsubscribe

* remove debugging

* marketCloseEmails: every hour

* sendMarketCloseEmails: check undefined

* marketCloseEmails: "every hour" => "every 1 hours"

* Set up a read API using Vercel serverless functions (#49)

* Set up read API using Vercel serverless functions

Featuring:
/api/v0/markets
/api/v0/market/[contractId]
/api/v0/slug/[contractSlug]

* Include tags in API

* Tweaks. Remove filter for only binary contract

* Fix bet probability change for NO bets

* Put back isProd calculation

Co-authored-by: Austin Chen <akrolsmir@gmail.com>
Co-authored-by: mantikoros <sgrugett@gmail.com>
Co-authored-by: mantikoros <95266179+mantikoros@users.noreply.github.com>
2022-02-17 17:00:19 -06:00

238 lines
6.7 KiB
TypeScript

import clsx from 'clsx'
import Link from 'next/link'
import { Row } from '../components/layout/row'
import { formatMoney } from '../../common/util/format'
import { UserLink } from './user-page'
import {
Contract,
contractMetrics,
contractPath,
getBinaryProbPercent,
} from '../lib/firebase/contracts'
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 { fromNow } from '../lib/util/time'
import { Avatar } from './avatar'
import { Spacer } from './layout/spacer'
export function ContractCard(props: {
contract: Contract
showHotVolume?: boolean
showCloseTime?: boolean
className?: string
}) {
const { contract, showHotVolume, showCloseTime, className } = props
const { question } = contract
return (
<div>
<div
className={clsx(
'relative rounded-lg bg-white p-6 shadow-md hover:bg-gray-100',
className
)}
>
<Link href={contractPath(contract)}>
<a className="absolute left-0 right-0 top-0 bottom-0" />
</Link>
<AbbrContractDetails
contract={contract}
showHotVolume={showHotVolume}
showCloseTime={showCloseTime}
/>
<Spacer h={3} />
<Row className="justify-between gap-4">
<p
className="font-medium text-indigo-700 break-words"
style={{ /* For iOS safari */ wordBreak: 'break-word' }}
>
{question}
</p>
<ResolutionOrChance className="items-center" contract={contract} />
</Row>
</div>
</div>
)
}
export function ResolutionOrChance(props: {
contract: Contract
large?: boolean
className?: string
}) {
const { contract, large, className } = props
const { resolution, outcomeType } = contract
const isBinary = outcomeType === 'BINARY'
const marketClosed = (contract.closeTime || Infinity) < Date.now()
const resolutionColor =
{
YES: 'text-primary',
NO: 'text-red-400',
MKT: 'text-blue-400',
CANCEL: 'text-yellow-400',
'': '', // Empty if unresolved
}[resolution || ''] ?? 'text-primary'
const probColor = marketClosed ? 'text-gray-400' : 'text-primary'
const resolutionText =
{
YES: 'YES',
NO: 'NO',
MKT: getBinaryProbPercent(contract),
CANCEL: 'N/A',
'': '',
}[resolution || ''] ?? `#${resolution}`
return (
<Col className={clsx(large ? 'text-4xl' : 'text-3xl', className)}>
{resolution ? (
<>
<div
className={clsx('text-gray-500', large ? 'text-xl' : 'text-base')}
>
Resolved
</div>
<div className={resolutionColor}>{resolutionText}</div>
</>
) : (
isBinary && (
<>
<div className={probColor}>{getBinaryProbPercent(contract)}</div>
<div className={clsx(probColor, large ? 'text-xl' : 'text-base')}>
chance
</div>
</>
)
)}
</Col>
)
}
function AbbrContractDetails(props: {
contract: Contract
showHotVolume?: boolean
showCloseTime?: boolean
}) {
const { contract, showHotVolume, showCloseTime } = props
const { volume24Hours, creatorName, creatorUsername, closeTime } = contract
const { truePool } = contractMetrics(contract)
return (
<Col className={clsx('gap-2 text-sm text-gray-500')}>
<Row className="items-center justify-between">
<Row className="items-center gap-2">
<Avatar
username={creatorUsername}
avatarUrl={contract.creatorAvatarUrl}
size={6}
/>
<UserLink
className="whitespace-nowrap"
name={creatorName}
username={creatorUsername}
/>
</Row>
{showHotVolume ? (
<div className="whitespace-nowrap">
<TrendingUpIcon className="inline h-5 w-5 text-gray-500" />{' '}
{formatMoney(volume24Hours)}
</div>
) : showCloseTime ? (
<div className="whitespace-nowrap">
<ClockIcon className="-my-1 inline h-5 w-5 text-gray-500" /> Closes{' '}
{fromNow(closeTime || 0)}
</div>
) : (
<div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
)}
</Row>
</Col>
)
}
export function ContractDetails(props: { contract: Contract }) {
const { contract } = props
const { closeTime, creatorName, creatorUsername } = contract
const { truePool, createdDate, resolvedDate } = contractMetrics(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>
<div className="whitespace-nowrap">
<DateTimeTooltip text="Market created:" time={contract.createdTime}>
{createdDate}
</DateTimeTooltip>
{resolvedDate && contract.resolutionTime ? (
<>
{' - '}
<DateTimeTooltip
text="Market resolved:"
time={contract.resolutionTime}
>
{resolvedDate}
</DateTimeTooltip>
</>
) : null}
{!resolvedDate && closeTime && (
<>
{' - '}
<DateTimeTooltip
text={
closeTime > Date.now() ? 'Trading ends:' : 'Trading ended:'
}
time={closeTime}
>
{dayjs(closeTime).format('MMM D, YYYY')}
</DateTimeTooltip>
</>
)}
</div>
<div className=""></div>
<div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
</Row>
</Col>
)
}
// String version of the above, to send to the OpenGraph image generator
export function contractTextDetails(contract: Contract) {
const { closeTime, tags } = contract
const { truePool, createdDate, resolvedDate } = contractMetrics(contract)
const hashtags = tags.map((tag) => `#${tag}`)
return (
`${resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}` +
(closeTime
? `${closeTime > Date.now() ? 'Closes' : 'Closed'} ${dayjs(
closeTime
).format('MMM D, h:mma')}`
: '') +
`${formatMoney(truePool)} pool` +
(hashtags.length > 0 ? `${hashtags.join(' ')}` : '')
)
}