Merge branch 'main' into free-response

web/components/bets-list.tsx

@@ -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,49 +281,80 @@ 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">
-              Payout if <YesLabel />
+              Invested
             </div>
-            <div className="whitespace-nowrap">{formatMoney(yesWinnings)}</div>
+            <div className="whitespace-nowrap">{formatMoney(betsTotal)}</div>
           </Col>
-          <Col>
-            <div className="whitespace-nowrap text-sm text-gray-500">
-              Payout if <NoLabel />
-            </div>
-            <div className="whitespace-nowrap">{formatMoney(noWinnings)}</div>
-          </Col>
-          {showMKT && (
-            <Col>
-              <div className="whitespace-nowrap text-sm text-gray-500">
-                Payout at{' '}
-                <span className="text-blue-400">
-                  {formatPercent(getProbability(contract.totalShares))}
-                </span>
-              </div>
-              <div className="whitespace-nowrap">
-                {formatMoney(marketWinnings)}
-              </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>
+              </Col>
+              <Col>
+                <div className="whitespace-nowrap text-sm text-gray-500">
+                  Payout if <NoLabel />
+                </div>
+                <div className="whitespace-nowrap">
+                  {formatMoney(noWinnings)}
+                </div>
+              </Col>
+              <Col>
+                <div className="whitespace-nowrap text-sm text-gray-500">
+                  Payout at{' '}
+                  <span className="text-blue-400">
+                    {formatPercent(getProbability(contract.totalShares))}
+                  </span>
+                </div>
+                <div className="whitespace-nowrap">
+                  {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>
+  )
+}

web/components/contract-card.tsx

@@ -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>
         </>

web/components/contract-feed.tsx

@@ -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

web/components/contract-overview.tsx

@@ -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>

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}

web/pages/[username]/[contractSlug].tsx

@@ -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} />
         </>
       )}