open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add bets section to contract page.

Browse Source
This commit is contained in:
jahooma 2021-12-15 22:30:24 -06:00
parent b9fb1d0f31
commit ea1e66bda1
2 changed files with 92 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
web/components/bets-list.tsx
View File

@ -16,6 +16,7 @@ import {
currentValue,
resolvedPayout,
} from '../lib/calculation/contract'
import clsx from 'clsx'
export function BetsList(props: { user: User }) {
const { user } = props
@ -85,19 +86,6 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
const { bets, contract } = props
const { resolution } = contract
const betsTotal = _.sumBy(bets, (bet) => bet.amount)
const betsPayout = resolution
? _.sumBy(bets, (bet) => resolvedPayout(contract, bet))
: 0
const yesWinnings = _.sumBy(bets, (bet) =>
calculatePayout(contract, bet, 'YES')
)
const noWinnings = _.sumBy(bets, (bet) =>
calculatePayout(contract, bet, 'NO')
)
return (
<div className="px-4">
<Link href={path(contract)}>
@ -126,35 +114,7 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
<Spacer h={6} />
<Row className="gap-8">
<Col>
<div className="text-sm text-gray-500">Total bet</div>
<div>{formatMoney(betsTotal)}</div>
</Col>
{resolution ? (
<>
<Col>
<div className="text-sm text-gray-500">Winnings</div>
<div>{formatMoney(betsPayout)}</div>
</Col>
</>
) : (
<>
<Col>
<div className="text-sm text-gray-500">
If <YesLabel />
</div>
<div>{formatMoney(yesWinnings)}</div>
</Col>
<Col>
<div className="text-sm text-gray-500">
If <NoLabel />
</div>
<div>{formatMoney(noWinnings)}</div>
</Col>
</>
)}
</Row>
<MyBetsSummary contract={contract} bets={bets} />
<Spacer h={6} />
@ -163,7 +123,61 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
)
}
function ContractBetsTable(props: { contract: Contract; bets: Bet[] }) {
export function MyBetsSummary(props: {
contract: Contract
bets: Bet[]
className?: string
}) {
const { bets, contract, className } = props
const { resolution } = contract
const betsTotal = _.sumBy(bets, (bet) => bet.amount)
const betsPayout = resolution
? _.sumBy(bets, (bet) => resolvedPayout(contract, bet))
: 0
const yesWinnings = _.sumBy(bets, (bet) =>
calculatePayout(contract, bet, 'YES')
)
const noWinnings = _.sumBy(bets, (bet) =>
calculatePayout(contract, bet, 'NO')
)
return (
<Row className={clsx('gap-8', className)}>
<Col>
<div className="text-sm text-gray-500">Total bet</div>
<div>{formatMoney(betsTotal)}</div>
</Col>
{resolution ? (
<>
<Col>
<div className="text-sm text-gray-500">Winnings</div>
<div>{formatMoney(betsPayout)}</div>
</Col>
</>
) : (
<>
<Col>
<div className="text-sm text-gray-500">
If <YesLabel />
</div>
<div>{formatMoney(yesWinnings)}</div>
</Col>
<Col>
<div className="text-sm text-gray-500">
If <NoLabel />
</div>
<div>{formatMoney(noWinnings)}</div>
</Col>
</>
)}
</Row>
)
}
export function ContractBetsTable(props: { contract: Contract; bets: Bet[] }) {
const { contract, bets } = props
const { isResolved } = contract

36
web/pages/[username]/[contractId].tsx
View File

@ -8,6 +8,12 @@ import { Col } from '../../components/layout/col'
import { useUser } from '../../hooks/use-user'
import { ResolutionPanel } from '../../components/resolution-panel'
import clsx from 'clsx'
import { ContractBetsTable, MyBetsSummary } from '../../components/bets-list'
import { useBets } from '../../hooks/use-bets'
import { Title } from '../../components/title'
import { Spacer } from '../../components/layout/spacer'
import { Contract } from '../../lib/firebase/contracts'
import { User } from '../../lib/firebase/users'
export default function ContractPage() {
const user = useUser()
@ -47,7 +53,7 @@ export default function ContractPage() {
<>
<div className="mt-12 md:mt-0 md:ml-8" />
<Col className="w-full sm:w-auto sm:self-center">
<Col className="w-full sm:w-auto">
<BetPanel contract={contract} />
{isCreator && (
@ -57,6 +63,34 @@ export default function ContractPage() {
</>
)}
</Col>
<BetsSection contract={contract} user={user} />
</Col>
)
}
function BetsSection(props: { contract: Contract; user: User | null }) {
const { contract, user } = props
const bets = useBets(contract.id)
if (bets === 'loading' || bets.length === 0) return <></>
const userBets = user && bets.filter((bet) => bet.userId === user.id)
return (
<div className="p-4">
{userBets && userBets.length > 0 && (
<>
<Title text="My bets" />
<MyBetsSummary className="ml-1" contract={contract} bets={userBets} />
<Spacer h={6} />
<ContractBetsTable contract={contract} bets={userBets} />
<Spacer h={6} />
</>
)}
<Title text="All bets" />
<ContractBetsTable contract={contract} bets={bets} />
</div>
)
}