2022-06-15 04:31:20 +00:00
|
|
|
import { DotsHorizontalIcon } from '@heroicons/react/outline'
|
2022-04-07 20:52:54 +00:00
|
|
|
import clsx from 'clsx'
|
2022-04-09 23:04:13 +00:00
|
|
|
import dayjs from 'dayjs'
|
2022-04-07 20:52:54 +00:00
|
|
|
import { useState } from 'react'
|
2022-09-16 04:08:31 +00:00
|
|
|
import { capitalize } from 'lodash'
|
2022-04-09 23:04:13 +00:00
|
|
|
|
2022-05-09 13:04:36 +00:00
|
|
|
import { Contract } from 'common/contract'
|
|
|
|
import { formatMoney } from 'common/util/format'
|
2022-08-25 13:05:26 +00:00
|
|
|
import { contractPool, updateContract } from 'web/lib/firebase/contracts'
|
2022-09-30 15:27:42 +00:00
|
|
|
import { LiquidityBountyPanel } from 'web/components/contract/liquidity-bounty-panel'
|
2022-04-07 21:15:51 +00:00
|
|
|
import { Col } from '../layout/col'
|
|
|
|
import { Modal } from '../layout/modal'
|
|
|
|
import { Title } from '../title'
|
2022-06-12 23:34:13 +00:00
|
|
|
import { InfoTooltip } from '../info-tooltip'
|
2022-08-22 17:48:21 +00:00
|
|
|
import { useAdmin, useDev } from 'web/hooks/use-admin'
|
|
|
|
import { SiteLink } from '../site-link'
|
|
|
|
import { firestoreConsolePath } from 'common/envs/constants'
|
2022-08-25 13:05:26 +00:00
|
|
|
import { deleteField } from 'firebase/firestore'
|
2022-08-26 02:42:40 +00:00
|
|
|
import ShortToggle from '../widgets/short-toggle'
|
2022-10-05 14:38:19 +00:00
|
|
|
import { DuplicateContractButton } from '../duplicate-contract-button'
|
2022-08-31 21:33:24 +00:00
|
|
|
import { Row } from '../layout/row'
|
2022-10-03 15:26:39 +00:00
|
|
|
import { BETTORS, User } from 'common/user'
|
2022-09-16 00:41:25 +00:00
|
|
|
import { Button } from '../button'
|
2022-04-07 20:52:54 +00:00
|
|
|
|
2022-07-01 13:47:19 +00:00
|
|
|
export const contractDetailsButtonClassName =
|
2022-07-21 05:45:53 +00:00
|
|
|
'group flex items-center rounded-md px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-100 text-gray-400 hover:text-gray-500'
|
2022-07-01 13:47:19 +00:00
|
|
|
|
2022-08-30 23:13:25 +00:00
|
|
|
export function ContractInfoDialog(props: {
|
|
|
|
contract: Contract
|
2022-10-03 15:26:39 +00:00
|
|
|
user: User | null | undefined
|
2022-08-30 23:13:25 +00:00
|
|
|
className?: string
|
|
|
|
}) {
|
2022-10-03 15:26:39 +00:00
|
|
|
const { contract, className, user } = props
|
2022-04-07 20:52:54 +00:00
|
|
|
|
2022-06-14 20:01:32 +00:00
|
|
|
const [open, setOpen] = useState(false)
|
2022-08-25 13:05:26 +00:00
|
|
|
const [featured, setFeatured] = useState(
|
|
|
|
(contract?.featuredOnHomeRank ?? 0) > 0
|
|
|
|
)
|
2022-08-22 17:48:21 +00:00
|
|
|
const isDev = useDev()
|
|
|
|
const isAdmin = useAdmin()
|
2022-10-03 15:26:39 +00:00
|
|
|
const isCreator = user?.id === contract.creatorId
|
|
|
|
const isUnlisted = contract.visibility === 'unlisted'
|
2022-10-03 15:36:49 +00:00
|
|
|
const wasUnlistedByCreator = contract.unlistedById
|
|
|
|
? contract.unlistedById === contract.creatorId
|
2022-10-03 15:57:27 +00:00
|
|
|
: false
|
2022-04-09 23:04:13 +00:00
|
|
|
|
2022-08-28 18:27:51 +00:00
|
|
|
const formatTime = (dt: number) => dayjs(dt).format('MMM DD, YYYY hh:mm a')
|
2022-06-15 04:31:20 +00:00
|
|
|
|
2022-09-16 04:08:31 +00:00
|
|
|
const {
|
|
|
|
createdTime,
|
|
|
|
closeTime,
|
|
|
|
resolutionTime,
|
|
|
|
uniqueBettorCount,
|
|
|
|
mechanism,
|
|
|
|
outcomeType,
|
|
|
|
id,
|
|
|
|
} = contract
|
2022-06-12 23:34:13 +00:00
|
|
|
|
|
|
|
const typeDisplay =
|
|
|
|
outcomeType === 'BINARY'
|
|
|
|
? 'YES / NO'
|
|
|
|
: outcomeType === 'FREE_RESPONSE'
|
|
|
|
? 'Free response'
|
2022-07-28 02:40:33 +00:00
|
|
|
: outcomeType === 'MULTIPLE_CHOICE'
|
|
|
|
? 'Multiple choice'
|
2022-06-12 23:34:13 +00:00
|
|
|
: 'Numeric'
|
2022-04-09 23:04:13 +00:00
|
|
|
|
2022-08-26 02:42:40 +00:00
|
|
|
const onFeaturedToggle = async (enabled: boolean) => {
|
|
|
|
if (
|
|
|
|
enabled &&
|
|
|
|
(contract.featuredOnHomeRank === 0 || !contract?.featuredOnHomeRank)
|
|
|
|
) {
|
|
|
|
await updateContract(id, { featuredOnHomeRank: 1 })
|
|
|
|
setFeatured(true)
|
|
|
|
} else if (!enabled && (contract?.featuredOnHomeRank ?? 0) > 0) {
|
|
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
|
|
// @ts-ignore
|
|
|
|
await updateContract(id, { featuredOnHomeRank: deleteField() })
|
|
|
|
setFeatured(false)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-07 20:52:54 +00:00
|
|
|
return (
|
|
|
|
<>
|
2022-09-16 00:41:25 +00:00
|
|
|
<Button
|
|
|
|
size="sm"
|
|
|
|
color="gray-white"
|
2022-08-30 23:13:25 +00:00
|
|
|
className={clsx(contractDetailsButtonClassName, className)}
|
2022-04-07 20:52:54 +00:00
|
|
|
onClick={() => setOpen(true)}
|
|
|
|
>
|
|
|
|
<DotsHorizontalIcon
|
2022-09-16 00:41:25 +00:00
|
|
|
className={clsx('h-5 w-5 flex-shrink-0')}
|
2022-04-07 20:52:54 +00:00
|
|
|
aria-hidden="true"
|
|
|
|
/>
|
2022-09-16 00:41:25 +00:00
|
|
|
</Button>
|
2022-04-07 20:52:54 +00:00
|
|
|
|
|
|
|
<Modal open={open} setOpen={setOpen}>
|
|
|
|
<Col className="gap-4 rounded bg-white p-6">
|
2022-09-16 00:41:25 +00:00
|
|
|
<Title className="!mt-0 !mb-0" text="This Market" />
|
2022-04-07 20:52:54 +00:00
|
|
|
|
2022-04-09 23:04:13 +00:00
|
|
|
<table className="table-compact table-zebra table w-full text-gray-500">
|
|
|
|
<tbody>
|
2022-06-12 23:34:13 +00:00
|
|
|
<tr>
|
|
|
|
<td>Type</td>
|
|
|
|
<td>{typeDisplay}</td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
<td>Payout</td>
|
2022-08-19 16:53:16 +00:00
|
|
|
<td className="flex gap-1">
|
2022-06-12 23:34:13 +00:00
|
|
|
{mechanism === 'cpmm-1' ? (
|
|
|
|
<>
|
|
|
|
Fixed{' '}
|
|
|
|
<InfoTooltip text="Each YES share is worth M$1 if YES wins." />
|
|
|
|
</>
|
|
|
|
) : (
|
2022-08-19 16:53:16 +00:00
|
|
|
<>
|
2022-06-12 23:34:13 +00:00
|
|
|
Parimutuel{' '}
|
|
|
|
<InfoTooltip text="Each share is a fraction of the pool. " />
|
2022-08-19 16:53:16 +00:00
|
|
|
</>
|
2022-06-12 23:34:13 +00:00
|
|
|
)}
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
|
2022-04-09 23:04:13 +00:00
|
|
|
<tr>
|
|
|
|
<td>Market created</td>
|
|
|
|
<td>{formatTime(createdTime)}</td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
{closeTime && (
|
|
|
|
<tr>
|
|
|
|
<td>Market close{closeTime > Date.now() ? 's' : 'd'}</td>
|
|
|
|
<td>{formatTime(closeTime)}</td>
|
|
|
|
</tr>
|
|
|
|
)}
|
|
|
|
|
|
|
|
{resolutionTime && (
|
|
|
|
<tr>
|
|
|
|
<td>Market resolved</td>
|
|
|
|
<td>{formatTime(resolutionTime)}</td>
|
|
|
|
</tr>
|
|
|
|
)}
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
<td>Volume</td>
|
2022-04-09 23:13:10 +00:00
|
|
|
<td>{formatMoney(contract.volume)}</td>
|
2022-04-09 23:04:13 +00:00
|
|
|
</tr>
|
|
|
|
|
2022-04-13 19:11:49 +00:00
|
|
|
<tr>
|
2022-09-15 21:51:39 +00:00
|
|
|
<td>{capitalize(BETTORS)}</td>
|
2022-09-16 04:08:31 +00:00
|
|
|
<td>{uniqueBettorCount ?? '0'}</td>
|
2022-04-13 19:11:49 +00:00
|
|
|
</tr>
|
|
|
|
|
2022-05-24 23:57:34 +00:00
|
|
|
<tr>
|
2022-06-12 23:34:13 +00:00
|
|
|
<td>
|
|
|
|
{mechanism === 'cpmm-1' ? 'Liquidity pool' : 'Betting pool'}
|
|
|
|
</td>
|
2022-05-24 23:57:34 +00:00
|
|
|
<td>{contractPool(contract)}</td>
|
|
|
|
</tr>
|
2022-08-22 17:48:21 +00:00
|
|
|
|
|
|
|
{/* Show a path to Firebase if user is an admin, or we're on localhost */}
|
|
|
|
{(isAdmin || isDev) && (
|
|
|
|
<tr>
|
2022-08-28 18:30:27 +00:00
|
|
|
<td>[ADMIN] Firestore</td>
|
2022-08-22 17:48:21 +00:00
|
|
|
<td>
|
|
|
|
<SiteLink href={firestoreConsolePath(id)}>
|
|
|
|
Console link
|
|
|
|
</SiteLink>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
)}
|
2022-08-25 13:05:26 +00:00
|
|
|
{isAdmin && (
|
|
|
|
<tr>
|
2022-08-26 02:42:40 +00:00
|
|
|
<td>[ADMIN] Featured</td>
|
2022-08-25 13:05:26 +00:00
|
|
|
<td>
|
2022-08-26 02:42:40 +00:00
|
|
|
<ShortToggle
|
2022-10-03 15:36:49 +00:00
|
|
|
on={featured}
|
|
|
|
setOn={setFeatured}
|
2022-08-26 02:42:40 +00:00
|
|
|
onChange={onFeaturedToggle}
|
|
|
|
/>
|
2022-08-25 13:05:26 +00:00
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
)}
|
2022-10-03 15:36:49 +00:00
|
|
|
{user && (
|
|
|
|
<tr>
|
|
|
|
<td>{isAdmin ? '[ADMIN]' : ''} Unlisted</td>
|
|
|
|
<td>
|
|
|
|
<ShortToggle
|
|
|
|
disabled={
|
|
|
|
isUnlisted
|
|
|
|
? !(isAdmin || (isCreator && wasUnlistedByCreator))
|
|
|
|
: !(isCreator || isAdmin)
|
|
|
|
}
|
|
|
|
on={contract.visibility === 'unlisted'}
|
|
|
|
setOn={(b) =>
|
|
|
|
updateContract(id, {
|
|
|
|
visibility: b ? 'unlisted' : 'public',
|
|
|
|
unlistedById: b ? user.id : '',
|
|
|
|
})
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
)}
|
2022-04-09 23:04:13 +00:00
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
|
2022-08-31 21:33:24 +00:00
|
|
|
<Row className="flex-wrap">
|
|
|
|
<DuplicateContractButton contract={contract} />
|
|
|
|
</Row>
|
2022-09-30 15:27:42 +00:00
|
|
|
{!contract.resolution && <LiquidityBountyPanel contract={contract} />}
|
2022-04-07 20:52:54 +00:00
|
|
|
</Col>
|
|
|
|
</Modal>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|