Remove hacky prefetcher

src/transaction/NavButton.tsx

@@ -1,5 +1,7 @@
-import { PropsWithChildren } from "react";
+import React, { PropsWithChildren, useContext, useState } from "react";
 import { NavLink } from "react-router-dom";
+import { RuntimeContext } from "../useRuntime";
+import { useTransactionBySenderAndNonce } from "../useErigonHooks";
 import { ChecksummedAddress } from "../types";
 import { addressByNonceURL } from "../url";
 
@@ -16,6 +18,8 @@ const NavButton: React.FC<PropsWithChildren<NavButtonProps>> = ({
   disabled,
   children,
 }) => {
+  const [prefetch, setPrefetch] = useState<boolean>(false);
+
   if (disabled) {
     return (
       <span className="bg-link-blue/10 text-gray-300 rounded px-2 py-1 text-xs">
@@ -25,13 +29,36 @@ const NavButton: React.FC<PropsWithChildren<NavButtonProps>> = ({
   }
 
   return (
-    <NavLink
-      className="bg-link-blue/10 text-link-blue hover:bg-link-blue/100 hover:text-white rounded px-2 py-1 text-xs"
-      to={addressByNonceURL(sender, nonce)}
-    >
-      {children}
-    </NavLink>
+    <>
+      <NavLink
+        className="bg-link-blue/10 text-link-blue hover:bg-link-blue/100 hover:text-white rounded px-2 py-1 text-xs"
+        to={addressByNonceURL(sender, nonce)}
+        onMouseOver={() => setPrefetch(true)}
+      >
+        {children}
+      </NavLink>
+      {prefetch && <Prefetcher checksummedAddress={sender} nonce={nonce} />}
+    </>
   );
 };
 
+type PrefetcherProps = {
+  checksummedAddress: ChecksummedAddress;
+  nonce: number;
+};
+
+const Prefetcher: React.FC<PrefetcherProps> = ({
+  checksummedAddress,
+  nonce,
+}) => {
+  const { provider } = useContext(RuntimeContext);
+  const _txHash = useTransactionBySenderAndNonce(
+    provider,
+    checksummedAddress,
+    nonce
+  );
+
+  return <></>;
+};
+
 export default NavButton;

src/transaction/NavNonce.tsx

@@ -1,15 +1,11 @@
-import React, { useContext, useEffect } from "react";
+import React, { useContext } 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";
 import NavButton from "./NavButton";
 import { ChecksummedAddress } from "../types";
 import { RuntimeContext } from "../useRuntime";
-import {
-  prefetchTransactionBySenderAndNonce,
-  useTransactionCount,
-} from "../useErigonHooks";
-import { useSWRConfig } from "swr";
+import { useTransactionCount } from "../useErigonHooks";
 
 type NavNonceProps = {
   sender: ChecksummedAddress;
@@ -20,25 +16,6 @@ const NavNonce: React.FC<NavNonceProps> = ({ sender, nonce }) => {
   const { provider } = useContext(RuntimeContext);
   const count = useTransactionCount(provider, sender);
 
-  // Prefetch
-  const swrConfig = useSWRConfig();
-  useEffect(() => {
-    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,
-        count - 1
-      );
-    }
-  }, [swrConfig, provider, sender, nonce, count]);
-
   return (
     <div className="pl-2 self-center flex space-x-1">
       <NavButton sender={sender} nonce={nonce - 1} disabled={nonce === 0}>

src/useErigonHooks.ts

@@ -10,7 +10,7 @@ import { Contract } from "@ethersproject/contracts";
 import { defaultAbiCoder } from "@ethersproject/abi";
 import { BigNumber } from "@ethersproject/bignumber";
 import { arrayify, hexDataSlice, isHexString } from "@ethersproject/bytes";
-import useSWR, { useSWRConfig } from "swr";
+import useSWR from "swr";
 import useSWRImmutable from "swr/immutable";
 import { getInternalOperations } from "./nodeFunctions";
 import {
@@ -527,25 +527,6 @@ const getTransactionBySenderAndNonceFetcher =
     return result;
   };
 
-export const prefetchTransactionBySenderAndNonce = (
-  { mutate }: ReturnType<typeof useSWRConfig>,
-  provider: JsonRpcProvider,
-  sender: ChecksummedAddress,
-  nonce: number
-) => {
-  const key: TransactionBySenderAndNonceKey = {
-    network: provider.network.chainId,
-    sender,
-    nonce,
-  };
-  mutate(key, (curr: any) => {
-    if (curr) {
-      return curr;
-    }
-    return getTransactionBySenderAndNonceFetcher(provider)(key);
-  });
-};
-
 export const useTransactionBySenderAndNonce = (
   provider: JsonRpcProvider | undefined,
   sender: ChecksummedAddress | undefined,