Basic nonce locator URL

src/AddressTransaction.tsx

@@ -0,0 +1,35 @@
+import React, { useContext } from "react";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import StandardFrame from "./StandardFrame";
+import { transactionURL } from "./url";
+import { useTransactionBySenderAndNonce } from "./useErigonHooks";
+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 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);
+  } catch (err) {
+    // ignore
+  }
+
+  const txHash = useTransactionBySenderAndNonce(provider, addressOrName, nonce);
+  if (txHash) {
+    navigate(transactionURL(txHash));
+  }
+  return <StandardFrame />;
+};
+
+export default AddressTransaction;

src/App.tsx

@@ -21,6 +21,12 @@ 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")
@@ -61,6 +67,10 @@ const App = () => {
                     path="address/:addressOrName/*"
                     element={<Address />}
                   />
+                  <Route
+                    path="address/:addressOrName/tx/*"
+                    element={<AddressTransaction />}
+                  />
                   <Route path="*" element={<Home />} />
                 </Route>
               </Routes>

src/Transaction.tsx

@@ -7,7 +7,7 @@ const Transaction: React.FC = () => {
   if (txhash === undefined) {
     throw new Error("txhash couldn't be undefined here");
   }
-  return <TransactionPageContent txhash={txhash} />;
+  return <TransactionPageContent txHash={txhash} />;
 };
 
 export default Transaction;

src/TransactionPageContent.tsx

@@ -34,15 +34,15 @@ const Trace = React.lazy(
 );
 
 type TransactionPageContentProps = {
-  txhash: string;
+  txHash: string;
 };
 
 const TransactionPageContent: React.FC<TransactionPageContentProps> = ({
-  txhash,
+  txHash,
 }) => {
   const { provider } = useContext(RuntimeContext);
 
-  const txData = useTxData(provider, txhash);
+  const txData = useTxData(provider, txHash);
   const internalOps = useInternalOperations(provider, txData);
   const sendsEthToMiner = useMemo(() => {
     if (!txData || !internalOps) {
@@ -79,7 +79,7 @@ const TransactionPageContent: React.FC<TransactionPageContentProps> = ({
         {txData === null && (
           <ContentFrame>
             <div className="py-4 text-sm">
-              Transaction <span className="font-hash">{txhash}</span> not found.
+              Transaction <span className="font-hash">{txHash}</span> not found.
             </div>
           </ContentFrame>
         )}