Fix/apy chart infinity

src/components/pool/AverageApyCard/AverageApyCard.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useMemo, useCallback } from 'react'
 import { ChartCard } from '../../cards/ChartCard/ChartCard'
 import classNames from './AverageApyCard.module.pcss'
 import type { ChartData } from '../../../types/utils'
@@ -19,25 +19,27 @@ const apyDescription =
 	'APY (Annual Percentage Yield) is calculated on the basis of the average fee earned by the pool in the previous week, extrapolated for the year.'
 
 export const AverageApyCard = ({ fees, isLoading }: Props) => {
-	const { poolLiquidity } = useGetLiquidity()
+	const { poolLiquidity, isLoading: isLiquidityLoading } = useGetLiquidity()
 	const [apyData, setApyData] = useState<ChartData[]>([])
 	const [activeFilter, setActiveFilter] = useState(timeFilters[timeFilters.length - 1])
 	const [commonValue, setCommonValue] = useState<string>('')
 
-	const handleAPY = async (fees: Fee[]) => {
-		try {
-			const feeData: ChartData[] = fees
-				.filter(fee => {
-					const feeTime = fee.timestamp
-					const { startTime, endTime } = activeFilter
-					return (!startTime || feeTime >= startTime) && (!endTime || feeTime <= endTime)
-				})
-				.map(fee => ({
-					time: fee.timestamp * 1000,
-					value: fee.feeMade,
-				}))
+	const filteredFeeData = useMemo(() => {
+		return fees
+			.filter(fee => {
+				const feeTime = fee.timestamp
+				const { startTime, endTime } = activeFilter
+				return (!startTime || feeTime >= startTime) && (!endTime || feeTime <= endTime)
+			})
+			.map(fee => ({
+				time: fee.timestamp * 1000,
+				value: fee.feeMade,
+			}))
+	}, [fees, activeFilter])
 
-			const groupedWeeklyFees = groupDataByWeeks(getUniqueChatData(feeData))
+	const handleAPY = useCallback(async () => {
+		try {
+			const groupedWeeklyFees = groupDataByWeeks(getUniqueChatData(filteredFeeData))
 
 			if (groupedWeeklyFees.length < 2) {
 				console.warn('Not enough data to calculate APY')
@@ -52,32 +54,36 @@ export const AverageApyCard = ({ fees, isLoading }: Props) => {
 					}
 				}
 				const previousWeekFees = groupedWeeklyFees[index - 1].value
-				const apy = ((previousWeekFees * 52) / poolLiquidity) * 100
+				const apy = poolLiquidity !== 0 ? ((previousWeekFees * 52) / poolLiquidity) * 100 : Infinity
 				return {
 					time: week.time,
 					value: apy,
 				}
 			})
 
 			const previousWeekFees = groupedWeeklyFees[groupedWeeklyFees.length - 2].value
-			const apy = ((previousWeekFees * 52) / poolLiquidity) * 100
+			const apy = poolLiquidity !== 0 ? ((previousWeekFees * 52) / poolLiquidity) * 100 : Infinity
 
-			setCommonValue(toLocaleNumber(apy).toString())
+			if (apy === Infinity) {
+				setCommonValue('Loading...')
+			} else {
+				setCommonValue(toLocaleNumber(apy).toString())
+			}
 			setApyData(weeklyApyData)
 		} catch (error) {
 			console.error('Error calculating APY:', error)
 		}
-	}
+	}, [filteredFeeData, poolLiquidity])
 
 	useEffect(() => {
-		if (!fees.length) return
-		void handleAPY(fees)
-	}, [fees, activeFilter])
+		if (!fees.length || isLiquidityLoading) return
+		void handleAPY()
+	}, [fees, activeFilter, handleAPY, isLiquidityLoading])
 
 	return (
 		<ChartCard
 			description={apyDescription}
-			isLoading={isLoading}
+			isLoading={isLoading || isLiquidityLoading || commonValue === 'Loading...'}
 			className={classNames.averageApyCard}
 			setActiveItem={setActiveFilter}
 			activeItem={activeFilter}