Fix prefetch

src/transaction/NavNonce.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons/faChevronLeft";
 import { faChevronRight } from "@fortawesome/free-solid-svg-icons/faChevronRight";
@@ -22,25 +22,22 @@ const NavNonce: React.FC<NavNonceProps> = ({ sender, nonce }) => {
 
   // Prefetch
   const swrConfig = useSWRConfig();
-  const prefetch = () => {
+  useEffect(() => {
-    if (provider && sender && nonce !== undefined) {
+    if (!provider || !sender || nonce === undefined || count === undefined) {
+      return;
+    }
+
+    prefetchTransactionBySenderAndNonce(swrConfig, provider, sender, nonce - 1);
+    prefetchTransactionBySenderAndNonce(swrConfig, provider, sender, nonce + 1);
+    if (count > 0) {
       prefetchTransactionBySenderAndNonce(
         swrConfig,
         provider,
         sender,
-        nonce - 2
+        count - 1
-      );
-      prefetchTransactionBySenderAndNonce(
-        swrConfig,
-        provider,
-        sender,
-        nonce + 2
       );
     }
-  };
+  }, [swrConfig, provider, sender, nonce, count]);
-
-  // Always prefetch
-  prefetch();
 
   return (
     <div className="pl-2 self-center flex space-x-1">

src/useErigonHooks.ts

@@ -530,39 +530,49 @@ export const useTransactionCount = (
 };
 
 type TransactionBySenderAndNonceKey = {
-  provider: JsonRpcProvider;
+  network: number;
   sender: ChecksummedAddress;
   nonce: number;
 };
 
-export const getTransactionBySenderAndNonceFetcher = async ({
+const getTransactionBySenderAndNonceFetcher =
-  provider,
+  (provider: JsonRpcProvider) =>
-  sender,
+  async ({
-  nonce,
+    network,
-}: TransactionBySenderAndNonceKey): Promise<string | null | undefined> => {
-  if (nonce < 0) {
-    return undefined;
-  }
-
-  const result = (await provider.send("ots_getTransactionBySenderAndNonce", [
     sender,
     nonce,
-  ])) as string;
+  }: TransactionBySenderAndNonceKey): Promise<string | null | undefined> => {
+    if (nonce < 0) {
+      return undefined;
+    }
 
-  // Empty or success
+    const result = (await provider.send("ots_getTransactionBySenderAndNonce", [
-  return result;
+      sender,
-};
+      nonce,
+    ])) as string;
+
+    // Empty or success
+    return result;
+  };
 
 export const prefetchTransactionBySenderAndNonce = (
-  { cache, mutate }: ReturnType<typeof useSWRConfig>,
+  { mutate }: ReturnType<typeof useSWRConfig>,
   provider: JsonRpcProvider,
   sender: ChecksummedAddress,
   nonce: number
 ) => {
-  const key: TransactionBySenderAndNonceKey = { provider, sender, nonce };
+  const key: TransactionBySenderAndNonceKey = {
-  if (cache.get(key)) {
+    network: provider.network.chainId,
-    mutate(key, getTransactionBySenderAndNonceFetcher(key));
+    sender,
-  }
+    nonce,
+  };
+  mutate(key, (curr: any) => {
+    if (curr) {
+      return curr;
+    }
+    return getTransactionBySenderAndNonceFetcher(provider)(key);
+  });
+  // }
 };
 
 export const useTransactionBySenderAndNonce = (
@@ -576,9 +586,13 @@ export const useTransactionBySenderAndNonce = (
     TransactionBySenderAndNonceKey | null
   >(
     provider && sender && nonce !== undefined
-      ? { provider, sender, nonce }
+      ? {
+          network: provider.network.chainId,
+          sender,
+          nonce,
+        }
       : null,
-    getTransactionBySenderAndNonceFetcher
+    getTransactionBySenderAndNonceFetcher(provider!)
   );
 
   if (error) {