Make nav nonce control dumb; use just urls for navigation; speed up with prefetch

src/transaction/NavButton.tsx

@@ -1,18 +1,21 @@
 import { NavLink } from "react-router-dom";
-import { transactionURL } from "../url";
+import { ChecksummedAddress } from "../types";
+import { addressByNonceURL } from "../url";
 
 // TODO: extract common component with block/NavButton
 type NavButtonProps = {
-  txHash: string | null | undefined;
+  sender: ChecksummedAddress;
+  nonce: number;
   disabled?: boolean;
 };
 
 const NavButton: React.FC<NavButtonProps> = ({
-  txHash,
+  sender,
+  nonce,
   disabled,
   children,
 }) => {
-  if (disabled || txHash === null || txHash === undefined) {
+  if (disabled) {
     return (
       <span className="bg-link-blue bg-opacity-10 text-gray-300 rounded px-2 py-1 text-xs">
         {children}
@@ -23,7 +26,7 @@ const NavButton: React.FC<NavButtonProps> = ({
   return (
     <NavLink
       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)}
+      to={addressByNonceURL(sender, nonce)}
     >
       {children}
     </NavLink>

src/transaction/NavNonce.tsx

@@ -7,7 +7,6 @@ import { ChecksummedAddress } from "../types";
 import { RuntimeContext } from "../useRuntime";
 import {
   prefetchTransactionBySenderAndNonce,
-  useTransactionBySenderAndNonce,
   useTransactionCount,
 } from "../useErigonHooks";
 import { useSWRConfig } from "swr";
@@ -19,22 +18,7 @@ type NavNonceProps = {
 
 const NavNonce: React.FC<NavNonceProps> = ({ sender, nonce }) => {
   const { provider } = useContext(RuntimeContext);
-  const prevTxHash = useTransactionBySenderAndNonce(
-    provider,
-    sender,
-    nonce - 1
-  );
-  const nextTxHash = useTransactionBySenderAndNonce(
-    provider,
-    sender,
-    nonce + 1
-  );
   const count = useTransactionCount(provider, sender);
-  const lastTxHash = useTransactionBySenderAndNonce(
-    provider,
-    sender,
-    count !== undefined ? count - 1 : undefined
-  );
 
   // Prefetch
   const swrConfig = useSWRConfig();
@@ -60,17 +44,19 @@ const NavNonce: React.FC<NavNonceProps> = ({ sender, nonce }) => {
 
   return (
     <div className="pl-2 self-center flex space-x-1">
-      <NavButton txHash={prevTxHash} disabled={nonce === 0}>
+      <NavButton sender={sender} nonce={nonce - 1} disabled={nonce === 0}>
         <FontAwesomeIcon icon={faChevronLeft} />
       </NavButton>
       <NavButton
-        txHash={nextTxHash}
+        sender={sender}
+        nonce={nonce + 1}
         disabled={count === undefined || nonce >= count - 1}
       >
         <FontAwesomeIcon icon={faChevronRight} />
       </NavButton>
       <NavButton
-        txHash={lastTxHash}
+        sender={sender}
+        nonce={count !== undefined ? count - 1 : -1}
         disabled={count === undefined || nonce >= count - 1}
       >
         <FontAwesomeIcon icon={faChevronRight} />

src/url.ts

@@ -20,6 +20,9 @@ export const blockTxsURL = (blockNum: BlockTag) => `/block/${blockNum}/txs`;
 
 export const transactionURL = (txHash: string) => `/tx/${txHash}`;
 
+export const addressByNonceURL = (address: ChecksummedAddress, nonce: number) =>
+  `/address/${address}?nonce=${nonce}`;
+
 export enum SourcifySource {
   // Resolve trusted IPNS for root IPFS
   IPFS_IPNS,