Compute invested & display in your bets

common/calculate.ts

@@ -1,4 +1,4 @@
-import { maxBy } from 'lodash'
+import { maxBy, sortBy, sum } from 'lodash'
 import { Bet, LimitBet } from './bet'
 import {
   calculateCpmmSale,
@@ -133,8 +133,29 @@ export function resolvedPayout(contract: Contract, bet: Bet) {
     : calculateDpmPayout(contract, bet, outcome)
 }
 
+function getCpmmInvested(yourBets: Bet[]) {
+  const totalShares: { [outcome: string]: number } = {}
+  const totalSpent: { [outcome: string]: number } = {}
+
+  const sortedBets = sortBy(yourBets, 'createdTime')
+  for (const bet of sortedBets) {
+    const { outcome, shares, amount } = bet
+    if (amount > 0) {
+      totalShares[outcome] = (totalShares[outcome] ?? 0) + shares
+      totalSpent[outcome] = (totalSpent[outcome] ?? 0) + amount
+    } else if (amount < 0) {
+      const averagePrice = totalSpent[outcome] / totalShares[outcome]
+      totalShares[outcome] = totalShares[outcome] + shares
+      totalSpent[outcome] = totalSpent[outcome] + averagePrice * shares
+    }
+  }
+
+  return sum(Object.values(totalSpent))
+}
+
 export function getContractBetMetrics(contract: Contract, yourBets: Bet[]) {
   const { resolution } = contract
+  const isCpmm = contract.mechanism === 'cpmm-1'
 
   let currentInvested = 0
   let totalInvested = 0
@@ -178,8 +199,10 @@ export function getContractBetMetrics(contract: Contract, yourBets: Bet[]) {
     (shares) => !floatingEqual(shares, 0)
   )
 
+  const invested = isCpmm ? getCpmmInvested(yourBets) : currentInvested
+
   return {
-    invested: Math.max(0, currentInvested),
+    invested,
     payout,
     netPayout,
     profit,

web/components/bets-list.tsx

@@ -428,76 +428,35 @@ export function BetsSummary(props: {
       : 'NO'
     : 'YES'
 
-  return (
+  const canSell =
-    <Row className={clsx('flex-wrap gap-4 sm:flex-nowrap sm:gap-6', className)}>
+    isYourBets &&
-      {!isCpmm && (
-        <Col>
-          <div className="whitespace-nowrap text-sm text-gray-500">
-            Invested
-          </div>
-          <div className="whitespace-nowrap">{formatMoney(invested)}</div>
-        </Col>
-      )}
-      {resolution ? (
-        <Col>
-          <div className="text-sm text-gray-500">Payout</div>
-          <div className="whitespace-nowrap">
-            {formatMoney(payout)} <ProfitBadge profitPercent={profitPercent} />
-          </div>
-        </Col>
-      ) : isBinary ? (
-        <>
-          <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>
-        </>
-      ) : isPseudoNumeric ? (
-        <>
-          <Col>
-            <div className="whitespace-nowrap text-sm text-gray-500">
-              Payout if {'>='} {formatLargeNumber(contract.max)}
-            </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>
-          </Col>
-        </>
-      ) : (
-        <Col>
-          <div className="whitespace-nowrap text-sm text-gray-500">
-            Current value
-          </div>
-          <div className="whitespace-nowrap">{formatMoney(payout)}</div>
-        </Col>
-      )}
-      <Col>
-        <div className="whitespace-nowrap text-sm text-gray-500">Profit</div>
-        <div className="whitespace-nowrap">
-          {formatMoney(profit)} <ProfitBadge profitPercent={profitPercent} />
-          {isYourBets &&
     isCpmm &&
     (isBinary || isPseudoNumeric) &&
     !isClosed &&
     !resolution &&
     hasShares &&
     sharesOutcome &&
-            user && (
+    user
+
+  return (
+    <Col className={clsx(className, 'gap-4')}>
+      <Row className="flex-wrap gap-4 sm:flex-nowrap sm:gap-6">
+        <Col>
+          <div className="whitespace-nowrap text-sm text-gray-500">
+            Invested
+          </div>
+          <div className="whitespace-nowrap">{formatMoney(invested)}</div>
+        </Col>
+        <Col>
+          <div className="whitespace-nowrap text-sm text-gray-500">Profit</div>
+          <div className="whitespace-nowrap">
+            {formatMoney(profit)} <ProfitBadge profitPercent={profitPercent} />
+          </div>
+        </Col>
+        {canSell && (
           <>
             <button
-                  className="btn btn-sm ml-2"
+              className="btn btn-sm self-end"
               onClick={() => setShowSellModal(true)}
             >
               Sell
@@ -514,9 +473,60 @@ export function BetsSummary(props: {
             )}
           </>
         )}
+      </Row>
+      <Row className="flex-wrap-none gap-4">
+        {resolution ? (
+          <Col>
+            <div className="text-sm text-gray-500">Payout</div>
+            <div className="whitespace-nowrap">
+              {formatMoney(payout)}{' '}
+              <ProfitBadge profitPercent={profitPercent} />
             </div>
           </Col>
+        ) : isBinary ? (
+          <>
+            <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>
+          </>
+        ) : isPseudoNumeric ? (
+          <>
+            <Col>
+              <div className="whitespace-nowrap text-sm text-gray-500">
+                Payout if {'>='} {formatLargeNumber(contract.max)}
+              </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>
+            </Col>
+          </>
+        ) : (
+          <Col>
+            <div className="whitespace-nowrap text-sm text-gray-500">
+              Current value
+            </div>
+            <div className="whitespace-nowrap">{formatMoney(payout)}</div>
+          </Col>
+        )}
       </Row>
+    </Col>
   )
 }