Refetch transactions and metadatas at an interval after the last refetch

components/bank/components/historyBox.tsx

@@ -1,10 +1,15 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { TransactionAmount, TxMessage } from '../types';
 import { shiftDigits, formatLargeNumber, formatDenom } from '@/utils';
 import { getHandler } from '@/components/bank/handlers/handlerRegistry';
 import { MetadataSDKType } from '@liftedinit/manifestjs/dist/codegen/cosmos/bank/v1beta1/bank';
 import { useTokenFactoryDenomsMetadata } from '@/hooks';
 import TxInfoModal from '../modals/txInfo';
+import { useIntervalDebounceEffect } from '@/hooks/useDebounceEffect';
+
+// Interval to refresh the history box transaction and metadata.
+// This is used as a delay between successful queries.
+const HISTORY_BOX_REFRESH_INTERVAL = 2000;
 
 export interface TransactionGroup {
   tx_hash: string;
@@ -36,16 +41,22 @@ export function HistoryBox({
   totalPages: number;
   txLoading: boolean;
   isError: boolean;
-  refetch: () => void;
+  refetch: () => Promise<unknown>;
   skeletonGroupCount: number;
   skeletonTxCount: number;
   isGroup?: boolean;
 }>) {
   const [selectedTx, setSelectedTx] = useState<TxMessage | null>(null);
-  const { metadatas, isMetadatasLoading } = useTokenFactoryDenomsMetadata();
+  const { metadatas, isMetadatasLoading, refetchMetadatas } = useTokenFactoryDenomsMetadata();
 
   const isLoading = initialLoading || txLoading || isMetadatasLoading;
 
+  useIntervalDebounceEffect(
+    () => Promise.all([refetch(), refetchMetadatas()]),
+    HISTORY_BOX_REFRESH_INTERVAL,
+    [refetch, refetchMetadatas]
+  );
+
   function formatDateShort(dateString: string): string {
     const date = new Date(dateString);
     return date.toLocaleString('en-US', {

components/groups/components/groupControls.tsx

@@ -42,7 +42,7 @@ type GroupControlsProps = {
   denomLoading: boolean;
   isDenomError: boolean;
   refetchBalances: () => void;
-  refetchHistory: () => void;
+  refetchHistory: () => Promise<unknown>;
   refetchDenoms: () => void;
   refetchGroupInfo: () => void;
   pageSize: number;

hooks/useDebounceEffect.ts

@@ -0,0 +1,41 @@
+import { DependencyList, useEffect } from 'react';
+
+/**
+ * Create a debounce effect that will call the callback function after the delay has passed,
+ * on an interval.
+ * @param callback The function to call
+ * @param delay The delay in milliseconds
+ * @param dependencies The dependencies to watch for changes
+ */
+export const useIntervalDebounceEffect = (
+  callback: () => Promise<unknown>,
+  delay: number,
+  dependencies?: DependencyList
+) => {
+  useEffect(() => {
+    let done = false;
+    let latestTimer: Timer | undefined;
+
+    async function inner() {
+      if (done) return;
+
+      try {
+        await callback();
+      } catch (error) {
+        console.error('Error during refetch:', error);
+      } finally {
+        if (!done) {
+          latestTimer = setTimeout(inner, delay);
+        }
+      }
+    }
+
+    latestTimer = setTimeout(inner, delay);
+
+    return () => {
+      done = true;
+      clearTimeout(latestTimer);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, dependencies);
+};