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

Switch to compact table of bets

Browse Source
This commit is contained in:
jahooma 2021-12-15 12:41:18 -06:00
parent 5d1ab7d5f6
commit a07d29b881
1 changed files with 43 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,7 @@ import { User } from '../lib/firebase/users'
import { formatMoney, formatPercent } from '../lib/util/format' import { formatMoney, formatPercent } from '../lib/util/format'
import { Col } from './layout/col' import { Col } from './layout/col'
import { ContractDetails } from './contracts-list' import { ContractDetails } from './contracts-list'
import { Spacer } from './layout/spacer'
export function BetsList(props: { user: User }) { export function BetsList(props: { user: User }) {
const { user } = props const { user } = props
@ -22,9 +23,9 @@ export function BetsList(props: { user: User }) {
const contractBets = _.groupBy(bets, 'contractId') const contractBets = _.groupBy(bets, 'contractId')
return ( return (
<Col className='mt-6 gap-10'> <Col className="mt-6 gap-10">
{Object.keys(contractBets).map((contractId) => ( {Object.keys(contractBets).map((contractId) => (
<ContractBets <ContractBetsTable
key={contractId} key={contractId}
contractId={contractId} contractId={contractId}
bets={contractBets[contractId]} bets={contractBets[contractId]}
@ -34,51 +35,58 @@ export function BetsList(props: { user: User }) {
) )
} }
function ContractBets(props: { contractId: string; bets: Bet[] }) { function ContractBetsTable(props: { contractId: string; bets: Bet[] }) {
const { contractId, bets } = props const { contractId, bets } = props
const contract = useContract(contractId) const contract = useContract(contractId)
if (contract === 'loading' || contract === null) return <></> if (contract === 'loading' || contract === null) return <></>
return ( return (
<div> <div className="px-4">
<p className="font-medium text-indigo-700 mb-2">{contract.question}</p> <Link href={`/contract/${contractId}`}>
<ContractDetails contract={contract} /> <a>
<ul role="list" className="grid grid-cols-2 gap-6 lg:grid-cols-4 mt-6"> <p className="font-medium text-indigo-700 mb-2">
{bets.map((bet) => ( {contract.question}
<BetCard key={bet.id} bet={bet} /> </p>
))} <ContractDetails contract={contract} />
</ul> </a>
</Link>
<Spacer h={4} />
<div className="overflow-x-auto">
<table className="table table-zebra table-compact text-gray-500 w-full">
<thead>
<tr className="p-2">
<th>Outcome</th>
<th>Amount</th>
<th>Probability</th>
<th>Estimated payoff</th>
<th>Date</th>
</tr>
</thead>
<tbody>
{bets.map((bet) => (
<BetRow key={bet.id} bet={bet} />
))}
</tbody>
</table>
</div>
</div> </div>
) )
} }
function BetCard(props: { bet: Bet }) { function BetRow(props: { bet: Bet }) {
const { bet } = props const { bet } = props
const { contractId, amount, outcome, createdTime, probBefore, probAfter } = const { amount, outcome, createdTime, probBefore, probAfter, dpmWeight } = bet
bet
return ( return (
<Link href={`/contract/${contractId}`}> <tr>
<a> <td>{outcome}</td>
<li className="col-span-1 bg-white hover:bg-gray-100 shadow-xl rounded-lg divide-y divide-gray-200"> <td>{formatMoney(amount)}</td>
<div className="card"> <td>
<div className="card-body p-6"> {formatPercent(probBefore)} → {formatPercent(probAfter)}
<Col className="gap-2"> </td>
<p className="font-medium text-gray-700"> <td>{formatMoney(amount + dpmWeight)}</td>
{formatMoney(amount)} on {outcome} <td>{dayjs(createdTime).format('MMM D, H:mma')}</td>
</p> </tr>
<p className="font-medium text-gray-500">
{formatPercent(probBefore)} → {formatPercent(probAfter)}
</p>
<p className="font-medium text-gray-500">
{dayjs(createdTime).format('MMM D, H:mma')}
</p>
</Col>
</div>
</div>
</li>
</a>
</Link>
) )
} }