From d70c22b5a02e258b8dd67335af26cd75ec85d8cd Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 29 Jan 2022 20:00:01 -0300
Subject: [PATCH] Extract common component for address or ens name not found

---
 src/Address.tsx                             |  5 ++---
 src/AddressTransaction.tsx                  |  7 ++-----
 src/components/AddressOrENSNameNotFound.tsx | 15 +++++++++++++++
 3 files changed, 19 insertions(+), 8 deletions(-)
 create mode 100644 src/components/AddressOrENSNameNotFound.tsx

diff --git a/src/Address.tsx b/src/Address.tsx
index 950b04e..3bfbd41 100644
--- a/src/Address.tsx
+++ b/src/Address.tsx
@@ -13,6 +13,7 @@ import { faCircleNotch } from "@fortawesome/free-solid-svg-icons/faCircleNotch";
 import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons/faQuestionCircle";
 import StandardFrame from "./StandardFrame";
 import StandardSubtitle from "./StandardSubtitle";
+import AddressOrENSNameNotFound from "./components/AddressOrENSNameNotFound";
 import Copy from "./components/Copy";
 import NavTab from "./components/NavTab";
 import SourcifyLogo from "./sourcify/SourcifyLogo";
@@ -81,9 +82,7 @@ const Address: React.FC = () => {
   return (
     <StandardFrame>
       {error ? (
-        <span className="text-base">
-          "{addressOrName}" is not an ETH address or ENS name.
-        </span>
+        <AddressOrENSNameNotFound addressOrENSName={addressOrName} />
       ) : (
         checksummedAddress && (
           <>
diff --git a/src/AddressTransaction.tsx b/src/AddressTransaction.tsx
index 84d5394..da709ed 100644
--- a/src/AddressTransaction.tsx
+++ b/src/AddressTransaction.tsx
@@ -1,6 +1,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 { ChecksummedAddress } from "./types";
 import { transactionURL } from "./url";
 import { useTransactionBySenderAndNonce } from "./useErigonHooks";
@@ -47,11 +48,7 @@ const AddressTransaction: React.FC = () => {
   );
 
   if (error) {
-    return (
-      <span className="text-base">
-        "{addressOrName}" is not an ETH address or ENS name.
-      </span>
-    );
+    return <AddressOrENSNameNotFound addressOrENSName={addressOrName} />;
   }
   if (txHash) {
     navigate(transactionURL(txHash));
diff --git a/src/components/AddressOrENSNameNotFound.tsx b/src/components/AddressOrENSNameNotFound.tsx
new file mode 100644
index 0000000..6798124
--- /dev/null
+++ b/src/components/AddressOrENSNameNotFound.tsx
@@ -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);