resolve issue of continous loading

EveripediaNetwork · Sep 19, 2024 · e9c41ec · e9c41ec
1 parent 40ca489
commit e9c41ec
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 11 deletions.
diff --git a/src/components/client/StatsPage.tsx b/src/components/client/StatsPage.tsx
@@ -142,6 +142,8 @@ const StatsPage = () => {
                     if (item.label !== val.omitPrefix) {
                       valuePrefix = val.valuePrefix
                     }
+
+                    const isFailedToFetchData = item.value === 0
                     return (
                       <Flex key={id} align="center" gap="4">
                         {item.icon && (
@@ -160,7 +162,9 @@ const StatsPage = () => {
                           fontSize={{ base: 'sm', md: 'md' }}
                           fontWeight="semibold"
                         >
-                          {showData(item.value, valuePrefix)}
+                          {isFailedToFetchData
+                            ? '-'
+                            : showData(item.value, valuePrefix)}
                         </Text>
                       </Flex>
                     )

diff --git a/src/utils/stats-data.ts b/src/utils/stats-data.ts
@@ -8,7 +8,6 @@ import {
   maticHolders,
   POLYGON_CONTRACT_ADDRESS,
   POLYGON_TOKEN_ADDRESSES,
-  // TOKEN_PAIR,
   twitterFollowers,
 } from '@/data/StatsData'
 import { Alchemy } from 'alchemy-sdk'

diff --git a/src/utils/use-stats-data.ts b/src/utils/use-stats-data.ts
@@ -9,6 +9,30 @@ import {
   getVolume,
 } from '@/utils/stats-data'
 
+const initialDataForTokenHolders = {
+  holders: { eos: 0, eth: 0, matic: 0, bsc: 0, hiiq: 0 },
+}
+
+const initialDataForVolume = {
+  volume: { eos: 0, eth: 0, matic: 0, bsc: 0, hiiq: 0 },
+}
+
+const initialDataForIQ = {
+  Iq: { locked: 0, mcap: 0, volume: 0 },
+}
+
+const initialDataForLPs = {
+  lp: { fraxSwap: 0, quickSwap: 0, polygonSwap: 0, sushiSwap: 0 },
+}
+
+const initialDataForSocialData = {
+  social: { twitter: 0, reddit: 0 },
+}
+
+const initialDataForEpData = {
+  ep: { articles: 0, edits: 0 },
+}
+
 const getMappedValue = (object: Dict) => {
   let val = 0
   Object.values(object).forEach((h) => {
@@ -17,17 +41,30 @@ const getMappedValue = (object: Dict) => {
   return val
 }
 
-function timeoutPromise(promise: Promise<any>, ms: number): Promise<any> {
+function timeoutPromise<T>(promise: Promise<T>, ms: number): Promise<T> {
   let timeoutId: NodeJS.Timeout
-  const timeoutPromise = new Promise((_, reject) => {
+  const timeoutPromise = new Promise<never>((_, reject) => {
     timeoutId = setTimeout(() => {
       reject(new Error(`Promise timed out after ${ms} ms`))
     }, ms)
   })
 
   return Promise.race([promise, timeoutPromise]).finally(() =>
     clearTimeout(timeoutId),
-  )
+  ) as Promise<T>
+}
+
+const fetchWithTimeout = async <T>(
+  fetchFn: () => Promise<T>,
+  timeout: number,
+  initialData: T,
+): Promise<T> => {
+  try {
+    return await timeoutPromise(fetchFn(), timeout)
+  } catch (error) {
+    console.error(`Failed to fetch data: ${error}`)
+    return initialData
+  }
 }
 
 export function useStatsData() {
@@ -40,12 +77,12 @@ export function useStatsData() {
       const TIMEOUT = 10000
 
       const results = await Promise.allSettled([
-        timeoutPromise(getTokenHolders(), TIMEOUT),
-        timeoutPromise(getVolume(), TIMEOUT),
-        timeoutPromise(getIQ(), TIMEOUT),
-        timeoutPromise(getLPs(), TIMEOUT),
-        timeoutPromise(getSocialData(), TIMEOUT),
-        timeoutPromise(getEpData(), TIMEOUT),
+        fetchWithTimeout(getTokenHolders, TIMEOUT, initialDataForTokenHolders),
+        fetchWithTimeout(getVolume, TIMEOUT, initialDataForVolume),
+        fetchWithTimeout(getIQ, TIMEOUT, initialDataForIQ),
+        fetchWithTimeout(getLPs, TIMEOUT, initialDataForLPs),
+        fetchWithTimeout(getSocialData, TIMEOUT, initialDataForSocialData),
+        fetchWithTimeout(getEpData, TIMEOUT, initialDataForEpData),
       ])
 
       const newData: Dict = {}
@@ -61,6 +98,7 @@ export function useStatsData() {
       })
 
       setData(newData)
+
       setTotals({
         holders: getMappedValue(newData.holders),
         volume: getMappedValue(newData.volume),