feat: Add Refetch Interval to History Data

packages/nextjs/components/Homepage.tsx

@@ -12,7 +12,7 @@ import { useGetHistory } from "~~/hooks/useGetHistory";
 
 const Homepage = ({ hasSeenIntro = false }: { hasSeenIntro: boolean }) => {
   const { address: connectedAddress = "" } = useAccount();
-  const { chainId, isLoading, history, updateHistory } = useGetHistory({ address: connectedAddress });
+  const { chainId, isLoading, history, refetchQuery } = useGetHistory({ address: connectedAddress });
 
   const [showIntro, setShowIntro] = useState(!hasSeenIntro);
   const [isGenerateWalletLoading, setIsGenerateWalletLoading] = useState(false);
@@ -31,7 +31,7 @@ const Homepage = ({ hasSeenIntro = false }: { hasSeenIntro: boolean }) => {
 
   return (
     <BurnerWalletWrapper>
-      <Header isGenerateWalletLoading={isGenerateWalletLoading} showIntro={showIntro} updateHistory={updateHistory} />
+      <Header isGenerateWalletLoading={isGenerateWalletLoading} showIntro={showIntro} updateHistory={refetchQuery} />
       <main>
         <div className="max-w-xl mx-auto">
           <section className="px-6 pb-28 pt-2 divide-y">

packages/nextjs/components/ScaffoldEthAppWithProviders.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { WagmiConfig } from "wagmi";
 import { BlockieAvatar } from "~~/components/scaffold-eth";
 import useWeb3WalletInitialization from "~~/hooks/useWeb3WalletInitialization";
@@ -9,11 +10,12 @@ import { appChains } from "~~/services/web3/wagmiConnectors";
 
 export const ScaffoldEthAppWithProviders = ({ children }: { children: React.ReactNode }) => {
   useWeb3WalletInitialization();
+  const queryClient = new QueryClient();
 
   return (
     <WagmiConfig config={wagmiConfig}>
       <RainbowKitProvider chains={appChains.chains} avatar={BlockieAvatar}>
-        {children}
+        <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
       </RainbowKitProvider>
     </WagmiConfig>
   );

packages/nextjs/hooks/useGetHistory.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { Alchemy, AssetTransfersCategory, AssetTransfersResponse, Network } from "alchemy-sdk";
 import { createPublicClient, hexToBigInt, http } from "viem";
 import * as chains from "viem/chains";
@@ -70,7 +71,6 @@ export const useGetHistory = ({ address }: { address: string }) => {
   const alchemy = useMemo(() => new Alchemy(config), [config]);
 
   const [history, setHistory] = useState<HistoryItemByDate[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
 
   const publicClient = useMemo(
     () =>
@@ -86,99 +86,130 @@ export const useGetHistory = ({ address }: { address: string }) => {
     [chain],
   );
 
-  const updateHistory = useCallback(async () => {
-    setIsLoading(true);
-
-    const dataFrom: AssetTransfersResponse = await alchemy.core.getAssetTransfers({
-      fromBlock: "0x0",
-      fromAddress: address,
-      category: allCategories,
-    });
-
-    const dataTo: AssetTransfersResponse = await alchemy.core.getAssetTransfers({
-      fromBlock: "0x0",
-      toAddress: address,
-      category: allCategories,
-    });
-
-    const dataFromBlockNumbers = dataFrom.transfers.map(item => item.blockNum);
-    const dataToBlockNumbers = dataTo.transfers.map(item => item.blockNum);
-
-    const blockNumbers = dataFromBlockNumbers.concat(dataToBlockNumbers);
-    const blocksData = await Promise.all(
-      blockNumbers.map(blockNumber =>
-        publicClient.getBlock({ blockNumber: hexToBigInt(blockNumber as `0x${string}`) }),
-      ),
-    );
-
-    const historyFrom = dataFrom.transfers.map(
-      item =>
-        ({
-          address: item.to,
-          value: item.value,
-          asset: item.asset,
-          hash: item.hash,
-          type: "sent",
-          category: item.category,
-          categoryLabel: item.category === AssetTransfersCategory.EXTERNAL ? "Sent" : categoryToLabel[item.category],
-          timestamp:
-            blocksData.find(block => block.number === hexToBigInt(item.blockNum as `0x${string}`))?.timestamp || 0,
-          icon:
-            item.category === AssetTransfersCategory.INTERNAL ? (
-              <ArrowPathIcon className="w-5" />
-            ) : (
-              <PaperAirplaneIcon className="w-5" />
-            ),
-        } as HistoryItem),
-    );
-
-    const historyTo = dataTo.transfers.map(
-      item =>
-        ({
-          address: item.from,
-          value: item.value,
-          asset: item.asset,
-          hash: item.hash,
-          type: "received",
-          category: item.category,
-          categoryLabel:
-            item.category === AssetTransfersCategory.EXTERNAL ? "Received" : categoryToLabel[item.category],
-          timestamp:
-            blocksData.find(block => block.number === hexToBigInt(item.blockNum as `0x${string}`))?.timestamp || 0,
-          icon:
-            item.category === AssetTransfersCategory.INTERNAL ? (
-              <ArrowPathIcon className="w-5" />
-            ) : (
-              <ArrowDownTrayIcon className="w-5" />
-            ),
-        } as HistoryItem),
-    );
-    const history = historyFrom.concat(historyTo);
-    const sortedHistory = history.sort((a, b) => Number(b.timestamp) - Number(a.timestamp));
-    const historyByDate: HistoryItemByDate[] = [];
-    let lastDate = "";
-    sortedHistory.forEach(item => {
-      const date = new Date(Number(item.timestamp * 1000n)).toDateString();
-      if (date !== lastDate) {
-        lastDate = date;
-        historyByDate.push({ date, items: [] });
-      }
-      historyByDate[historyByDate.length - 1].items.push(item);
-    });
-    setHistory(historyByDate);
-    setIsLoading(false);
-  }, [address, alchemy.core, allCategories, publicClient]);
+  const {
+    data: dataFromQuery = { transfers: [] },
+    isLoading: isDataFromLoading,
+    isFetched: isDataFromFetched,
+    refetch: refetchDataFrom,
+  } = useQuery({
+    queryKey: ["historyFrom", address, allCategories, chain?.id],
+    queryFn: async () => {
+      const data = await alchemy.core.getAssetTransfers({
+        fromBlock: "0x0",
+        fromAddress: address,
+        category: allCategories,
+      });
+
+      return data;
+    },
+    refetchInterval: scaffoldConfig.pollingInterval,
+  });
+
+  const {
+    data: dataToQuery = { transfers: [] },
+    isLoading: isDataToLoading,
+    isFetched: isDataToFetched,
+    refetch: refetchDataTo,
+  } = useQuery({
+    queryKey: ["historyTo", address, allCategories, chain?.id],
+    queryFn: async () => {
+      const data = alchemy.core.getAssetTransfers({
+        fromBlock: "0x0",
+        toAddress: address,
+        category: allCategories,
+      });
+
+      return data;
+    },
+    refetchInterval: scaffoldConfig.pollingInterval,
+  });
+
+  const updateHistory = useCallback(
+    async (dataFrom: AssetTransfersResponse, dataTo: AssetTransfersResponse) => {
+      const dataFromBlockNumbers = dataFrom.transfers.map(item => item.blockNum);
+      const dataToBlockNumbers = dataTo.transfers.map(item => item.blockNum);
+
+      const blockNumbers = dataFromBlockNumbers.concat(dataToBlockNumbers);
+      const blocksData = await Promise.all(
+        blockNumbers.map(blockNumber =>
+          publicClient.getBlock({ blockNumber: hexToBigInt(blockNumber as `0x${string}`) }),
+        ),
+      );
+
+      const historyFrom = dataFrom.transfers.map(
+        item =>
+          ({
+            address: item.to,
+            value: item.value,
+            asset: item.asset,
+            hash: item.hash,
+            type: "sent",
+            category: item.category,
+            categoryLabel: item.category === AssetTransfersCategory.EXTERNAL ? "Sent" : categoryToLabel[item.category],
+            timestamp:
+              blocksData.find(block => block.number === hexToBigInt(item.blockNum as `0x${string}`))?.timestamp || 0,
+            icon:
+              item.category === AssetTransfersCategory.INTERNAL ? (
+                <ArrowPathIcon className="w-5" />
+              ) : (
+                <PaperAirplaneIcon className="w-5" />
+              ),
+          } as HistoryItem),
+      );
+
+      const historyTo = dataTo.transfers.map(
+        item =>
+          ({
+            address: item.from,
+            value: item.value,
+            asset: item.asset,
+            hash: item.hash,
+            type: "received",
+            category: item.category,
+            categoryLabel:
+              item.category === AssetTransfersCategory.EXTERNAL ? "Received" : categoryToLabel[item.category],
+            timestamp:
+              blocksData.find(block => block.number === hexToBigInt(item.blockNum as `0x${string}`))?.timestamp || 0,
+            icon:
+              item.category === AssetTransfersCategory.INTERNAL ? (
+                <ArrowPathIcon className="w-5" />
+              ) : (
+                <ArrowDownTrayIcon className="w-5" />
+              ),
+          } as HistoryItem),
+      );
+      const history = historyFrom.concat(historyTo);
+      const sortedHistory = history.sort((a, b) => Number(b.timestamp) - Number(a.timestamp));
+      const historyByDate: HistoryItemByDate[] = [];
+      let lastDate = "";
+      sortedHistory.forEach(item => {
+        const date = new Date(Number(item.timestamp * 1000n)).toDateString();
+        if (date !== lastDate) {
+          lastDate = date;
+          historyByDate.push({ date, items: [] });
+        }
+        historyByDate[historyByDate.length - 1].items.push(item);
+      });
+      setHistory(historyByDate);
+    },
+    [publicClient],
+  );
+
+  const refetchQuery = useCallback(() => {
+    refetchDataFrom();
+    refetchDataTo();
+  }, [refetchDataFrom, refetchDataTo]);
 
   useEffect(() => {
-    if (address && chain) {
-      updateHistory();
+    if (address && chain && isDataFromFetched && isDataToFetched) {
+      updateHistory(dataFromQuery, dataToQuery);
     }
-  }, [address, chain, updateHistory]);
+  }, [address, chain, dataFromQuery, dataToQuery, isDataFromFetched, isDataToFetched, updateHistory]);
 
   return {
     chainId: chain?.id || 1,
     history,
-    isLoading,
-    updateHistory,
+    isLoading: isDataFromLoading || isDataToLoading,
+    refetchQuery,
   };
 };

packages/nextjs/package.json

@@ -17,6 +17,7 @@
     "@ethersproject/providers": "^5.7.2",
     "@heroicons/react": "^2.0.11",
     "@rainbow-me/rainbowkit": "1.3.5",
+    "@tanstack/react-query": "^5.44.0",
     "@uniswap/sdk-core": "^4.0.1",
     "@uniswap/v2-sdk": "^3.0.1",
     "@walletconnect/web3wallet": "^1.12.1",

yarn.lock

@@ -2333,6 +2333,7 @@ __metadata:
     "@ethersproject/providers": ^5.7.2
     "@heroicons/react": ^2.0.11
     "@rainbow-me/rainbowkit": 1.3.5
+    "@tanstack/react-query": ^5.44.0
     "@trivago/prettier-plugin-sort-imports": ^4.1.1
     "@types/node": ^17.0.35
     "@types/nprogress": ^0
@@ -2703,6 +2704,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/query-core@npm:5.44.0":
+  version: 5.44.0
+  resolution: "@tanstack/query-core@npm:5.44.0"
+  checksum: 49876d3caa833022efb20d4fd81570341d8dd92c22b8f9b42c16b5bc980949b1dbebe5662f81d49fc1e0edb91f53efc9b0e67f67ba63e1b6b71e65016701d2e3
+  languageName: node
+  linkType: hard
+
 "@tanstack/query-persist-client-core@npm:4.35.3":
   version: 4.35.3
   resolution: "@tanstack/query-persist-client-core@npm:4.35.3"
@@ -2751,6 +2759,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/react-query@npm:^5.44.0":
+  version: 5.44.0
+  resolution: "@tanstack/react-query@npm:5.44.0"
+  dependencies:
+    "@tanstack/query-core": 5.44.0
+  peerDependencies:
+    react: ^18.0.0
+  checksum: 38a0bfb6243bb1113a339e8effcb0233331e473f0ec5c2dc9295a91c04e6b5ca472058b67d8d691efcdab2b9100339306f63580c65cf8e6afbd8f4b5f969684e
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:2, @tootallnate/once@npm:2.0.0":
   version: 2.0.0
   resolution: "@tootallnate/once@npm:2.0.0"