798253f887
* Challenge bets * Store avatar url * Fix before and after probs * Check balance before creation * Calculate winning shares * pretty * Change winning value * Set shares to equal each other * Fix share challenge link * pretty * remove lib refs * Probability of bet is set to market * Remove peer pill * Cleanup * Button on contract page * don't show challenge if not binary or if resolved * challenge button (WIP) * fix accept challenge: don't change pool/probability * Opengraph preview [WIP] * elim lib * Edit og card props * Change challenge text * New card gen attempt * Get challenge on server * challenge button styling * Use env domain * Remove other window ref * Use challenge creator as avatar * Remove user name * Remove s from property, replace prob with outcome * challenge form * share text * Add in challenge parts to template and url * Challenge url params optional * Add challenge params to parse request * Parse please * Don't remove prob * Challenge card styling * Challenge card styling * Challenge card styling * Challenge card styling * Challenge card styling * Challenge card styling * Challenge card styling * Challenge card styling * Add to readme about how to dev og-image * Add emojis * button: gradient background, 2xl size * beautify accept bet screen * update question button * Add separate challenge template * Accepted challenge sharing card, fix accept bet call * accept challenge button * challenge winner page * create challenge screen * Your outcome/cost=> acceptorOutcome/cost * New create challenge panel * Fix main merge * Add challenge slug to bet and filter by it * Center title * Add helper text * Add FAQ section * Lint * Columnize the user areas in preview link too * Absolutely position * Spacing * Orientation * Restyle challenges list, cache contract name * Make copying easy on mobile * Link spacing * Fix spacing * qr codes! * put your challenges first * eslint * Changes to contract buttons and create challenge modal * Change titles around for current bet * Add back in contract title after winning * Cleanup * Add challenge enabled flag * Spacing of switch button * Put sharing qr code in modal Co-authored-by: mantikoros <sgrugett@gmail.com>
67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import { PortfolioMetrics } from 'common/user'
|
|
import { formatMoney } from 'common/util/format'
|
|
import { last } from 'lodash'
|
|
import { memo, useState } from 'react'
|
|
import { Period } from 'web/lib/firebase/users'
|
|
import { Col } from '../layout/col'
|
|
import { Row } from '../layout/row'
|
|
import { PortfolioValueGraph } from './portfolio-value-graph'
|
|
|
|
export const PortfolioValueSection = memo(
|
|
function PortfolioValueSection(props: {
|
|
portfolioHistory: PortfolioMetrics[]
|
|
disableSelector?: boolean
|
|
}) {
|
|
const { portfolioHistory, disableSelector } = props
|
|
const lastPortfolioMetrics = last(portfolioHistory)
|
|
const [portfolioPeriod, setPortfolioPeriod] = useState<Period>('allTime')
|
|
|
|
if (portfolioHistory.length === 0 || !lastPortfolioMetrics) {
|
|
return <></>
|
|
}
|
|
|
|
// PATCH: If portfolio history started on June 1st, then we label it as "Since June"
|
|
// instead of "All time"
|
|
const allTimeLabel =
|
|
lastPortfolioMetrics.timestamp < Date.parse('2022-06-20T00:00:00.000Z')
|
|
? 'Since June'
|
|
: 'All time'
|
|
|
|
return (
|
|
<div>
|
|
<Row className="gap-8">
|
|
<div className="mb-4 w-full">
|
|
<Col
|
|
className={disableSelector ? 'items-center justify-center' : ''}
|
|
>
|
|
<div className="text-sm text-gray-500">Portfolio value</div>
|
|
<div className="text-lg">
|
|
{formatMoney(
|
|
lastPortfolioMetrics.balance +
|
|
lastPortfolioMetrics.investmentValue
|
|
)}
|
|
</div>
|
|
</Col>
|
|
</div>
|
|
{!disableSelector && (
|
|
<select
|
|
className="select select-bordered self-start"
|
|
onChange={(e) => {
|
|
setPortfolioPeriod(e.target.value as Period)
|
|
}}
|
|
>
|
|
<option value="allTime">{allTimeLabel}</option>
|
|
<option value="weekly">7 days</option>
|
|
<option value="daily">24 hours</option>
|
|
</select>
|
|
)}
|
|
</Row>
|
|
<PortfolioValueGraph
|
|
portfolioHistory={portfolioHistory}
|
|
period={portfolioPeriod}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
)
|