Show number of traders in "More" panel

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: {
           <div className="whitespace-nowrap">{volumeLabel}</div>
         </Row>
 
-        {!hideShareButtons && <ContractInfoDialog contract={contract} />}
+        {!hideShareButtons && (
+          <ContractInfoDialog contract={contract} bets={bets} />
+        )}
       </Row>
     </Col>
   )

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 }) {
                 <td>{formatMoney(contract.volume)}</td>
               </tr>
 
+              <tr>
+                <td>Traders</td>
+                <td>{tradersCount}</td>
+              </tr>
+
               {contract.mechanism === 'cpmm-1' && (
                 <tr>
                   <td>Liquidity</td>

web/components/contract/contract-overview.tsx

@@ -56,7 +56,11 @@ export const ContractOverview = (props: {
           )}
         </Row>
 
-        <ContractDetails contract={contract} isCreator={isCreator} />
+        <ContractDetails
+          contract={contract}
+          bets={bets}
+          isCreator={isCreator}
+        />
       </Col>
 
       <Spacer h={4} />

web/pages/embed/[username]/[contractSlug].tsx

@@ -113,6 +113,7 @@ function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
         <Row className="items-center justify-between gap-4 px-2">
           <ContractDetails
             contract={contract}
+            bets={bets}
             isCreator={false}
             hideShareButtons
           />