Add next/last nonce navigation support

src/transaction/Details.tsx

@@ -254,11 +254,7 @@ const Details: React.FC<DetailsProps> = ({
           </div>
           <div className="flex items-baseline pl-3">
             <Nonce value={txData.nonce} />
-            <NavNonce
+            <NavNonce sender={txData.from} nonce={txData.nonce} />
-              sender={txData.from}
-              nonce={txData.nonce}
-              latestBlockNumber={undefined}
-            />
           </div>
         </div>
       </InfoRow>

src/transaction/NavNonce.tsx

@@ -5,19 +5,17 @@ import { faChevronRight } from "@fortawesome/free-solid-svg-icons/faChevronRight
 import NavButton from "./NavButton";
 import { ChecksummedAddress } from "../types";
 import { RuntimeContext } from "../useRuntime";
-import { useTransactionBySenderAndNonce } from "../useErigonHooks";
+import {
+  useTransactionBySenderAndNonce,
+  useTransactionCount,
+} from "../useErigonHooks";
 
 type NavNonceProps = {
   sender: ChecksummedAddress;
   nonce: number;
-  latestBlockNumber: number | undefined;
 };
 
-const NavNonce: React.FC<NavNonceProps> = ({
+const NavNonce: React.FC<NavNonceProps> = ({ sender, nonce }) => {
-  sender,
-  nonce,
-  latestBlockNumber,
-}) => {
   const { provider } = useContext(RuntimeContext);
   const prevTxHash = useTransactionBySenderAndNonce(
     provider,
@@ -29,7 +27,12 @@ const NavNonce: React.FC<NavNonceProps> = ({
     sender,
     nonce + 1
   );
-  const lastTxHash = nextTxHash;
+  const count = useTransactionCount(provider, sender);
+  const lastTxHash = useTransactionBySenderAndNonce(
+    provider,
+    sender,
+    count !== undefined ? count - 1 : undefined
+  );
 
   return (
     <div className="pl-2 self-center flex space-x-1">
@@ -38,13 +41,13 @@ const NavNonce: React.FC<NavNonceProps> = ({
       </NavButton>
       <NavButton
         txHash={nextTxHash}
-        disabled={latestBlockNumber === undefined || nonce >= latestBlockNumber}
+        disabled={count === undefined || nonce >= count - 1}
       >
         <FontAwesomeIcon icon={faChevronRight} />
       </NavButton>
       <NavButton
         txHash={lastTxHash}
-        disabled={latestBlockNumber === undefined || nonce >= latestBlockNumber}
+        disabled={count === undefined || nonce >= count - 1}
       >
         <FontAwesomeIcon icon={faChevronRight} />
         <FontAwesomeIcon icon={faChevronRight} />

src/useErigonHooks.ts

@@ -503,6 +503,30 @@ export const useTransactionError = (
   return [errorMsg, data, isCustomError];
 };
 
+export const useTransactionCount = (
+  provider: JsonRpcProvider | undefined,
+  sender: ChecksummedAddress | undefined
+): number | undefined => {
+  const [count, setCount] = useState<number | undefined>();
+
+  useEffect(() => {
+    // Reset
+    setCount(undefined);
+
+    if (provider === undefined || sender === undefined) {
+      return;
+    }
+
+    const readCount = async () => {
+      const _count = await provider.getTransactionCount(sender);
+      setCount(_count);
+    };
+    readCount();
+  }, [provider, sender]);
+
+  return count;
+};
+
 export const useTransactionBySenderAndNonce = (
   provider: JsonRpcProvider | undefined,
   sender: ChecksummedAddress | undefined,