import dayjs from 'dayjs' import Link from 'next/link' import React, { useEffect, useState } from 'react' import { Header } from '../components/header' import { Col } from '../components/layout/col' import { Row } from '../components/layout/row' import { Spacer } from '../components/layout/spacer' import { Title } from '../components/title' import { listAllContracts } from '../lib/firebase/contracts' import { Contract } from '../lib/firebase/contracts' import { formatWithCommas } from '../lib/util/format' function ContractCard(props: { contract: Contract }) { const { contract } = props // Copied from contract-overview.tsx const { pot, seedAmounts, createdTime } = contract const volume = pot.YES + pot.NO - seedAmounts.YES - seedAmounts.NO const prob = pot.YES ** 2 / (pot.YES ** 2 + pot.NO ** 2) const probPercent = Math.round(prob * 100) + '%' return ( {/* Left side of card */} {contract.question} {/* Copied from contract-overview.tsx */} By {contract.creatorName} • {dayjs(createdTime).format('MMM D')} • {formatWithCommas(volume)} vol {/* Right side of card */} {contract.resolution || ( {probPercent} chance )} ) } export default function Markets() { const [contracts, setContracts] = useState([]) useEffect(() => { listAllContracts().then(setContracts) }, []) return ( {contracts .filter((c) => !c.resolution) .map((contract) => ( ))} {contracts .filter((c) => c.resolution) .map((contract) => ( ))} ) }
{contract.question}