From a8abd4ecbbe80d172db71758b865e77a1ffbef76 Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Mon, 14 Feb 2022 13:00:20 -0600
Subject: [PATCH] trades page: show pnl

---
 web/components/bets-list.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/web/components/bets-list.tsx b/web/components/bets-list.tsx
index 603763e9..e55cd22e 100644
--- a/web/components/bets-list.tsx
+++ b/web/components/bets-list.tsx
@@ -121,16 +121,32 @@ export function BetsList(props: { user: User }) {
     (c) => contractsCurrentValue[c.id]
   )
 
+  const totalPortfolio = currentBetsValue + user.balance
+
+  const pnl = totalPortfolio - user.totalDeposits
+  const totalReturn =
+    (pnl > 0 ? '+' : '') + ((pnl / user.totalDeposits) * 100).toFixed() + '%'
+
   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">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>
+          </Col>
           <Col>
             <div className="text-sm text-gray-500">Currently invested</div>
             <div>{formatMoney(currentInvestment)}</div>
           </Col>
           <Col>
-            <div className="text-sm text-gray-500">Current value</div>
+            <div className="text-sm text-gray-500">Current market value</div>
             <div>{formatMoney(currentBetsValue)}</div>
           </Col>
         </Row>