From 4c72fd6966edec1a1414375cabb7b96465b44587 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 14 Jul 2021 16:17:27 -0300
Subject: [PATCH] Small component extraction

---
 src/Transaction.tsx                   | 12 +-----------
 src/components/AddressHighlighter.tsx |  6 +++---
 src/components/InfoRow.tsx            | 14 ++++++++++++++
 3 files changed, 18 insertions(+), 14 deletions(-)
 create mode 100644 src/components/InfoRow.tsx

diff --git a/src/Transaction.tsx b/src/Transaction.tsx
index 6c646fb..e18a163 100644
--- a/src/Transaction.tsx
+++ b/src/Transaction.tsx
@@ -16,6 +16,7 @@ import StandardFrame from "./StandardFrame";
 import StandardSubtitle from "./StandardSubtitle";
 import Tab from "./components/Tab";
 import ContentFrame from "./ContentFrame";
+import InfoRow from "./components/InfoRow";
 import BlockLink from "./components/BlockLink";
 import AddressHighlighter from "./components/AddressHighlighter";
 import AddressOrENSName from "./components/AddressOrENSName";
@@ -364,15 +365,4 @@ const Transaction: React.FC = () => {
   );
 };
 
-type InfoRowProps = {
-  title: string;
-};
-
-const InfoRow: React.FC<InfoRowProps> = ({ title, children }) => (
-  <div className="grid grid-cols-4 py-4 text-sm">
-    <div>{title}:</div>
-    <div className="col-span-3">{children}</div>
-  </div>
-);
-
 export default React.memo(Transaction);
diff --git a/src/components/AddressHighlighter.tsx b/src/components/AddressHighlighter.tsx
index 114157c..1b7df0d 100644
--- a/src/components/AddressHighlighter.tsx
+++ b/src/components/AddressHighlighter.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { useSelectionContext } from "../useSelection";
 
-type AddressHighlighterProps = {
+type AddressHighlighterProps = React.PropsWithChildren<{
   address: string;
-};
+}>;
 
 const AddressHighlighter: React.FC<AddressHighlighterProps> = ({
   address,
@@ -34,4 +34,4 @@ const AddressHighlighter: React.FC<AddressHighlighterProps> = ({
   );
 };
 
-export default AddressHighlighter;
+export default React.memo(AddressHighlighter);
diff --git a/src/components/InfoRow.tsx b/src/components/InfoRow.tsx
new file mode 100644
index 0000000..d3758b3
--- /dev/null
+++ b/src/components/InfoRow.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+type InfoRowProps = React.PropsWithChildren<{
+  title: string;
+}>;
+
+const InfoRow: React.FC<InfoRowProps> = ({ title, children }) => (
+  <div className="grid grid-cols-4 py-4 text-sm">
+    <div>{title}:</div>
+    <div className="col-span-3">{children}</div>
+  </div>
+);
+
+export default React.memo(InfoRow);