Merge pull request #197 from blockworks-foundation/ts/refactor-account

refactor data fetching out of account page into hooks

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

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<ChartToShow>('')
   const [showPnlHistory, setShowPnlHistory] = useState<boolean>(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 ? (
     <>
       <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">
@@ -162,7 +118,6 @@ const AccountPage = () => {
               <AccountValue
                 accountValue={accountValue}
                 latestAccountData={latestAccountData}
-                loading={performanceLoading}
                 rollingDailyData={rollingDailyData}
                 setChartToShow={setChartToShow}
               />
@@ -179,8 +134,6 @@ const AccountPage = () => {
       <AccountHeroStats
         accountPnl={accountPnl}
         accountValue={accountValue}
-        hourlyVolumeData={hourlyVolumeData}
-        loadingHourlyVolume={loadingHourlyVolume}
         rollingDailyData={rollingDailyData}
         setChartToShow={setChartToShow}
         setShowPnlHistory={setShowPnlHistory}
@@ -191,8 +144,6 @@ const AccountPage = () => {
       ) : null} */}
       {showPnlHistory ? (
         <PnlHistoryModal
-          loading={performanceLoading}
-          performanceData={performanceData}
           pnlChangeToday={pnlChangeToday}
           isOpen={showPnlHistory}
           onClose={handleCloseDailyPnlModal}

components/account/AccountValue.tsx

@@ -20,17 +20,16 @@ import { useTranslation } from 'next-i18next'
 import { useViewport } from 'hooks/useViewport'
 import { breakpoints } from 'utils/theme'
 import { ChartToShow } from './AccountPage'
+import useAccountPerformanceData from 'hooks/useAccountPerformanceData'
 
 const AccountValue = ({
   accountValue,
   latestAccountData,
-  loading,
   rollingDailyData,
   setChartToShow,
 }: {
   accountValue: number
   latestAccountData: PerformanceDataItem[]
-  loading: boolean
   rollingDailyData: PerformanceDataItem[]
   setChartToShow: (chart: ChartToShow) => 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(() => {

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 []

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,
+  }
+}

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,
+  }
+}