2022-08-11 08:54:02 -07:00
|
|
|
import { HealthType, toUiDecimals, toUiDecimalsForQuote } from '@blockworks-foundation/mango-v4'
|
2022-04-12 13:48:22 -07:00
|
|
|
import type { NextPage } from 'next'
|
2022-07-14 22:20:20 -07:00
|
|
|
import { useTranslation } from 'next-i18next'
|
2022-07-14 16:36:31 -07:00
|
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
2022-08-10 21:09:58 -07:00
|
|
|
import { useEffect, useMemo, useState } from 'react'
|
2022-07-15 04:09:23 -07:00
|
|
|
import AccountActions from '../components/account/AccountActions'
|
2022-07-14 22:20:20 -07:00
|
|
|
import DepositModal from '../components/modals/DepositModal'
|
|
|
|
import WithdrawModal from '../components/modals/WithdrawModal'
|
|
|
|
import mangoStore from '../store/state'
|
|
|
|
import { formatDecimal } from '../utils/numbers'
|
2022-07-23 04:30:50 -07:00
|
|
|
import FlipNumbers from 'react-flip-numbers'
|
2022-08-10 21:09:58 -07:00
|
|
|
import {
|
|
|
|
DownTriangle,
|
|
|
|
UpTriangle,
|
|
|
|
} from '../components/shared/DirectionTriangles'
|
2022-08-03 02:49:31 -07:00
|
|
|
import SimpleAreaChart from '../components/shared/SimpleAreaChart'
|
|
|
|
import { COLORS } from '../styles/colors'
|
|
|
|
import { useTheme } from 'next-themes'
|
|
|
|
import { IconButton } from '../components/shared/Button'
|
|
|
|
import { ArrowsExpandIcon } from '@heroicons/react/solid'
|
|
|
|
import { Transition } from '@headlessui/react'
|
2022-08-10 04:17:10 -07:00
|
|
|
import AccountTabs from '../components/account/AccountTabs'
|
2022-08-10 21:09:58 -07:00
|
|
|
import dayjs from 'dayjs'
|
|
|
|
import DetailedAccountValueChart from '../components/account/DetailedAccountValueChart'
|
|
|
|
import SheenLoader from '../components/shared/SheenLoader'
|
2022-08-10 23:23:18 -07:00
|
|
|
import { notify } from '../utils/notifications'
|
2022-08-10 21:09:58 -07:00
|
|
|
|
2022-08-11 02:52:02 -07:00
|
|
|
export interface PerformanceDataItem {
|
2022-08-10 21:09:58 -07:00
|
|
|
account_equity: number
|
|
|
|
pnl: number
|
|
|
|
spot_value: number
|
|
|
|
time: string
|
|
|
|
transfer_balance: number
|
|
|
|
}
|
2022-04-12 13:48:22 -07:00
|
|
|
|
2022-08-10 23:23:18 -07:00
|
|
|
interface InterestItem {
|
|
|
|
deposit_interest: number
|
|
|
|
borrow_interest: number
|
|
|
|
price: number
|
|
|
|
time: string
|
|
|
|
}
|
|
|
|
|
2022-08-11 02:52:02 -07:00
|
|
|
interface HourlyInterestDataItem {
|
2022-08-10 23:23:18 -07:00
|
|
|
symbol: string
|
|
|
|
interest: Array<InterestItem>
|
|
|
|
}
|
|
|
|
|
2022-07-14 16:36:31 -07:00
|
|
|
export async function getStaticProps({ locale }: { locale: string }) {
|
|
|
|
return {
|
|
|
|
props: {
|
2022-07-15 04:09:23 -07:00
|
|
|
...(await serverSideTranslations(locale, ['common', 'close-account'])),
|
2022-07-14 16:36:31 -07:00
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
2022-04-12 13:48:22 -07:00
|
|
|
|
2022-08-10 21:09:58 -07:00
|
|
|
export const fetchHourlyPerformanceStats = async (
|
|
|
|
mangoAccountPk: string,
|
|
|
|
range: number
|
|
|
|
) => {
|
|
|
|
const response = await fetch(
|
2022-08-10 23:23:18 -07:00
|
|
|
`https://mango-transaction-log.herokuapp.com/v4/stats/performance_account?mango-account=${mangoAccountPk}&start-date=${dayjs()
|
2022-08-10 21:09:58 -07:00
|
|
|
.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]: Array<{ key: string; value: number }>) => {
|
|
|
|
return { ...value, time: key }
|
|
|
|
})
|
|
|
|
.filter((x: string) => x)
|
|
|
|
|
|
|
|
return stats
|
|
|
|
}
|
2022-08-03 02:49:31 -07:00
|
|
|
|
2022-08-10 23:23:18 -07:00
|
|
|
export const fetchHourlyInterest = async (
|
|
|
|
mangoAccountPk: string,
|
|
|
|
range: number
|
|
|
|
) => {
|
|
|
|
const response = await fetch(
|
|
|
|
`https://mango-transaction-log.herokuapp.com/v4/stats/interest-account-hourly?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 totals = entries
|
|
|
|
.map(
|
|
|
|
([key, value]: Array<{
|
|
|
|
key: string
|
|
|
|
value: any
|
|
|
|
}>) => {
|
|
|
|
const interest = Object.entries(value).map(([key, value]) => ({
|
|
|
|
...value,
|
|
|
|
time: key,
|
|
|
|
}))
|
|
|
|
return { interest, symbol: key }
|
|
|
|
}
|
|
|
|
)
|
|
|
|
.filter((x: string) => x)
|
|
|
|
|
|
|
|
return totals
|
|
|
|
}
|
|
|
|
|
2022-07-14 16:36:31 -07:00
|
|
|
const Index: NextPage = () => {
|
2022-07-14 22:20:20 -07:00
|
|
|
const { t } = useTranslation('common')
|
2022-07-27 23:35:18 -07:00
|
|
|
const mangoAccount = mangoStore((s) => s.mangoAccount.current)
|
2022-08-10 23:23:18 -07:00
|
|
|
const [showDepositModal, setShowDepositModal] = useState<boolean>(false)
|
|
|
|
const [showWithdrawModal, setShowWithdrawModal] = useState<boolean>(false)
|
|
|
|
const [showDetailedValueChart, setShowDetailedValueChart] =
|
|
|
|
useState<boolean>(false)
|
|
|
|
const [showExpandChart, setShowExpandChart] = useState<boolean>(false)
|
|
|
|
const [loadAccountData, setLoadAccountData] = useState<boolean>(false)
|
2022-08-11 02:52:02 -07:00
|
|
|
const [performanceData, setPerformanceData] = useState<
|
|
|
|
Array<PerformanceDataItem>
|
2022-08-10 21:09:58 -07:00
|
|
|
>([])
|
2022-08-11 02:52:02 -07:00
|
|
|
const [hourlyInterestData, setHourlyInterestData] = useState<
|
|
|
|
Array<HourlyInterestDataItem>
|
2022-08-10 23:23:18 -07:00
|
|
|
>([])
|
2022-08-03 02:49:31 -07:00
|
|
|
const { theme } = useTheme()
|
|
|
|
|
2022-08-10 21:09:58 -07:00
|
|
|
useEffect(() => {
|
|
|
|
if (mangoAccount) {
|
2022-08-10 23:23:18 -07:00
|
|
|
setLoadAccountData(true)
|
|
|
|
const getData = async () => {
|
2022-08-10 21:09:58 -07:00
|
|
|
const pubKey = mangoAccount.publicKey.toString()
|
|
|
|
try {
|
2022-08-10 23:23:18 -07:00
|
|
|
const promises = [
|
|
|
|
fetchHourlyPerformanceStats(pubKey, 1),
|
2022-08-11 03:49:16 -07:00
|
|
|
fetchHourlyInterest(pubKey, 10000),
|
2022-08-10 23:23:18 -07:00
|
|
|
]
|
|
|
|
const data = await Promise.all(promises)
|
2022-08-11 02:52:02 -07:00
|
|
|
setPerformanceData(data[0])
|
|
|
|
setHourlyInterestData(data[1])
|
2022-08-10 23:23:18 -07:00
|
|
|
setLoadAccountData(false)
|
2022-08-10 21:09:58 -07:00
|
|
|
} catch {
|
2022-08-10 23:23:18 -07:00
|
|
|
notify({
|
|
|
|
title: 'Failed to load account performance data',
|
|
|
|
type: 'error',
|
|
|
|
})
|
|
|
|
setLoadAccountData(false)
|
2022-08-10 21:09:58 -07:00
|
|
|
}
|
|
|
|
}
|
2022-08-10 23:23:18 -07:00
|
|
|
getData()
|
2022-08-10 21:09:58 -07:00
|
|
|
}
|
|
|
|
}, [mangoAccount])
|
|
|
|
|
2022-08-03 02:49:31 -07:00
|
|
|
const onHoverMenu = (open: boolean, action: string) => {
|
|
|
|
if (
|
|
|
|
(!open && action === 'onMouseEnter') ||
|
|
|
|
(open && action === 'onMouseLeave')
|
|
|
|
) {
|
|
|
|
setShowExpandChart(!open)
|
|
|
|
}
|
|
|
|
}
|
2022-07-15 04:09:23 -07:00
|
|
|
|
2022-08-03 02:49:31 -07:00
|
|
|
const handleShowDetailedValueChart = () => {
|
|
|
|
setShowDetailedValueChart(true)
|
|
|
|
setShowExpandChart(false)
|
|
|
|
}
|
|
|
|
|
2022-08-10 21:09:58 -07:00
|
|
|
const accountValueChange = useMemo(() => {
|
2022-08-11 02:52:02 -07:00
|
|
|
if (performanceData.length) {
|
2022-08-10 21:09:58 -07:00
|
|
|
return (
|
2022-08-11 02:52:02 -07:00
|
|
|
((performanceData[performanceData.length - 1].account_equity -
|
|
|
|
performanceData[0].account_equity) /
|
|
|
|
performanceData[0].account_equity) *
|
2022-08-10 21:09:58 -07:00
|
|
|
100
|
|
|
|
)
|
|
|
|
}
|
|
|
|
return 0
|
2022-08-11 02:52:02 -07:00
|
|
|
}, [performanceData])
|
2022-08-10 21:09:58 -07:00
|
|
|
|
2022-08-10 23:23:18 -07:00
|
|
|
const accountInterestTotalValue = useMemo(() => {
|
2022-08-11 02:52:02 -07:00
|
|
|
if (hourlyInterestData.length) {
|
|
|
|
const total = hourlyInterestData.reduce((a, c) => {
|
2022-08-10 23:23:18 -07:00
|
|
|
const tokenInterestValue = c.interest.reduce(
|
|
|
|
(a, c) => a + (c.borrow_interest + c.deposit_interest) * c.price,
|
|
|
|
0
|
|
|
|
)
|
|
|
|
return a + tokenInterestValue
|
|
|
|
}, 0)
|
|
|
|
return total
|
|
|
|
}
|
|
|
|
return 0
|
2022-08-11 02:52:02 -07:00
|
|
|
}, [hourlyInterestData])
|
2022-08-10 23:23:18 -07:00
|
|
|
|
2022-08-03 02:49:31 -07:00
|
|
|
return !showDetailedValueChart ? (
|
2022-07-14 22:20:20 -07:00
|
|
|
<>
|
2022-08-03 05:13:40 -07:00
|
|
|
<div className="mb-8 flex flex-col md:mb-10 lg:flex-row lg:items-end lg:justify-between">
|
2022-08-03 02:49:31 -07:00
|
|
|
<div className="mb-4 flex items-center space-x-6 lg:mb-0">
|
|
|
|
<div>
|
|
|
|
<p className="mb-1">{t('account-value')}</p>
|
|
|
|
<div className="flex items-center text-5xl font-bold text-th-fgd-1">
|
|
|
|
$
|
|
|
|
{mangoAccount ? (
|
|
|
|
<FlipNumbers
|
|
|
|
height={48}
|
|
|
|
width={32}
|
|
|
|
play
|
|
|
|
delay={0.05}
|
|
|
|
duration={1}
|
|
|
|
numbers={formatDecimal(
|
2022-08-11 08:54:02 -07:00
|
|
|
toUiDecimalsForQuote(mangoAccount.getEquity().toNumber()),
|
2022-08-03 02:49:31 -07:00
|
|
|
2
|
|
|
|
)}
|
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
(0).toFixed(2)
|
|
|
|
)}
|
|
|
|
</div>
|
2022-08-11 02:52:02 -07:00
|
|
|
{performanceData.length ? (
|
2022-08-10 21:09:58 -07:00
|
|
|
<div className="mt-1 flex items-center space-x-2">
|
|
|
|
{accountValueChange > 0 ? (
|
|
|
|
<UpTriangle />
|
|
|
|
) : accountValueChange < 0 ? (
|
|
|
|
<DownTriangle />
|
|
|
|
) : (
|
2022-08-10 23:23:18 -07:00
|
|
|
''
|
2022-08-10 21:09:58 -07:00
|
|
|
)}
|
|
|
|
|
|
|
|
<p
|
|
|
|
className={`mb-0.5 ${
|
|
|
|
accountValueChange > 0
|
|
|
|
? 'text-th-green'
|
|
|
|
: accountValueChange < 0
|
|
|
|
? 'text-th-red'
|
|
|
|
: 'text-th-fgd-4'
|
|
|
|
}`}
|
|
|
|
>
|
2022-08-10 23:23:18 -07:00
|
|
|
{isNaN(accountValueChange)
|
|
|
|
? '0.00'
|
|
|
|
: accountValueChange.toFixed(2)}
|
|
|
|
%
|
2022-08-10 21:09:58 -07:00
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
) : null}
|
2022-08-03 02:49:31 -07:00
|
|
|
</div>
|
2022-08-10 23:23:18 -07:00
|
|
|
{!loadAccountData ? (
|
2022-08-11 02:52:02 -07:00
|
|
|
performanceData.length ? (
|
2022-08-10 21:09:58 -07:00
|
|
|
<div
|
|
|
|
className="relative flex items-end"
|
|
|
|
onMouseEnter={() =>
|
|
|
|
onHoverMenu(showExpandChart, 'onMouseEnter')
|
|
|
|
}
|
|
|
|
onMouseLeave={() =>
|
|
|
|
onHoverMenu(showExpandChart, 'onMouseLeave')
|
|
|
|
}
|
2022-08-03 02:49:31 -07:00
|
|
|
>
|
2022-08-10 21:09:58 -07:00
|
|
|
<SimpleAreaChart
|
|
|
|
color={
|
|
|
|
accountValueChange >= 0
|
|
|
|
? COLORS.GREEN[theme]
|
|
|
|
: COLORS.RED[theme]
|
|
|
|
}
|
2022-08-11 02:52:02 -07:00
|
|
|
data={performanceData}
|
2022-08-10 21:09:58 -07:00
|
|
|
height={88}
|
|
|
|
name="accountValue"
|
|
|
|
width={180}
|
|
|
|
xKey="time"
|
|
|
|
yKey="account_equity"
|
|
|
|
/>
|
|
|
|
<Transition
|
|
|
|
appear={true}
|
|
|
|
className="absolute right-2 bottom-2"
|
|
|
|
show={showExpandChart}
|
|
|
|
enter="transition-all ease-in duration-300"
|
|
|
|
enterFrom="opacity-0 transform scale-75"
|
|
|
|
enterTo="opacity-100 transform scale-100"
|
|
|
|
leave="transition ease-out duration-200"
|
|
|
|
leaveFrom="opacity-100"
|
|
|
|
leaveTo="opacity-0"
|
|
|
|
>
|
|
|
|
<IconButton
|
|
|
|
className="text-th-fgd-3"
|
|
|
|
hideBg
|
|
|
|
onClick={() => handleShowDetailedValueChart()}
|
|
|
|
>
|
|
|
|
<ArrowsExpandIcon className="h-5 w-5" />
|
|
|
|
</IconButton>
|
|
|
|
</Transition>
|
|
|
|
</div>
|
|
|
|
) : null
|
|
|
|
) : (
|
|
|
|
<SheenLoader>
|
|
|
|
<div className="h-[88px] w-[180px] rounded-md bg-th-bkg-2" />
|
|
|
|
</SheenLoader>
|
|
|
|
)}
|
2022-07-14 22:20:20 -07:00
|
|
|
</div>
|
2022-07-15 04:09:23 -07:00
|
|
|
<AccountActions />
|
2022-07-14 22:20:20 -07:00
|
|
|
</div>
|
2022-08-10 23:23:18 -07:00
|
|
|
<div className="mb-8 grid grid-cols-4 gap-x-6 border-b border-th-bkg-3 md:mb-10 md:border-b-0">
|
2022-08-03 05:13:40 -07:00
|
|
|
<div className="col-span-3 border-t border-th-bkg-3 py-4 md:col-span-1 md:border-l md:border-t-0 md:pl-6">
|
|
|
|
<p className="text-th-fgd-3">{t('health')}</p>
|
|
|
|
<p className="text-2xl font-bold text-th-fgd-1">
|
|
|
|
{mangoAccount
|
|
|
|
? mangoAccount.getHealthRatio(HealthType.init).toNumber()
|
|
|
|
: 100}
|
|
|
|
%
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div className="col-span-3 border-t border-th-bkg-3 py-4 md:col-span-1 md:border-l md:border-t-0 md:pl-6">
|
|
|
|
<p className="text-th-fgd-3">{t('free-collateral')}</p>
|
|
|
|
<p className="text-2xl font-bold text-th-fgd-1">
|
|
|
|
$
|
|
|
|
{mangoAccount
|
|
|
|
? formatDecimal(
|
2022-08-11 08:54:02 -07:00
|
|
|
toUiDecimalsForQuote(mangoAccount.getCollateralValue().toNumber()),
|
2022-08-03 05:13:40 -07:00
|
|
|
2
|
|
|
|
)
|
|
|
|
: (0).toFixed(2)}
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div className="col-span-3 border-t border-th-bkg-3 py-4 md:col-span-1 md:border-l md:border-t-0 md:pl-6">
|
|
|
|
<p className="text-th-fgd-3">{t('leverage')}</p>
|
|
|
|
<p className="text-2xl font-bold text-th-fgd-1">0.0x</p>
|
|
|
|
</div>
|
2022-08-10 23:23:18 -07:00
|
|
|
<div className="col-span-3 border-t border-th-bkg-3 py-4 md:col-span-1 md:border-l md:border-t-0 md:pl-6">
|
|
|
|
<p className="text-th-fgd-3">{t('total-interest-value')}</p>
|
|
|
|
<p className="text-2xl font-bold text-th-fgd-1">
|
|
|
|
${accountInterestTotalValue.toFixed(2)}
|
|
|
|
</p>
|
|
|
|
</div>
|
2022-08-03 05:13:40 -07:00
|
|
|
</div>
|
2022-08-10 04:17:10 -07:00
|
|
|
<AccountTabs />
|
2022-07-14 22:20:20 -07:00
|
|
|
{showDepositModal ? (
|
|
|
|
<DepositModal
|
|
|
|
isOpen={showDepositModal}
|
|
|
|
onClose={() => setShowDepositModal(false)}
|
|
|
|
/>
|
|
|
|
) : null}
|
|
|
|
{showWithdrawModal ? (
|
|
|
|
<WithdrawModal
|
|
|
|
isOpen={showWithdrawModal}
|
|
|
|
onClose={() => setShowWithdrawModal(false)}
|
|
|
|
/>
|
|
|
|
) : null}
|
|
|
|
</>
|
2022-08-03 02:49:31 -07:00
|
|
|
) : (
|
2022-08-10 21:09:58 -07:00
|
|
|
<DetailedAccountValueChart
|
2022-08-11 02:52:02 -07:00
|
|
|
data={performanceData}
|
2022-08-03 02:49:31 -07:00
|
|
|
hideChart={() => setShowDetailedValueChart(false)}
|
2022-08-10 21:09:58 -07:00
|
|
|
mangoAccount={mangoAccount!}
|
2022-08-03 02:49:31 -07:00
|
|
|
/>
|
2022-07-14 22:20:20 -07:00
|
|
|
)
|
2022-04-12 13:48:22 -07:00
|
|
|
}
|
|
|
|
|
2022-05-31 18:41:18 -07:00
|
|
|
export default Index
|