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

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

@ -335,49 +335,37 @@ function ContractBets(props: {
</Row>
</Col>
<Row className="mr-5 justify-end sm:mr-8">
<Col>
<Col className="mr-5 justify-end sm:mr-8">
<div className="whitespace-nowrap text-right text-lg">
{formatMoney(metric === 'profit' ? profit : payout)}
</div>
<div className="text-right">
<ProfitBadge profitPercent={profitPercent} />
</div>
<ProfitBadge className="text-right" profitPercent={profitPercent} />
</Col>
</Row>
</Row>
<div
className="collapse-content !px-0"
className="collapse-content bg-white !px-0"
style={{ backgroundColor: 'white' }}
>
<Spacer h={8} />
<BetsSummary
className="mr-5 flex-1 sm:mr-8"
className="mt-8 mr-5 flex-1 sm:mr-8"
contract={contract}
bets={bets}
isYourBets={isYourBets}
/>
<Spacer h={4} />
{contract.mechanism === 'cpmm-1' && limitBets.length > 0 && (
<>
<div className="max-w-md">
<div className="bg-gray-50 px-4 py-2">Limit orders</div>
<div className="mt-4 bg-gray-50 px-4 py-2">Limit orders</div>
<LimitOrderTable
contract={contract}
limitBets={limitBets}
isYou={true}
/>
</div>
</>
)}
<Spacer h={4} />
<div className="bg-gray-50 px-4 py-2">Bets</div>
<div className="mt-4 bg-gray-50 px-4 py-2">Bets</div>
<ContractBetsTable
contract={contract}
bets={bets}
@ -427,7 +415,6 @@ export function BetsSummary(props: {
return (
<Row className={clsx('flex-wrap gap-4 sm:flex-nowrap sm:gap-6', className)}>
<Row className="flex-wrap gap-4 sm:gap-6">
{!isCpmm && (
<Col>
<div className="whitespace-nowrap text-sm text-gray-500">
@ -440,29 +427,22 @@ export function BetsSummary(props: {
<Col>
<div className="text-sm text-gray-500">Payout</div>
<div className="whitespace-nowrap">
{formatMoney(payout)}{' '}
<ProfitBadge profitPercent={profitPercent} />
{formatMoney(payout)} <ProfitBadge profitPercent={profitPercent} />
</div>
</Col>
) : (
<>
{isBinary ? (
) : isBinary ? (
<>
<Col>
<div className="whitespace-nowrap text-sm text-gray-500">
Payout if <YesLabel />
</div>
<div className="whitespace-nowrap">
{formatMoney(yesWinnings)}
</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>
<div className="whitespace-nowrap">{formatMoney(noWinnings)}</div>
</Col>
</>
) : isPseudoNumeric ? (
@ -471,17 +451,13 @@ export function BetsSummary(props: {
<div className="whitespace-nowrap text-sm text-gray-500">
Payout if {'>='} {formatLargeNumber(contract.max)}
</div>
<div className="whitespace-nowrap">
{formatMoney(yesWinnings)}
</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>
<div className="whitespace-nowrap">{formatMoney(noWinnings)}</div>
</Col>
</>
) : (
@ -492,8 +468,7 @@ export function BetsSummary(props: {
<div className="whitespace-nowrap">{formatMoney(payout)}</div>
</Col>
)}
</>
)}
)
<Col>
<div className="whitespace-nowrap text-sm text-gray-500">Profit</div>
<div className="whitespace-nowrap">
@ -528,7 +503,6 @@ export function BetsSummary(props: {
</div>
</Col>
</Row>
</Row>
)
}
@ -787,8 +761,8 @@ function SellButton(props: { contract: Contract; bet: Bet }) {
)
}
function ProfitBadge(props: { profitPercent: number }) {
const { profitPercent } = props
function ProfitBadge(props: { profitPercent: number; className?: string }) {
const { profitPercent, className } = props
if (!profitPercent) return null
const colors =
profitPercent > 0
@ -799,7 +773,8 @@ function ProfitBadge(props: { profitPercent: number }) {
<span
className={clsx(
'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) + '%'}