Change address tx by nonce url to addressOrName?nonce=? format

src/Address.tsx

@@ -26,6 +26,13 @@ import { useMultipleMetadata } from "./sourcify/useSourcify";
 import { ChecksummedAddress } from "./types";
 import { useAddressesWithCode } from "./useErigonHooks";
 
+const AddressTransactionByNonce = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "addresstxbynonce", webpackPrefetch: true */ "./AddressTransactionByNonce"
+    )
+);
+
 const Address: React.FC = () => {
   const { provider } = useContext(RuntimeContext);
   const { addressOrName, direction } = useParams();
@@ -79,6 +86,23 @@ const Address: React.FC = () => {
       ? metadatas[checksummedAddress]
       : undefined;
 
+  // Search address by nonce === transaction @ nonce
+  const rawNonce = searchParams.get("nonce");
+  if (rawNonce !== null) {
+    let nonce: number | undefined = undefined;
+    try {
+      nonce = parseInt(rawNonce);
+    } catch (err) {
+      // ignore
+    }
+    return (
+      <AddressTransactionByNonce
+        checksummedAddress={checksummedAddress}
+        nonce={nonce}
+      />
+    );
+  }
+
   return (
     <StandardFrame>
       {error ? (

src/AddressTransaction.tsx

@@ -1,85 +0,0 @@
-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";
-import { useAddressOrENS } from "./useResolvedAddresses";
-import { RuntimeContext } from "./useRuntime";
-
-const AddressTransaction: React.FC = () => {
-  const { provider } = useContext(RuntimeContext);
-  const navigate = useNavigate();
-  const { addressOrName } = useParams();
-  if (addressOrName === undefined) {
-    throw new Error("addressOrName couldn't be undefined here");
-  }
-
-  const [searchParams] = useSearchParams();
-  const urlFixer = useCallback(
-    (address: ChecksummedAddress) => {
-      navigate(`/address/${address}/tx?${searchParams.toString()}`, {
-        replace: true,
-      });
-    },
-    [navigate, searchParams]
-  );
-  const [checksummedAddress, , error] = useAddressOrENS(
-    addressOrName,
-    urlFixer
-  );
-
-  const rawNonce = searchParams.get("nonce");
-  let nonce: number | undefined = undefined;
-  try {
-    nonce = rawNonce === null ? undefined : parseInt(rawNonce);
-  } catch (err) {
-    // ignore
-  }
-
-  const txHash = useTransactionBySenderAndNonce(
-    provider,
-    checksummedAddress,
-    nonce
-  );
-
-  if (error) {
-    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));
-  }
-  return <StandardFrame />;
-};
-
-export default AddressTransaction;

src/AddressTransactionByNonce.tsx

@@ -0,0 +1,57 @@
+import React, { useContext } from "react";
+import { useNavigate } from "react-router-dom";
+import StandardFrame from "./StandardFrame";
+import AddressOrENSNameInvalidNonce from "./components/AddressOrENSNameInvalidNonce";
+import { ChecksummedAddress } from "./types";
+import { transactionURL } from "./url";
+import { useTransactionBySenderAndNonce } from "./useErigonHooks";
+import { RuntimeContext } from "./useRuntime";
+
+type AddressTransactionByNonceProps = {
+  checksummedAddress: ChecksummedAddress | undefined;
+  nonce: number | undefined;
+};
+
+const AddressTransactionByNonce: React.FC<AddressTransactionByNonceProps> = ({
+  checksummedAddress,
+  nonce,
+}) => {
+  const { provider } = useContext(RuntimeContext);
+  const txHash = useTransactionBySenderAndNonce(
+    provider,
+    checksummedAddress,
+    nonce
+  );
+  const navigate = useNavigate();
+
+  if (checksummedAddress !== undefined && nonce === undefined) {
+    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));
+  }
+  return <StandardFrame />;
+};
+
+export default AddressTransactionByNonce;

src/App.tsx

@@ -21,12 +21,6 @@ const Address = React.lazy(
   () =>
     import(/* webpackChunkName: "address", webpackPrefetch: true */ "./Address")
 );
-const AddressTransaction = React.lazy(
-  () =>
-    import(
-      /* webpackChunkName: "addresstx", webpackPrefetch: true */ "./AddressTransaction"
-    )
-);
 const Transaction = React.lazy(
   () =>
     import(/* webpackChunkName: "tx", webpackPrefetch: true */ "./Transaction")
@@ -67,10 +61,6 @@ const App = () => {
                     path="address/:addressOrName/*"
                     element={<Address />}
                   />
-                  <Route
-                    path="address/:addressOrName/tx/*"
-                    element={<AddressTransaction />}
-                  />
                   <Route path="*" element={<Home />} />
                 </Route>
               </Routes>