From cea9a8908e4bfe4259ad0754c6bf8c1a7ea8f5b4 Mon Sep 17 00:00:00 2001 From: tjs Date: Sat, 8 Jul 2023 19:50:40 -0400 Subject: [PATCH] refactor data fetching out of account page into hooks --- components/account/AccountHeroStats.tsx | 9 ++-- components/account/AccountPage.tsx | 61 +++---------------------- components/account/AccountValue.tsx | 4 +- components/modals/PnlHistoryModal.tsx | 7 ++- hooks/useAccountHourlyVolumeStats.ts | 33 +++++++++++++ hooks/useAccountPerformanceData.ts | 44 ++++++++++++++++++ 6 files changed, 92 insertions(+), 66 deletions(-) create mode 100644 hooks/useAccountHourlyVolumeStats.ts create mode 100644 hooks/useAccountPerformanceData.ts diff --git a/components/account/AccountHeroStats.tsx b/components/account/AccountHeroStats.tsx index 9e17eb75..fa24bf26 100644 --- a/components/account/AccountHeroStats.tsx +++ b/components/account/AccountHeroStats.tsx @@ -17,21 +17,18 @@ import { IconButton } from '@components/shared/Button' import { CalendarIcon, ChartBarIcon } from '@heroicons/react/20/solid' import Change from '@components/shared/Change' import SheenLoader from '@components/shared/SheenLoader' -import { FormattedHourlyAccountVolumeData, PerformanceDataItem } from 'types' +import { PerformanceDataItem } from 'types' +import useAccountHourlyVolumeStats from 'hooks/useAccountHourlyVolumeStats' const AccountHeroStats = ({ accountPnl, accountValue, - hourlyVolumeData, - loadingHourlyVolume, rollingDailyData, setShowPnlHistory, setChartToShow, }: { accountPnl: number accountValue: number - hourlyVolumeData: FormattedHourlyAccountVolumeData[] | undefined - loadingHourlyVolume: boolean rollingDailyData: PerformanceDataItem[] setShowPnlHistory: (show: boolean) => void setChartToShow: (view: ChartToShow) => void @@ -39,6 +36,8 @@ const AccountHeroStats = ({ const { t } = useTranslation(['common', 'account']) const { group } = useMangoGroup() const { mangoAccount, mangoAccountAddress } = useMangoAccount() + const { hourlyVolumeData, loadingHourlyVolume } = + useAccountHourlyVolumeStats() const totalInterestData = mangoStore( (s) => s.mangoAccount.interestTotals.data diff --git a/components/account/AccountPage.tsx b/components/account/AccountPage.tsx index ff9f3298..20b9d98a 100644 --- a/components/account/AccountPage.tsx +++ b/components/account/AccountPage.tsx @@ -13,13 +13,12 @@ import { breakpoints } from 'utils/theme' import useMangoGroup from 'hooks/useMangoGroup' import PnlHistoryModal from '@components/modals/PnlHistoryModal' import AssetsLiabilities from './AssetsLiabilities' -import { PerformanceDataItem } from 'types' -import { useQuery } from '@tanstack/react-query' import FundingChart from './FundingChart' import VolumeChart from './VolumeChart' -import { fetchAccountPerformance, fetchHourlyVolume } from 'utils/account' import AccountHeroStats from './AccountHeroStats' import AccountValue from './AccountValue' +import useAccountPerformanceData from 'hooks/useAccountPerformanceData' +import useAccountHourlyVolumeStats from 'hooks/useAccountHourlyVolumeStats' const TABS = ['account-value', 'account:assets-liabilities'] @@ -34,7 +33,7 @@ export type ChartToShow = const AccountPage = () => { const { t } = useTranslation(['common', 'account']) const { group } = useMangoGroup() - const { mangoAccount, mangoAccountAddress } = useMangoAccount() + const { mangoAccount } = useMangoAccount() const [chartToShow, setChartToShow] = useState('') const [showPnlHistory, setShowPnlHistory] = useState(false) const { width } = useViewport() @@ -45,47 +44,9 @@ const AccountPage = () => { 'accountHeroKey-0.1', 'account-value' ) - - const { - data: performanceData, - isLoading: loadingPerformanceData, - isFetching: fetchingPerformanceData, - } = useQuery( - ['performance', mangoAccountAddress], - () => fetchAccountPerformance(mangoAccountAddress, 31), - { - cacheTime: 1000 * 60 * 10, - staleTime: 1000 * 60, - retry: 3, - refetchOnWindowFocus: false, - enabled: !!mangoAccountAddress, - } - ) - - const { - data: hourlyVolumeData, - isLoading: loadingHourlyVolumeData, - isFetching: fetchingHourlyVolumeData, - } = useQuery( - ['hourly-volume', mangoAccountAddress], - () => fetchHourlyVolume(mangoAccountAddress), - { - cacheTime: 1000 * 60 * 10, - staleTime: 1000 * 60, - retry: 3, - refetchOnWindowFocus: false, - enabled: !!mangoAccountAddress, - } - ) - - const rollingDailyData: 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 { performanceData, rollingDailyData } = useAccountPerformanceData() + const { hourlyVolumeData, loadingHourlyVolume } = + useAccountHourlyVolumeStats() const handleHideChart = () => { setChartToShow('') @@ -133,11 +94,6 @@ const AccountPage = () => { ] }, [accountPnl, accountValue, performanceData]) - const loadingHourlyVolume = - fetchingHourlyVolumeData || loadingHourlyVolumeData - - const performanceLoading = loadingPerformanceData || fetchingPerformanceData - return !chartToShow ? ( <>
@@ -162,7 +118,6 @@ const AccountPage = () => { @@ -179,8 +134,6 @@ const AccountPage = () => { { ) : null} */} {showPnlHistory ? ( void }) => { @@ -44,6 +43,7 @@ const AccountValue = ({ INITIAL_ANIMATION_SETTINGS ) const { width } = useViewport() + const { performanceLoading: loading } = useAccountPerformanceData() const isMobile = width ? width < breakpoints.md : false const accountValueChange = useMemo(() => { diff --git a/components/modals/PnlHistoryModal.tsx b/components/modals/PnlHistoryModal.tsx index a511151d..81cf8a69 100644 --- a/components/modals/PnlHistoryModal.tsx +++ b/components/modals/PnlHistoryModal.tsx @@ -7,6 +7,7 @@ import Change from '@components/shared/Change' import SheenLoader from '@components/shared/SheenLoader' import { NoSymbolIcon } from '@heroicons/react/20/solid' import { PerformanceDataItem } from 'types' +import useAccountPerformanceData from 'hooks/useAccountPerformanceData' interface PnlChange { time: string @@ -14,21 +15,19 @@ interface PnlChange { } interface PnlHistoryModalProps { - loading: boolean - performanceData: PerformanceDataItem[] | undefined pnlChangeToday: number } type ModalCombinedProps = PnlHistoryModalProps & ModalProps const PnlHistoryModal = ({ - loading, isOpen, onClose, - performanceData, pnlChangeToday, }: ModalCombinedProps) => { const { t } = useTranslation('account') + const { performanceData, performanceLoading: loading } = + useAccountPerformanceData() const dailyValues: PnlChange[] = useMemo(() => { if (!performanceData || !performanceData.length) return [] diff --git a/hooks/useAccountHourlyVolumeStats.ts b/hooks/useAccountHourlyVolumeStats.ts new file mode 100644 index 00000000..1b56478a --- /dev/null +++ b/hooks/useAccountHourlyVolumeStats.ts @@ -0,0 +1,33 @@ +import { useQuery } from '@tanstack/react-query' +import { fetchHourlyVolume } from 'utils/account' +import useMangoAccount from './useMangoAccount' + +export default function useAccountHourlyVolumeStats() { + const { mangoAccountAddress } = useMangoAccount() + + const { + data: hourlyVolumeData, + isLoading: loadingHourlyVolumeData, + isFetching: fetchingHourlyVolumeData, + } = useQuery( + ['hourly-volume', mangoAccountAddress], + () => fetchHourlyVolume(mangoAccountAddress), + { + cacheTime: 1000 * 60 * 10, + staleTime: 1000 * 60, + retry: 3, + refetchOnWindowFocus: false, + enabled: !!mangoAccountAddress, + } + ) + + const loadingHourlyVolume = + fetchingHourlyVolumeData || loadingHourlyVolumeData + + return { + hourlyVolumeData, + loadingHourlyVolumeData, + fetchingHourlyVolumeData, + loadingHourlyVolume, + } +} diff --git a/hooks/useAccountPerformanceData.ts b/hooks/useAccountPerformanceData.ts new file mode 100644 index 00000000..f8b6f0e8 --- /dev/null +++ b/hooks/useAccountPerformanceData.ts @@ -0,0 +1,44 @@ +import { useQuery } from '@tanstack/react-query' +import { fetchAccountPerformance } from 'utils/account' +import useMangoAccount from './useMangoAccount' +import { useMemo } from 'react' +import { PerformanceDataItem } from 'types' + +export default function useAccountPerformanceData() { + const { mangoAccountAddress } = useMangoAccount() + + const { + data: performanceData, + isLoading: loadingPerformanceData, + isFetching: fetchingPerformanceData, + } = useQuery( + ['performance', mangoAccountAddress], + () => fetchAccountPerformance(mangoAccountAddress, 31), + { + cacheTime: 1000 * 60 * 10, + staleTime: 1000 * 60, + retry: 3, + refetchOnWindowFocus: false, + enabled: !!mangoAccountAddress, + } + ) + + const rollingDailyData: 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 performanceLoading = loadingPerformanceData || fetchingPerformanceData + + return { + performanceData, + rollingDailyData, + loadingPerformanceData, + fetchingPerformanceData, + performanceLoading, + } +}