diff --git a/src/Address.tsx b/src/Address.tsx index 3bfbd41..da1f959 100644 --- a/src/Address.tsx +++ b/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 ( + + ); + } + return ( {error ? ( diff --git a/src/AddressTransaction.tsx b/src/AddressTransaction.tsx deleted file mode 100644 index 7c4ee76..0000000 --- a/src/AddressTransaction.tsx +++ /dev/null @@ -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 ( - - - - ); - } - if (checksummedAddress !== undefined && rawNonce === null) { - return ( - - - - ); - } - if ( - checksummedAddress !== undefined && - nonce !== undefined && - txHash === null - ) { - return ( - - - - ); - } - if (txHash) { - navigate(transactionURL(txHash)); - } - return ; -}; - -export default AddressTransaction; diff --git a/src/AddressTransactionByNonce.tsx b/src/AddressTransactionByNonce.tsx new file mode 100644 index 0000000..c720bd9 --- /dev/null +++ b/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 = ({ + checksummedAddress, + nonce, +}) => { + const { provider } = useContext(RuntimeContext); + const txHash = useTransactionBySenderAndNonce( + provider, + checksummedAddress, + nonce + ); + const navigate = useNavigate(); + + if (checksummedAddress !== undefined && nonce === undefined) { + return ( + + + + ); + } + if ( + checksummedAddress !== undefined && + nonce !== undefined && + txHash === null + ) { + return ( + + + + ); + } + if (txHash) { + navigate(transactionURL(txHash)); + } + return ; +}; + +export default AddressTransactionByNonce; diff --git a/src/App.tsx b/src/App.tsx index c75c474..aae4ab8 100644 --- a/src/App.tsx +++ b/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={
} /> - } - /> } />