User page: Move portfolio graph and social stats to new tab

web/components/portfolio/portfolio-value-graph.tsx

@@ -8,16 +8,21 @@ import { formatTime } from 'web/lib/util/time'
 
 export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
   portfolioHistory: PortfolioMetrics[]
+  mode: 'value' | 'profit'
   height?: number
   includeTime?: boolean
 }) {
-  const { portfolioHistory, height, includeTime } = props
+  const { portfolioHistory, height, includeTime, mode } = props
   const { width } = useWindowSize()
 
   const points = portfolioHistory.map((p) => {
+    const { timestamp, balance, investmentValue, totalDeposits } = p
+    const value = balance + investmentValue
+    const profit = value - totalDeposits
+
     return {
-      x: new Date(p.timestamp),
-      y: p.balance + p.investmentValue,
+      x: new Date(timestamp),
+      y: mode === 'value' ? value : profit,
     }
   })
   const data = [{ id: 'Value', data: points, color: '#11b981' }]

web/components/portfolio/portfolio-value-section.tsx

@@ -5,6 +5,7 @@ import { usePortfolioHistory } from 'web/hooks/use-portfolio-history'
 import { Period } from 'web/lib/firebase/users'
 import { Col } from '../layout/col'
 import { Row } from '../layout/row'
+import { Spacer } from '../layout/spacer'
 import { PortfolioValueGraph } from './portfolio-value-graph'
 
 export const PortfolioValueSection = memo(
@@ -24,15 +25,16 @@ export const PortfolioValueSection = memo(
       return <></>
     }
 
-    const { balance, investmentValue } = lastPortfolioMetrics
+    const { balance, investmentValue, totalDeposits } = lastPortfolioMetrics
     const totalValue = balance + investmentValue
+    const totalProfit = totalValue - totalDeposits
 
     return (
       <>
         <Row className="gap-8">
           <Col className="flex-1 justify-center">
-            <div className="text-sm text-gray-500">Portfolio value</div>
-            <div className="text-lg">{formatMoney(totalValue)}</div>
+            <div className="text-sm text-gray-500">Profit</div>
+            <div className="text-lg">{formatMoney(totalProfit)}</div>
           </Col>
           <select
             className="select select-bordered self-start"
@@ -49,6 +51,17 @@ export const PortfolioValueSection = memo(
         <PortfolioValueGraph
           portfolioHistory={currPortfolioHistory}
           includeTime={portfolioPeriod == 'daily'}
+          mode="profit"
+        />
+        <Spacer h={8} />
+        <Col className="flex-1 justify-center">
+          <div className="text-sm text-gray-500">Portfolio value</div>
+          <div className="text-lg">{formatMoney(totalValue)}</div>
+        </Col>
+        <PortfolioValueGraph
+          portfolioHistory={currPortfolioHistory}
+          includeTime={portfolioPeriod == 'daily'}
+          mode="value"
         />
       </>
     )

web/components/user-page.tsx

@@ -255,13 +255,6 @@ export function UserPage(props: { user: User }) {
               title: 'Comments',
               content: (
                 <Col>
-                  <Row className={'mt-2 mb-4 flex-wrap items-center gap-6'}>
-                    <FollowingButton user={user} />
-                    <FollowersButton user={user} />
-                    <ReferralsButton user={user} />
-                    <GroupsButton user={user} />
-                    <UserLikesButton user={user} />
-                  </Row>
                   <UserCommentsList user={user} />
                 </Col>
               ),
@@ -270,11 +263,25 @@ export function UserPage(props: { user: User }) {
               title: 'Bets',
               content: (
                 <>
-                  <PortfolioValueSection userId={user.id} />
                   <BetsList user={user} />
                 </>
               ),
             },
+            {
+              title: 'Stats',
+              content: (
+                <Col className="mb-8">
+                  <Row className={'mt-2 mb-8 flex-wrap items-center gap-6'}>
+                    <FollowingButton user={user} />
+                    <FollowersButton user={user} />
+                    <ReferralsButton user={user} />
+                    <GroupsButton user={user} />
+                    <UserLikesButton user={user} />
+                  </Row>
+                  <PortfolioValueSection userId={user.id} />
+                </Col>
+              ),
+            },
           ]}
         />
       </Col>