added bottom bar, cleaned up profile bets

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="justify-between gap-4 sm:flex-row">
-        <Row className="gap-8">
+        <Col>
-          <Col>
+          <div className="text-greyscale-6 text-xs sm:text-sm">
-            <div className="text-sm text-gray-500">Investment value</div>
+            Investment value
-            <div className="text-lg">
+          </div>
-              {formatMoney(currentNetInvestment)}{' '}
+          <div className="text-lg">
-              <ProfitBadge profitPercent={investedProfitPercent} />
+            {formatMoney(currentNetInvestment)}{' '}
-            </div>
+            <ProfitBadge profitPercent={investedProfitPercent} />
-          </Col>
+          </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="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 ? (

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
-      <div
+      className="w-full overflow-hidden"
-        className="w-full overflow-hidden"
+      style={{ height: height ?? (!width || width >= 800 ? 200 : 100) }}
-        style={{ height: height ?? (!width || width >= 800 ? 200 : 100) }}
+      onMouseLeave={() => setGraphDisplayNumber(null)}
-        onMouseLeave={() => setGraphDisplayNumber(null)}
+    >
-      >
+      <ResponsiveLine
-        <ResponsiveLine
+        margin={{ top: 10, right: 0, left: 40, bottom: 10 }}
-          margin={{ top: 10, right: 0, left: 40, bottom: 10 }}
+        data={data}
-          data={data}
+        xScale={{
-          xScale={{
+          type: 'time',
-            type: 'time',
+          min: firstPoints[0]?.x,
-            min: firstPoints[0]?.x,
+          max: endDate,
-            max: endDate,
+        }}
-          }}
+        yScale={{
-          yScale={{
+          type: 'linear',
-            type: 'linear',
+          stacked: false,
-            stacked: false,
+          min: yMin,
-            min: yMin,
+          max: yMax,
-            max: yMax,
+        }}
-          }}
+        curve="stepAfter"
-          curve="stepAfter"
+        enablePoints={false}
-          enablePoints={false}
+        colors={{ datum: 'color' }}
-          colors={{ datum: 'color' }}
+        axisBottom={{
-          axisBottom={{
+          tickValues: 0,
-            tickValues: 0,
+        }}
-          }}
+        pointBorderColor="#fff"
-          pointBorderColor="#fff"
+        pointSize={firstPoints.length > 100 ? 0 : 6}
-          pointSize={firstPoints.length > 100 ? 0 : 6}
+        axisLeft={{
-          axisLeft={{
+          tickValues: numYTickValues,
-            tickValues: numYTickValues,
+          format: '.3s',
-            format: '.3s',
+        }}
-          }}
+        enableGridX={false}
-          enableGridX={false}
+        enableGridY={true}
-          enableGridY={true}
+        gridYValues={numYTickValues}
-          gridYValues={numYTickValues}
+        enableSlices="x"
-          enableSlices="x"
+        animate={false}
-          animate={false}
+        yFormat={(value) => formatMoney(+value)}
-          yFormat={(value) => formatMoney(+value)}
+        enableArea={true}
-          enableArea={true}
+        areaOpacity={0.1}
-          areaOpacity={0.1}
+        sliceTooltip={({ slice }) => {
-          sliceTooltip={({ slice }) => {
+          slice.points.map((point) =>
-            slice.points.map((point) =>
+            setGraphDisplayNumber(point.data.yFormatted)
-              setGraphDisplayNumber(point.data.yFormatted)
+          )
-            )
+          return (
-            return (
+            <div className="rounded bg-white px-4 py-2 opacity-80">
-              <div className="rounded bg-white px-4 py-2 opacity-80">
+              {slice.points.map((point) => (
-                {slice.points.map((point) => (
+                <div
-                  <div
+                  key={point.id}
-                    key={point.id}
+                  className="text-xs font-semibold sm:text-sm"
-                    className="text-xs font-semibold sm:text-sm"
+                >
-                  >
+                  <Col>
-                    <Col>
+                    <div>{dayjs(point.data.xFormatted).format('MMM/D/YY')}</div>
-                      <div>
+                    <div className="text-greyscale-6 text-2xs font-normal sm:text-xs">
-                        {dayjs(point.data.xFormatted).format('MMM/D/YY')}
+                      {dayjs(point.data.xFormatted).format('h:mm A')}
-                      </div>
+                    </div>
-                      <div className="text-greyscale-6 text-2xs font-normal sm:text-xs">
+                  </Col>
-                        {dayjs(point.data.xFormatted).format('h:mm A')}
+                </div>
-                      </div>
+              ))}
-                    </Col>
+            </div>
-                  </div>
+          )
-                ))}
+        }}
-              </div>
+      ></ResponsiveLine>
-            )
-          }}
-        ></ResponsiveLine>
-      </div>
     </div>
   )
 })

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"
+          className="border-greyscale-2 mt-2 gap-4 border-b"
-          selectClassName="text-indigo-600 text-bold underline"
+          selectClassName="text-indigo-600 text-bold border-b border-indigo-600"
         />
       </>
     )

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} />
                   </>
                 ),