diff --git a/src/AddressTransaction.tsx b/src/AddressTransaction.tsx index da709ed..7c4ee76 100644 --- a/src/AddressTransaction.tsx +++ b/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 ; + return ( + + + + ); + } + if (checksummedAddress !== undefined && rawNonce === null) { + return ( + + + + ); + } + if ( + checksummedAddress !== undefined && + nonce !== undefined && + txHash === null + ) { + return ( + + + + ); } if (txHash) { navigate(transactionURL(txHash)); diff --git a/src/components/AddressOrENSName.tsx b/src/components/AddressOrENSName.tsx index 9f43662..b884c48 100644 --- a/src/components/AddressOrENSName.tsx +++ b/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; }; diff --git a/src/components/AddressOrENSNameInvalidNonce.tsx b/src/components/AddressOrENSNameInvalidNonce.tsx new file mode 100644 index 0000000..a92496a --- /dev/null +++ b/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 }) => ( + <> + Transaction Details + +
+ + : no transaction found for nonce="{nonce}". +
+
+ +); + +export default React.memo(AddressOrENSNameInvalidNonce); diff --git a/src/components/AddressOrENSNameNotFound.tsx b/src/components/AddressOrENSNameNotFound.tsx index 6798124..437aa6c 100644 --- a/src/components/AddressOrENSNameNotFound.tsx +++ b/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 = ({ addressOrENSName, }) => ( - - "{addressOrENSName}" is not an ETH address or ENS name. - + <> + Transaction Details + +
+ "{addressOrENSName}" is not an ETH address or ENS name. +
+
+ ); export default React.memo(AddressOrENSNameNotFound);