import { formatMoney } from 'common/util/format' import { last } from 'lodash' import { memo, useRef, useState } from 'react' 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( function PortfolioValueSection(props: { userId: string }) { const { userId } = props const [portfolioPeriod, setPortfolioPeriod] = useState<Period>('weekly') const portfolioHistory = usePortfolioHistory(userId, portfolioPeriod) // Remember the last defined portfolio history. const portfolioRef = useRef(portfolioHistory) if (portfolioHistory) portfolioRef.current = portfolioHistory const currPortfolioHistory = portfolioRef.current const lastPortfolioMetrics = last(currPortfolioHistory) if (!currPortfolioHistory || !lastPortfolioMetrics) { return <></> } 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">Profit</div> <div className="text-lg">{formatMoney(totalProfit)}</div> </Col> <select className="select select-bordered self-start" value={portfolioPeriod} onChange={(e) => { setPortfolioPeriod(e.target.value as Period) }} > <option value="allTime">All time</option> <option value="monthly">Last Month</option> <option value="weekly">Last 7d</option> <option value="daily">Last 24h</option> </select> </Row> <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" /> </> ) } )