perf: reduce call some APIs

pages/charts.tsx

@@ -17,7 +17,7 @@ const Charts: React.FC<NextPage> = _ => {
 			</Head>
 			<Container>
 				<div className="col md-wrap" style={{ paddingTop: '150px' }}>
-					<Overview />
+					<Overview hasFetchLatestBlock />
 					<Transactions />
 					<Address />
 					<Gas />

slices/commonSlice.ts

@@ -3,11 +3,13 @@ import { RootState } from 'store'
 
 // Define a type for the slice state
 export interface CommonState {
+	latestBlock: number
 	astraSummary: AstraSummary | undefined
 	validatorSummary: ValidatorData[] | []
 }
 // Define the initial state using that type
 const initialState: CommonState = {
+	latestBlock: 0,
 	astraSummary: undefined,
 	validatorSummary: []
 }
@@ -16,6 +18,9 @@ export const commonSlice = createSlice({
 	name: 'common',
 	initialState,
 	reducers: {
+		setLatestBlock: (state, action: PayloadAction<number>) => {
+			state.latestBlock = action.payload
+		},
 		setAstraSummary: (state, action: PayloadAction<AstraSummary>) => {
 			state.astraSummary = action.payload
 		},
@@ -26,10 +31,11 @@ export const commonSlice = createSlice({
 	}
 })
 
+export const getLatestBlock = (state: RootState): number => state['common'].latestBlock
 export const getAstraSummary = (state: RootState): AstraSummary => state['common'].astraSummary
 export const getValidatorSummary = (state: RootState): ValidatorData[] => state['common'].validatorSummary
 
 // Action creators are generated for each case reducer function
-export const { setAstraSummary, setValidatorSummary } = commonSlice.actions
+export const { setLatestBlock, setAstraSummary, setValidatorSummary } = commonSlice.actions
 
 export default commonSlice.reducer

views/block/hook/useBlock.ts

@@ -2,9 +2,12 @@ import API_LIST from 'api/api_list'
 import usePagination from 'hooks/usePagination'
 import { differenceWith, isEmpty } from 'lodash'
 import { useCallback, useEffect, useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { setLatestBlock } from 'slices/commonSlice'
 import useSWR from 'swr'
 
 export default function useBlock() {
+	const dispatch = useDispatch()
 	const [_items, _setBlockItem] = useState<BlockItem[]>()
 	const { pagination, setPagination } = usePagination('/blocks')
 	const _fetchCondition = () => {
@@ -33,6 +36,10 @@ export default function useBlock() {
 
 	useEffect(() => {
 		if (data?.result) {
+			// Dispatch latest block for cache
+			// Do not call directly get eth-block-number -> It dumps BE
+			dispatch(setLatestBlock(data?.result?.[0].blockHeight + 1))
+
 			if (pagination.page === 1 && isEmpty(_items)) {
 				_setBlockItem(data?.result)
 				setPagination({

views/homepage/MarketStatistics.tsx

@@ -3,20 +3,23 @@ import API_LIST from 'api/api_list'
 import clsx from 'clsx'
 import StaticsCard from 'components/Card/Layout/StaticsCard'
 import numeral from 'numeral'
+import { getLatestBlock } from 'slices/commonSlice'
 import useSWR from 'swr'
 import { Icon } from 'utils/enum'
+import { useAppSelector } from '../../store/hooks'
 
 interface Props {
 	classes?: string
 	estimateCountedData: EstimateCountedInfo
 	commonStatsData: CommonStats
+	hasFetchLatestBlock?: boolean
 }
 
 function getLastestBlock(latestBlock: LatestBlock) {
 	return latestBlock ? parseInt(latestBlock.result.result) : undefined
 }
 
-const MarketStatistics = ({ classes, commonStatsData, estimateCountedData }: Props) => {
+const MarketStatistics = ({ classes, hasFetchLatestBlock, commonStatsData, estimateCountedData }: Props) => {
 	const { isMobile } = useMobileLayout('small')
 	const _fetchCondition = key => {
 		switch (key) {
@@ -27,10 +30,14 @@ const MarketStatistics = ({ classes, commonStatsData, estimateCountedData }: Pro
 	const { data: latestBlockRaw, error: latestBlockError } = useSWR<LatestBlock>(_fetchCondition('latest_block'), {
 		refreshInterval: 2000
 	})
-	const latestBlock = getLastestBlock(latestBlockRaw)
+
+	let latestBlock = useAppSelector(getLatestBlock)
+	if (hasFetchLatestBlock) {
+		latestBlock = getLastestBlock(latestBlockRaw)
+	}
 
 	return (
-		<div>
+		<div className={classes}>
 			<div className={clsx('row md-wrap', !isMobile && 'margin-bottom-2xl')}>
 				<StaticsCard
 					classes={isMobile ? 'margin-bottom-lg' : 'margin-right-xl'}

views/homepage/Overview.tsx

@@ -24,7 +24,7 @@ function getGasAvgData(gasAvgData): GasTracker {
 	return gasAvgData
 }
 
-const Overview = () => {
+const Overview = ({ hasFetchLatestBlock = false }) => {
 	const { isMobile } = useMobileLayout(1112)
 
 	const _fetchCondition = key => {
@@ -40,12 +40,16 @@ const Overview = () => {
 		}
 	}
 	const { data: estimateCountedDataRaw, error: estimateCountedError } = useSWR<EstimateCountedResponse>(
-		_fetchCondition('estimate_counted_info')
+		_fetchCondition('estimate_counted_info'),
+		{ refreshInterval: 60000 }
 	)
 	const { data: commonStatsDataRaw, error: commonStatsError } = useSWR<CommonStatsResponse>(
-		_fetchCondition('common-stats')
+		_fetchCondition('common-stats'),
+		{ refreshInterval: 60000 }
 	)
-	const { data: gasAvgRaw, error: gasAvgError } = useSWR<GasTrackerResponse>(_fetchCondition('gas_avg'))
+	const { data: gasAvgRaw, error: gasAvgError } = useSWR<GasTrackerResponse>(_fetchCondition('gas_avg'), {
+		refreshInterval: 600000
+	})
 
 	const estimateCountedData = getEstimateCountedData(estimateCountedDataRaw?.result)
 	const commonStatsData = getCommonStatsData(commonStatsDataRaw?.result)
@@ -69,7 +73,11 @@ const Overview = () => {
 						<Price />
 					</Row>
 					<div className={styles.separateBlock} />
-					<MarketStatistics estimateCountedData={estimateCountedData} commonStatsData={commonStatsData} />
+					<MarketStatistics
+						hasFetchLatestBlock={hasFetchLatestBlock}
+						estimateCountedData={estimateCountedData}
+						commonStatsData={commonStatsData}
+					/>
 				</BackgroundCard>
 				{!isMobile && (
 					<div className={clsx('col', styles.centerBlock)}>