organize stats components and improve data loading

components/stats/StatsPage.tsx

@@ -6,18 +6,19 @@ import { useViewport } from 'hooks/useViewport'
 import { useRouter } from 'next/router'
 import { useEffect, useMemo, useState } from 'react'
 import { breakpoints } from 'utils/theme'
-import MangoStats from './MangoStats'
-import PerpStats from './PerpStats'
-import PerpStatsPage from './PerpStatsPage'
-import SpotMarketsTable from './SpotMarketsTable'
-import TokenStats from './TokenStats'
+import MangoStats from './mango/MangoStats'
+import PerpStats from './perps/PerpStats'
+import PerpStatsPage from './perps/PerpStatsPage'
+import SpotMarketsTable from './spot/SpotMarketsTable'
+import TokenStats from './tokens/TokenStats'
 
 const TABS = ['tokens', 'perp-markets', 'spot-markets', 'mango-stats']
+const actions = mangoStore.getState().actions
 
 const StatsPage = () => {
   const [activeTab, setActiveTab] = useState('tokens')
-  const actions = mangoStore.getState().actions
   const perpStats = mangoStore((s) => s.perpStats.data)
+  const initialStatsLoad = mangoStore((s) => s.tokenStats.initialLoad)
   const perpPositionsStatsNotLoaded = mangoStore(
     (s) => s.perpStats.positions.initialLoad,
   )
@@ -40,6 +41,13 @@ const StatsPage = () => {
     }
   }, [group, perpPositionsStatsNotLoaded])
 
+  useEffect(() => {
+    if (group && !initialStatsLoad) {
+      const actions = mangoStore.getState().actions
+      actions.fetchTokenStats()
+    }
+  }, [group, initialStatsLoad])
+
   const tabsWithCount: [string, number][] = useMemo(() => {
     return TABS.map((t) => [t, 0])
   }, [])

components/stats/mango/MangoStats.tsx

@@ -1,5 +1,5 @@
-import MangoPerpStatsCharts from './MangoPerpStatsCharts'
-import TokenStatsCharts from './TokenStatsCharts'
+import MangoPerpStatsCharts from '../perps/MangoPerpStatsCharts'
+import TokenStatsCharts from '../tokens/TokenStatsCharts'
 
 const MangoStats = () => {
   return (

components/stats/perps/PerpMarketDetailsTable.tsx

@@ -1,8 +1,6 @@
 import { useTranslation } from 'next-i18next'
-import { useViewport } from '../../hooks/useViewport'
 import mangoStore from '@store/mangoStore'
-import { breakpoints } from '../../utils/theme'
-import ContentBox from '../shared/ContentBox'
+import ContentBox from '@components/shared/ContentBox'
 import MarketLogos from '@components/trade/MarketLogos'
 import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
 import {
@@ -17,6 +15,8 @@ import { goToPerpMarketDetails } from './PerpMarketsOverviewTable'
 import { useRouter } from 'next/router'
 import { LinkButton } from '@components/shared/Button'
 import SoonBadge from '@components/shared/SoonBadge'
+import { useViewport } from 'hooks/useViewport'
+import { breakpoints } from 'utils/theme'
 
 const PerpMarketDetailsTable = () => {
   const { t } = useTranslation(['common', 'trade'])

components/stats/perps/PerpMarketsOverviewTable.tsx

@@ -1,9 +1,9 @@
 import { PerpMarket } from '@blockworks-foundation/mango-v4'
 import { useTranslation } from 'next-i18next'
-import { useViewport } from '../../hooks/useViewport'
-import { COLORS } from '../../styles/colors'
-import { breakpoints } from '../../utils/theme'
-import ContentBox from '../shared/ContentBox'
+import { useViewport } from '../../../hooks/useViewport'
+import { COLORS } from '../../../styles/colors'
+import { breakpoints } from '../../../utils/theme'
+import ContentBox from '../../shared/ContentBox'
 import MarketLogos from '@components/trade/MarketLogos'
 import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
 import {

components/stats/spot/SpotMarketsTable.tsx

@@ -1,9 +1,9 @@
 import { useTranslation } from 'next-i18next'
 import { useCallback } from 'react'
-import { useViewport } from '../../hooks/useViewport'
-import { COLORS } from '../../styles/colors'
-import { breakpoints } from '../../utils/theme'
-import ContentBox from '../shared/ContentBox'
+import { useViewport } from '../../../hooks/useViewport'
+import { COLORS } from '../../../styles/colors'
+import { breakpoints } from '../../../utils/theme'
+import ContentBox from '../../shared/ContentBox'
 import MarketLogos from '@components/trade/MarketLogos'
 import useMangoGroup from 'hooks/useMangoGroup'
 import {

components/stats/tokens/TokenDetailsTable.tsx

@@ -5,9 +5,9 @@ import {
   ChevronRightIcon,
 } from '@heroicons/react/20/solid'
 import { useTranslation } from 'next-i18next'
-import { useViewport } from '../../hooks/useViewport'
-import { breakpoints } from '../../utils/theme'
-import ContentBox from '../shared/ContentBox'
+import { useViewport } from '../../../hooks/useViewport'
+import { breakpoints } from '../../../utils/theme'
+import ContentBox from '../../shared/ContentBox'
 import Tooltip from '@components/shared/Tooltip'
 import { Bank } from '@blockworks-foundation/mango-v4'
 import {

components/stats/tokens/TokenOverviewTable.tsx

@@ -1,10 +1,10 @@
 import { Disclosure, Transition } from '@headlessui/react'
 import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/20/solid'
 import { useTranslation } from 'next-i18next'
-import { useViewport } from '../../hooks/useViewport'
-import { breakpoints } from '../../utils/theme'
-import { LinkButton } from '../shared/Button'
-import ContentBox from '../shared/ContentBox'
+import { useViewport } from '../../../hooks/useViewport'
+import { breakpoints } from '../../../utils/theme'
+import { LinkButton } from '../../shared/Button'
+import ContentBox from '../../shared/ContentBox'
 import Tooltip from '@components/shared/Tooltip'
 import { Bank, toUiDecimals } from '@blockworks-foundation/mango-v4'
 import { NextRouter, useRouter } from 'next/router'

components/stats/tokens/TokenStatsCharts.tsx

@@ -1,30 +1,20 @@
 import mangoStore from '@store/mangoStore'
 import { useTranslation } from 'next-i18next'
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import dayjs from 'dayjs'
 import { formatYAxis } from 'utils/formatting'
 import useBanksWithBalances from 'hooks/useBanksWithBalances'
-import useMangoGroup from 'hooks/useMangoGroup'
 import { toUiDecimals } from '@blockworks-foundation/mango-v4'
 import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
 
 const TokenStatsCharts = () => {
   const { t } = useTranslation(['common', 'token', 'trade'])
-  const { group } = useMangoGroup()
   const mangoStats = mangoStore((s) => s.tokenStats.mangoStats)
-  const initialStatsLoad = mangoStore((s) => s.tokenStats.initialLoad)
   const loadingStats = mangoStore((s) => s.tokenStats.loading)
   const [borrowDaysToShow, setBorrowDaysToShow] = useState('30')
   const [depositDaysToShow, setDepositDaysToShow] = useState('30')
   const banks = useBanksWithBalances()
 
-  useEffect(() => {
-    if (group && !initialStatsLoad) {
-      const actions = mangoStore.getState().actions
-      actions.fetchTokenStats()
-    }
-  }, [group, initialStatsLoad])
-
   const [
     currentTotalDepositValue,
     currentTotalBorrowValue,

components/token/ChartTabs.tsx

@@ -1,9 +1,8 @@
 import { Bank } from '@blockworks-foundation/mango-v4'
 import TabButtons from '@components/shared/TabButtons'
 import mangoStore from '@store/mangoStore'
-import useMangoGroup from 'hooks/useMangoGroup'
 import { useTranslation } from 'next-i18next'
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { TokenStatsItem } from 'types'
 import { formatYAxis } from 'utils/formatting'
 import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
@@ -18,16 +17,7 @@ const ChartTabs = ({ bank }: { bank: Bank }) => {
   const [depositRateDaysToShow, setDepositRateDaysToShow] = useState('30')
   const [borrowRateDaysToShow, setBorrowRateDaysToShow] = useState('30')
   const tokenStats = mangoStore((s) => s.tokenStats.data)
-  const initialStatsLoad = mangoStore((s) => s.tokenStats.initialLoad)
   const loadingTokenStats = mangoStore((s) => s.tokenStats.loading)
-  const actions = mangoStore.getState().actions
-  const { group } = useMangoGroup()
-
-  useEffect(() => {
-    if (group && !initialStatsLoad) {
-      actions.fetchTokenStats()
-    }
-  }, [group])
 
   const statsHistory = useMemo(() => {
     if (!tokenStats?.length) return []

yarn.lock

@@ -1014,7 +1014,7 @@
   resolved "https://registry.yarnpkg.com/@noble/ed25519/-/ed25519-1.7.3.tgz#57e1677bf6885354b466c38e2b620c62f45a7123"
   integrity sha512-iR8GBkDt0Q3GyaVcIu7mSsVIqnFbkbRzGLWlvhwunacoLwt4J3swfKhfaM6rN6WY+TBGoYT1GtT1mIh2/jGbRQ==
 
-"@noble/hashes@1.3.1", "@noble/hashes@^1.1.3", "@noble/hashes@^1.3.0", "@noble/hashes@^1.3.1", "@noble/hashes@~1.3.0", "@noble/hashes@~1.3.1":
+"@noble/hashes@1.3.1", "@noble/hashes@^1.1.3", "@noble/hashes@^1.3.1", "@noble/hashes@~1.3.0", "@noble/hashes@~1.3.1":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.1.tgz#8831ef002114670c603c458ab8b11328406953a9"
   integrity sha512-EbqwksQwz9xDRGfDST86whPBgM65E0OH/pCgqW0GBVzO22bNE+NuIbeTb714+IfSjU3aRk47EUvXIb5bTsenKA==
@@ -3044,7 +3044,7 @@ agent-base@6:
   dependencies:
     debug "4"
 
-agentkeepalive@^4.2.1, agentkeepalive@^4.3.0:
+agentkeepalive@^4.3.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/agentkeepalive/-/agentkeepalive-4.5.0.tgz#2673ad1389b3c418c5a20c5d7364f93ca04be923"
   integrity sha512-5GG/5IbQQpC9FpkRGsSvZI5QYeSCzlJHdpBQntCsuTOxhKD8lqKhrleg2Yi7yvMIf82Ycmmqln9U8V9qwEiJew==
@@ -4240,7 +4240,7 @@ dayjs@1.11.3:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.3.tgz#4754eb694a624057b9ad2224b67b15d552589258"
   integrity sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A==
 
-debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
+debug@4, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==