Error handling UI improvements

src/AddressTransaction.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useContext } from "react";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import StandardFrame from "./StandardFrame";
 import AddressOrENSNameNotFound from "./components/AddressOrENSNameNotFound";
+import AddressOrENSNameInvalidNonce from "./components/AddressOrENSNameInvalidNonce";
 import { ChecksummedAddress } from "./types";
 import { transactionURL } from "./url";
 import { useTransactionBySenderAndNonce } from "./useErigonHooks";
@@ -25,18 +26,15 @@ const AddressTransaction: React.FC = () => {
     },
     [navigate, searchParams]
   );
-  const [checksummedAddress, isENS, error] = useAddressOrENS(
+  const [checksummedAddress, , error] = useAddressOrENS(
     addressOrName,
     urlFixer
   );
 
   const rawNonce = searchParams.get("nonce");
-  if (rawNonce === null) {
-    throw new Error("rawNonce couldn't be undefined here");
-  }
   let nonce: number | undefined = undefined;
   try {
-    nonce = parseInt(rawNonce);
+    nonce = rawNonce === null ? undefined : parseInt(rawNonce);
   } catch (err) {
     // ignore
   }
@@ -48,7 +46,35 @@ const AddressTransaction: React.FC = () => {
   );
 
   if (error) {
-    return <AddressOrENSNameNotFound addressOrENSName={addressOrName} />;
+    return (
+      <StandardFrame>
+        <AddressOrENSNameNotFound addressOrENSName={addressOrName} />
+      </StandardFrame>
+    );
+  }
+  if (checksummedAddress !== undefined && rawNonce === null) {
+    return (
+      <StandardFrame>
+        <AddressOrENSNameInvalidNonce
+          addressOrENSName={checksummedAddress}
+          nonce={"undefined"}
+        />
+      </StandardFrame>
+    );
+  }
+  if (
+    checksummedAddress !== undefined &&
+    nonce !== undefined &&
+    txHash === null
+  ) {
+    return (
+      <StandardFrame>
+        <AddressOrENSNameInvalidNonce
+          addressOrENSName={checksummedAddress}
+          nonce={nonce.toString()}
+        />
+      </StandardFrame>
+    );
   }
   if (txHash) {
     navigate(transactionURL(txHash));

src/components/AddressOrENSName.tsx

@@ -1,11 +1,12 @@
 import React, { useContext } from "react";
+import PlainAddress from "./PlainAddress";
 import { resolverRendererRegistry } from "../api/address-resolver";
 import { useResolvedAddress } from "../useResolvedAddresses";
 import { RuntimeContext } from "../useRuntime";
-import PlainAddress from "./PlainAddress";
+import { ChecksummedAddress } from "../types";
 
 type AddressOrENSNameProps = {
-  address: string;
+  address: ChecksummedAddress;
   selectedAddress?: string;
   dontOverrideColors?: boolean;
 };

src/components/AddressOrENSNameInvalidNonce.tsx

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

src/components/AddressOrENSNameNotFound.tsx

@@ -1,4 +1,6 @@
 import React from "react";
+import StandardSubtitle from "../StandardSubtitle";
+import ContentFrame from "../ContentFrame";
 
 type AddressOrENSNameNotFoundProps = {
   addressOrENSName: string;
@@ -7,9 +9,14 @@ type AddressOrENSNameNotFoundProps = {
 const AddressOrENSNameNotFound: React.FC<AddressOrENSNameNotFoundProps> = ({
   addressOrENSName,
 }) => (
-  <span className="text-base">
-    "{addressOrENSName}" is not an ETH address or ENS name.
-  </span>
+  <>
+    <StandardSubtitle>Transaction Details</StandardSubtitle>
+    <ContentFrame>
+      <div className="py-4 text-sm">
+        "{addressOrENSName}" is not an ETH address or ENS name.
+      </div>
+    </ContentFrame>
+  </>
 );
 
 export default React.memo(AddressOrENSNameNotFound);