Handle search for latest nonce on uninitialized addresses

src/AddressTransactionByNonce.tsx

@@ -2,6 +2,7 @@ import React, { useContext, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import StandardFrame from "./StandardFrame";
 import AddressOrENSNameInvalidNonce from "./components/AddressOrENSNameInvalidNonce";
+import AddressOrENSNameNoTx from "./components/AddressOrENSNameNoTx";
 import { ChecksummedAddress } from "./types";
 import { transactionURL } from "./url";
 import { useTransactionBySenderAndNonce } from "./useErigonHooks";
@@ -37,7 +38,7 @@ const AddressTransactionByNonce: React.FC<AddressTransactionByNonceProps> = ({
   // in case of latest
   let nonce: number | undefined;
   if (rawNonce === "latest") {
-    if (txCount !== undefined && txCount > 0) {
+    if (txCount !== undefined) {
       nonce = txCount - 1;
     }
   } else {
@@ -52,10 +53,20 @@ const AddressTransactionByNonce: React.FC<AddressTransactionByNonceProps> = ({
   );
   const navigate = useNavigate();
 
+  // Loading...
   if (checksummedAddress === undefined || nonce === undefined) {
     return <StandardFrame />;
   }
 
+  // Address hasn't made the first outbound tx yet
+  if (nonce < 0) {
+    return (
+      <StandardFrame>
+        <AddressOrENSNameNoTx addressOrENSName={checksummedAddress} />
+      </StandardFrame>
+    );
+  }
+
   // Garbage nonce
   if (isNaN(nonce)) {
     return (

src/components/AddressOrENSNameNoTx.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import StandardSubtitle from "../StandardSubtitle";
+import ContentFrame from "../ContentFrame";
+import AddressOrENSName from "./AddressOrENSName";
+
+type AddressOrENSNameNoTxProps = {
+  addressOrENSName: string;
+};
+
+const AddressOrENSNameNoTx: React.FC<AddressOrENSNameNoTxProps> = ({
+  addressOrENSName,
+}) => (
+  <>
+    <StandardSubtitle>Transaction Details</StandardSubtitle>
+    <ContentFrame>
+      <div className="flex py-4 text-sm">
+        <AddressOrENSName address={addressOrENSName} />
+        <span>: no outbound transactions found.</span>
+      </div>
+    </ContentFrame>
+  </>
+);
+
+export default React.memo(AddressOrENSNameNoTx);