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,95 +428,105 @@ export function BetsSummary(props: {
       : 'NO'
     : 'YES'
 
+  const canSell =
+    isYourBets &&
+    isCpmm &&
+    (isBinary || isPseudoNumeric) &&
+    !isClosed &&
+    !resolution &&
+    hasShares &&
+    sharesOutcome &&
+    user
+
   return (
-    <Row className={clsx('flex-wrap gap-4 sm:flex-nowrap sm:gap-6', className)}>
+    <Col className={clsx(className, 'gap-4')}>
-      {!isCpmm && (
+      <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>
-      )}
-      {resolution ? (
         <Col>
-          <div className="text-sm text-gray-500">Payout</div>
+          <div className="whitespace-nowrap text-sm text-gray-500">Profit</div>
           <div className="whitespace-nowrap">
-            {formatMoney(payout)} <ProfitBadge profitPercent={profitPercent} />
+            {formatMoney(profit)} <ProfitBadge profitPercent={profitPercent} />
           </div>
         </Col>
-      ) : isBinary ? (
+        {canSell && (
-        <>
+          <>
-          <Col>
+            <button
-            <div className="whitespace-nowrap text-sm text-gray-500">
+              className="btn btn-sm self-end"
-              Payout if <YesLabel />
+              onClick={() => setShowSellModal(true)}
-            </div>
+            >
-            <div className="whitespace-nowrap">{formatMoney(yesWinnings)}</div>
+              Sell
-          </Col>
+            </button>
-          <Col>
+            {showSellModal && (
-            <div className="whitespace-nowrap text-sm text-gray-500">
+              <SellSharesModal
-              Payout if <NoLabel />
+                contract={contract}
-            </div>
+                user={user}
-            <div className="whitespace-nowrap">{formatMoney(noWinnings)}</div>
+                userBets={bets}
-          </Col>
+                shares={totalShares[sharesOutcome]}
-        </>
+                sharesOutcome={sharesOutcome}
-      ) : isPseudoNumeric ? (
+                setOpen={setShowSellModal}
-        <>
+              />
-          <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 && (
-              <>
-                <button
-                  className="btn btn-sm ml-2"
-                  onClick={() => setShowSellModal(true)}
-                >
-                  Sell
-                </button>
-                {showSellModal && (
-                  <SellSharesModal
-                    contract={contract}
-                    user={user}
-                    userBets={bets}
-                    shares={totalShares[sharesOutcome]}
-                    sharesOutcome={sharesOutcome}
-                    setOpen={setShowSellModal}
-                  />
-                )}
-              </>
             )}
-        </div>
+          </>
-      </Col>
+        )}
-    </Row>
+      </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>
   )
 }