diff --git a/src/apps/explorer/components/SummaryCardsWidget/useGetSummaryData.ts b/src/apps/explorer/components/SummaryCardsWidget/useGetSummaryData.ts index eec5769a6..bb2f5a6f3 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/useGetSummaryData.ts +++ b/src/apps/explorer/components/SummaryCardsWidget/useGetSummaryData.ts @@ -1,6 +1,6 @@ import { gql } from '@apollo/client' import { COW_SDK } from 'const' -import { useEffect, useState } from 'react' +import { useCallback, useEffect, useState } from 'react' import { useNetworkId } from 'state/network' import { Network } from 'types' @@ -79,19 +79,30 @@ export type TotalSummaryResponse = TotalSummary & { isLoading: boolean } +const FETCH_INTERVAL = 1000 * 10 // 10 seconds + export function useGetSummaryData(): TotalSummaryResponse | undefined { const [summary, setSummary] = useState() const network = useNetworkId() ?? Network.MAINNET - useEffect(() => { + const fetchAndBuildSummary = useCallback(async () => { setSummary((summary) => ({ ...summary, isLoading: true })) // TODO: Once the sdk's runQuery method accepts DocumentNode update this - COW_SDK[network]?.cowSubgraphApi.runQuery(summaryQuery as any).then((data: SummaryQuery) => { - const summary = buildSummary(data) - setSummary({ ...summary, isLoading: false }) - }) + const data = (await COW_SDK[network]?.cowSubgraphApi.runQuery(summaryQuery as any)) as SummaryQuery + const summary = buildSummary(data) + setSummary({ ...summary, isLoading: false }) }, [network]) + useEffect(() => { + fetchAndBuildSummary() + + const id = setInterval(() => { + fetchAndBuildSummary() + }, FETCH_INTERVAL) + + return (): void => clearInterval(id) + }, [fetchAndBuildSummary]) + return summary }