diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index bf53f0c4..f1da5956 100644
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@@ -21,6 +21,7 @@ import { Spacer } from '../layout/spacer'
import { useState } from 'react'
import { getProbability } from '../../../common/calculate'
import { ContractInfoDialog } from './contract-info-dialog'
+import { Bet } from '../../../common/bet'
export function ContractCard(props: {
contract: Contract
@@ -171,10 +172,11 @@ function AbbrContractDetails(props: {
export function ContractDetails(props: {
contract: Contract
+ bets: Bet[]
isCreator?: boolean
hideShareButtons?: boolean
}) {
- const { contract, isCreator, hideShareButtons } = props
+ const { contract, bets, isCreator, hideShareButtons } = props
const { closeTime, creatorName, creatorUsername } = contract
const { volumeLabel, createdDate, resolvedDate } = contractMetrics(contract)
@@ -233,7 +235,9 @@ export function ContractDetails(props: {
{volumeLabel}
- {!hideShareButtons && }
+ {!hideShareButtons && (
+
+ )}
)
diff --git a/web/components/contract/contract-info-dialog.tsx b/web/components/contract/contract-info-dialog.tsx
index 3d552550..cc01ec2a 100644
--- a/web/components/contract/contract-info-dialog.tsx
+++ b/web/components/contract/contract-info-dialog.tsx
@@ -3,6 +3,7 @@ import clsx from 'clsx'
import dayjs from 'dayjs'
import _ from 'lodash'
import { useState } from 'react'
+import { Bet } from '../../../common/bet'
import { Contract } from '../../../common/contract'
import { formatMoney } from '../../../common/util/format'
@@ -22,8 +23,8 @@ import { FoldTagList } from '../tags-list'
import { Title } from '../title'
import { TweetButton } from '../tweet-button'
-export function ContractInfoDialog(props: { contract: Contract }) {
- const { contract } = props
+export function ContractInfoDialog(props: { contract: Contract; bets: Bet[] }) {
+ const { contract, bets } = props
const [open, setOpen] = useState(false)
@@ -36,6 +37,7 @@ export function ContractInfoDialog(props: { contract: Contract }) {
const formatTime = (dt: number) => dayjs(dt).format('MMM DD, YYYY hh:mm a z')
const { createdTime, closeTime, resolutionTime } = contract
+ const tradersCount = _.uniqBy(bets, 'userId').length
return (
<>
@@ -82,6 +84,11 @@ export function ContractInfoDialog(props: { contract: Contract }) {
{formatMoney(contract.volume)} |
+
+ Traders |
+ {tradersCount} |
+
+
{contract.mechanism === 'cpmm-1' && (
Liquidity |
diff --git a/web/components/contract/contract-overview.tsx b/web/components/contract/contract-overview.tsx
index 5537e240..198b3c0c 100644
--- a/web/components/contract/contract-overview.tsx
+++ b/web/components/contract/contract-overview.tsx
@@ -56,7 +56,11 @@ export const ContractOverview = (props: {
)}
-
+
diff --git a/web/pages/embed/[username]/[contractSlug].tsx b/web/pages/embed/[username]/[contractSlug].tsx
index 58b03dc1..1da6cdf2 100644
--- a/web/pages/embed/[username]/[contractSlug].tsx
+++ b/web/pages/embed/[username]/[contractSlug].tsx
@@ -113,6 +113,7 @@ function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {