fix: undefined router address make endless loop getPairPrices

src/pages/info/pairs/[address].tsx

@@ -4,7 +4,7 @@ import Pool from 'views/Info/Pools/PoolPage'
 
 const PoolPage = () => {
   const router = useRouter()
-  return <Pool address={String(router.query.address)} />
+  return <Pool address={router.query.address ? String(router.query.address) : undefined} />
 }
 
 PoolPage.Layout = InfoPageLayout

src/state/info/hooks.ts

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState, useMemo } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { getUnixTime, startOfHour, Duration, sub } from 'date-fns'
 import useSWRImmutable from 'swr/immutable'
+import useSWR from 'swr'
 import { AppState, AppDispatch } from 'state'
 import { isAddress } from 'utils'
 import { Transaction } from 'state/info/types'
@@ -495,11 +496,18 @@ export const usePoolTransactionsSWR = (address: string): Transaction[] | undefin
 
 export const usePoolChartDataSWR = (address: string): ChartEntry[] | undefined => {
 	const type = checkIsStableSwap() ? 'stableSwap' : 'swap'
-	const { data } = useSWRImmutable(
-		[`info/pool/chartData/${address}/${type}`],
+
+	const { data } = useSWR(
+		address ? `info/pool/chartData/${address}/${type}` : null,
 		() => fetchPoolChartData(address),
-		SWR_SETTINGS_WITHOUT_REFETCH,
+		{
+			...SWR_SETTINGS_WITHOUT_REFETCH,
+			revalidateIfStale: false,
+			revalidateOnFocus: false,
+			revalidateOnReconnect: false,
+		},
 	)
+
 	return data?.data ?? undefined
 }
 

src/state/info/queries/helpers.ts

@@ -78,6 +78,13 @@ export const fetchChartData = async (
 	let skip = 0
 	let allFound = false
 
+	if (!address) {
+		return {
+			data: [],
+			error: false,
+		}
+	}
+
 	while (!allFound) {
 		// eslint-disable-next-line no-await-in-loop
 		const { data, error: fetchError } = await getEntityDayDatas(skip, address)

src/state/info/queries/pools/chartData.ts

@@ -13,6 +13,8 @@ import { mapPairDayData, fetchChartData } from '../helpers'
  */
 const getPoolChartData = async (skip: number, address: string): Promise<{ data?: ChartEntry[]; error: boolean }> => {
 	try {
+		if (!address || address === undefined || address === 'undefined') return { error: true, data: [] }
+
 		const query = gql`
 			query pairDayDatas($startTime: Int!, $skip: Int!, $address: Bytes!) {
 				pairDayDatas(
@@ -42,6 +44,8 @@ const getPoolChartData = async (skip: number, address: string): Promise<{ data?:
 }
 
 const fetchPoolChartData = async (address: string): Promise<{ data?: ChartEntry[]; error: boolean }> => {
+	if (!address || address === undefined || address === 'undefined') return { error: true, data: [] }
+
 	return fetchChartData(getPoolChartData, address)
 }
 

src/views/Info/Pools/PoolPage.tsx

@@ -55,7 +55,7 @@ const PoolPage: React.FC<React.PropsWithChildren<{ address: string }>> = ({ addr
 	)
 
 	// In case somebody pastes checksummed address into url (since GraphQL expects lowercase address)
-	const address = routeAddress.toLowerCase()
+	const address = routeAddress ? routeAddress.toLowerCase() : undefined
 
 	const poolData = usePoolDatasSWR(useMemo(() => [address], [address]))[0]
 	const chartData = usePoolChartDataSWR(address)