Merge branch 'main' into free-response

This commit is contained in:
James Grugett 2022-02-15 23:56:57 -06:00
commit 26bb872113
6 changed files with 137 additions and 81 deletions

View File

@ -123,31 +123,34 @@ export function BetsList(props: { user: User }) {
const totalPortfolio = currentBetsValue + user.balance
const pnl = totalPortfolio - user.totalDeposits
const totalReturn =
(pnl > 0 ? '+' : '') + ((pnl / user.totalDeposits) * 100).toFixed() + '%'
const totalPnl = totalPortfolio - user.totalDeposits
const totalProfit = (totalPnl / user.totalDeposits) * 100
const investedProfit =
((currentBetsValue - currentInvestment) / currentInvestment) * 100
return (
<Col className="mt-6 gap-6">
<Col className="mt-6 gap-4 sm:gap-6">
<Col className="mx-4 gap-4 sm:flex-row sm:justify-between md:mx-0">
<Row className="gap-8">
<Col>
<div className="text-sm text-gray-500">Total portfolio</div>
<div>{formatMoney(totalPortfolio)}</div>
</Col>
<Col>
<div className="text-sm text-gray-500">Total profits & losses</div>
<div>
{formatMoney(pnl)} ({totalReturn})
<div className="text-sm text-gray-500">Invested</div>
<div className="text-lg">
{formatMoney(currentBetsValue)}{' '}
<ProfitBadge profitPercent={investedProfit} />
</div>
</Col>
<Col>
<div className="text-sm text-gray-500">Currently invested</div>
<div>{formatMoney(currentInvestment)}</div>
<div className="text-sm text-gray-500">Balance</div>
<div className="whitespace-nowrap text-lg">
{formatMoney(user.balance)}{' '}
</div>
</Col>
<Col>
<div className="text-sm text-gray-500">Current market value</div>
<div>{formatMoney(currentBetsValue)}</div>
<div className="text-sm text-gray-500">Total portfolio</div>
<div className="text-lg">
{formatMoney(totalPortfolio)}{' '}
<ProfitBadge profitPercent={totalProfit} />
</div>
</Col>
</Row>
@ -187,9 +190,9 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
)}
onClick={() => setCollapsed((collapsed) => !collapsed)}
>
<Row className="flex-wrap gap-4">
<Row className="flex-wrap gap-2">
<Col className="flex-[2] gap-1">
<Row className="mr-6">
<Row className="mr-2 max-w-lg">
<Link href={contractPath(contract)}>
<a
className="font-medium text-indigo-700 hover:underline hover:decoration-indigo-400 hover:decoration-2"
@ -223,9 +226,10 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
</Col>
<MyBetsSummary
className="mr-5 flex-1 justify-end sm:mr-8"
className="mr-5 justify-end sm:mr-8"
contract={contract}
bets={bets}
onlyMKT
/>
</Row>
@ -235,6 +239,14 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
>
<Spacer h={8} />
<MyBetsSummary
className="mr-5 flex-1 sm:mr-8"
contract={contract}
bets={bets}
/>
<Spacer h={8} />
<ContractBetsTable contract={contract} bets={bets} />
</div>
</div>
@ -244,10 +256,10 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
export function MyBetsSummary(props: {
contract: Contract
bets: Bet[]
showMKT?: boolean
onlyMKT?: boolean
className?: string
}) {
const { bets, contract, showMKT, className } = props
const { bets, contract, onlyMKT, className } = props
const { resolution } = contract
calculateCancelPayout
@ -269,38 +281,68 @@ export function MyBetsSummary(props: {
calculatePayout(contract, bet, 'MKT')
)
const currentValue = resolution ? betsPayout : marketWinnings
const pnl = currentValue - betsTotal
const profit = (pnl / betsTotal) * 100
const valueCol = (
<Col>
<div className="whitespace-nowrap text-right text-lg">
{formatMoney(currentValue)}
</div>
<div className="text-right">
<ProfitBadge profitPercent={profit} />
</div>
</Col>
)
const payoutCol = (
<Col>
<div className="text-sm text-gray-500">Payout</div>
<div className="whitespace-nowrap">
{formatMoney(betsPayout)} <ProfitBadge profitPercent={profit} />
</div>
</Col>
)
return (
<Row
className={clsx(
'gap-4 sm:gap-6',
showMKT && 'flex-wrap sm:flex-nowrap',
!onlyMKT && 'flex-wrap sm:flex-nowrap',
className
)}
>
<Col>
<div className="whitespace-nowrap text-sm text-gray-500">Invested</div>
<div className="whitespace-nowrap">{formatMoney(betsTotal)}</div>
</Col>
{resolution ? (
<Col>
<div className="text-sm text-gray-500">Payout</div>
<div className="whitespace-nowrap">{formatMoney(betsPayout)}</div>
</Col>
{onlyMKT ? (
<Row className="gap-4 sm:gap-6">{valueCol}</Row>
) : (
<Row className="gap-4 sm:gap-6">
<Col>
<div className="whitespace-nowrap text-sm text-gray-500">
Invested
</div>
<div className="whitespace-nowrap">{formatMoney(betsTotal)}</div>
</Col>
{resolution ? (
payoutCol
) : (
<>
<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>
{showMKT && (
<Col>
<div className="whitespace-nowrap text-sm text-gray-500">
Payout at{' '}
@ -312,6 +354,7 @@ export function MyBetsSummary(props: {
{formatMoney(marketWinnings)}
</div>
</Col>
</>
)}
</Row>
)}
@ -448,3 +491,23 @@ function SellButton(props: { contract: Contract; bet: Bet }) {
</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>
)
}

View File

@ -48,12 +48,13 @@ export function ContractCard(props: {
<Spacer h={3} />
<Row className="justify-between gap-4">
<p className="font-medium text-indigo-700">{question}</p>
<ResolutionOrChance
className="items-center"
resolution={resolution}
probPercent={probPercent}
/>
<p
className="font-medium text-indigo-700 break-words"
style={{ /* For iOS safari */ wordBreak: 'break-word' }}
>
{question}
</p>
<ResolutionOrChance className="items-center" contract={contract} />
</Row>
</div>
</div>
@ -61,12 +62,13 @@ export function ContractCard(props: {
}
export function ResolutionOrChance(props: {
resolution?: 'YES' | 'NO' | 'MKT' | 'CANCEL' | string
probPercent: string
contract: Contract
large?: boolean
className?: string
}) {
const { resolution, probPercent, large, className } = props
const { contract, large, className } = props
const { resolution } = contract
const marketClosed = (contract.closeTime || Infinity) < Date.now()
const resolutionColor =
{
@ -77,11 +79,13 @@ export function ResolutionOrChance(props: {
'': '', // Empty if unresolved
}[resolution || ''] ?? 'text-primary'
const probColor = marketClosed ? 'text-gray-400' : 'text-primary'
const resolutionText =
{
YES: 'YES',
NO: 'NO',
MKT: probPercent,
MKT: getBinaryProbPercent(contract),
CANCEL: 'N/A',
'': '',
}[resolution || ''] ?? `#${resolution}`
@ -99,10 +103,8 @@ export function ResolutionOrChance(props: {
</>
) : (
<>
<div className="text-primary">{probPercent}</div>
<div
className={clsx('text-primary', large ? 'text-xl' : 'text-base')}
>
<div className={probColor}>{getBinaryProbPercent(contract)}</div>
<div className={clsx(probColor, large ? 'text-xl' : 'text-base')}>
chance
</div>
</>

View File

@ -342,11 +342,7 @@ function FeedQuestion(props: { contract: Contract }) {
{question}
</SiteLink>
{(isBinary || resolution) && (
<ResolutionOrChance
className="items-center"
resolution={resolution}
probPercent={getBinaryProbPercent(contract)}
/>
<ResolutionOrChance className="items-center" contract={contract} />
)}
</Col>
<TruncatedComment

View File

@ -52,8 +52,7 @@ export const ContractOverview = (props: {
{(isBinary || resolution) && (
<ResolutionOrChance
className="md:hidden"
resolution={resolution}
probPercent={getBinaryProbPercent(contract)}
contract={contract}
large
/>
)}
@ -74,8 +73,7 @@ export const ContractOverview = (props: {
<Col className="hidden items-end justify-between md:flex">
<ResolutionOrChance
className="items-end"
resolution={resolution}
probPercent={getBinaryProbPercent(contract)}
contract={contract}
large
/>
</Col>

View File

@ -12,9 +12,10 @@ export const SiteLink = (props: {
<a
href={href}
className={clsx(
'z-10 hover:underline hover:decoration-indigo-400 hover:decoration-2',
'break-words z-10 hover:underline hover:decoration-indigo-400 hover:decoration-2',
className
)}
style={{ /* For iOS safari */ wordBreak: 'break-word' }}
onClick={(e) => e.stopPropagation()}
>
{children}
@ -23,9 +24,10 @@ export const SiteLink = (props: {
<Link href={href}>
<a
className={clsx(
'z-10 hover:underline hover:decoration-indigo-400 hover:decoration-2',
'break-words z-10 hover:underline hover:decoration-indigo-400 hover:decoration-2',
className
)}
style={{ /* For iOS safari */ wordBreak: 'break-word' }}
onClick={(e) => e.stopPropagation()}
>
{children}

View File

@ -176,12 +176,7 @@ function BetsSection(props: {
<Title className="px-2" text="Your trades" />
{isBinary && (
<>
<MyBetsSummary
className="px-2"
contract={contract}
bets={userBets}
showMKT
/>
<MyBetsSummary className="px-2" contract={contract} bets={userBets} />
<Spacer h={6} />
</>
)}