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

Clean up crufty markup in bets list

Browse Source
This commit is contained in:
Marshall Polaris 2022-07-24 20:42:39 -07:00
parent 9840742927
commit 87f608336a
1 changed files with 104 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -335,49 +335,37 @@ function ContractBets(props: {
</Row> </Row>
</Col> </Col>
<Row className="mr-5 justify-end sm:mr-8"> <Col className="mr-5 justify-end sm:mr-8">
<Col> <div className="whitespace-nowrap text-right text-lg">
<div className="whitespace-nowrap text-right text-lg"> {formatMoney(metric === 'profit' ? profit : payout)}
{formatMoney(metric === 'profit' ? profit : payout)} </div>
</div> <ProfitBadge className="text-right" profitPercent={profitPercent} />
<div className="text-right"> </Col>
<ProfitBadge profitPercent={profitPercent} />
</div>
</Col>
</Row>
</Row> </Row>
<div <div
className="collapse-content !px-0" className="collapse-content bg-white !px-0"
style={{ backgroundColor: 'white' }} style={{ backgroundColor: 'white' }}
> >
<Spacer h={8} />
<BetsSummary <BetsSummary
className="mr-5 flex-1 sm:mr-8" className="mt-8 mr-5 flex-1 sm:mr-8"
contract={contract} contract={contract}
bets={bets} bets={bets}
isYourBets={isYourBets} isYourBets={isYourBets}
/> />
<Spacer h={4} />
{contract.mechanism === 'cpmm-1' && limitBets.length > 0 && ( {contract.mechanism === 'cpmm-1' && limitBets.length > 0 && (
<> <div className="max-w-md">
<div className="max-w-md"> <div className="mt-4 bg-gray-50 px-4 py-2">Limit orders</div>
<div className="bg-gray-50 px-4 py-2">Limit orders</div> <LimitOrderTable
<LimitOrderTable contract={contract}
contract={contract} limitBets={limitBets}
limitBets={limitBets} isYou={true}
isYou={true} />
/> </div>
</div>
</>
)} )}
<Spacer h={4} /> <div className="mt-4 bg-gray-50 px-4 py-2">Bets</div>
<div className="bg-gray-50 px-4 py-2">Bets</div>
<ContractBetsTable <ContractBetsTable
contract={contract} contract={contract}
bets={bets} bets={bets}
@ -427,107 +415,93 @@ export function BetsSummary(props: {
return ( return (
<Row className={clsx('flex-wrap gap-4 sm:flex-nowrap sm:gap-6', className)}> <Row className={clsx('flex-wrap gap-4 sm:flex-nowrap sm:gap-6', className)}>
<Row className="flex-wrap gap-4 sm:gap-6"> {!isCpmm && (
{!isCpmm && (
<Col>
<div className="whitespace-nowrap text-sm text-gray-500">
Invested
</div>
<div className="whitespace-nowrap">{formatMoney(invested)}</div>
</Col>
)}
{resolution ? (
<Col>
<div className="text-sm text-gray-500">Payout</div>
<div className="whitespace-nowrap">
{formatMoney(payout)}{' '}
<ProfitBadge profitPercent={profitPercent} />
</div>
</Col>
) : (
<>
{isBinary ? (
<>
<Col>
<div className="whitespace-nowrap text-sm text-gray-500">
Payout if <YesLabel />
</div>
<div className="whitespace-nowrap">
{formatMoney(yesWinnings)}
</div>
</Col>
<Col>
<div className="whitespace-nowrap text-sm text-gray-500">
Payout if <NoLabel />
</div>
<div className="whitespace-nowrap">
{formatMoney(noWinnings)}
</div>
</Col>
</>
) : isPseudoNumeric ? (
<>
<Col>
<div className="whitespace-nowrap text-sm text-gray-500">
Payout if {'>='} {formatLargeNumber(contract.max)}
</div>
<div className="whitespace-nowrap">
{formatMoney(yesWinnings)}
</div>
</Col>
<Col>
<div className="whitespace-nowrap text-sm text-gray-500">
Payout if {'<='} {formatLargeNumber(contract.min)}
</div>
<div className="whitespace-nowrap">
{formatMoney(noWinnings)}
</div>
</Col>
</>
) : (
<Col>
<div className="whitespace-nowrap text-sm text-gray-500">
Current value
</div>
<div className="whitespace-nowrap">{formatMoney(payout)}</div>
</Col>
)}
</>
)}
<Col> <Col>
<div className="whitespace-nowrap text-sm text-gray-500">Profit</div> <div className="whitespace-nowrap text-sm text-gray-500">
Invested
</div>
<div className="whitespace-nowrap">{formatMoney(invested)}</div>
</Col>
)}
{resolution ? (
<Col>
<div className="text-sm text-gray-500">Payout</div>
<div className="whitespace-nowrap"> <div className="whitespace-nowrap">
{formatMoney(profit)} <ProfitBadge profitPercent={profitPercent} /> {formatMoney(payout)} <ProfitBadge profitPercent={profitPercent} />
{isYourBets &&
isCpmm &&
(isBinary || isPseudoNumeric) &&
!isClosed &&
!resolution &&
hasShares &&
sharesOutcome &&
user && (
<>
<button
className="btn btn-sm ml-2"
onClick={() => setShowSellModal(true)}
>
Sell
</button>
{showSellModal && (
<SellSharesModal
contract={contract}
user={user}
userBets={bets}
shares={totalShares[sharesOutcome]}
sharesOutcome={sharesOutcome}
setOpen={setShowSellModal}
/>
)}
</>
)}
</div> </div>
</Col> </Col>
</Row> ) : isBinary ? (
<>
<Col>
<div className="whitespace-nowrap text-sm text-gray-500">
Payout if <YesLabel />
</div>
<div className="whitespace-nowrap">{formatMoney(yesWinnings)}</div>
</Col>
<Col>
<div className="whitespace-nowrap text-sm text-gray-500">
Payout if <NoLabel />
</div>
<div className="whitespace-nowrap">{formatMoney(noWinnings)}</div>
</Col>
</>
) : isPseudoNumeric ? (
<>
<Col>
<div className="whitespace-nowrap text-sm text-gray-500">
Payout if {'>='} {formatLargeNumber(contract.max)}
</div>
<div className="whitespace-nowrap">{formatMoney(yesWinnings)}</div>
</Col>
<Col>
<div className="whitespace-nowrap text-sm text-gray-500">
Payout if {'<='} {formatLargeNumber(contract.min)}
</div>
<div className="whitespace-nowrap">{formatMoney(noWinnings)}</div>
</Col>
</>
) : (
<Col>
<div className="whitespace-nowrap text-sm text-gray-500">
Current value
</div>
<div className="whitespace-nowrap">{formatMoney(payout)}</div>
</Col>
)}
)
<Col>
<div className="whitespace-nowrap text-sm text-gray-500">Profit</div>
<div className="whitespace-nowrap">
{formatMoney(profit)} <ProfitBadge profitPercent={profitPercent} />
{isYourBets &&
isCpmm &&
(isBinary || isPseudoNumeric) &&
!isClosed &&
!resolution &&
hasShares &&
sharesOutcome &&
user && (
<>
<button
className="btn btn-sm ml-2"
onClick={() => setShowSellModal(true)}
>
Sell
</button>
{showSellModal && (
<SellSharesModal
contract={contract}
user={user}
userBets={bets}
shares={totalShares[sharesOutcome]}
sharesOutcome={sharesOutcome}
setOpen={setShowSellModal}
/>
)}
</>
)}
</div>
</Col>
</Row> </Row>
) )
} }
@ -787,8 +761,8 @@ function SellButton(props: { contract: Contract; bet: Bet }) {
) )
} }
function ProfitBadge(props: { profitPercent: number }) { function ProfitBadge(props: { profitPercent: number; className?: string }) {
const { profitPercent } = props const { profitPercent, className } = props
if (!profitPercent) return null if (!profitPercent) return null
const colors = const colors =
profitPercent > 0 profitPercent > 0
@ -799,7 +773,8 @@ function ProfitBadge(props: { profitPercent: number }) {
<span <span
className={clsx( className={clsx(
'ml-1 inline-flex items-center rounded-full px-3 py-0.5 text-sm font-medium', 'ml-1 inline-flex items-center rounded-full px-3 py-0.5 text-sm font-medium',
colors colors,
className
)} )}
> >
{(profitPercent > 0 ? '+' : '') + profitPercent.toFixed(1) + '%'} {(profitPercent > 0 ? '+' : '') + profitPercent.toFixed(1) + '%'}