Add prefetch to nonce +-2

src/transaction/NavButton.tsx

@@ -14,7 +14,7 @@ const NavButton: React.FC<NavButtonProps> = ({
 }) => {
   if (disabled || txHash === undefined) {
     return (
-      <span className="bg-link-blue bg-opacity-10 text-gray-400 rounded px-2 py-1 text-xs">
+      <span className="bg-link-blue bg-opacity-10 text-gray-300 rounded px-2 py-1 text-xs">
         {children}
       </span>
     );
@@ -22,7 +22,7 @@ const NavButton: React.FC<NavButtonProps> = ({
 
   return (
     <NavLink
-      className="transition-colors bg-link-blue bg-opacity-10 text-link-blue hover:bg-opacity-100 hover:text-white disabled:bg-link-blue disabled:text-gray-400 disabled:cursor-default rounded px-2 py-1 text-xs"
+      className="bg-link-blue bg-opacity-10 text-link-blue hover:bg-opacity-100 hover:text-white rounded px-2 py-1 text-xs"
       to={transactionURL(txHash)}
     >
       {children}

src/transaction/NavNonce.tsx

@@ -6,9 +6,11 @@ import NavButton from "./NavButton";
 import { ChecksummedAddress } from "../types";
 import { RuntimeContext } from "../useRuntime";
 import {
+  prefetchTransactionBySenderAndNonce,
   useTransactionBySenderAndNonce,
   useTransactionCount,
 } from "../useErigonHooks";
+import { useSWRConfig } from "swr";
 
 type NavNonceProps = {
   sender: ChecksummedAddress;
@@ -34,8 +36,27 @@ const NavNonce: React.FC<NavNonceProps> = ({ sender, nonce }) => {
     count !== undefined ? count - 1 : undefined
   );
 
+  // Prefetch
+  const swrConfig = useSWRConfig();
+  const prefetch = () => {
+    if (provider && sender && nonce !== undefined) {
+      prefetchTransactionBySenderAndNonce(
+        swrConfig,
+        provider,
+        sender,
+        nonce - 2
+      );
+      prefetchTransactionBySenderAndNonce(
+        swrConfig,
+        provider,
+        sender,
+        nonce + 2
+      );
+    }
+  };
+
   return (
-    <div className="pl-2 self-center flex space-x-1">
+    <div className="pl-2 self-center flex space-x-1" onMouseEnter={prefetch}>
       <NavButton txHash={prevTxHash} disabled={nonce === 0}>
         <FontAwesomeIcon icon={faChevronLeft} />
       </NavButton>

src/useErigonHooks.ts

@@ -6,6 +6,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 { getInternalOperations } from "./nodeFunctions";
 import {
   TokenMetas,
@@ -507,24 +508,52 @@ export const useTransactionCount = (
   provider: JsonRpcProvider | undefined,
   sender: ChecksummedAddress | undefined
 ): number | undefined => {
-  const [count, setCount] = useState<number | undefined>();
+  const { data, error } = useSWR(
+    provider && sender ? { provider, sender } : null,
+    async ({ provider, sender }): Promise<number | undefined> =>
+      provider.getTransactionCount(sender)
+  );
 
-  useEffect(() => {
+  if (error) {
-    // Reset
+    return undefined;
-    setCount(undefined);
+  }
+  return data;
+};
 
-    if (provider === undefined || sender === undefined) {
+type TransactionBySenderAndNonceKey = {
-      return;
+  provider: JsonRpcProvider;
+  sender: ChecksummedAddress;
+  nonce: number;
+};
+
+const getTransactionBySenderAndNonceFetcher = async ({
+  provider,
+  sender,
+  nonce,
+}: TransactionBySenderAndNonceKey): Promise<string | undefined> => {
+  const result = (await provider.send("ots_getTransactionBySenderAndNonce", [
+    sender,
+    nonce,
+  ])) as string;
+
+  // Empty or success
+  if (result === "0x") {
+    return undefined;
   }
 
-    const readCount = async () => {
+  return result;
-      const _count = await provider.getTransactionCount(sender);
+};
-      setCount(_count);
-    };
-    readCount();
-  }, [provider, sender]);
 
-  return count;
+export const prefetchTransactionBySenderAndNonce = (
+  { cache, mutate }: ReturnType<typeof useSWRConfig>,
+  provider: JsonRpcProvider,
+  sender: ChecksummedAddress,
+  nonce: number
+) => {
+  const key: TransactionBySenderAndNonceKey = { provider, sender, nonce };
+  if (cache.get(key)) {
+    mutate(key, getTransactionBySenderAndNonceFetcher(key));
+  }
 };
 
 export const useTransactionBySenderAndNonce = (
@@ -532,37 +561,19 @@ export const useTransactionBySenderAndNonce = (
   sender: ChecksummedAddress | undefined,
   nonce: number | undefined
 ): string | undefined => {
-  const [txHash, setTxHash] = useState<string | undefined>();
+  const { data, error } = useSWR<
+    string | undefined,
+    any,
+    TransactionBySenderAndNonceKey | null
+  >(
+    provider && sender && nonce !== undefined
+      ? { provider, sender, nonce }
+      : null,
+    getTransactionBySenderAndNonceFetcher
+  );
 
-  useEffect(() => {
+  if (error) {
-    // Reset
+    return undefined;
-    setTxHash(undefined);
-
-    if (
-      provider === undefined ||
-      sender === undefined ||
-      nonce === undefined ||
-      nonce < 0
-    ) {
-      return;
   }
-
+  return data;
-    const readTxHash = async () => {
-      const result = (await provider.send(
-        "ots_getTransactionBySenderAndNonce",
-        [sender, nonce]
-      )) as string;
-
-      // Empty or success
-      if (result === "0x") {
-        setTxHash(undefined);
-        return;
-      }
-
-      setTxHash(result);
-    };
-    readTxHash();
-  }, [provider, sender, nonce]);
-
-  return txHash;
 };