From 17b6c03a33400084b6ad1bcd2898d9aa9292480b Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 29 Jan 2022 19:40:26 -0300
Subject: [PATCH] Basic nonce locator URL

---
 src/AddressTransaction.tsx     | 35 ++++++++++++++++++++++++++++++++++
 src/App.tsx                    | 10 ++++++++++
 src/Transaction.tsx            |  2 +-
 src/TransactionPageContent.tsx |  8 ++++----
 4 files changed, 50 insertions(+), 5 deletions(-)
 create mode 100644 src/AddressTransaction.tsx

diff --git a/src/AddressTransaction.tsx b/src/AddressTransaction.tsx
new file mode 100644
index 0000000..a6b1a52
--- /dev/null
+++ b/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;
diff --git a/src/App.tsx b/src/App.tsx
index aae4ab8..c75c474 100644
--- a/src/App.tsx
+++ b/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>
diff --git a/src/Transaction.tsx b/src/Transaction.tsx
index 988c5d2..94b2e43 100644
--- a/src/Transaction.tsx
+++ b/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;
diff --git a/src/TransactionPageContent.tsx b/src/TransactionPageContent.tsx
index ab88d46..377c345 100644
--- a/src/TransactionPageContent.tsx
+++ b/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>
         )}