Extract common component for address or ens name not found

This commit is contained in:
Willian Mitsuda 2022-01-29 20:00:01 -03:00
parent aeda92e41c
commit d70c22b5a0
3 changed files with 19 additions and 8 deletions

View File

@ -13,6 +13,7 @@ import { faCircleNotch } from "@fortawesome/free-solid-svg-icons/faCircleNotch";
import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons/faQuestionCircle"; import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons/faQuestionCircle";
import StandardFrame from "./StandardFrame"; import StandardFrame from "./StandardFrame";
import StandardSubtitle from "./StandardSubtitle"; import StandardSubtitle from "./StandardSubtitle";
import AddressOrENSNameNotFound from "./components/AddressOrENSNameNotFound";
import Copy from "./components/Copy"; import Copy from "./components/Copy";
import NavTab from "./components/NavTab"; import NavTab from "./components/NavTab";
import SourcifyLogo from "./sourcify/SourcifyLogo"; import SourcifyLogo from "./sourcify/SourcifyLogo";
@ -81,9 +82,7 @@ const Address: React.FC = () => {
return ( return (
<StandardFrame> <StandardFrame>
{error ? ( {error ? (
<span className="text-base"> <AddressOrENSNameNotFound addressOrENSName={addressOrName} />
"{addressOrName}" is not an ETH address or ENS name.
</span>
) : ( ) : (
checksummedAddress && ( checksummedAddress && (
<> <>

View File

@ -1,6 +1,7 @@
import React, { useCallback, useContext } from "react"; import React, { useCallback, useContext } from "react";
import { useNavigate, useParams, useSearchParams } from "react-router-dom"; import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import StandardFrame from "./StandardFrame"; import StandardFrame from "./StandardFrame";
import AddressOrENSNameNotFound from "./components/AddressOrENSNameNotFound";
import { ChecksummedAddress } from "./types"; import { ChecksummedAddress } from "./types";
import { transactionURL } from "./url"; import { transactionURL } from "./url";
import { useTransactionBySenderAndNonce } from "./useErigonHooks"; import { useTransactionBySenderAndNonce } from "./useErigonHooks";
@ -47,11 +48,7 @@ const AddressTransaction: React.FC = () => {
); );
if (error) { if (error) {
return ( return <AddressOrENSNameNotFound addressOrENSName={addressOrName} />;
<span className="text-base">
"{addressOrName}" is not an ETH address or ENS name.
</span>
);
} }
if (txHash) { if (txHash) {
navigate(transactionURL(txHash)); navigate(transactionURL(txHash));

View File

@ -0,0 +1,15 @@
import React from "react";
type AddressOrENSNameNotFoundProps = {
addressOrENSName: string;
};
const AddressOrENSNameNotFound: React.FC<AddressOrENSNameNotFoundProps> = ({
addressOrENSName,
}) => (
<span className="text-base">
"{addressOrENSName}" is not an ETH address or ENS name.
</span>
);
export default React.memo(AddressOrENSNameNotFound);