From ddfd0fb9350105d485a7cdf3717354ac5280ef1e Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 2 Mar 2022 06:35:05 -0300
Subject: [PATCH] Extract component

---
 src/components/DecoratedAddressLink.tsx | 27 ++++++++++++++-----------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/DecoratedAddressLink.tsx b/src/components/DecoratedAddressLink.tsx
index fff03e9..03763f8 100644
--- a/src/components/DecoratedAddressLink.tsx
+++ b/src/components/DecoratedAddressLink.tsx
@@ -91,20 +91,10 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
         dontOverrideColors={mint || burn}
       />
       {eoa === true && (
-        <span
-          className="text-xs text-gray-400 text-opacity-70 not-italic"
-          title="Externally owned account"
-        >
-          (EOA)
-        </span>
+        <AddressLegend title="Externally owned account">(EOA)</AddressLegend>
       )}
       {eoa === false && (
-        <span
-          className="text-xs text-gray-400 text-opacity-70 not-italic"
-          title="Contract account"
-        >
-          (C)
-        </span>
+        <AddressLegend title="Contract account">(C)</AddressLegend>
       )}
     </div>
   );
@@ -156,4 +146,17 @@ const ResolvedAddress: React.FC<ResolvedAddressProps> = ({
   );
 };
 
+type AddressLegendProps = {
+  title: string;
+};
+
+const AddressLegend: React.FC<AddressLegendProps> = ({ title, children }) => (
+  <span
+    className="text-xs text-gray-400 text-opacity-70 not-italic"
+    title={title}
+  >
+    {children}
+  </span>
+);
+
 export default React.memo(DecoratedAddressLink);