2022-09-01 10:33:29 -07:00
|
|
|
import {
|
|
|
|
HealthType,
|
|
|
|
toUiDecimalsForQuote,
|
|
|
|
} from '@blockworks-foundation/mango-v4'
|
|
|
|
import { useTranslation } from 'next-i18next'
|
|
|
|
import { useEffect, useMemo, useState } from 'react'
|
|
|
|
import AccountActions from './AccountActions'
|
2023-02-23 16:28:49 -08:00
|
|
|
import mangoStore from '@store/mangoStore'
|
2023-01-29 20:47:09 -08:00
|
|
|
import { formatCurrencyValue } from '../../utils/numbers'
|
2022-09-01 10:33:29 -07:00
|
|
|
import FlipNumbers from 'react-flip-numbers'
|
2023-05-01 19:01:14 -07:00
|
|
|
import SimpleAreaChart from '@components/shared/SimpleAreaChart'
|
2022-09-01 10:33:29 -07:00
|
|
|
import { COLORS } from '../../styles/colors'
|
|
|
|
import { useTheme } from 'next-themes'
|
|
|
|
import { IconButton } from '../shared/Button'
|
2023-02-12 18:03:48 -08:00
|
|
|
import {
|
|
|
|
ArrowsPointingOutIcon,
|
|
|
|
CalendarIcon,
|
|
|
|
ChartBarIcon,
|
|
|
|
} from '@heroicons/react/20/solid'
|
2022-09-01 10:33:29 -07:00
|
|
|
import { Transition } from '@headlessui/react'
|
|
|
|
import AccountTabs from './AccountTabs'
|
|
|
|
import SheenLoader from '../shared/SheenLoader'
|
|
|
|
import AccountChart from './AccountChart'
|
2022-11-18 09:09:39 -08:00
|
|
|
import useMangoAccount from '../../hooks/useMangoAccount'
|
2022-10-05 22:11:28 -07:00
|
|
|
import Change from '../shared/Change'
|
2022-09-14 08:30:02 -07:00
|
|
|
import Tooltip from '@components/shared/Tooltip'
|
2022-12-20 01:13:24 -08:00
|
|
|
import {
|
|
|
|
ANIMATION_SETTINGS_KEY,
|
2023-03-21 03:27:37 -07:00
|
|
|
MANGO_DATA_API_URL,
|
2022-12-20 01:13:24 -08:00
|
|
|
// IS_ONBOARDED_KEY
|
|
|
|
} from 'utils/constants'
|
2023-02-12 15:40:21 -08:00
|
|
|
import { useWallet } from '@solana/wallet-adapter-react'
|
2022-09-21 21:25:24 -07:00
|
|
|
import useLocalStorageState from 'hooks/useLocalStorageState'
|
2022-12-20 01:13:24 -08:00
|
|
|
// import AccountOnboardingTour from '@components/tours/AccountOnboardingTour'
|
2022-11-20 16:50:25 -08:00
|
|
|
import dayjs from 'dayjs'
|
2022-11-24 18:39:14 -08:00
|
|
|
import { INITIAL_ANIMATION_SETTINGS } from '@components/settings/AnimationSettings'
|
2022-12-21 03:07:17 -08:00
|
|
|
import { useViewport } from 'hooks/useViewport'
|
|
|
|
import { breakpoints } from 'utils/theme'
|
2023-01-14 13:50:45 -08:00
|
|
|
import useMangoGroup from 'hooks/useMangoGroup'
|
2023-01-15 21:13:34 -08:00
|
|
|
import PnlHistoryModal from '@components/modals/PnlHistoryModal'
|
2023-01-23 17:26:14 -08:00
|
|
|
import FormatNumericValue from '@components/shared/FormatNumericValue'
|
2023-02-05 04:17:51 -08:00
|
|
|
import HealthBar from './HealthBar'
|
2023-05-01 19:01:14 -07:00
|
|
|
import AssetsLiabilities from './AssetsLiabilities'
|
2023-06-28 21:23:49 -07:00
|
|
|
import {
|
2023-07-03 18:24:36 -07:00
|
|
|
AccountVolumeTotalData,
|
|
|
|
FormattedHourlyAccountVolumeData,
|
|
|
|
HourlyAccountVolumeData,
|
2023-06-28 21:23:49 -07:00
|
|
|
PerformanceDataItem,
|
|
|
|
TotalAccountFundingItem,
|
|
|
|
} from 'types'
|
2023-03-21 03:27:37 -07:00
|
|
|
import { useQuery } from '@tanstack/react-query'
|
2023-07-03 20:24:13 -07:00
|
|
|
import FundingChart from './FundingChart'
|
|
|
|
import VolumeChart from './VolumeChart'
|
2023-05-01 19:01:14 -07:00
|
|
|
|
|
|
|
const TABS = ['account-value', 'account:assets-liabilities']
|
2023-03-21 03:27:37 -07:00
|
|
|
|
|
|
|
const fetchFundingTotals = async (mangoAccountPk: string) => {
|
|
|
|
try {
|
|
|
|
const data = await fetch(
|
|
|
|
`${MANGO_DATA_API_URL}/stats/funding-account-total?mango-account=${mangoAccountPk}`
|
|
|
|
)
|
|
|
|
const res = await data.json()
|
|
|
|
if (res) {
|
|
|
|
const entries: [string, Omit<TotalAccountFundingItem, 'market'>][] =
|
|
|
|
Object.entries(res)
|
|
|
|
|
|
|
|
const stats: TotalAccountFundingItem[] = entries
|
|
|
|
.map(([key, value]) => {
|
2023-06-20 07:41:01 -07:00
|
|
|
return {
|
|
|
|
long_funding: value.long_funding * -1,
|
|
|
|
short_funding: value.short_funding * -1,
|
|
|
|
market: key,
|
|
|
|
}
|
2023-03-21 03:27:37 -07:00
|
|
|
})
|
|
|
|
.filter((x) => x)
|
|
|
|
|
|
|
|
return stats
|
|
|
|
}
|
|
|
|
} catch (e) {
|
|
|
|
console.log('Failed to fetch account funding', e)
|
|
|
|
}
|
|
|
|
}
|
2022-09-01 10:33:29 -07:00
|
|
|
|
2023-07-03 18:24:36 -07:00
|
|
|
const fetchVolumeTotals = async (mangoAccountPk: string) => {
|
2023-06-28 21:23:49 -07:00
|
|
|
try {
|
2023-07-03 18:24:36 -07:00
|
|
|
const [perpTotal, spotTotal] = await Promise.all([
|
|
|
|
fetch(
|
|
|
|
`${MANGO_DATA_API_URL}/stats/perp-volume-total?mango-account=${mangoAccountPk}`
|
|
|
|
),
|
|
|
|
fetch(
|
|
|
|
`${MANGO_DATA_API_URL}/stats/spot-volume-total?mango-account=${mangoAccountPk}`
|
|
|
|
),
|
|
|
|
])
|
|
|
|
|
|
|
|
const [perpTotalData, spotTotalData] = await Promise.all([
|
|
|
|
perpTotal.json(),
|
|
|
|
spotTotal.json(),
|
|
|
|
])
|
|
|
|
|
|
|
|
const combinedData = [perpTotalData, spotTotalData]
|
|
|
|
if (combinedData.length) {
|
|
|
|
return combinedData.reduce((a, c) => {
|
|
|
|
const entries: AccountVolumeTotalData[] = Object.entries(c)
|
|
|
|
const marketVol = entries.reduce((a, c) => {
|
|
|
|
return a + c[1].volume_usd
|
|
|
|
}, 0)
|
|
|
|
return a + marketVol
|
|
|
|
}, 0)
|
|
|
|
}
|
|
|
|
return 0
|
2023-06-28 21:23:49 -07:00
|
|
|
} catch (e) {
|
2023-07-03 18:24:36 -07:00
|
|
|
console.log('Failed to fetch spot volume', e)
|
|
|
|
return 0
|
2023-06-28 21:23:49 -07:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-07-03 18:24:36 -07:00
|
|
|
const formatHourlyVolumeData = (data: HourlyAccountVolumeData[]) => {
|
|
|
|
if (!data || !data.length) return []
|
|
|
|
const formattedData: FormattedHourlyAccountVolumeData[] = []
|
|
|
|
|
|
|
|
// Loop through each object in the original data array
|
|
|
|
for (const obj of data) {
|
|
|
|
// Loop through the keys (markets) in each object
|
|
|
|
for (const market in obj) {
|
|
|
|
// Loop through the timestamps in each market
|
|
|
|
for (const timestamp in obj[market]) {
|
|
|
|
// Find the corresponding entry in the formatted data array based on the timestamp
|
|
|
|
let entry = formattedData.find((item) => item.time === timestamp)
|
|
|
|
|
|
|
|
// If the entry doesn't exist, create a new entry
|
|
|
|
if (!entry) {
|
|
|
|
entry = { time: timestamp, total_volume_usd: 0, markets: {} }
|
|
|
|
formattedData.push(entry)
|
|
|
|
}
|
|
|
|
|
|
|
|
// Increment the total_volume_usd by the volume_usd value
|
|
|
|
entry.total_volume_usd += obj[market][timestamp].volume_usd
|
|
|
|
|
|
|
|
// Add or update the market entry in the markets object
|
|
|
|
entry.markets[market] = obj[market][timestamp].volume_usd
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return formattedData
|
|
|
|
}
|
|
|
|
|
|
|
|
const fetchHourlyVolume = async (mangoAccountPk: string) => {
|
2023-06-28 21:23:49 -07:00
|
|
|
try {
|
2023-07-03 18:24:36 -07:00
|
|
|
const [perpHourly, spotHourly] = await Promise.all([
|
|
|
|
fetch(
|
|
|
|
`${MANGO_DATA_API_URL}/stats/perp-volume-hourly?mango-account=${mangoAccountPk}`
|
|
|
|
),
|
|
|
|
fetch(
|
|
|
|
`${MANGO_DATA_API_URL}/stats/spot-volume-hourly?mango-account=${mangoAccountPk}`
|
|
|
|
),
|
|
|
|
])
|
|
|
|
|
|
|
|
const [perpHourlyData, spotHourlyData] = await Promise.all([
|
|
|
|
perpHourly.json(),
|
|
|
|
spotHourly.json(),
|
|
|
|
])
|
|
|
|
const hourlyVolume = [perpHourlyData, spotHourlyData]
|
|
|
|
return formatHourlyVolumeData(hourlyVolume)
|
2023-06-28 21:23:49 -07:00
|
|
|
} catch (e) {
|
|
|
|
console.log('Failed to fetch spot volume', e)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-05-02 23:12:08 -07:00
|
|
|
export type ChartToShow =
|
|
|
|
| ''
|
|
|
|
| 'account-value'
|
|
|
|
| 'cumulative-interest-value'
|
|
|
|
| 'pnl'
|
|
|
|
| 'hourly-funding'
|
2023-07-03 20:24:13 -07:00
|
|
|
| 'hourly-volume'
|
2023-05-02 23:12:08 -07:00
|
|
|
|
2022-09-01 10:33:29 -07:00
|
|
|
const AccountPage = () => {
|
2023-01-16 20:59:51 -08:00
|
|
|
const { t } = useTranslation(['common', 'account'])
|
2023-02-12 15:40:21 -08:00
|
|
|
const { connected } = useWallet()
|
2023-01-14 13:50:45 -08:00
|
|
|
const { group } = useMangoGroup()
|
2023-02-11 04:40:23 -08:00
|
|
|
const { mangoAccount, mangoAccountAddress } = useMangoAccount()
|
2023-01-03 14:20:00 -08:00
|
|
|
const actions = mangoStore.getState().actions
|
2023-02-11 04:40:23 -08:00
|
|
|
const performanceLoading = mangoStore(
|
|
|
|
(s) => s.mangoAccount.performance.loading
|
2022-09-01 10:33:29 -07:00
|
|
|
)
|
2023-01-15 21:13:34 -08:00
|
|
|
const performanceData = mangoStore((s) => s.mangoAccount.performance.data)
|
2023-02-23 18:22:24 -08:00
|
|
|
|
2022-09-01 10:33:29 -07:00
|
|
|
const totalInterestData = mangoStore(
|
2023-01-15 21:13:34 -08:00
|
|
|
(s) => s.mangoAccount.interestTotals.data
|
2022-09-01 10:33:29 -07:00
|
|
|
)
|
2023-05-02 23:12:08 -07:00
|
|
|
const [chartToShow, setChartToShow] = useState<ChartToShow>('')
|
2022-09-01 10:33:29 -07:00
|
|
|
const [showExpandChart, setShowExpandChart] = useState<boolean>(false)
|
2023-01-15 21:13:34 -08:00
|
|
|
const [showPnlHistory, setShowPnlHistory] = useState<boolean>(false)
|
2022-09-01 10:33:29 -07:00
|
|
|
const { theme } = useTheme()
|
2022-12-21 03:07:17 -08:00
|
|
|
const { width } = useViewport()
|
2023-01-06 02:43:07 -08:00
|
|
|
const isMobile = width ? width < breakpoints.md : false
|
2022-12-20 01:13:24 -08:00
|
|
|
// const tourSettings = mangoStore((s) => s.settings.tours)
|
|
|
|
// const [isOnBoarded] = useLocalStorageState(IS_ONBOARDED_KEY)
|
2022-11-23 18:30:20 -08:00
|
|
|
const [animationSettings] = useLocalStorageState(
|
|
|
|
ANIMATION_SETTINGS_KEY,
|
|
|
|
INITIAL_ANIMATION_SETTINGS
|
|
|
|
)
|
2023-02-05 18:37:31 -08:00
|
|
|
const [activeTab, setActiveTab] = useLocalStorageState(
|
|
|
|
'accountHeroKey-0.1',
|
|
|
|
'account-value'
|
|
|
|
)
|
2022-09-01 10:33:29 -07:00
|
|
|
|
|
|
|
useEffect(() => {
|
2023-02-12 15:40:21 -08:00
|
|
|
if (mangoAccountAddress || (!mangoAccountAddress && connected)) {
|
2023-02-11 04:40:23 -08:00
|
|
|
actions.fetchAccountPerformance(mangoAccountAddress, 31)
|
2023-01-05 20:01:03 -08:00
|
|
|
actions.fetchAccountInterestTotals(mangoAccountAddress)
|
2022-09-01 10:33:29 -07:00
|
|
|
}
|
2023-02-25 16:22:39 -08:00
|
|
|
}, [actions, mangoAccountAddress, connected])
|
2022-09-01 10:33:29 -07:00
|
|
|
|
2023-03-21 03:27:37 -07:00
|
|
|
const {
|
|
|
|
data: fundingData,
|
|
|
|
isLoading: loadingFunding,
|
|
|
|
isFetching: fetchingFunding,
|
2023-03-26 20:58:55 -07:00
|
|
|
} = useQuery(
|
|
|
|
['funding', mangoAccountAddress],
|
|
|
|
() => fetchFundingTotals(mangoAccountAddress),
|
|
|
|
{
|
|
|
|
cacheTime: 1000 * 60 * 10,
|
|
|
|
staleTime: 1000 * 60,
|
|
|
|
retry: 3,
|
|
|
|
refetchOnWindowFocus: false,
|
|
|
|
enabled: !!mangoAccountAddress,
|
|
|
|
}
|
|
|
|
)
|
2023-03-21 03:27:37 -07:00
|
|
|
|
2023-06-28 21:23:49 -07:00
|
|
|
const {
|
2023-07-03 18:24:36 -07:00
|
|
|
data: volumeTotalData,
|
|
|
|
isLoading: loadingVolumeTotalData,
|
|
|
|
isFetching: fetchingVolumeTotalData,
|
2023-06-28 21:23:49 -07:00
|
|
|
} = useQuery(
|
2023-07-03 18:24:36 -07:00
|
|
|
['total-volume', mangoAccountAddress],
|
|
|
|
() => fetchVolumeTotals(mangoAccountAddress),
|
2023-06-28 21:23:49 -07:00
|
|
|
{
|
|
|
|
cacheTime: 1000 * 60 * 10,
|
|
|
|
staleTime: 1000 * 60,
|
|
|
|
retry: 3,
|
|
|
|
refetchOnWindowFocus: false,
|
|
|
|
enabled: !!mangoAccountAddress,
|
|
|
|
}
|
|
|
|
)
|
|
|
|
|
|
|
|
const {
|
2023-07-03 18:24:36 -07:00
|
|
|
data: hourlyVolumeData,
|
|
|
|
isLoading: loadingHourlyVolumeData,
|
|
|
|
isFetching: fetchingHourlyVolumeData,
|
2023-06-28 21:23:49 -07:00
|
|
|
} = useQuery(
|
2023-07-03 18:24:36 -07:00
|
|
|
['hourly-volume', mangoAccountAddress],
|
|
|
|
() => fetchHourlyVolume(mangoAccountAddress),
|
2023-06-28 21:23:49 -07:00
|
|
|
{
|
|
|
|
cacheTime: 1000 * 60 * 10,
|
|
|
|
staleTime: 1000 * 60,
|
|
|
|
retry: 3,
|
|
|
|
refetchOnWindowFocus: false,
|
|
|
|
enabled: !!mangoAccountAddress,
|
|
|
|
}
|
|
|
|
)
|
|
|
|
|
2023-07-03 18:24:36 -07:00
|
|
|
const dailyVolume = useMemo(() => {
|
|
|
|
if (!hourlyVolumeData || !hourlyVolumeData.length) return 0
|
|
|
|
// Calculate the current time in milliseconds
|
|
|
|
const currentTime = new Date().getTime()
|
|
|
|
|
|
|
|
// Calculate the start time for the last 24 hours in milliseconds
|
|
|
|
const last24HoursStartTime = currentTime - 24 * 60 * 60 * 1000
|
|
|
|
|
|
|
|
// Filter the formatted data based on the timestamp
|
|
|
|
const last24HoursData = hourlyVolumeData.filter((entry) => {
|
|
|
|
const timestampMs = new Date(entry.time).getTime()
|
|
|
|
return timestampMs >= last24HoursStartTime && timestampMs <= currentTime
|
|
|
|
})
|
|
|
|
|
|
|
|
const volume = last24HoursData.reduce((a, c) => a + c.total_volume_usd, 0)
|
|
|
|
return volume
|
|
|
|
}, [hourlyVolumeData])
|
2023-06-28 21:23:49 -07:00
|
|
|
|
2023-02-11 04:40:23 -08:00
|
|
|
const oneDayPerformanceData: PerformanceDataItem[] | [] = useMemo(() => {
|
|
|
|
if (!performanceData || !performanceData.length) return []
|
|
|
|
const nowDate = new Date()
|
|
|
|
return performanceData.filter((d) => {
|
|
|
|
const dataTime = new Date(d.time).getTime()
|
|
|
|
return dataTime >= nowDate.getTime() - 86400000
|
|
|
|
})
|
|
|
|
}, [performanceData])
|
2022-09-01 10:33:29 -07:00
|
|
|
|
|
|
|
const onHoverMenu = (open: boolean, action: string) => {
|
|
|
|
if (
|
|
|
|
(!open && action === 'onMouseEnter') ||
|
|
|
|
(open && action === 'onMouseLeave')
|
|
|
|
) {
|
|
|
|
setShowExpandChart(!open)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const handleShowAccountValueChart = () => {
|
|
|
|
setChartToShow('account-value')
|
|
|
|
setShowExpandChart(false)
|
|
|
|
}
|
|
|
|
|
|
|
|
const handleHideChart = () => {
|
|
|
|
setChartToShow('')
|
|
|
|
}
|
|
|
|
|
2023-01-16 02:07:46 -08:00
|
|
|
const handleCloseDailyPnlModal = () => {
|
|
|
|
const set = mangoStore.getState().set
|
|
|
|
set((s) => {
|
|
|
|
s.mangoAccount.performance.data = oneDayPerformanceData
|
|
|
|
})
|
|
|
|
setShowPnlHistory(false)
|
|
|
|
}
|
|
|
|
|
2023-06-05 22:29:04 -07:00
|
|
|
const [accountPnl, accountValue] = useMemo(() => {
|
|
|
|
if (!group || !mangoAccount) return [0, 0]
|
|
|
|
return [
|
|
|
|
toUiDecimalsForQuote(mangoAccount.getPnl(group).toNumber()),
|
|
|
|
toUiDecimalsForQuote(mangoAccount.getEquity(group).toNumber()),
|
|
|
|
]
|
2022-11-20 16:50:25 -08:00
|
|
|
}, [group, mangoAccount])
|
|
|
|
|
2022-12-30 12:39:05 -08:00
|
|
|
const leverage = useMemo(() => {
|
|
|
|
if (!group || !mangoAccount) return 0
|
|
|
|
const assetsValue = toUiDecimalsForQuote(
|
|
|
|
mangoAccount.getAssetsValue(group).toNumber()
|
|
|
|
)
|
|
|
|
|
|
|
|
if (isNaN(assetsValue / accountValue)) {
|
|
|
|
return 0
|
2023-01-11 15:03:11 -08:00
|
|
|
} else {
|
|
|
|
return Math.abs(1 - assetsValue / accountValue)
|
|
|
|
}
|
2022-12-30 12:39:05 -08:00
|
|
|
}, [mangoAccount, group, accountValue])
|
|
|
|
|
2023-06-05 22:29:04 -07:00
|
|
|
const [accountValueChange, oneDayPnlChange] = useMemo(() => {
|
2023-01-16 02:07:46 -08:00
|
|
|
if (
|
|
|
|
accountValue &&
|
|
|
|
oneDayPerformanceData.length &&
|
|
|
|
performanceData.length
|
|
|
|
) {
|
2023-01-18 20:16:43 -08:00
|
|
|
const accountValueChange =
|
|
|
|
accountValue - oneDayPerformanceData[0].account_equity
|
2022-11-19 03:28:06 -08:00
|
|
|
const startDayPnl = oneDayPerformanceData[0].pnl
|
2023-01-15 21:13:34 -08:00
|
|
|
const endDayPnl =
|
|
|
|
oneDayPerformanceData[oneDayPerformanceData.length - 1].pnl
|
2023-01-18 20:16:43 -08:00
|
|
|
const oneDayPnlChange = endDayPnl - startDayPnl
|
|
|
|
|
2023-06-05 22:29:04 -07:00
|
|
|
return [accountValueChange, oneDayPnlChange]
|
2022-10-04 22:12:52 -07:00
|
|
|
}
|
2023-06-05 22:29:04 -07:00
|
|
|
return [0, 0]
|
2023-01-18 20:16:43 -08:00
|
|
|
}, [accountValue, oneDayPerformanceData, performanceData])
|
2022-10-04 22:12:52 -07:00
|
|
|
|
2022-09-01 10:33:29 -07:00
|
|
|
const interestTotalValue = useMemo(() => {
|
|
|
|
if (totalInterestData.length) {
|
|
|
|
return totalInterestData.reduce(
|
2023-06-22 02:48:09 -07:00
|
|
|
(a, c) => a + (c.borrow_interest_usd * -1 + c.deposit_interest_usd),
|
2022-09-01 10:33:29 -07:00
|
|
|
0
|
|
|
|
)
|
|
|
|
}
|
2022-10-06 16:06:49 -07:00
|
|
|
return 0.0
|
2022-09-01 10:33:29 -07:00
|
|
|
}, [totalInterestData])
|
|
|
|
|
2023-03-21 03:27:37 -07:00
|
|
|
const fundingTotalValue = useMemo(() => {
|
|
|
|
if (fundingData?.length && mangoAccountAddress) {
|
|
|
|
return fundingData.reduce(
|
|
|
|
(a, c) => a + c.long_funding + c.short_funding,
|
|
|
|
0
|
|
|
|
)
|
|
|
|
}
|
|
|
|
return 0.0
|
|
|
|
}, [fundingData, mangoAccountAddress])
|
|
|
|
|
2022-10-05 03:16:32 -07:00
|
|
|
const oneDayInterestChange = useMemo(() => {
|
2023-01-18 20:16:43 -08:00
|
|
|
if (oneDayPerformanceData.length) {
|
2023-02-11 04:40:23 -08:00
|
|
|
const first = oneDayPerformanceData[0]
|
|
|
|
const latest = oneDayPerformanceData[oneDayPerformanceData.length - 1]
|
2022-11-19 03:28:06 -08:00
|
|
|
|
2023-02-11 04:40:23 -08:00
|
|
|
const startDayInterest =
|
|
|
|
first.borrow_interest_cumulative_usd +
|
|
|
|
first.deposit_interest_cumulative_usd
|
2022-11-19 03:28:06 -08:00
|
|
|
|
|
|
|
const endDayInterest =
|
2023-02-11 04:40:23 -08:00
|
|
|
latest.borrow_interest_cumulative_usd +
|
|
|
|
latest.deposit_interest_cumulative_usd
|
2022-11-19 03:28:06 -08:00
|
|
|
|
|
|
|
return endDayInterest - startDayInterest
|
2022-10-05 03:16:32 -07:00
|
|
|
}
|
|
|
|
return 0.0
|
2023-01-18 20:16:43 -08:00
|
|
|
}, [oneDayPerformanceData])
|
2022-10-05 03:16:32 -07:00
|
|
|
|
2022-09-01 10:33:29 -07:00
|
|
|
const maintHealth = useMemo(() => {
|
2022-10-07 05:22:18 -07:00
|
|
|
return group && mangoAccount
|
|
|
|
? mangoAccount.getHealthRatioUi(group, HealthType.maint)
|
|
|
|
: 0
|
2022-10-07 13:02:11 -07:00
|
|
|
}, [mangoAccount, group])
|
2022-09-01 10:33:29 -07:00
|
|
|
|
2022-10-05 03:16:32 -07:00
|
|
|
const handleChartToShow = (
|
2023-07-03 20:24:13 -07:00
|
|
|
chartName:
|
|
|
|
| 'pnl'
|
|
|
|
| 'cumulative-interest-value'
|
|
|
|
| 'hourly-funding'
|
|
|
|
| 'hourly-volume'
|
2022-10-05 03:16:32 -07:00
|
|
|
) => {
|
2023-07-06 04:00:47 -07:00
|
|
|
if (chartName === 'cumulative-interest-value' || interestTotalValue < -1) {
|
2022-10-06 05:08:29 -07:00
|
|
|
setChartToShow(chartName)
|
|
|
|
}
|
2023-07-06 04:00:47 -07:00
|
|
|
if (chartName === 'pnl') {
|
2022-10-06 05:08:29 -07:00
|
|
|
setChartToShow(chartName)
|
|
|
|
}
|
2023-03-21 03:27:37 -07:00
|
|
|
if (chartName === 'hourly-funding') {
|
|
|
|
setChartToShow(chartName)
|
|
|
|
}
|
2023-07-03 20:24:13 -07:00
|
|
|
if (chartName === 'hourly-volume') {
|
|
|
|
setChartToShow(chartName)
|
|
|
|
}
|
2022-10-03 15:45:46 -07:00
|
|
|
}
|
|
|
|
|
2022-11-20 16:50:25 -08:00
|
|
|
const latestAccountData = useMemo(() => {
|
|
|
|
if (!accountValue || !performanceData.length) return []
|
2023-02-11 04:40:23 -08:00
|
|
|
const latestDataItem = performanceData[performanceData.length - 1]
|
2022-11-20 16:50:25 -08:00
|
|
|
return [
|
|
|
|
{
|
|
|
|
account_equity: accountValue,
|
|
|
|
time: dayjs(Date.now()).toISOString(),
|
|
|
|
borrow_interest_cumulative_usd:
|
2023-02-11 04:40:23 -08:00
|
|
|
latestDataItem.borrow_interest_cumulative_usd,
|
2022-11-20 16:50:25 -08:00
|
|
|
deposit_interest_cumulative_usd:
|
2023-02-11 04:40:23 -08:00
|
|
|
latestDataItem.deposit_interest_cumulative_usd,
|
2023-06-05 22:29:04 -07:00
|
|
|
pnl: accountPnl,
|
2023-02-11 04:40:23 -08:00
|
|
|
spot_value: latestDataItem.spot_value,
|
|
|
|
transfer_balance: latestDataItem.transfer_balance,
|
2022-11-20 16:50:25 -08:00
|
|
|
},
|
|
|
|
]
|
2023-06-05 22:29:04 -07:00
|
|
|
}, [accountPnl, accountValue, performanceData])
|
2022-11-20 16:50:25 -08:00
|
|
|
|
2023-07-03 18:24:36 -07:00
|
|
|
const loadingTotalVolume = fetchingVolumeTotalData || loadingVolumeTotalData
|
|
|
|
const loadingHourlyVolume =
|
|
|
|
fetchingHourlyVolumeData || loadingHourlyVolumeData
|
2023-06-28 21:23:49 -07:00
|
|
|
|
2022-09-01 10:33:29 -07:00
|
|
|
return !chartToShow ? (
|
|
|
|
<>
|
2023-02-12 15:30:33 -08:00
|
|
|
<div className="flex flex-col border-b-0 border-th-bkg-3 px-6 py-4 lg:flex-row lg:items-center lg:justify-between lg:border-b">
|
|
|
|
<div>
|
|
|
|
<div className="hide-scroll flex justify-center space-x-2 md:justify-start">
|
|
|
|
{TABS.map((tab) => (
|
|
|
|
<button
|
2023-04-19 18:12:45 -07:00
|
|
|
className={`rounded-md py-1.5 px-2.5 text-sm font-medium focus-visible:bg-th-bkg-3 focus-visible:text-th-fgd-1 ${
|
2023-02-12 15:30:33 -08:00
|
|
|
activeTab === tab
|
2023-04-19 18:01:31 -07:00
|
|
|
? 'bg-th-bkg-3 text-th-active md:hover:text-th-active'
|
|
|
|
: 'text-th-fgd-3 md:hover:text-th-fgd-2'
|
2023-02-12 15:30:33 -08:00
|
|
|
}`}
|
|
|
|
onClick={() => setActiveTab(tab)}
|
|
|
|
key={tab}
|
2022-09-01 10:33:29 -07:00
|
|
|
>
|
2023-02-12 15:30:33 -08:00
|
|
|
{t(tab)}
|
2023-02-04 04:31:36 -08:00
|
|
|
</button>
|
2023-02-12 15:30:33 -08:00
|
|
|
))}
|
2023-02-04 04:31:36 -08:00
|
|
|
</div>
|
2023-02-12 15:30:33 -08:00
|
|
|
<div className="md:h-24">
|
|
|
|
{activeTab === 'account-value' ? (
|
|
|
|
<div className="flex flex-col md:flex-row md:items-end md:space-x-6">
|
|
|
|
<div className="mx-auto mt-4 md:mx-0">
|
|
|
|
<div className="mb-2 flex justify-start font-display text-5xl text-th-fgd-1">
|
|
|
|
{animationSettings['number-scroll'] ? (
|
|
|
|
group && mangoAccount ? (
|
|
|
|
<FlipNumbers
|
|
|
|
height={48}
|
|
|
|
width={35}
|
|
|
|
play
|
|
|
|
delay={0.05}
|
|
|
|
duration={1}
|
|
|
|
numbers={formatCurrencyValue(accountValue, 2)}
|
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<FlipNumbers
|
|
|
|
height={48}
|
|
|
|
width={36}
|
|
|
|
play
|
|
|
|
delay={0.05}
|
|
|
|
duration={1}
|
|
|
|
numbers={'$0.00'}
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
) : (
|
|
|
|
<FormatNumericValue
|
|
|
|
value={accountValue}
|
|
|
|
isUsd
|
|
|
|
decimals={2}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center space-x-1.5 md:justify-start">
|
|
|
|
<Change change={accountValueChange} prefix="$" />
|
|
|
|
<p className="text-xs text-th-fgd-4">
|
|
|
|
{t('rolling-change')}
|
|
|
|
</p>
|
|
|
|
</div>
|
2023-02-05 18:37:31 -08:00
|
|
|
</div>
|
2023-02-12 15:30:33 -08:00
|
|
|
{!performanceLoading ? (
|
|
|
|
oneDayPerformanceData.length ? (
|
|
|
|
<div
|
|
|
|
className="relative mt-4 flex h-40 items-end md:mt-0 md:h-20 md:w-52 lg:w-60"
|
|
|
|
onMouseEnter={() =>
|
|
|
|
onHoverMenu(showExpandChart, 'onMouseEnter')
|
|
|
|
}
|
|
|
|
onMouseLeave={() =>
|
|
|
|
onHoverMenu(showExpandChart, 'onMouseLeave')
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<SimpleAreaChart
|
|
|
|
color={
|
|
|
|
accountValueChange >= 0
|
|
|
|
? COLORS.UP[theme]
|
|
|
|
: COLORS.DOWN[theme]
|
|
|
|
}
|
|
|
|
data={oneDayPerformanceData.concat(latestAccountData)}
|
|
|
|
name="accountValue"
|
|
|
|
xKey="time"
|
|
|
|
yKey="account_equity"
|
|
|
|
/>
|
|
|
|
<Transition
|
|
|
|
appear={true}
|
|
|
|
className="absolute right-2 bottom-2"
|
|
|
|
show={showExpandChart || isMobile}
|
|
|
|
enter="transition ease-in duration-300"
|
|
|
|
enterFrom="opacity-0 scale-75"
|
|
|
|
enterTo="opacity-100 scale-100"
|
|
|
|
leave="transition ease-out duration-200"
|
|
|
|
leaveFrom="opacity-100"
|
|
|
|
leaveTo="opacity-0"
|
|
|
|
>
|
|
|
|
<IconButton
|
|
|
|
className="text-th-fgd-3"
|
|
|
|
hideBg
|
|
|
|
onClick={() => handleShowAccountValueChart()}
|
|
|
|
>
|
|
|
|
<ArrowsPointingOutIcon className="h-5 w-5" />
|
|
|
|
</IconButton>
|
|
|
|
</Transition>
|
|
|
|
</div>
|
|
|
|
) : null
|
|
|
|
) : mangoAccountAddress ? (
|
|
|
|
<SheenLoader className="mt-4 flex flex-1 md:mt-0">
|
|
|
|
<div className="h-40 w-full rounded-md bg-th-bkg-2 md:h-20 md:w-52 lg:w-60" />
|
|
|
|
</SheenLoader>
|
|
|
|
) : null}
|
2022-09-01 10:33:29 -07:00
|
|
|
</div>
|
2023-02-12 15:30:33 -08:00
|
|
|
) : null}
|
|
|
|
{activeTab === 'account:assets-liabilities' ? (
|
|
|
|
<AssetsLiabilities isMobile={isMobile} />
|
2023-02-05 18:37:31 -08:00
|
|
|
) : null}
|
|
|
|
</div>
|
2022-09-01 10:33:29 -07:00
|
|
|
</div>
|
2023-02-12 15:30:33 -08:00
|
|
|
<div className="mt-6 mb-1 lg:mt-0">
|
2022-09-18 20:53:52 -07:00
|
|
|
<AccountActions />
|
|
|
|
</div>
|
2022-09-01 10:33:29 -07:00
|
|
|
</div>
|
2023-03-21 03:27:37 -07:00
|
|
|
<div className="grid grid-cols-6 border-b border-th-bkg-3">
|
|
|
|
<div className="col-span-6 border-t border-th-bkg-3 py-3 px-6 md:col-span-3 lg:col-span-2 lg:border-t-0 xl:col-span-1">
|
2022-09-21 21:25:24 -07:00
|
|
|
<div id="account-step-four">
|
2022-09-14 08:30:02 -07:00
|
|
|
<Tooltip
|
2022-09-19 20:12:34 -07:00
|
|
|
maxWidth="20rem"
|
2023-03-21 03:27:37 -07:00
|
|
|
placement="top-start"
|
2023-03-10 10:01:47 -08:00
|
|
|
delay={100}
|
2022-09-14 08:30:02 -07:00
|
|
|
content={
|
|
|
|
<div className="flex-col space-y-2 text-sm">
|
2022-09-19 20:12:34 -07:00
|
|
|
<p className="text-xs">
|
|
|
|
Health describes how close your account is to liquidation.
|
|
|
|
The lower your account health is the more likely you are to
|
|
|
|
get liquidated when prices fluctuate.
|
|
|
|
</p>
|
2023-06-22 17:42:51 -07:00
|
|
|
{maintHealth < 100 && mangoAccountAddress ? (
|
2023-05-11 19:59:37 -07:00
|
|
|
<>
|
|
|
|
<p className="text-xs font-bold text-th-fgd-1">
|
|
|
|
Your account health is {maintHealth}%
|
|
|
|
</p>
|
|
|
|
<p className="text-xs">
|
|
|
|
<span className="font-bold text-th-fgd-1">
|
|
|
|
Scenario:
|
|
|
|
</span>{' '}
|
|
|
|
If the prices of all your liabilities increase by{' '}
|
|
|
|
{maintHealth}%, even for just a moment, some of your
|
|
|
|
liabilities will be liquidated.
|
|
|
|
</p>
|
|
|
|
<p className="text-xs">
|
|
|
|
<span className="font-bold text-th-fgd-1">
|
|
|
|
Scenario:
|
|
|
|
</span>{' '}
|
|
|
|
If the value of your total collateral decreases by{' '}
|
|
|
|
{(
|
|
|
|
(1 - 1 / ((maintHealth || 0) / 100 + 1)) *
|
|
|
|
100
|
|
|
|
).toFixed(2)}
|
|
|
|
% , some of your liabilities will be liquidated.
|
|
|
|
</p>
|
|
|
|
<p className="text-xs">
|
|
|
|
These are examples. A combination of events can also
|
|
|
|
lead to liquidation.
|
|
|
|
</p>
|
|
|
|
</>
|
|
|
|
) : null}
|
2022-09-14 08:30:02 -07:00
|
|
|
</div>
|
|
|
|
}
|
|
|
|
>
|
2022-12-12 17:50:10 -08:00
|
|
|
<p className="tooltip-underline text-sm font-normal text-th-fgd-3 xl:text-base">
|
2022-10-04 21:47:50 -07:00
|
|
|
{t('health')}
|
|
|
|
</p>
|
2022-09-14 08:30:02 -07:00
|
|
|
</Tooltip>
|
2023-06-28 21:23:49 -07:00
|
|
|
<div className="mt-1 mb-0.5 flex items-center space-x-3">
|
|
|
|
<p className="text-2xl font-bold text-th-fgd-1 lg:text-xl xl:text-2xl">
|
|
|
|
{maintHealth}%
|
|
|
|
</p>
|
|
|
|
<HealthBar health={maintHealth} />
|
|
|
|
</div>
|
|
|
|
<span className="flex text-xs font-normal text-th-fgd-4">
|
|
|
|
<Tooltip
|
|
|
|
content={t('account:tooltip-leverage')}
|
|
|
|
maxWidth="20rem"
|
|
|
|
placement="top-start"
|
|
|
|
delay={100}
|
|
|
|
>
|
|
|
|
<span className="tooltip-underline">{t('leverage')}</span>:
|
|
|
|
</Tooltip>
|
|
|
|
<span className="ml-1 font-mono text-th-fgd-2">
|
|
|
|
<FormatNumericValue value={leverage} decimals={2} roundUp />x
|
|
|
|
</span>
|
|
|
|
</span>
|
2022-09-13 04:27:04 -07:00
|
|
|
</div>
|
2022-09-01 10:33:29 -07:00
|
|
|
</div>
|
2023-03-21 03:27:37 -07:00
|
|
|
<div className="col-span-6 flex border-t border-th-bkg-3 py-3 pl-6 md:col-span-3 md:border-l lg:col-span-2 lg:border-t-0 xl:col-span-1">
|
2022-09-21 21:25:24 -07:00
|
|
|
<div id="account-step-five">
|
2022-09-19 20:12:34 -07:00
|
|
|
<Tooltip
|
2023-01-16 20:59:51 -08:00
|
|
|
content={t('account:tooltip-free-collateral')}
|
2022-09-19 20:12:34 -07:00
|
|
|
maxWidth="20rem"
|
2023-03-21 03:27:37 -07:00
|
|
|
placement="top-start"
|
2023-03-10 10:01:47 -08:00
|
|
|
delay={100}
|
2022-09-19 20:12:34 -07:00
|
|
|
>
|
2022-10-04 21:47:50 -07:00
|
|
|
<p className="tooltip-underline text-sm text-th-fgd-3 xl:text-base">
|
2022-09-19 20:12:34 -07:00
|
|
|
{t('free-collateral')}
|
|
|
|
</p>
|
|
|
|
</Tooltip>
|
2022-10-04 21:47:50 -07:00
|
|
|
<p className="mt-1 mb-0.5 text-2xl font-bold text-th-fgd-1 lg:text-xl xl:text-2xl">
|
2023-01-23 17:26:14 -08:00
|
|
|
<FormatNumericValue
|
|
|
|
value={
|
|
|
|
group && mangoAccount
|
|
|
|
? toUiDecimalsForQuote(
|
|
|
|
mangoAccount.getCollateralValue(group)
|
|
|
|
)
|
|
|
|
: 0
|
|
|
|
}
|
|
|
|
decimals={2}
|
|
|
|
isUsd={true}
|
|
|
|
/>
|
2022-09-13 04:27:04 -07:00
|
|
|
</p>
|
2022-10-04 21:47:50 -07:00
|
|
|
<span className="text-xs font-normal text-th-fgd-4">
|
|
|
|
<Tooltip
|
2023-01-16 20:59:51 -08:00
|
|
|
content={t('account:tooltip-total-collateral')}
|
2022-10-04 21:47:50 -07:00
|
|
|
maxWidth="20rem"
|
2023-03-21 03:27:37 -07:00
|
|
|
placement="top-start"
|
2023-03-10 10:01:47 -08:00
|
|
|
delay={100}
|
2022-10-04 21:47:50 -07:00
|
|
|
>
|
2023-01-16 20:59:51 -08:00
|
|
|
<span className="tooltip-underline">{t('total')}</span>:
|
2022-10-05 03:25:47 -07:00
|
|
|
<span className="ml-1 font-mono text-th-fgd-2">
|
2023-01-23 17:26:14 -08:00
|
|
|
<FormatNumericValue
|
|
|
|
value={
|
|
|
|
group && mangoAccount
|
|
|
|
? toUiDecimalsForQuote(
|
|
|
|
mangoAccount.getAssetsValue(group, HealthType.init)
|
|
|
|
)
|
|
|
|
: 0
|
|
|
|
}
|
|
|
|
decimals={2}
|
|
|
|
isUsd={true}
|
|
|
|
/>
|
2022-10-04 21:47:50 -07:00
|
|
|
</span>
|
|
|
|
</Tooltip>
|
|
|
|
</span>
|
2022-09-13 04:27:04 -07:00
|
|
|
</div>
|
2022-09-01 10:33:29 -07:00
|
|
|
</div>
|
2023-06-28 21:23:49 -07:00
|
|
|
<div className="col-span-6 flex border-t border-th-bkg-3 py-3 px-6 md:col-span-3 lg:col-span-2 lg:border-l lg:border-t-0 xl:col-span-1">
|
|
|
|
<div
|
|
|
|
id="account-step-seven"
|
|
|
|
className="flex w-full flex-col items-start"
|
|
|
|
>
|
2023-01-15 21:13:34 -08:00
|
|
|
<div className="flex w-full items-center justify-between">
|
2023-01-23 14:52:59 -08:00
|
|
|
<Tooltip
|
|
|
|
content={t('account:tooltip-pnl')}
|
2023-03-21 03:27:37 -07:00
|
|
|
placement="top-start"
|
2023-03-10 10:01:47 -08:00
|
|
|
delay={100}
|
2023-01-23 14:52:59 -08:00
|
|
|
>
|
|
|
|
<p className="tooltip-underline inline text-sm text-th-fgd-3 xl:text-base">
|
|
|
|
{t('pnl')}
|
|
|
|
</p>
|
|
|
|
</Tooltip>
|
2023-01-15 21:13:34 -08:00
|
|
|
{mangoAccountAddress ? (
|
|
|
|
<div className="flex items-center space-x-3">
|
2023-07-06 04:00:47 -07:00
|
|
|
<Tooltip
|
|
|
|
className="hidden md:block"
|
|
|
|
content={t('account:pnl-chart')}
|
|
|
|
delay={100}
|
|
|
|
>
|
|
|
|
<IconButton
|
|
|
|
className="text-th-fgd-3"
|
|
|
|
hideBg
|
|
|
|
onClick={() => handleChartToShow('pnl')}
|
2023-02-13 20:39:30 -08:00
|
|
|
>
|
2023-07-06 04:00:47 -07:00
|
|
|
<ChartBarIcon className="h-5 w-5" />
|
|
|
|
</IconButton>
|
|
|
|
</Tooltip>
|
2023-02-13 20:39:30 -08:00
|
|
|
<Tooltip
|
|
|
|
className="hidden md:block"
|
|
|
|
content={t('account:pnl-history')}
|
2023-03-10 10:01:47 -08:00
|
|
|
delay={100}
|
2023-02-13 20:39:30 -08:00
|
|
|
>
|
2023-01-15 21:13:34 -08:00
|
|
|
<IconButton
|
|
|
|
className="text-th-fgd-3"
|
|
|
|
hideBg
|
|
|
|
onClick={() => setShowPnlHistory(true)}
|
|
|
|
>
|
2023-02-12 18:03:48 -08:00
|
|
|
<CalendarIcon className="h-5 w-5" />
|
2023-01-15 21:13:34 -08:00
|
|
|
</IconButton>
|
2023-02-12 18:03:48 -08:00
|
|
|
</Tooltip>
|
2023-01-15 21:13:34 -08:00
|
|
|
</div>
|
|
|
|
) : null}
|
|
|
|
</div>
|
2022-10-06 05:08:29 -07:00
|
|
|
<p className="mt-1 mb-0.5 text-left text-2xl font-bold text-th-fgd-1 lg:text-xl xl:text-2xl">
|
2023-01-23 17:26:14 -08:00
|
|
|
<FormatNumericValue
|
|
|
|
value={accountPnl}
|
|
|
|
decimals={2}
|
|
|
|
isUsd={true}
|
|
|
|
/>
|
2022-09-01 10:33:29 -07:00
|
|
|
</p>
|
2023-02-11 04:40:23 -08:00
|
|
|
<div className="flex space-x-1.5">
|
2023-01-23 17:26:14 -08:00
|
|
|
<Change change={oneDayPnlChange} prefix="$" size="small" />
|
2023-02-11 04:40:23 -08:00
|
|
|
<p className="text-xs text-th-fgd-4">{t('rolling-change')}</p>
|
2022-11-19 03:28:06 -08:00
|
|
|
</div>
|
2022-09-01 10:33:29 -07:00
|
|
|
</div>
|
2023-01-15 21:13:34 -08:00
|
|
|
</div>
|
2023-06-28 21:23:49 -07:00
|
|
|
<div className="col-span-6 border-t border-th-bkg-3 py-3 pl-6 pr-4 md:col-span-3 md:border-l lg:col-span-2 lg:border-l-0 xl:col-span-1 xl:border-l xl:border-t-0">
|
|
|
|
<div id="account-step-six">
|
2023-07-03 20:24:13 -07:00
|
|
|
<div className="flex w-full items-center justify-between">
|
|
|
|
<p className="text-sm text-th-fgd-3 xl:text-base">
|
|
|
|
{t('account:lifetime-volume')}
|
|
|
|
</p>
|
2023-07-06 04:00:47 -07:00
|
|
|
{mangoAccountAddress ? (
|
2023-07-03 20:24:13 -07:00
|
|
|
<Tooltip
|
|
|
|
className="hidden md:block"
|
2023-07-06 04:00:47 -07:00
|
|
|
content={t('account:volume-chart')}
|
2023-07-03 20:24:13 -07:00
|
|
|
delay={100}
|
|
|
|
>
|
|
|
|
<IconButton
|
|
|
|
className="text-th-fgd-3"
|
|
|
|
hideBg
|
|
|
|
onClick={() => handleChartToShow('hourly-volume')}
|
|
|
|
>
|
|
|
|
<ChartBarIcon className="h-5 w-5" />
|
|
|
|
</IconButton>
|
|
|
|
</Tooltip>
|
|
|
|
) : null}
|
|
|
|
</div>
|
2023-07-03 18:24:36 -07:00
|
|
|
{loadingTotalVolume && mangoAccountAddress ? (
|
|
|
|
<SheenLoader className="mt-1">
|
2023-06-28 21:23:49 -07:00
|
|
|
<div className="h-7 w-16 bg-th-bkg-2" />
|
|
|
|
</SheenLoader>
|
|
|
|
) : (
|
|
|
|
<p className="mt-1 text-2xl font-bold text-th-fgd-1 lg:text-xl xl:text-2xl">
|
2023-07-03 18:24:36 -07:00
|
|
|
<FormatNumericValue value={volumeTotalData || 0} isUsd />
|
2023-06-28 21:23:49 -07:00
|
|
|
</p>
|
|
|
|
)}
|
2023-07-03 18:24:36 -07:00
|
|
|
<span className="flex items-center text-xs font-normal text-th-fgd-4">
|
|
|
|
<span>{t('account:daily-volume')}</span>:
|
|
|
|
{loadingHourlyVolume && mangoAccountAddress ? (
|
|
|
|
<SheenLoader className="ml-1">
|
|
|
|
<div className="h-3.5 w-10 bg-th-bkg-2" />
|
|
|
|
</SheenLoader>
|
|
|
|
) : (
|
|
|
|
<span className="ml-1 font-mono text-th-fgd-2">
|
|
|
|
<FormatNumericValue
|
|
|
|
value={dailyVolume}
|
|
|
|
decimals={2}
|
|
|
|
isUsd={true}
|
|
|
|
/>
|
|
|
|
</span>
|
|
|
|
)}
|
|
|
|
</span>
|
2023-06-28 21:23:49 -07:00
|
|
|
</div>
|
|
|
|
</div>
|
2023-03-21 03:27:37 -07:00
|
|
|
<div className="col-span-6 border-t border-th-bkg-3 py-3 pl-6 pr-4 text-left md:col-span-3 lg:col-span-2 lg:border-l xl:col-span-1 xl:border-t-0">
|
2022-11-13 19:21:45 -08:00
|
|
|
<div id="account-step-eight">
|
2023-01-16 02:07:46 -08:00
|
|
|
<div className="flex w-full items-center justify-between">
|
|
|
|
<Tooltip
|
2023-01-16 20:59:51 -08:00
|
|
|
content={t('account:tooltip-total-interest')}
|
2023-01-16 02:07:46 -08:00
|
|
|
maxWidth="20rem"
|
2023-03-21 03:27:37 -07:00
|
|
|
placement="top-start"
|
2023-03-10 10:01:47 -08:00
|
|
|
delay={100}
|
2023-01-16 02:07:46 -08:00
|
|
|
>
|
|
|
|
<p className="tooltip-underline text-sm text-th-fgd-3 xl:text-base">
|
|
|
|
{t('total-interest-earned')}
|
|
|
|
</p>
|
|
|
|
</Tooltip>
|
2023-07-06 04:00:47 -07:00
|
|
|
{mangoAccountAddress ? (
|
2023-02-13 20:39:30 -08:00
|
|
|
<Tooltip
|
|
|
|
className="hidden md:block"
|
2023-07-06 04:00:47 -07:00
|
|
|
content={t('account:cumulative-interest-chart')}
|
2023-03-10 10:01:47 -08:00
|
|
|
delay={100}
|
2023-02-13 20:39:30 -08:00
|
|
|
>
|
2023-01-16 02:07:46 -08:00
|
|
|
<IconButton
|
|
|
|
className="text-th-fgd-3"
|
|
|
|
hideBg
|
|
|
|
onClick={() =>
|
|
|
|
handleChartToShow('cumulative-interest-value')
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<ChartBarIcon className="h-5 w-5" />
|
|
|
|
</IconButton>
|
|
|
|
</Tooltip>
|
|
|
|
) : null}
|
|
|
|
</div>
|
2022-10-06 05:08:29 -07:00
|
|
|
<p className="mt-1 mb-0.5 text-2xl font-bold text-th-fgd-1 lg:text-xl xl:text-2xl">
|
2023-01-23 17:26:14 -08:00
|
|
|
<FormatNumericValue
|
|
|
|
value={interestTotalValue}
|
|
|
|
decimals={2}
|
|
|
|
isUsd={true}
|
|
|
|
/>
|
2022-09-01 10:33:29 -07:00
|
|
|
</p>
|
2023-02-11 04:40:23 -08:00
|
|
|
<div className="flex space-x-1.5">
|
2023-01-23 17:26:14 -08:00
|
|
|
<Change change={oneDayInterestChange} prefix="$" size="small" />
|
2023-02-11 04:40:23 -08:00
|
|
|
<p className="text-xs text-th-fgd-4">{t('rolling-change')}</p>
|
2022-11-19 03:28:06 -08:00
|
|
|
</div>
|
2022-09-01 10:33:29 -07:00
|
|
|
</div>
|
2023-01-16 02:07:46 -08:00
|
|
|
</div>
|
2023-03-21 03:27:37 -07:00
|
|
|
<div className="col-span-6 border-t border-th-bkg-3 py-3 pl-6 pr-4 text-left md:col-span-3 md:border-l lg:col-span-2 xl:col-span-1 xl:border-t-0">
|
|
|
|
<div className="flex w-full items-center justify-between">
|
|
|
|
<Tooltip
|
|
|
|
content={t('account:tooltip-total-funding')}
|
|
|
|
maxWidth="20rem"
|
|
|
|
placement="top-start"
|
|
|
|
delay={100}
|
|
|
|
>
|
|
|
|
<p className="tooltip-underline text-sm text-th-fgd-3 xl:text-base">
|
|
|
|
{t('account:total-funding-earned')}
|
|
|
|
</p>
|
|
|
|
</Tooltip>
|
2023-07-06 04:00:47 -07:00
|
|
|
{mangoAccountAddress ? (
|
2023-03-21 03:27:37 -07:00
|
|
|
<Tooltip
|
|
|
|
className="hidden md:block"
|
2023-07-06 04:00:47 -07:00
|
|
|
content={t('account:funding-chart')}
|
2023-03-21 03:27:37 -07:00
|
|
|
delay={100}
|
|
|
|
>
|
|
|
|
<IconButton
|
|
|
|
className="text-th-fgd-3"
|
|
|
|
hideBg
|
|
|
|
onClick={() => handleChartToShow('hourly-funding')}
|
|
|
|
>
|
|
|
|
<ChartBarIcon className="h-5 w-5" />
|
|
|
|
</IconButton>
|
|
|
|
</Tooltip>
|
|
|
|
) : null}
|
|
|
|
</div>
|
|
|
|
{(loadingFunding || fetchingFunding) && mangoAccountAddress ? (
|
|
|
|
<SheenLoader className="mt-2">
|
|
|
|
<div className="h-7 w-16 bg-th-bkg-2" />
|
|
|
|
</SheenLoader>
|
|
|
|
) : (
|
|
|
|
<p className="mt-1 mb-0.5 text-2xl font-bold text-th-fgd-1 lg:text-xl xl:text-2xl">
|
|
|
|
<FormatNumericValue
|
|
|
|
value={fundingTotalValue}
|
|
|
|
decimals={2}
|
|
|
|
isUsd={true}
|
|
|
|
/>
|
|
|
|
</p>
|
|
|
|
)}
|
|
|
|
</div>
|
2022-09-01 10:33:29 -07:00
|
|
|
</div>
|
2022-09-18 20:53:52 -07:00
|
|
|
<AccountTabs />
|
2022-12-20 01:13:24 -08:00
|
|
|
{/* {!tourSettings?.account_tour_seen && isOnBoarded && connected ? (
|
2022-09-21 21:25:24 -07:00
|
|
|
<AccountOnboardingTour />
|
2022-12-20 01:13:24 -08:00
|
|
|
) : null} */}
|
2023-01-15 21:13:34 -08:00
|
|
|
{showPnlHistory ? (
|
|
|
|
<PnlHistoryModal
|
|
|
|
pnlChangeToday={oneDayPnlChange}
|
|
|
|
isOpen={showPnlHistory}
|
2023-01-16 02:07:46 -08:00
|
|
|
onClose={handleCloseDailyPnlModal}
|
2023-01-15 21:13:34 -08:00
|
|
|
/>
|
|
|
|
) : null}
|
2022-09-01 10:33:29 -07:00
|
|
|
</>
|
|
|
|
) : (
|
2023-05-02 23:12:08 -07:00
|
|
|
<>
|
2022-09-19 16:57:58 -07:00
|
|
|
{chartToShow === 'account-value' ? (
|
|
|
|
<AccountChart
|
|
|
|
chartToShow="account-value"
|
2023-05-02 23:12:08 -07:00
|
|
|
setChartToShow={setChartToShow}
|
2023-02-11 04:40:23 -08:00
|
|
|
data={performanceData.concat(latestAccountData)}
|
2022-09-19 16:57:58 -07:00
|
|
|
hideChart={handleHideChart}
|
|
|
|
yKey="account_equity"
|
|
|
|
/>
|
|
|
|
) : chartToShow === 'pnl' ? (
|
|
|
|
<AccountChart
|
|
|
|
chartToShow="pnl"
|
2023-05-02 23:12:08 -07:00
|
|
|
setChartToShow={setChartToShow}
|
2023-06-05 22:29:04 -07:00
|
|
|
data={performanceData.concat(latestAccountData)}
|
2022-09-19 16:57:58 -07:00
|
|
|
hideChart={handleHideChart}
|
|
|
|
yKey="pnl"
|
|
|
|
/>
|
2023-03-21 03:27:37 -07:00
|
|
|
) : chartToShow === 'hourly-funding' ? (
|
2023-07-03 20:24:13 -07:00
|
|
|
<FundingChart hideChart={handleHideChart} />
|
|
|
|
) : chartToShow === 'hourly-volume' ? (
|
|
|
|
<VolumeChart
|
|
|
|
chartData={hourlyVolumeData}
|
|
|
|
hideChart={handleHideChart}
|
|
|
|
loading={loadingHourlyVolume}
|
|
|
|
/>
|
2022-09-19 16:57:58 -07:00
|
|
|
) : (
|
|
|
|
<AccountChart
|
|
|
|
chartToShow="cumulative-interest-value"
|
2023-05-02 23:12:08 -07:00
|
|
|
setChartToShow={setChartToShow}
|
2023-02-11 04:40:23 -08:00
|
|
|
data={performanceData}
|
2022-09-19 16:57:58 -07:00
|
|
|
hideChart={handleHideChart}
|
|
|
|
yKey="interest_value"
|
|
|
|
/>
|
|
|
|
)}
|
2023-05-02 23:12:08 -07:00
|
|
|
</>
|
2022-09-01 10:33:29 -07:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default AccountPage
|