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

Use badges in Your Trades

Browse Source
This commit is contained in:
Austin Chen 2022-02-14 15:29:29 -08:00
parent 443acdbcf8
commit 86b4b1a907
1 changed files with 45 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -123,33 +123,34 @@ export function BetsList(props: { user: User }) {
const totalPortfolio = currentBetsValue + user.balance const totalPortfolio = currentBetsValue + user.balance
const pnl = totalPortfolio - user.totalDeposits const totalPnl = totalPortfolio - user.totalDeposits
const totalReturn = const totalProfit = (totalPnl / user.totalDeposits) * 100
(pnl > 0 ? '+' : '') + ((pnl / user.totalDeposits) * 100).toFixed() + '%' const investedProfit =
((currentBetsValue - currentInvestment) / currentInvestment) * 100
const color = pnl === 0 ? '' : pnl > 0 ? 'text-green-500' : 'text-red-500'
return ( return (
<Col className="mt-6 gap-6"> <Col className="mt-6 gap-6">
<Col className="mx-4 gap-4 sm:flex-row sm:justify-between md:mx-0"> <Col className="mx-4 gap-4 sm:flex-row sm:justify-between md:mx-0">
<Row className="gap-8"> <Row className="gap-8">
<Col> <Col>
<div className="text-sm text-gray-500">Portfolio value</div> <div className="text-sm text-gray-500">Invested</div>
<div>{formatMoney(totalPortfolio)}</div> <div className="text-lg">
</Col> {formatMoney(currentBetsValue)}{' '}
<Col> <ProfitBadge profitPercent={investedProfit} />
<div className="text-sm text-gray-500">Total profits & losses</div>
<div>
{formatMoney(pnl)} (<span className={color}>{totalReturn}</span>)
</div> </div>
</Col> </Col>
<Col> <Col>
<div className="text-sm text-gray-500">Currently invested</div> <div className="text-sm text-gray-500">Balance</div>
<div>{formatMoney(currentInvestment)}</div> <div className="whitespace-nowrap text-lg">
{formatMoney(user.balance)}{' '}
</div>
</Col> </Col>
<Col> <Col>
<div className="text-sm text-gray-500">Current market value</div> <div className="text-sm text-gray-500">Total portfolio</div>
<div>{formatMoney(currentBetsValue)}</div> <div className="text-lg">
{formatMoney(totalPortfolio)}{' '}
<ProfitBadge profitPercent={totalProfit} />
</div>
</Col> </Col>
</Row> </Row>
@ -282,21 +283,15 @@ export function MyBetsSummary(props: {
const currentValue = resolution ? betsPayout : marketWinnings const currentValue = resolution ? betsPayout : marketWinnings
const pnl = currentValue - betsTotal const pnl = currentValue - betsTotal
const totalReturn = const profit = (pnl / betsTotal) * 100
betsTotal === 0
? '0%'
: (pnl > 0 ? '+' : '') + ((pnl / betsTotal) * 100).toFixed() + '%'
const color = pnl === 0 ? '' : pnl > 0 ? 'text-green-500' : 'text-red-500' const valueCol = (
const mktCol = (
<Col> <Col>
<div className="whitespace-nowrap text-sm text-gray-500"> <div className="whitespace-nowrap text-right text-lg">
Market value {formatMoney(currentValue)}
</div> </div>
<div className="whitespace-nowrap"> <div className="text-right">
{formatMoney(marketWinnings)} ( <ProfitBadge profitPercent={profit} />
<span className={color}>{totalReturn}</span>)
</div> </div>
</Col> </Col>
) )
@ -305,7 +300,7 @@ export function MyBetsSummary(props: {
<Col> <Col>
<div className="text-sm text-gray-500">Payout</div> <div className="text-sm text-gray-500">Payout</div>
<div className="whitespace-nowrap"> <div className="whitespace-nowrap">
{formatMoney(betsPayout)} (<span className={color}>{totalReturn}</span>) {formatMoney(betsPayout)} <ProfitBadge profitPercent={profit} />
</div> </div>
</Col> </Col>
) )
@ -319,7 +314,7 @@ export function MyBetsSummary(props: {
)} )}
> >
{onlyMKT ? ( {onlyMKT ? (
<Row className="gap-4 sm:gap-6">{resolution ? payoutCol : mktCol}</Row> <Row className="gap-4 sm:gap-6">{valueCol}</Row>
) : ( ) : (
<Row className="gap-4 sm:gap-6"> <Row className="gap-4 sm:gap-6">
<Col> <Col>
@ -496,3 +491,23 @@ function SellButton(props: { contract: Contract; bet: Bet }) {
</ConfirmationButton> </ConfirmationButton>
) )
} }
function ProfitBadge(props: { profitPercent: number }) {
const { profitPercent } = props
if (!profitPercent) return null
const colors =
profitPercent > 0
? 'bg-green-100 text-green-800'
: 'bg-red-100 text-red-800'
return (
<span
className={clsx(
'ml-1 inline-flex items-center rounded-full px-3 py-0.5 text-sm font-medium',
colors
)}
>
{(profitPercent > 0 ? '+' : '') + profitPercent.toFixed(1) + '%'}
</span>
)
}