mango-ui-v3/components/account_page/AccountOverview.tsx

100 lines
3.0 KiB
TypeScript

import { useEffect, useMemo, useState } from 'react'
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
import { useTranslation } from 'next-i18next'
import useMangoStore from '../../stores/useMangoStore'
import BalancesTable from '../BalancesTable'
import Switch from '../Switch'
import useLocalStorageState from '../../hooks/useLocalStorageState'
import PositionsTable from '../PerpPositionsTable'
import AccountOverviewStats from './AccountOverviewStats'
dayjs.extend(utc)
const SHOW_ZERO_BALANCE_KEY = 'showZeroAccountBalances-0.2'
export const fetchHourlyPerformanceStats = async (
mangoAccountPk: string,
range: number
) => {
const response = await fetch(
`https://mango-transaction-log.herokuapp.com/v3/stats/account-performance-detailed?mango-account=${mangoAccountPk}&start-date=${dayjs()
.subtract(range, 'day')
.format('YYYY-MM-DD')}`
)
const parsedResponse = await response.json()
const entries: any = Object.entries(parsedResponse).sort((a, b) =>
b[0].localeCompare(a[0])
)
const stats = entries
.map(([key, value]) => {
return { ...value, time: key }
})
.filter((x) => x)
return stats
}
export default function AccountOverview() {
const { t } = useTranslation('common')
const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
const [showZeroBalances, setShowZeroBalances] = useLocalStorageState(
SHOW_ZERO_BALANCE_KEY,
true
)
const [hourlyPerformanceStats, setHourlyPerformanceStats] = useState([])
useEffect(() => {
const pubKey = mangoAccount?.publicKey?.toString()
const fetchData = async () => {
if (!pubKey) {
return
}
const stats = await fetchHourlyPerformanceStats(pubKey, 90)
setHourlyPerformanceStats(stats)
}
if (pubKey) {
fetchData()
}
}, [mangoAccount?.publicKey])
const mangoAccountValue = useMemo(() => {
return mangoAccount && mangoGroup && mangoCache
? +mangoAccount.computeValue(mangoGroup, mangoCache)
: 0
}, [mangoAccount, mangoGroup, mangoCache])
return mangoAccount ? (
<>
<div className="grid grid-cols-12 md:gap-x-6">
<div className="relative col-span-12 h-[700px] md:h-[615px] lg:h-[430px] xl:h-[320px]">
<AccountOverviewStats
hourlyPerformanceStats={hourlyPerformanceStats}
accountValue={mangoAccountValue}
/>
</div>
</div>
<div className="pb-8">
<h2 className="mb-4">{t('perp-positions')}</h2>
<PositionsTable />
</div>
<div className="flex justify-between pb-4">
<h2>{t('balances')}</h2>
<Switch
checked={showZeroBalances}
className="text-xs"
onChange={() => setShowZeroBalances(!showZeroBalances)}
>
{t('show-zero')}
</Switch>
</div>
<BalancesTable showZeroBalances={showZeroBalances} showDepositWithdraw />
</>
) : null
}