From 85ccdfbf593dc04b27cbc38f4c1143fe03d6228e Mon Sep 17 00:00:00 2001
From: ingawei <ingawei@gmail.com>
Date: Sat, 24 Sep 2022 13:54:06 -0700
Subject: [PATCH] added bottom bar, cleaned up profile bets

---
 web/components/bets-list.tsx                  |  37 ++---
 .../portfolio/portfolio-value-graph.tsx       | 131 +++++++++---------
 .../portfolio/portfolio-value-section.tsx     |   4 +-
 web/components/user-page.tsx                  |   8 +-
 4 files changed, 80 insertions(+), 100 deletions(-)

diff --git a/web/components/bets-list.tsx b/web/components/bets-list.tsx
index 97d11758..d3528913 100644
--- a/web/components/bets-list.tsx
+++ b/web/components/bets-list.tsx
@@ -77,7 +77,7 @@ export function BetsList(props: { user: User }) {
   }, [contractList])
 
   const [sort, setSort] = useState<BetSort>('newest')
-  const [filter, setFilter] = useState<BetFilter>('open')
+  const [filter, setFilter] = useState<BetFilter>('all')
   const [page, setPage] = useState(0)
   const start = page * CONTRACTS_PER_PAGE
   const end = start + CONTRACTS_PER_PAGE
@@ -162,27 +162,20 @@ export function BetsList(props: { user: User }) {
 
   return (
     <Col>
-      <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">Investment value</div>
-            <div className="text-lg">
-              {formatMoney(currentNetInvestment)}{' '}
-              <ProfitBadge profitPercent={investedProfitPercent} />
-            </div>
-          </Col>
-          <Col>
-            <div className="text-sm text-gray-500">Total profit</div>
-            <div className="text-lg">
-              {formatMoney(totalPnl)}{' '}
-              <ProfitBadge profitPercent={totalProfitPercent} />
-            </div>
-          </Col>
-        </Row>
+      <Row className="justify-between gap-4 sm:flex-row">
+        <Col>
+          <div className="text-greyscale-6 text-xs sm:text-sm">
+            Investment value
+          </div>
+          <div className="text-lg">
+            {formatMoney(currentNetInvestment)}{' '}
+            <ProfitBadge profitPercent={investedProfitPercent} />
+          </div>
+        </Col>
 
-        <Row className="gap-8">
+        <Row className="gap-2">
           <select
-            className="select select-bordered self-start"
+            className="border-greyscale-4 self-start overflow-hidden rounded border px-2 py-2 text-sm"
             value={filter}
             onChange={(e) => setFilter(e.target.value as BetFilter)}
           >
@@ -195,7 +188,7 @@ export function BetsList(props: { user: User }) {
           </select>
 
           <select
-            className="select select-bordered self-start"
+            className="border-greyscale-4 self-start overflow-hidden rounded px-2 py-2 text-sm"
             value={sort}
             onChange={(e) => setSort(e.target.value as BetSort)}
           >
@@ -205,7 +198,7 @@ export function BetsList(props: { user: User }) {
             <option value="closeTime">Close date</option>
           </select>
         </Row>
-      </Col>
+      </Row>
 
       <Col className="mt-6 divide-y">
         {displayedContracts.length === 0 ? (
diff --git a/web/components/portfolio/portfolio-value-graph.tsx b/web/components/portfolio/portfolio-value-graph.tsx
index df4d0e27..38a6dbf3 100644
--- a/web/components/portfolio/portfolio-value-graph.tsx
+++ b/web/components/portfolio/portfolio-value-graph.tsx
@@ -2,12 +2,9 @@ import { ResponsiveLine } from '@nivo/line'
 import { PortfolioMetrics } from 'common/user'
 import { formatMoney } from 'common/util/format'
 import dayjs from 'dayjs'
-import { connectStorageEmulator } from 'firebase/storage'
 import { last, set } from 'lodash'
 import { memo } from 'react'
 import { useWindowSize } from 'web/hooks/use-window-size'
-import { nFormatter } from 'web/lib/util/appendNumber'
-import { formatTime } from 'web/lib/util/time'
 import { Col } from '../layout/col'
 
 export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
@@ -102,72 +99,68 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
         )
 
   return (
-    <div className="animate-rapidpulse">
-      <div
-        className="w-full overflow-hidden"
-        style={{ height: height ?? (!width || width >= 800 ? 200 : 100) }}
-        onMouseLeave={() => setGraphDisplayNumber(null)}
-      >
-        <ResponsiveLine
-          margin={{ top: 10, right: 0, left: 40, bottom: 10 }}
-          data={data}
-          xScale={{
-            type: 'time',
-            min: firstPoints[0]?.x,
-            max: endDate,
-          }}
-          yScale={{
-            type: 'linear',
-            stacked: false,
-            min: yMin,
-            max: yMax,
-          }}
-          curve="stepAfter"
-          enablePoints={false}
-          colors={{ datum: 'color' }}
-          axisBottom={{
-            tickValues: 0,
-          }}
-          pointBorderColor="#fff"
-          pointSize={firstPoints.length > 100 ? 0 : 6}
-          axisLeft={{
-            tickValues: numYTickValues,
-            format: '.3s',
-          }}
-          enableGridX={false}
-          enableGridY={true}
-          gridYValues={numYTickValues}
-          enableSlices="x"
-          animate={false}
-          yFormat={(value) => formatMoney(+value)}
-          enableArea={true}
-          areaOpacity={0.1}
-          sliceTooltip={({ slice }) => {
-            slice.points.map((point) =>
-              setGraphDisplayNumber(point.data.yFormatted)
-            )
-            return (
-              <div className="rounded bg-white px-4 py-2 opacity-80">
-                {slice.points.map((point) => (
-                  <div
-                    key={point.id}
-                    className="text-xs font-semibold sm:text-sm"
-                  >
-                    <Col>
-                      <div>
-                        {dayjs(point.data.xFormatted).format('MMM/D/YY')}
-                      </div>
-                      <div className="text-greyscale-6 text-2xs font-normal sm:text-xs">
-                        {dayjs(point.data.xFormatted).format('h:mm A')}
-                      </div>
-                    </Col>
-                  </div>
-                ))}
-              </div>
-            )
-          }}
-        ></ResponsiveLine>
-      </div>
+    <div
+      className="w-full overflow-hidden"
+      style={{ height: height ?? (!width || width >= 800 ? 200 : 100) }}
+      onMouseLeave={() => setGraphDisplayNumber(null)}
+    >
+      <ResponsiveLine
+        margin={{ top: 10, right: 0, left: 40, bottom: 10 }}
+        data={data}
+        xScale={{
+          type: 'time',
+          min: firstPoints[0]?.x,
+          max: endDate,
+        }}
+        yScale={{
+          type: 'linear',
+          stacked: false,
+          min: yMin,
+          max: yMax,
+        }}
+        curve="stepAfter"
+        enablePoints={false}
+        colors={{ datum: 'color' }}
+        axisBottom={{
+          tickValues: 0,
+        }}
+        pointBorderColor="#fff"
+        pointSize={firstPoints.length > 100 ? 0 : 6}
+        axisLeft={{
+          tickValues: numYTickValues,
+          format: '.3s',
+        }}
+        enableGridX={false}
+        enableGridY={true}
+        gridYValues={numYTickValues}
+        enableSlices="x"
+        animate={false}
+        yFormat={(value) => formatMoney(+value)}
+        enableArea={true}
+        areaOpacity={0.1}
+        sliceTooltip={({ slice }) => {
+          slice.points.map((point) =>
+            setGraphDisplayNumber(point.data.yFormatted)
+          )
+          return (
+            <div className="rounded bg-white px-4 py-2 opacity-80">
+              {slice.points.map((point) => (
+                <div
+                  key={point.id}
+                  className="text-xs font-semibold sm:text-sm"
+                >
+                  <Col>
+                    <div>{dayjs(point.data.xFormatted).format('MMM/D/YY')}</div>
+                    <div className="text-greyscale-6 text-2xs font-normal sm:text-xs">
+                      {dayjs(point.data.xFormatted).format('h:mm A')}
+                    </div>
+                  </Col>
+                </div>
+              ))}
+            </div>
+          )
+        }}
+      ></ResponsiveLine>
     </div>
   )
 })
diff --git a/web/components/portfolio/portfolio-value-section.tsx b/web/components/portfolio/portfolio-value-section.tsx
index 2b26d734..6f8f07f1 100644
--- a/web/components/portfolio/portfolio-value-section.tsx
+++ b/web/components/portfolio/portfolio-value-section.tsx
@@ -99,8 +99,8 @@ export const PortfolioValueSection = memo(
         <PortfolioPeriodSelection
           portfolioPeriod={portfolioPeriod}
           setPortfolioPeriod={setPortfolioPeriod}
-          className="mt-2 gap-4"
-          selectClassName="text-indigo-600 text-bold underline"
+          className="border-greyscale-2 mt-2 gap-4 border-b"
+          selectClassName="text-indigo-600 text-bold border-b border-indigo-600"
         />
       </>
     )
diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx
index fd5d04ee..47d08e15 100644
--- a/web/components/user-page.tsx
+++ b/web/components/user-page.tsx
@@ -29,19 +29,12 @@ import { FollowersButton, FollowingButton } from './following-button'
 import { UserFollowButton } from './follow-button'
 import { GroupsButton } from 'web/components/groups/groups-button'
 import { PortfolioValueSection } from './portfolio/portfolio-value-section'
-import { ReferralsButton } from 'web/components/referrals-button'
 import { formatMoney } from 'common/util/format'
-import { ShareIconButton } from 'web/components/share-icon-button'
-import { ENV_CONFIG } from 'common/envs/constants'
 import {
   BettingStreakModal,
   hasCompletedStreakToday,
 } from 'web/components/profile/betting-streak-modal'
-import { REFERRAL_AMOUNT } from 'common/economy'
 import { LoansModal } from './profile/loans-modal'
-import { UserLikesButton } from 'web/components/profile/user-likes-button'
-import { PAST_BETS } from 'common/user'
-import { capitalize } from 'lodash'
 import { useIsMobile } from 'web/hooks/use-is-mobile'
 
 export function UserPage(props: { user: User }) {
@@ -210,6 +203,7 @@ export function UserPage(props: { user: User }) {
                 content: (
                   <>
                     <PortfolioValueSection userId={user.id} />
+                    <Spacer h={4} />
                     <BetsList user={user} />
                   </>
                 ),