From 508c4213a1f12b80f1c3dcdd998faec722cefe30 Mon Sep 17 00:00:00 2001 From: saml33 Date: Sat, 11 Feb 2023 23:40:23 +1100 Subject: [PATCH] fix account performance data --- components/account/AccountChart.tsx | 57 ++++------------ components/account/AccountPage.tsx | 87 +++++++++++-------------- components/borrow/BorrowPage.tsx | 12 ---- components/shared/ChartRangeButtons.tsx | 50 +++++++------- components/shared/DetailedAreaChart.tsx | 19 +++--- components/wallet/ConnectedMenu.tsx | 3 +- store/mangoStore.ts | 11 +--- 7 files changed, 83 insertions(+), 156 deletions(-) diff --git a/components/account/AccountChart.tsx b/components/account/AccountChart.tsx index c67c8fed..6c20bb7f 100644 --- a/components/account/AccountChart.tsx +++ b/components/account/AccountChart.tsx @@ -1,7 +1,6 @@ -import { toUiDecimalsForQuote } from '@blockworks-foundation/mango-v4' import { useTranslation } from 'next-i18next' -import { useEffect, useMemo, useState } from 'react' -import mangoStore from '@store/mangoStore' +import { useMemo, useState } from 'react' +import { PerformanceDataItem } from '@store/mangoStore' import dynamic from 'next/dynamic' import { formatYAxis } from 'utils/formatting' const DetailedAreaChart = dynamic( @@ -11,73 +10,39 @@ const DetailedAreaChart = dynamic( const AccountChart = ({ chartToShow, + data, hideChart, - mangoAccountAddress, yKey, }: { chartToShow: string + data: PerformanceDataItem[] hideChart: () => void - mangoAccountAddress: string yKey: string }) => { const { t } = useTranslation('common') - const actions = mangoStore.getState().actions const [daysToShow, setDaysToShow] = useState('1') - const loading = mangoStore((s) => s.mangoAccount.performance.loading) - const performanceData = mangoStore((s) => s.mangoAccount.performance.data) - useEffect(() => { - if (mangoAccountAddress) { - actions.fetchAccountPerformance(mangoAccountAddress, 1) - } - }, [actions, mangoAccountAddress]) - - const data: any = useMemo(() => { - if (!performanceData.length) return [] + const chartData: any = useMemo(() => { + if (!data.length) return [] if (chartToShow === 'cumulative-interest-value') { - performanceData.map((d) => ({ + data.map((d) => ({ interest_value: d.borrow_interest_cumulative_usd + d.deposit_interest_cumulative_usd, time: d.time, })) } - return performanceData - }, [performanceData]) - - const handleDaysToShow = async (days: string) => { - const mangoAccount = mangoStore.getState().mangoAccount.current - if (mangoAccount) { - await actions.fetchAccountPerformance( - mangoAccount.publicKey.toString(), - parseInt(days) - ) - setDaysToShow(days) - } - } - - const currentValue = useMemo(() => { - const mangoAccount = mangoStore.getState().mangoAccount.current - const group = mangoStore.getState().group - if (group && mangoAccount && chartToShow === 'account-value') { - const currentAccountValue = toUiDecimalsForQuote( - mangoAccount.getEquity(group).toNumber() - ) - const time = Date.now() - return [{ account_equity: currentAccountValue, time: time }] - } - return [] - }, [chartToShow]) + return data + }, [data]) return ( `$${formatYAxis(x)}`} title={t(chartToShow)} xKey="time" diff --git a/components/account/AccountPage.tsx b/components/account/AccountPage.tsx index b68b2f64..954f5a71 100644 --- a/components/account/AccountPage.tsx +++ b/components/account/AccountPage.tsx @@ -44,10 +44,10 @@ const AccountPage = () => { const { t } = useTranslation(['common', 'account']) // const { connected } = useWallet() const { group } = useMangoGroup() - const { mangoAccount, mangoAccountAddress, initialLoad } = useMangoAccount() + const { mangoAccount, mangoAccountAddress } = useMangoAccount() const actions = mangoStore.getState().actions - const performanceInitialLoad = mangoStore( - (s) => s.mangoAccount.performance.initialLoad + const performanceLoading = mangoStore( + (s) => s.mangoAccount.performance.loading ) const performanceData = mangoStore((s) => s.mangoAccount.performance.data) const totalInterestData = mangoStore( @@ -56,9 +56,6 @@ const AccountPage = () => { const [chartToShow, setChartToShow] = useState< 'account-value' | 'cumulative-interest-value' | 'pnl' | '' >('') - const [oneDayPerformanceData, setOneDayPerformanceData] = useState< - PerformanceDataItem[] - >([]) const [showExpandChart, setShowExpandChart] = useState(false) const [showPnlHistory, setShowPnlHistory] = useState(false) const { theme } = useTheme() @@ -72,26 +69,21 @@ const AccountPage = () => { ) useEffect(() => { - if (mangoAccountAddress || (!initialLoad && !mangoAccountAddress)) { - const set = mangoStore.getState().set - set((s) => { - s.mangoAccount.performance.initialLoad = false - }) - setOneDayPerformanceData([]) - actions.fetchAccountPerformance(mangoAccountAddress, 1) + if (mangoAccountAddress) { + console.log('fired') + actions.fetchAccountPerformance(mangoAccountAddress, 31) actions.fetchAccountInterestTotals(mangoAccountAddress) } - }, [actions, initialLoad, mangoAccountAddress]) + }, [actions, mangoAccountAddress]) - useEffect(() => { - if ( - performanceData.length && - performanceInitialLoad && - !oneDayPerformanceData.length - ) { - setOneDayPerformanceData(performanceData) - } - }, [performanceInitialLoad, oneDayPerformanceData, performanceData]) + 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]) const onHoverMenu = (open: boolean, action: string) => { if ( @@ -108,10 +100,6 @@ const AccountPage = () => { } const handleHideChart = () => { - const set = mangoStore.getState().set - set((s) => { - s.mangoAccount.performance.data = oneDayPerformanceData - }) setChartToShow('') } @@ -172,15 +160,16 @@ const AccountPage = () => { const oneDayInterestChange = useMemo(() => { if (oneDayPerformanceData.length) { - const startDayInterest = - oneDayPerformanceData[0].borrow_interest_cumulative_usd + - oneDayPerformanceData[0].deposit_interest_cumulative_usd + const first = oneDayPerformanceData[0] + const latest = oneDayPerformanceData[oneDayPerformanceData.length - 1] - const latest = oneDayPerformanceData.length - 1 + const startDayInterest = + first.borrow_interest_cumulative_usd + + first.deposit_interest_cumulative_usd const endDayInterest = - oneDayPerformanceData[latest].borrow_interest_cumulative_usd + - oneDayPerformanceData[latest].deposit_interest_cumulative_usd + latest.borrow_interest_cumulative_usd + + latest.deposit_interest_cumulative_usd return endDayInterest - startDayInterest } @@ -209,18 +198,18 @@ const AccountPage = () => { const latestAccountData = useMemo(() => { if (!accountValue || !performanceData.length) return [] - const latestIndex = performanceData.length - 1 + const latestDataItem = performanceData[performanceData.length - 1] return [ { account_equity: accountValue, time: dayjs(Date.now()).toISOString(), borrow_interest_cumulative_usd: - performanceData[latestIndex].borrow_interest_cumulative_usd, + latestDataItem.borrow_interest_cumulative_usd, deposit_interest_cumulative_usd: - performanceData[latestIndex].deposit_interest_cumulative_usd, - pnl: performanceData[latestIndex].pnl, - spot_value: performanceData[latestIndex].spot_value, - transfer_balance: performanceData[latestIndex].transfer_balance, + latestDataItem.deposit_interest_cumulative_usd, + pnl: latestDataItem.pnl, + spot_value: latestDataItem.spot_value, + transfer_balance: latestDataItem.transfer_balance, }, ] }, [accountValue, performanceData]) @@ -267,10 +256,10 @@ const AccountPage = () => {
-

24h Change

+

{t('rolling-change')}

- {performanceInitialLoad ? ( + {!performanceLoading ? ( oneDayPerformanceData.length ? (
{ isUsd={true} />

- {/*
+
-

{t('today')}

-
*/} +

{t('rolling-change')}

+
@@ -522,9 +511,9 @@ const AccountPage = () => { isUsd={true} />

-
+
-

{t('today')}

+

{t('rolling-change')}

@@ -546,22 +535,22 @@ const AccountPage = () => { {chartToShow === 'account-value' ? ( ) : chartToShow === 'pnl' ? ( ) : ( )} diff --git a/components/borrow/BorrowPage.tsx b/components/borrow/BorrowPage.tsx index 475a0b46..0a7bb18f 100644 --- a/components/borrow/BorrowPage.tsx +++ b/components/borrow/BorrowPage.tsx @@ -7,7 +7,6 @@ import { useTranslation } from 'next-i18next' import { ANIMATION_SETTINGS_KEY } from 'utils/constants' import FlipNumbers from 'react-flip-numbers' import Button from '@components/shared/Button' -import mangoStore from '@store/mangoStore' import { formatCurrencyValue } from 'utils/numbers' import { useEffect, useMemo, useState } from 'react' import YourBorrowsTable from './YourBorrowsTable' @@ -47,17 +46,6 @@ const BorrowPage = () => { ANIMATION_SETTINGS_KEY, INITIAL_ANIMATION_SETTINGS ) - const actions = mangoStore((s) => s.actions) - - useEffect(() => { - if (mangoAccountAddress) { - const set = mangoStore.getState().set - set((s) => { - s.mangoAccount.performance.initialLoad = false - }) - actions.fetchAccountPerformance(mangoAccountAddress, 1) - } - }, [actions, mangoAccountAddress]) const filteredBanks = useMemo(() => { if (banks.length) { diff --git a/components/shared/ChartRangeButtons.tsx b/components/shared/ChartRangeButtons.tsx index f05aa399..9dc4d784 100644 --- a/components/shared/ChartRangeButtons.tsx +++ b/components/shared/ChartRangeButtons.tsx @@ -16,38 +16,36 @@ const ChartRangeButtons: FunctionComponent = ({ names, }) => { return ( -
-
- {activeValue && values.includes(activeValue) ? ( -
v === activeValue) * 100 - }%)`, - width: `${100 / values.length}%`, - }} - /> - ) : null} - {values.map((v, i) => ( - - ))} -
+ key={`${v}${i}`} + onClick={() => onChange(v)} + style={{ + width: `${100 / values.length}%`, + }} + > + {names ? names[i] : v} + + ))}
) } diff --git a/components/shared/DetailedAreaChart.tsx b/components/shared/DetailedAreaChart.tsx index d34255de..cdcb0359 100644 --- a/components/shared/DetailedAreaChart.tsx +++ b/components/shared/DetailedAreaChart.tsx @@ -101,17 +101,14 @@ const DetailedAreaChart: FunctionComponent = ({ const filteredData = useMemo(() => { if (!data.length) return [] - if (daysToShow !== '30') { - const seconds = Number(daysToShow) * 86400 - const filtered = data.filter((d: any) => { - const dataTime = new Date(d[xKey]).getTime() / 1000 - const now = new Date().getTime() / 1000 - const limit = now - seconds - return dataTime >= limit - }) - return filtered - } - return data + const start = Number(daysToShow) * 86400000 + const filtered = data.filter((d: any) => { + const dataTime = new Date(d[xKey]).getTime() + const now = new Date().getTime() + const limit = now - start + return dataTime >= limit + }) + return filtered }, [data, daysToShow]) const calculateChartChange = () => { diff --git a/components/wallet/ConnectedMenu.tsx b/components/wallet/ConnectedMenu.tsx index d63ca8fd..74393296 100644 --- a/components/wallet/ConnectedMenu.tsx +++ b/components/wallet/ConnectedMenu.tsx @@ -49,8 +49,7 @@ const ConnectedMenu = () => { state.mangoAccount.interestTotals = { data: [], loading: false } state.mangoAccount.performance = { data: [], - loading: false, - initialLoad: false, + loading: true, } }) disconnect() diff --git a/store/mangoStore.ts b/store/mangoStore.ts index e3946ad8..f981faba 100644 --- a/store/mangoStore.ts +++ b/store/mangoStore.ts @@ -268,7 +268,6 @@ export type MangoStore = { performance: { data: PerformanceDataItem[] loading: boolean - initialLoad: boolean } swapHistory: { data: SwapHistoryItem[] @@ -411,7 +410,7 @@ const mangoStore = create()( perpPositions: [], spotBalances: {}, interestTotals: { data: [], loading: false }, - performance: { data: [], loading: false, initialLoad: false }, + performance: { data: [], loading: true }, swapHistory: { data: [], loading: true }, tradeHistory: { data: [], loading: true }, }, @@ -521,9 +520,6 @@ const mangoStore = create()( range: number ) => { const set = get().set - set((state) => { - state.mangoAccount.performance.loading = true - }) try { const response = await fetch( `${MANGO_DATA_API_URL}/stats/performance_account?mango-account=${mangoAccountPk}&start-date=${dayjs() @@ -547,13 +543,8 @@ const mangoStore = create()( } catch (e) { console.error('Failed to load account performance data', e) } finally { - const hasLoaded = - mangoStore.getState().mangoAccount.performance.initialLoad set((state) => { state.mangoAccount.performance.loading = false - if (!hasLoaded) { - state.mangoAccount.performance.initialLoad = true - } }) } },