added bottom bar, cleaned up profile bets

This commit is contained in:
ingawei 2022-09-24 13:54:06 -07:00
parent 8b2856b980
commit 85ccdfbf59
4 changed files with 80 additions and 100 deletions

View File

@ -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 ? (

View File

@ -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>
)
})

View File

@ -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"
/>
</>
)

View File

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