cleaning up, no mapping in graph tooltip

web/components/bets-list.tsx

@@ -155,8 +155,6 @@ export function BetsList(props: { user: User }) {
     (c) => contractsMetrics[c.id].netPayout
   )
 
-  // const totalPnl = user.profitCached.allTime
-  // const totalProfitPercent = (totalPnl / user.totalDeposits) * 100
   const investedProfitPercent =
     ((currentBetsValue - currentInvested) / (currentInvested + 0.1)) * 100
 

web/components/contract/contracts-grid.tsx

@@ -55,13 +55,6 @@ export function ContractsGrid(props: {
   }
 
   if (contracts.length === 0) {
-    // if (profile) {
-    //   return (
-    //     <p className="mx-2 text-gray-500">
-    //       This creator does not yet have any markets.
-    //     </p>
-    //   )
-    // } else {
     return (
       <p className="mx-2 text-gray-500">
         No markets found. Why not{' '}
@@ -70,7 +63,6 @@ export function ContractsGrid(props: {
         </SiteLink>
       </p>
     )
-    // }
   }
 
   return (

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

@@ -1,5 +1,6 @@
 import { ResponsiveLine } from '@nivo/line'
 import { PortfolioMetrics } from 'common/user'
+import { filterDefined } from 'common/util/array'
 import { formatMoney } from 'common/util/format'
 import dayjs from 'dayjs'
 import { last } from 'lodash'
@@ -10,103 +11,69 @@ import { Col } from '../layout/col'
 export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
   portfolioHistory: PortfolioMetrics[]
   mode: 'value' | 'profit'
-  setGraphDisplayNumber: (arg0: number | string | null) => void
+  handleGraphDisplayChange: (arg0: string | number | null) => void
   height?: number
 }) {
-  const { portfolioHistory, height, mode, setGraphDisplayNumber } = props
+  const { portfolioHistory, height, mode, handleGraphDisplayChange } = props
   const { width } = useWindowSize()
 
-  function getPoints(line: 'value' | 'posProfit' | 'negProfit') {
+  const valuePoints = getPoints('value', portfolioHistory)
-    const points = portfolioHistory.map((p) => {
+  const posProfitPoints = getPoints('posProfit', portfolioHistory)
-      const { timestamp, balance, investmentValue, totalDeposits } = p
+  const negProfitPoints = getPoints('negProfit', portfolioHistory)
-      const value = balance + investmentValue
 
-      const profit = value - totalDeposits
+  const valuePointsY = valuePoints.map((p) => p.y)
-      let posProfit = null
+  const posProfitPointsY = posProfitPoints.map((p) => p.y)
-      let negProfit = null
+  const negProfitPointsY = negProfitPoints.map((p) => p.y)
-      if (profit < 0) {
-        negProfit = profit
-      } else {
-        posProfit = profit
-      }
-
-      return {
-        x: new Date(timestamp),
-        y:
-          line === 'value'
-            ? value
-            : line === 'posProfit'
-            ? posProfit
-            : negProfit,
-      }
-    })
-    return points
-  }
 
   let data
 
   if (mode === 'value') {
-    data = [{ id: 'value', data: getPoints('value'), color: '#4f46e5' }]
+    data = [{ id: 'value', data: valuePoints, color: '#4f46e5' }]
   } else {
     data = [
       {
         id: 'negProfit',
-        data: getPoints('negProfit'),
+        data: negProfitPoints,
         color: '#dc2626',
       },
       {
         id: 'posProfit',
-        data: getPoints('posProfit'),
+        data: posProfitPoints,
         color: '#14b8a6',
       },
     ]
   }
-  const firstPoints = data[0].data
   const numYTickValues = 2
   const endDate = last(data[0].data)?.x
 
-  const firstPointsY = firstPoints
-    .map((p) => p.y)
-    .filter((y) => {
-      return y !== null
-    })
-
   const yMin =
     mode === 'value'
-      ? Math.min(...firstPointsY)
+      ? Math.min(...filterDefined(valuePointsY))
       : Math.min(
-          ...firstPointsY,
+          ...filterDefined(negProfitPointsY),
-          ...data[1].data
+          ...filterDefined(posProfitPointsY)
-            .filter((p) => {
-              return p.y !== null
-            })
-            .map((p) => p.y)
         )
 
   const yMax =
     mode === 'value'
-      ? Math.max(...firstPointsY)
+      ? Math.max(...filterDefined(valuePointsY))
       : Math.max(
-          ...firstPointsY,
+          ...filterDefined(negProfitPointsY),
-          ...data[1].data
+          ...filterDefined(posProfitPointsY)
-            .filter((p) => {
-              return p.y !== null
-            })
-            .map((p) => p.y)
         )
 
   return (
     <div
       className="w-full overflow-hidden"
       style={{ height: height ?? (!width || width >= 800 ? 200 : 100) }}
-      onMouseLeave={() => setGraphDisplayNumber(null)}
+      onMouseLeave={() => handleGraphDisplayChange(null)}
     >
       <ResponsiveLine
         margin={{ top: 10, right: 0, left: 40, bottom: 10 }}
         data={data}
         xScale={{
           type: 'time',
-          min: firstPoints[0]?.x,
+          min: valuePoints[0]?.x,
           max: endDate,
         }}
         yScale={{
@@ -122,7 +89,7 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
           tickValues: 0,
         }}
         pointBorderColor="#fff"
-        pointSize={firstPoints.length > 100 ? 0 : 6}
+        pointSize={valuePoints.length > 100 ? 0 : 6}
         axisLeft={{
           tickValues: numYTickValues,
           format: '.3s',
@@ -136,24 +103,23 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
         enableArea={true}
         areaOpacity={0.1}
         sliceTooltip={({ slice }) => {
-          slice.points.map((point) =>
+          handleGraphDisplayChange(slice.points[0].data.yFormatted)
-            setGraphDisplayNumber(point.data.yFormatted)
-          )
           return (
             <div className="rounded bg-white px-4 py-2 opacity-80">
-              {slice.points.map((point) => (
+              <div
-                <div
+                key={slice.points[0].id}
-                  key={point.id}
+                className="text-xs font-semibold sm:text-sm"
-                  className="text-xs font-semibold sm:text-sm"
+              >
-                >
+                <Col>
-                  <Col>
+                  <div>
-                    <div>{dayjs(point.data.xFormatted).format('MMM/D/YY')}</div>
+                    {dayjs(slice.points[0].data.xFormatted).format('MMM/D/YY')}
-                    <div className="text-greyscale-6 text-2xs font-normal sm:text-xs">
+                  </div>
-                      {dayjs(point.data.xFormatted).format('h:mm A')}
+                  <div className="text-greyscale-6 text-2xs font-normal sm:text-xs">
-                    </div>
+                    {dayjs(slice.points[0].data.xFormatted).format('h:mm A')}
-                  </Col>
+                  </div>
-                </div>
+                </Col>
-              ))}
+              </div>
+              {/* ))} */}
             </div>
           )
         }}
@@ -161,3 +127,29 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
     </div>
   )
 })
+
+export function getPoints(
+  line: 'value' | 'posProfit' | 'negProfit',
+  portfolioHistory: PortfolioMetrics[]
+) {
+  const points = portfolioHistory.map((p) => {
+    const { timestamp, balance, investmentValue, totalDeposits } = p
+    const value = balance + investmentValue
+
+    const profit = value - totalDeposits
+    let posProfit = null
+    let negProfit = null
+    if (profit < 0) {
+      negProfit = profit
+    } else {
+      posProfit = profit
+    }
+
+    return {
+      x: new Date(timestamp),
+      y:
+        line === 'value' ? value : line === 'posProfit' ? posProfit : negProfit,
+    }
+  })
+  return points
+}

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

@@ -16,8 +16,10 @@ export const PortfolioValueSection = memo(
     const [portfolioPeriod, setPortfolioPeriod] = useState<Period>('weekly')
     const portfolioHistory = usePortfolioHistory(userId, portfolioPeriod)
     const [graphMode, setGraphMode] = useState<'profit' | 'value'>('value')
-    const [graphDisplayNumber, setGraphDisplayNumber] = useState(null)
+    const [graphDisplayNumber, setGraphDisplayNumber] = useState<
-    const handleGraphDisplayChange = (num) => {
+      number | string | null
+    >(null)
+    const handleGraphDisplayChange = (num: string | number | null) => {
       setGraphDisplayNumber(num)
     }
 
@@ -70,7 +72,7 @@ export const PortfolioValueSection = memo(
                 className={clsx(
                   graphMode === 'profit'
                     ? graphDisplayNumber
-                      ? graphDisplayNumber[2] === '-'
+                      ? graphDisplayNumber.toString().includes('-')
                         ? 'text-red-600'
                         : 'text-teal-500'
                       : totalProfit > 0
@@ -90,13 +92,11 @@ export const PortfolioValueSection = memo(
               </div>
             </Col>
           </Row>
-          {/* <GraphToggle setGraphMode={setGraphMode} graphMode={graphMode} /> */}
         </Row>
         <PortfolioValueGraph
           portfolioHistory={currPortfolioHistory}
-          includeTime={true}
           mode={graphMode}
-          setGraphDisplayNumber={handleGraphDisplayChange}
+          handleGraphDisplayChange={handleGraphDisplayChange}
         />
         <PortfolioPeriodSelection
           portfolioPeriod={portfolioPeriod}

web/components/user-page.tsx

@@ -47,7 +47,8 @@ export function UserPage(props: { user: User }) {
   const isMobile = useIsMobile()
 
   useEffect(() => {
-    // const claimedMana = router.query['claimed-mana'] === 'yes'
+    const claimedMana = router.query['claimed-mana'] === 'yes'
+    setShowConfetti(claimedMana)
     const query = { ...router.query }
     if (query.claimedMana || query.show) {
       delete query['claimed-mana']
@@ -218,14 +219,6 @@ export function UserPage(props: { user: User }) {
                   </Col>
                 ),
               },
-              // {
-              //   title: 'Stats',
-              //   content: (
-              //     <Col className="mb-8">
-              //       <PortfolioValueSection userId={user.id} />
-              //     </Col>
-              //   ),
-              // },
             ]}
           />
         </Col>
@@ -263,6 +256,7 @@ export function ProfilePrivateStats(props: {
 
     const showLoansModel = router.query['show'] === 'loans'
     setShowLoansModal(showLoansModel)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
   return (
     <>