Show current user profit on bets page

web/components/bets-list.tsx

@@ -6,7 +6,7 @@ import clsx from 'clsx'
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid'
 
 import { Bet } from 'web/lib/firebase/bets'
-import { User } from 'web/lib/firebase/users'
+import { getFirstDayProfit, User } from 'web/lib/firebase/users'
 import {
   formatLargeNumber,
   formatMoney,
@@ -73,6 +73,7 @@ export function BetsList(props: {
 
   const [sort, setSort] = useState<BetSort>('newest')
   const [filter, setFilter] = useState<BetFilter>('open')
+  const [firstDayProfit, setFirstDayProfit] = useState(0)
   const [page, setPage] = useState(0)
   const start = page * CONTRACTS_PER_PAGE
   const end = start + CONTRACTS_PER_PAGE
@@ -84,6 +85,12 @@ export function BetsList(props: {
     }
   }, [signedInUser, bets, contractsById, getTime])
 
+  useEffect(() => {
+    if (signedInUser && signedInUser.id === user.id) {
+      getFirstDayProfit(signedInUser.id).then(setFirstDayProfit)
+    }
+  }, [signedInUser, user])
+
   if (!bets || !contractsById) {
     return <LoadingIndicator />
   }
@@ -157,14 +164,16 @@ export function BetsList(props: {
     (c) => contractsMetrics[c.id].netPayout
   )
 
-  const totalPnl = user.profitCached.allTime
+  const totalPnl = (signedInUser?.profitCached.allTime ?? 0) - firstDayProfit
-  const totalProfitPercent = (totalPnl / user.totalDeposits) * 100
+  const totalProfitPercent =
+    (totalPnl / (signedInUser?.totalDeposits ?? 1000)) * 100
   const investedProfitPercent =
     ((currentBetsValue - currentInvested) / (currentInvested + 0.1)) * 100
 
   return (
     <Col className="mt-6">
       <Col className="mx-4 gap-4 sm:flex-row sm:justify-between md:mx-0">
+        {user.id === signedInUser?.id && (
           <Row className="gap-8">
             <Col>
               <div className="text-sm text-gray-500">Investment value</div>
@@ -181,6 +190,7 @@ export function BetsList(props: {
               </div>
             </Col>
           </Row>
+        )}
 
         <Row className="gap-8">
           <select