From 97bf1049b5e678bed469358130712aa2cf5d33c5 Mon Sep 17 00:00:00 2001 From: Austin Chen Date: Mon, 14 Feb 2022 13:33:47 -0800 Subject: [PATCH 1/5] Show gray probabilities for closed markets --- web/components/contract-card.tsx | 22 ++++++++++------------ web/components/contract-feed.tsx | 6 +----- web/components/contract-overview.tsx | 10 ++-------- 3 files changed, 13 insertions(+), 25 deletions(-) diff --git a/web/components/contract-card.tsx b/web/components/contract-card.tsx index 58a05a0f..7e2171ab 100644 --- a/web/components/contract-card.tsx +++ b/web/components/contract-card.tsx @@ -48,11 +48,7 @@ export function ContractCard(props: {

{question}

- + @@ -60,12 +56,14 @@ export function ContractCard(props: { } export function ResolutionOrChance(props: { - resolution?: 'YES' | 'NO' | 'MKT' | 'CANCEL' - probPercent: string + contract: Contract large?: boolean className?: string }) { - const { resolution, probPercent, large, className } = props + const { contract, large, className } = props + const { resolution } = contract + const { probPercent } = contractMetrics(contract) + const marketClosed = (contract.closeTime || Infinity) < Date.now() const resolutionColor = { YES: 'text-primary', @@ -75,6 +73,8 @@ export function ResolutionOrChance(props: { '': '', // Empty if unresolved }[resolution || ''] + const probColor = marketClosed ? 'text-gray-400' : 'text-primary' + const resolutionText = { YES: 'YES', NO: 'NO', @@ -96,10 +96,8 @@ export function ResolutionOrChance(props: { ) : ( <> -
{probPercent}
-
+
{probPercent}
+
chance
diff --git a/web/components/contract-feed.tsx b/web/components/contract-feed.tsx index e3e5803e..83f6c2ef 100644 --- a/web/components/contract-feed.tsx +++ b/web/components/contract-feed.tsx @@ -340,11 +340,7 @@ function FeedQuestion(props: { contract: Contract }) { > {question} - + @@ -75,12 +74,7 @@ export const ContractOverview = (props: { - + From 443acdbcf881b5cc60f2c2553b6718d7802cd4a7 Mon Sep 17 00:00:00 2001 From: mantikoros Date: Mon, 14 Feb 2022 16:00:35 -0600 Subject: [PATCH 2/5] beautify trades page --- web/components/bets-list.tsx | 116 +++++++++++++++++------- web/pages/[username]/[contractSlug].tsx | 7 +- 2 files changed, 83 insertions(+), 40 deletions(-) diff --git a/web/components/bets-list.tsx b/web/components/bets-list.tsx index e55cd22e..9dae42fc 100644 --- a/web/components/bets-list.tsx +++ b/web/components/bets-list.tsx @@ -127,18 +127,20 @@ export function BetsList(props: { user: User }) { const totalReturn = (pnl > 0 ? '+' : '') + ((pnl / user.totalDeposits) * 100).toFixed() + '%' + const color = pnl === 0 ? '' : pnl > 0 ? 'text-green-500' : 'text-red-500' + return ( -
Total portfolio
+
Portfolio value
{formatMoney(totalPortfolio)}
Total profits & losses
- {formatMoney(pnl)} ({totalReturn}) + {formatMoney(pnl)} ({totalReturn})
@@ -226,6 +228,7 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) { className="mr-5 flex-1 justify-end sm:mr-8" contract={contract} bets={bets} + onlyMKT /> @@ -235,6 +238,14 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) { > + + + +
@@ -244,10 +255,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,49 +280,86 @@ export function MyBetsSummary(props: { calculatePayout(contract, bet, 'MKT') ) + const currentValue = resolution ? betsPayout : marketWinnings + const pnl = currentValue - betsTotal + const totalReturn = + betsTotal === 0 + ? '0%' + : (pnl > 0 ? '+' : '') + ((pnl / betsTotal) * 100).toFixed() + '%' + + const color = pnl === 0 ? '' : pnl > 0 ? 'text-green-500' : 'text-red-500' + + const mktCol = ( + +
+ Market value +
+
+ {formatMoney(marketWinnings)} ( + {totalReturn}) +
+ + ) + + const payoutCol = ( + +
Payout
+
+ {formatMoney(betsPayout)} ({totalReturn}) +
+ + ) + return ( - -
Invested
-
{formatMoney(betsTotal)}
- - {resolution ? ( - -
Payout
-
{formatMoney(betsPayout)}
- + {onlyMKT ? ( + {resolution ? payoutCol : mktCol} ) : (
- Payout if + Invested
-
{formatMoney(yesWinnings)}
+
{formatMoney(betsTotal)}
- -
- Payout if -
-
{formatMoney(noWinnings)}
- - {showMKT && ( - -
- Payout at{' '} - - {formatPercent(getProbability(contract.totalShares))} - -
-
- {formatMoney(marketWinnings)} -
- + {resolution ? ( + payoutCol + ) : ( + <> + +
+ Payout if +
+
+ {formatMoney(yesWinnings)} +
+ + +
+ Payout if +
+
+ {formatMoney(noWinnings)} +
+ + +
+ Payout at{' '} + + {formatPercent(getProbability(contract.totalShares))} + +
+
+ {formatMoney(marketWinnings)} +
+ + )} )} diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx index 7beaef44..c4f80e9c 100644 --- a/web/pages/[username]/[contractSlug].tsx +++ b/web/pages/[username]/[contractSlug].tsx @@ -156,12 +156,7 @@ function BetsSection(props: { contract: Contract; user: User | null }) { return (
- <MyBetsSummary - className="px-2" - contract={contract} - bets={userBets} - showMKT - /> + <MyBetsSummary className="px-2" contract={contract} bets={userBets} /> <Spacer h={6} /> <ContractBetsTable contract={contract} bets={userBets} /> <Spacer h={12} /> From 86b4b1a9079f2806288df1e8823ee07f8b0efedf Mon Sep 17 00:00:00 2001 From: Austin Chen <akrolsmir@gmail.com> Date: Mon, 14 Feb 2022 15:29:29 -0800 Subject: [PATCH 3/5] Use badges in Your Trades --- web/components/bets-list.tsx | 75 +++++++++++++++++++++--------------- 1 file changed, 45 insertions(+), 30 deletions(-) diff --git a/web/components/bets-list.tsx b/web/components/bets-list.tsx index 9dae42fc..dc35e523 100644 --- a/web/components/bets-list.tsx +++ b/web/components/bets-list.tsx @@ -123,33 +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 color = pnl === 0 ? '' : pnl > 0 ? 'text-green-500' : 'text-red-500' + 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="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">Portfolio value</div> - <div>{formatMoney(totalPortfolio)}</div> - </Col> - <Col> - <div className="text-sm text-gray-500">Total profits & losses</div> - <div> - {formatMoney(pnl)} (<span className={color}>{totalReturn}</span>) + <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> @@ -282,21 +283,15 @@ export function MyBetsSummary(props: { const currentValue = resolution ? betsPayout : marketWinnings const pnl = currentValue - betsTotal - const totalReturn = - betsTotal === 0 - ? '0%' - : (pnl > 0 ? '+' : '') + ((pnl / betsTotal) * 100).toFixed() + '%' + const profit = (pnl / betsTotal) * 100 - const color = pnl === 0 ? '' : pnl > 0 ? 'text-green-500' : 'text-red-500' - - const mktCol = ( + const valueCol = ( <Col> - <div className="whitespace-nowrap text-sm text-gray-500"> - Market value + <div className="whitespace-nowrap text-right text-lg"> + {formatMoney(currentValue)} </div> - <div className="whitespace-nowrap"> - {formatMoney(marketWinnings)} ( - <span className={color}>{totalReturn}</span>) + <div className="text-right"> + <ProfitBadge profitPercent={profit} /> </div> </Col> ) @@ -305,7 +300,7 @@ export function MyBetsSummary(props: { <Col> <div className="text-sm text-gray-500">Payout</div> <div className="whitespace-nowrap"> - {formatMoney(betsPayout)} (<span className={color}>{totalReturn}</span>) + {formatMoney(betsPayout)} <ProfitBadge profitPercent={profit} /> </div> </Col> ) @@ -319,7 +314,7 @@ export function MyBetsSummary(props: { )} > {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"> <Col> @@ -496,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> + ) +} From 95fbfb7db058d039b3818573aef31e39dcb90eb5 Mon Sep 17 00:00:00 2001 From: Austin Chen <akrolsmir@gmail.com> Date: Mon, 14 Feb 2022 15:39:59 -0800 Subject: [PATCH 4/5] Tweak padding --- web/components/bets-list.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/web/components/bets-list.tsx b/web/components/bets-list.tsx index dc35e523..13f9e596 100644 --- a/web/components/bets-list.tsx +++ b/web/components/bets-list.tsx @@ -129,7 +129,7 @@ export function BetsList(props: { user: User }) { ((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> @@ -190,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" @@ -226,7 +226,7 @@ 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 From 4917d4084b3e3b80231c51d53d9fbb6e1ed0b627 Mon Sep 17 00:00:00 2001 From: James Grugett <jahooma@gmail.com> Date: Mon, 14 Feb 2022 20:27:43 -0600 Subject: [PATCH 5/5] Break words in questions --- web/components/contract-card.tsx | 7 ++++++- web/components/site-link.tsx | 6 ++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/web/components/contract-card.tsx b/web/components/contract-card.tsx index 7e2171ab..c318bad5 100644 --- a/web/components/contract-card.tsx +++ b/web/components/contract-card.tsx @@ -47,7 +47,12 @@ export function ContractCard(props: { <Spacer h={3} /> <Row className="justify-between gap-4"> - <p className="font-medium text-indigo-700">{question}</p> + <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> diff --git a/web/components/site-link.tsx b/web/components/site-link.tsx index d1dbca10..79f43118 100644 --- a/web/components/site-link.tsx +++ b/web/components/site-link.tsx @@ -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}