fix stats and markets data refresh

components/home/HomePage.tsx

@@ -16,11 +16,13 @@ import { useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { MotionPathPlugin } from 'gsap/dist/MotionPathPlugin'
 import ColorBlur from '../shared/ColorBlur'
 import Ottersec from '../icons/Ottersec'
-import { AppStatsData, MarketData } from '../../types'
 import TabsText from '../shared/TabsText'
 import MarketCard from './MarketCard'
 import { formatNumericValue, numberCompacter } from '../../utils'
 import HeroStat from './HeroStat'
+import useMarketsData from '../../hooks/useMarketData'
+import { useQuery } from '@tanstack/react-query'
+import { MANGO_DATA_API_URL } from '../../utils/constants'
 
 gsap.registerPlugin(MotionPathPlugin)
 gsap.registerPlugin(ScrollTrigger)
@@ -43,17 +45,28 @@ const tokenIcons = [
 const MOBILE_IMAGE_CLASSES =
   'core-image h-[240px] w-[240px] sm:h-[300px] sm:w-[300px] md:h-[480px] md:w-[480px] mb-6 lg:mb-0'
 
-const HomePage = ({
-  perpData,
-  spotData,
-  appData,
-}: {
-  perpData: MarketData
-  spotData: MarketData
-  appData: AppStatsData
-}) => {
+const fetchAppData = async () => {
+  try {
+    const response = await fetch(
+      `${MANGO_DATA_API_URL}/stats/mango-protocol-summary`
+    )
+    const data = await response.json()
+    return data
+  } catch (e) {
+    console.error('failed to fetch account followers', e)
+    return undefined
+  }
+}
+
+const HomePage = () => {
   const { t } = useTranslation(['common', 'home'])
   const [activeMarketTab, setActiveMarketTab] = useState('spot')
+  const { data: marketData } = useMarketsData()
+
+  const { data: appData } = useQuery({
+    queryKey: ['app-data'],
+    queryFn: fetchAppData,
+  })
 
   const topSection = useRef()
   const callouts = useRef()
@@ -62,39 +75,44 @@ const HomePage = ({
   const build = useRef()
 
   const tabsWithCount: [string, number][] = useMemo(() => {
-    const perpMarketsNumber = Object.keys(perpData)?.length || 0
-    const spotMarketsNumber = Object.keys(spotData)?.length || 0
+    const perpMarketsNumber =
+      (marketData?.perpData && Object.keys(marketData?.perpData)?.length) || 0
+    const spotMarketsNumber =
+      (marketData?.spotData && Object.keys(marketData?.spotData)?.length) || 0
     const tabs: [string, number][] = [
       ['spot', spotMarketsNumber],
       ['perp', perpMarketsNumber],
     ]
     return tabs
-  }, [perpData, spotData])
+  }, [marketData])
 
   const formattedSpotData = useMemo(() => {
-    if (!spotData || !Object.keys(spotData)?.length) return []
-    const data = Object.entries(spotData)
+    if (!marketData?.spotData || !Object.keys(marketData?.spotData)?.length)
+      return []
+    const data = Object.entries(marketData.spotData)
       .sort((a, b) => b[1][0].quote_volume_24h - a[1][0].quote_volume_24h)
       .map(([key, value]) => {
         const data = value[0]
         return { name: key, data }
       })
     return data
-  }, [spotData])
+  }, [marketData])
 
   const formattedPerpData = useMemo(() => {
-    if (!perpData || !Object.keys(perpData)?.length) return []
-    const data = Object.entries(perpData)
+    if (!marketData?.perpData || !Object.keys(marketData?.perpData)?.length)
+      return []
+    const data = Object.entries(marketData.perpData)
       .sort((a, b) => b[1][0].quote_volume_24h - a[1][0].quote_volume_24h)
       .map(([key, value]) => {
         const data = value[0]
         return { name: key, data }
       })
     return data
-  }, [perpData])
+  }, [marketData])
 
   const formattedAppStatsData = useMemo(() => {
-    if (!appData || !Object.keys(appData).length) return
+    if (!appData || !Object.keys(appData).length)
+      return { totalVol24h: 0, totalTrades24h: 0, weeklyActiveTraders: 0 }
     // volume
     const spotVol24h = appData?.openbook_volume_usd_24h || 0
     const perpVol24h = appData?.perp_volume_usd_24h || 0

hooks/useMarketData.ts

@@ -0,0 +1,25 @@
+import { useQuery } from '@tanstack/react-query'
+import { MANGO_DATA_API_URL } from '../utils/constants'
+
+const fetchMarketData = async () => {
+  const promises = [
+    fetch(`${MANGO_DATA_API_URL}/stats/perp-market-summary`),
+    fetch(`${MANGO_DATA_API_URL}/stats/spot-market-summary`),
+  ]
+  try {
+    const data = await Promise.all(promises)
+    const perpData = await data[0].json()
+    const spotData = await data[1].json()
+    return { perpData, spotData }
+  } catch (e) {
+    console.error('Failed to fetch market data', e)
+    return { perpData: undefined, spotData: undefined }
+  }
+}
+
+export default function useMarketsData() {
+  return useQuery({
+    queryKey: ['market-data'],
+    queryFn: fetchMarketData,
+  })
+}

package.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "@headlessui/react": "^1.0.0",
     "@heroicons/react": "^2.0.16",
+    "@tanstack/react-query": "^5.8.4",
     "@tippyjs/react": "^4.2.6",
     "decimal.js": "^10.4.3",
     "gsap": "^3.11.5",

pages/_app.tsx

@@ -3,6 +3,7 @@ import { ThemeProvider } from 'next-themes'
 import '../styles/index.css'
 import LayoutWrapper from '../components/layout/LayoutWrapper'
 import { appWithTranslation } from 'next-i18next'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 const metaTitle = 'Mango Markets – Safer. Smarter. Faster.'
 const metaDescription =
@@ -10,6 +11,18 @@ const metaDescription =
 const keywords =
   'Mango Markets, DEFI, Decentralized Finance, Decentralized Finance, Crypto, ERC20, Ethereum, Solana, SOL, SPL, Cross-Chain, Trading, Fastest, Fast, SPL Tokens'
 
+// init react-query
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 1000 * 60 * 10,
+      staleTime: 1000 * 60,
+      retry: 3,
+      refetchOnWindowFocus: false,
+    },
+  },
+})
+
 function App({ Component, pageProps }) {
   return (
     <>
@@ -36,11 +49,13 @@ function App({ Component, pageProps }) {
           content="https://mango.markets/twitter-card.png?123456789"
         />
       </Head>
-      <ThemeProvider defaultTheme="Mango">
-        <LayoutWrapper>
-          <Component {...pageProps} />
-        </LayoutWrapper>
-      </ThemeProvider>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider defaultTheme="Mango">
+          <LayoutWrapper>
+            <Component {...pageProps} />
+          </LayoutWrapper>
+        </ThemeProvider>
+      </QueryClientProvider>
     </>
   )
 }

pages/index.tsx

@@ -1,58 +1,23 @@
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { NextPage } from 'next'
 import HomePage from '../components/home/HomePage'
-import type { InferGetStaticPropsType } from 'next'
-import { MANGO_DATA_API_URL } from '../utils/constants'
 
 export async function getStaticProps({ locale }: { locale: string }) {
-  const promises = [
-    fetch(`${MANGO_DATA_API_URL}/stats/perp-market-summary`),
-    fetch(`${MANGO_DATA_API_URL}/stats/spot-market-summary`),
-    fetch(`${MANGO_DATA_API_URL}/stats/mango-protocol-summary`),
-  ]
-  try {
-    const data = await Promise.all(promises)
-    const perpData = await data[0].json()
-    const spotData = await data[1].json()
-    const appData = await data[2].json()
-
-    return {
-      props: {
-        perpData,
-        spotData,
-        appData,
-        ...(await serverSideTranslations(locale, [
-          'common',
-          'home',
-          'footer',
-          'navigation',
-        ])),
-      },
-    }
-  } catch (e) {
-    console.error('Failed to fetch market data', e)
-    return {
-      props: {
-        perpData: null,
-        spotData: null,
-        appData: null,
-        ...(await serverSideTranslations(locale, [
-          'common',
-          'home',
-          'footer',
-          'navigation',
-        ])),
-      },
-    }
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, [
+        'common',
+        'home',
+        'footer',
+        'navigation',
+      ])),
+      // Will be passed to the page component as props
+    },
   }
 }
 
-const Index: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
-  perpData,
-  spotData,
-  appData,
-}) => {
-  return <HomePage perpData={perpData} spotData={spotData} appData={appData} />
+const Index: NextPage = () => {
+  return <HomePage />
 }
 
 export default Index

yarn.lock

@@ -727,6 +727,18 @@
   dependencies:
     tslib "^2.4.0"
 
+"@tanstack/query-core@5.8.3":
+  version "5.8.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.8.3.tgz#7c6d62721518223e8b27f1a0b5e9bd4e3bb7ecd8"
+  integrity sha512-SWFMFtcHfttLYif6pevnnMYnBvxKf3C+MHMH7bevyYfpXpTMsLB9O6nNGBdWSoPwnZRXFNyNeVZOw25Wmdasow==
+
+"@tanstack/react-query@^5.8.4":
+  version "5.8.4"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.8.4.tgz#7d5ef4dc4e2985fdc607d0f30ff79a8453abe652"
+  integrity sha512-CD+AkXzg8J72JrE6ocmuBEJfGzEzu/bzkD6sFXFDDB5yji9N20JofXZlN6n0+CaPJuIi+e4YLCbGsyPFKkfNQA==
+  dependencies:
+    "@tanstack/query-core" "5.8.3"
+
 "@testing-library/dom@^7.28.1":
   version "7.31.2"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.31.2.tgz#df361db38f5212b88555068ab8119f5d841a8c4a"