From 05719eb4ae2aeb30ad5d643203c4ea5fa611c37d Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 14 Jul 2021 03:52:31 -0300
Subject: [PATCH 1/7] Add selection support for addresses

---
 src/AddressTransactions.tsx    |  7 +++--
 src/BlockTransactions.tsx      |  7 +++--
 src/search/TransactionItem.tsx | 57 +++++++++++++++++++++++++++-------
 src/useSelection.ts            | 23 ++++++++++++++
 4 files changed, 78 insertions(+), 16 deletions(-)
 create mode 100644 src/useSelection.ts

diff --git a/src/AddressTransactions.tsx b/src/AddressTransactions.tsx
index e671087..076d9be 100644
--- a/src/AddressTransactions.tsx
+++ b/src/AddressTransactions.tsx
@@ -15,6 +15,7 @@ import { SearchController } from "./search/search";
 import { RuntimeContext } from "./useRuntime";
 import { useENSCache } from "./useReverseCache";
 import { useFeeToggler } from "./search/useFeeToggler";
+import { SelectionContext, useSelection } from "./useSelection";
 
 type BlockParams = {
   addressOrName: string;
@@ -153,6 +154,8 @@ const AddressTransactions: React.FC = () => {
 
   const [feeDisplay, feeDisplayToggler] = useFeeToggler();
 
+  const selection = useSelection();
+
   return (
     <StandardFrame>
       {error ? (
@@ -204,7 +207,7 @@ const AddressTransactions: React.FC = () => {
                 feeDisplayToggler={feeDisplayToggler}
               />
               {controller ? (
-                <>
+                <SelectionContext.Provider value={selection}>
                   {controller.getPage().map((tx) => (
                     <TransactionItem
                       key={tx.hash}
@@ -228,7 +231,7 @@ const AddressTransactions: React.FC = () => {
                       nextHash={page ? page[page.length - 1].hash : ""}
                     />
                   </div>
-                </>
+                </SelectionContext.Provider>
               ) : (
                 <PendingResults />
               )}
diff --git a/src/BlockTransactions.tsx b/src/BlockTransactions.tsx
index 8f8f474..e8cbc52 100644
--- a/src/BlockTransactions.tsx
+++ b/src/BlockTransactions.tsx
@@ -15,6 +15,7 @@ import { PAGE_SIZE } from "./params";
 import { useFeeToggler } from "./search/useFeeToggler";
 import { RuntimeContext } from "./useRuntime";
 import { useENSCache } from "./useReverseCache";
+import { SelectionContext, useSelection } from "./useSelection";
 
 type BlockParams = {
   blockNumber: string;
@@ -116,6 +117,8 @@ const BlockTransactions: React.FC = () => {
 
   const [feeDisplay, feeDisplayToggler] = useFeeToggler();
 
+  const selection = useSelection();
+
   return (
     <StandardFrame>
       <StandardSubtitle>Transactions</StandardSubtitle>
@@ -142,7 +145,7 @@ const BlockTransactions: React.FC = () => {
           feeDisplayToggler={feeDisplayToggler}
         />
         {page ? (
-          <>
+          <SelectionContext.Provider value={selection}>
             {page.map((tx) => (
               <TransactionItem
                 key={tx.hash}
@@ -161,7 +164,7 @@ const BlockTransactions: React.FC = () => {
                 total={total}
               />
             </div>
-          </>
+          </SelectionContext.Provider>
         ) : (
           <PendingResults />
         )}
diff --git a/src/search/TransactionItem.tsx b/src/search/TransactionItem.tsx
index 7cfaf76..516554f 100644
--- a/src/search/TransactionItem.tsx
+++ b/src/search/TransactionItem.tsx
@@ -14,6 +14,7 @@ import TransactionValue from "../components/TransactionValue";
 import { ENSReverseCache, ProcessedTransaction } from "../types";
 import { FeeDisplay } from "./useFeeToggler";
 import { formatValue } from "../components/formatter";
+import { useSelectionContext } from "../useSelection";
 
 type TransactionItemProps = {
   tx: ProcessedTransaction;
@@ -45,6 +46,14 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
   const ensTo = ensCache && tx.to && ensCache[tx.to];
   const flash = tx.gasPrice.isZero() && tx.internalMinerInteraction;
 
+  const [selection, setSelection] = useSelectionContext();
+  const select = (address: string) => {
+    setSelection({ type: "address", content: address });
+  };
+  const deselect = () => {
+    setSelection(null);
+  };
+
   return (
     <div
       className={`grid grid-cols-12 gap-x-1 items-baseline text-sm border-t border-gray-200 ${
@@ -69,12 +78,24 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
       <span className="col-span-2 flex justify-between items-baseline space-x-2 pr-2">
         <span className="truncate" title={tx.from}>
           {tx.from && (
-            <AddressOrENSName
-              address={tx.from}
-              ensName={ensFrom}
-              selectedAddress={selectedAddress}
-              minerAddress={tx.miner}
-            />
+            <div
+              className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 ${
+                selection !== null &&
+                selection.type === "address" &&
+                selection.content === tx.from
+                  ? "border-orange-400 bg-yellow-100"
+                  : "border-transparent"
+              }`}
+              onMouseEnter={() => select(tx.from!)}
+              onMouseLeave={deselect}
+            >
+              <AddressOrENSName
+                address={tx.from}
+                ensName={ensFrom}
+                selectedAddress={selectedAddress}
+                minerAddress={tx.miner}
+              />
+            </div>
           )}
         </span>
         <span>
@@ -86,12 +107,24 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
       </span>
       <span className="col-span-2 truncate" title={tx.to}>
         {tx.to && (
-          <AddressOrENSName
-            address={tx.to}
-            ensName={ensTo}
-            selectedAddress={selectedAddress}
-            minerAddress={tx.miner}
-          />
+          <div
+            className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 ${
+              selection !== null &&
+              selection.type === "address" &&
+              selection.content === tx.to
+                ? "border-orange-400 bg-yellow-100"
+                : "border-transparent"
+            }`}
+            onMouseEnter={() => select(tx.to!)}
+            onMouseLeave={deselect}
+          >
+            <AddressOrENSName
+              address={tx.to}
+              ensName={ensTo}
+              selectedAddress={selectedAddress}
+              minerAddress={tx.miner}
+            />
+          </div>
         )}
       </span>
       <span className="col-span-2 truncate">
diff --git a/src/useSelection.ts b/src/useSelection.ts
new file mode 100644
index 0000000..ed66746
--- /dev/null
+++ b/src/useSelection.ts
@@ -0,0 +1,23 @@
+import React, { useState, useContext } from "react";
+
+export type Selection = {
+  type: string;
+  content: string;
+};
+
+export const useSelection = (): [
+  Selection | null,
+  React.Dispatch<React.SetStateAction<Selection | null>>
+] => {
+  const [selection, setSelection] = useState<Selection | null>(null);
+  return [selection, setSelection];
+};
+
+export const SelectionContext = React.createContext<
+  ReturnType<typeof useSelection>
+>(null!);
+
+export const useSelectionContext = () => {
+  const ctx = useContext(SelectionContext);
+  return ctx;
+};

From 4b3ab2ec8aa342a018e979180e8db0c0306fdb9e Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 14 Jul 2021 04:24:28 -0300
Subject: [PATCH 2/7] Extract highlighter decorator component

---
 src/AddressTransactions.tsx           |  4 +--
 src/BlockTransactions.tsx             |  4 +--
 src/components/AddressHighlighter.tsx | 37 ++++++++++++++++++++++++++
 src/search/TransactionItem.tsx        | 38 ++++-----------------------
 4 files changed, 46 insertions(+), 37 deletions(-)
 create mode 100644 src/components/AddressHighlighter.tsx

diff --git a/src/AddressTransactions.tsx b/src/AddressTransactions.tsx
index 076d9be..4727f7c 100644
--- a/src/AddressTransactions.tsx
+++ b/src/AddressTransactions.tsx
@@ -154,7 +154,7 @@ const AddressTransactions: React.FC = () => {
 
   const [feeDisplay, feeDisplayToggler] = useFeeToggler();
 
-  const selection = useSelection();
+  const selectionCtx = useSelection();
 
   return (
     <StandardFrame>
@@ -207,7 +207,7 @@ const AddressTransactions: React.FC = () => {
                 feeDisplayToggler={feeDisplayToggler}
               />
               {controller ? (
-                <SelectionContext.Provider value={selection}>
+                <SelectionContext.Provider value={selectionCtx}>
                   {controller.getPage().map((tx) => (
                     <TransactionItem
                       key={tx.hash}
diff --git a/src/BlockTransactions.tsx b/src/BlockTransactions.tsx
index e8cbc52..7578d31 100644
--- a/src/BlockTransactions.tsx
+++ b/src/BlockTransactions.tsx
@@ -117,7 +117,7 @@ const BlockTransactions: React.FC = () => {
 
   const [feeDisplay, feeDisplayToggler] = useFeeToggler();
 
-  const selection = useSelection();
+  const selectionCtx = useSelection();
 
   return (
     <StandardFrame>
@@ -145,7 +145,7 @@ const BlockTransactions: React.FC = () => {
           feeDisplayToggler={feeDisplayToggler}
         />
         {page ? (
-          <SelectionContext.Provider value={selection}>
+          <SelectionContext.Provider value={selectionCtx}>
             {page.map((tx) => (
               <TransactionItem
                 key={tx.hash}
diff --git a/src/components/AddressHighlighter.tsx b/src/components/AddressHighlighter.tsx
new file mode 100644
index 0000000..78524a7
--- /dev/null
+++ b/src/components/AddressHighlighter.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { useSelectionContext } from "../useSelection";
+
+type AddressHighlighterProps = {
+  address: string;
+};
+
+const AddressHighlighter: React.FC<AddressHighlighterProps> = ({
+  address,
+  children,
+}) => {
+  const [selection, setSelection] = useSelectionContext();
+  const select = () => {
+    setSelection({ type: "address", content: address });
+  };
+  const deselect = () => {
+    setSelection(null);
+  };
+
+  return (
+    <div
+      className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 ${
+        selection !== null &&
+        selection.type === "address" &&
+        selection.content === address
+          ? "border-orange-400 bg-yellow-100"
+          : "border-transparent"
+      }`}
+      onMouseEnter={select}
+      onMouseLeave={deselect}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default AddressHighlighter;
diff --git a/src/search/TransactionItem.tsx b/src/search/TransactionItem.tsx
index 516554f..ca4fbed 100644
--- a/src/search/TransactionItem.tsx
+++ b/src/search/TransactionItem.tsx
@@ -6,6 +6,7 @@ import BlockLink from "../components/BlockLink";
 import TransactionLink from "../components/TransactionLink";
 import AddressOrENSName from "../components/AddressOrENSName";
 import TimestampAge from "../components/TimestampAge";
+import AddressHighlighter from "../components/AddressHighlighter";
 import TransactionDirection, {
   Direction,
   Flags,
@@ -14,7 +15,6 @@ import TransactionValue from "../components/TransactionValue";
 import { ENSReverseCache, ProcessedTransaction } from "../types";
 import { FeeDisplay } from "./useFeeToggler";
 import { formatValue } from "../components/formatter";
-import { useSelectionContext } from "../useSelection";
 
 type TransactionItemProps = {
   tx: ProcessedTransaction;
@@ -46,14 +46,6 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
   const ensTo = ensCache && tx.to && ensCache[tx.to];
   const flash = tx.gasPrice.isZero() && tx.internalMinerInteraction;
 
-  const [selection, setSelection] = useSelectionContext();
-  const select = (address: string) => {
-    setSelection({ type: "address", content: address });
-  };
-  const deselect = () => {
-    setSelection(null);
-  };
-
   return (
     <div
       className={`grid grid-cols-12 gap-x-1 items-baseline text-sm border-t border-gray-200 ${
@@ -78,24 +70,14 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
       <span className="col-span-2 flex justify-between items-baseline space-x-2 pr-2">
         <span className="truncate" title={tx.from}>
           {tx.from && (
-            <div
-              className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 ${
-                selection !== null &&
-                selection.type === "address" &&
-                selection.content === tx.from
-                  ? "border-orange-400 bg-yellow-100"
-                  : "border-transparent"
-              }`}
-              onMouseEnter={() => select(tx.from!)}
-              onMouseLeave={deselect}
-            >
+            <AddressHighlighter address={tx.from}>
               <AddressOrENSName
                 address={tx.from}
                 ensName={ensFrom}
                 selectedAddress={selectedAddress}
                 minerAddress={tx.miner}
               />
-            </div>
+            </AddressHighlighter>
           )}
         </span>
         <span>
@@ -107,24 +89,14 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
       </span>
       <span className="col-span-2 truncate" title={tx.to}>
         {tx.to && (
-          <div
-            className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 ${
-              selection !== null &&
-              selection.type === "address" &&
-              selection.content === tx.to
-                ? "border-orange-400 bg-yellow-100"
-                : "border-transparent"
-            }`}
-            onMouseEnter={() => select(tx.to!)}
-            onMouseLeave={deselect}
-          >
+          <AddressHighlighter address={tx.to}>
             <AddressOrENSName
               address={tx.to}
               ensName={ensTo}
               selectedAddress={selectedAddress}
               minerAddress={tx.miner}
             />
-          </div>
+          </AddressHighlighter>
         )}
       </span>
       <span className="col-span-2 truncate">

From e2e94a4d30183d33aed00a94e928bdf7d6771223 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 14 Jul 2021 04:43:58 -0300
Subject: [PATCH 3/7] Apply highlighter decorator to transaction details page

---
 src/TokenTransferItem.tsx             | 11 ++++--
 src/Transaction.tsx                   | 28 +++++++++-----
 src/components/AddressHighlighter.tsx |  2 +-
 src/components/InternalTransfer.tsx   | 53 +++++++++++++++------------
 4 files changed, 56 insertions(+), 38 deletions(-)

diff --git a/src/TokenTransferItem.tsx b/src/TokenTransferItem.tsx
index 64a42f6..b341f0d 100644
--- a/src/TokenTransferItem.tsx
+++ b/src/TokenTransferItem.tsx
@@ -1,8 +1,9 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCaretRight } from "@fortawesome/free-solid-svg-icons";
-import AddressLink from "./components/AddressLink";
+import AddressHighlighter from "./components/AddressHighlighter";
 import AddressOrENSName from "./components/AddressOrENSName";
+import AddressLink from "./components/AddressLink";
 import TokenLogo from "./components/TokenLogo";
 import FormattedBalance from "./components/FormattedBalance";
 import { TokenMetas, TokenTransfer } from "./types";
@@ -23,11 +24,15 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
     <div className="grid grid-cols-5">
       <div className="flex space-x-2">
         <span className="font-bold">From</span>
-        <AddressOrENSName address={t.from} />
+        <AddressHighlighter address={t.from}>
+          <AddressOrENSName address={t.from} />
+        </AddressHighlighter>
       </div>
       <div className="flex space-x-2">
         <span className="font-bold">To</span>
-        <AddressOrENSName address={t.to} />
+        <AddressHighlighter address={t.to}>
+          <AddressOrENSName address={t.to} />
+        </AddressHighlighter>
       </div>
       <div className="col-span-3 flex space-x-2">
         <span className="font-bold">For</span>
diff --git a/src/Transaction.tsx b/src/Transaction.tsx
index e2b6390..4235c3e 100644
--- a/src/Transaction.tsx
+++ b/src/Transaction.tsx
@@ -17,6 +17,7 @@ import StandardSubtitle from "./StandardSubtitle";
 import Tab from "./components/Tab";
 import ContentFrame from "./ContentFrame";
 import BlockLink from "./components/BlockLink";
+import AddressHighlighter from "./components/AddressHighlighter";
 import AddressOrENSName from "./components/AddressOrENSName";
 import AddressLink from "./components/AddressLink";
 import Copy from "./components/Copy";
@@ -29,6 +30,7 @@ import TokenTransferItem from "./TokenTransferItem";
 import erc20 from "./erc20.json";
 import { TokenMetas, TokenTransfer, TransactionData, Transfer } from "./types";
 import { RuntimeContext } from "./useRuntime";
+import { SelectionContext, useSelection } from "./useSelection";
 
 const TRANSFER_TOPIC =
   "0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef";
@@ -160,11 +162,13 @@ const Transaction: React.FC = () => {
     traceTransfersUsingOtsTrace();
   }, [traceTransfersUsingOtsTrace]);
 
+  const selectionCtx = useSelection();
+
   return (
     <StandardFrame>
       <StandardSubtitle>Transaction Details</StandardSubtitle>
       {txData && (
-        <>
+        <SelectionContext.Provider value={selectionCtx}>
           <div className="flex space-x-2 border-l border-r border-t rounded-t-lg bg-white">
             <Tab href={`/tx/${txhash}`}>Overview</Tab>
             <Tab href={`/tx/${txhash}/logs`}>
@@ -206,19 +210,23 @@ const Transaction: React.FC = () => {
                 </InfoRow>
                 <InfoRow title="From">
                   <div className="flex items-baseline space-x-2">
-                    <AddressOrENSName
-                      address={txData.from}
-                      minerAddress={txData.miner}
-                    />
+                    <AddressHighlighter address={txData.from}>
+                      <AddressOrENSName
+                        address={txData.from}
+                        minerAddress={txData.miner}
+                      />
+                    </AddressHighlighter>
                     <Copy value={txData.from} />
                   </div>
                 </InfoRow>
                 <InfoRow title="Interacted With (To)">
                   <div className="flex items-baseline space-x-2">
-                    <AddressOrENSName
-                      address={txData.to}
-                      minerAddress={txData.miner}
-                    />
+                    <AddressHighlighter address={txData.to}>
+                      <AddressOrENSName
+                        address={txData.to}
+                        minerAddress={txData.miner}
+                      />
+                    </AddressHighlighter>
                     <Copy value={txData.to} />
                   </div>
                   {transfers && (
@@ -350,7 +358,7 @@ const Transaction: React.FC = () => {
               </ContentFrame>
             </Route>
           </Switch>
-        </>
+        </SelectionContext.Provider>
       )}
     </StandardFrame>
   );
diff --git a/src/components/AddressHighlighter.tsx b/src/components/AddressHighlighter.tsx
index 78524a7..114157c 100644
--- a/src/components/AddressHighlighter.tsx
+++ b/src/components/AddressHighlighter.tsx
@@ -19,7 +19,7 @@ const AddressHighlighter: React.FC<AddressHighlighterProps> = ({
 
   return (
     <div
-      className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 ${
+      className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 truncate ${
         selection !== null &&
         selection.type === "address" &&
         selection.content === address
diff --git a/src/components/InternalTransfer.tsx b/src/components/InternalTransfer.tsx
index ac8f7d7..e2f19d1 100644
--- a/src/components/InternalTransfer.tsx
+++ b/src/components/InternalTransfer.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { ethers } from "ethers";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleRight, faCoins } from "@fortawesome/free-solid-svg-icons";
+import AddressHighlighter from "./AddressHighlighter";
 import AddressLink from "./AddressLink";
 import { TransactionData, Transfer } from "../types";
 
@@ -25,31 +26,35 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
       </span>
       <span>{ethers.utils.formatEther(transfer.value)} Ether</span>
       <span className="text-gray-500">From</span>
-      <div
-        className={`flex items-baseline space-x-1 ${
-          fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
-        }`}
-      >
-        {fromMiner && (
-          <span className="text-yellow-400" title="Miner address">
-            <FontAwesomeIcon icon={faCoins} size="1x" />
-          </span>
-        )}
-        <AddressLink address={transfer.from} />
-      </div>
+      <AddressHighlighter address={transfer.from}>
+        <div
+          className={`flex items-baseline space-x-1 ${
+            fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
+          }`}
+        >
+          {fromMiner && (
+            <span className="text-yellow-400" title="Miner address">
+              <FontAwesomeIcon icon={faCoins} size="1x" />
+            </span>
+          )}
+          <AddressLink address={transfer.from} />
+        </div>
+      </AddressHighlighter>
       <span className="text-gray-500">To</span>
-      <div
-        className={`flex items-baseline space-x-1 px-2 py-1 ${
-          toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
-        }`}
-      >
-        {toMiner && (
-          <span className="text-yellow-400" title="Miner address">
-            <FontAwesomeIcon icon={faCoins} size="1x" />
-          </span>
-        )}
-        <AddressLink address={transfer.to} />
-      </div>
+      <AddressHighlighter address={transfer.to}>
+        <div
+          className={`flex items-baseline space-x-1 px-2 py-1 ${
+            toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
+          }`}
+        >
+          {toMiner && (
+            <span className="text-yellow-400" title="Miner address">
+              <FontAwesomeIcon icon={faCoins} size="1x" />
+            </span>
+          )}
+          <AddressLink address={transfer.to} />
+        </div>
+      </AddressHighlighter>
     </div>
   );
 };

From f3213b3c6939eaf66ff5472b29a29e01a6ea5338 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 14 Jul 2021 15:35:53 -0300
Subject: [PATCH 4/7] Fix spacing and alignment due to addresss highlight
 feature

---
 src/TokenTransferItem.tsx           |  8 ++--
 src/Transaction.tsx                 |  4 +-
 src/components/InternalTransfer.tsx | 64 +++++++++++++++--------------
 src/search/ResultHeader.tsx         |  4 +-
 4 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/src/TokenTransferItem.tsx b/src/TokenTransferItem.tsx
index b341f0d..4b1fc62 100644
--- a/src/TokenTransferItem.tsx
+++ b/src/TokenTransferItem.tsx
@@ -21,20 +21,20 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
     <span className="text-gray-500">
       <FontAwesomeIcon icon={faCaretRight} size="1x" />
     </span>
-    <div className="grid grid-cols-5">
-      <div className="flex space-x-2">
+    <div className="grid grid-cols-5 gap-x-1">
+      <div className="flex space-x-1">
         <span className="font-bold">From</span>
         <AddressHighlighter address={t.from}>
           <AddressOrENSName address={t.from} />
         </AddressHighlighter>
       </div>
-      <div className="flex space-x-2">
+      <div className="flex space-x-1">
         <span className="font-bold">To</span>
         <AddressHighlighter address={t.to}>
           <AddressOrENSName address={t.to} />
         </AddressHighlighter>
       </div>
-      <div className="col-span-3 flex space-x-2">
+      <div className="col-span-3 flex space-x-1">
         <span className="font-bold">For</span>
         <span>
           <FormattedBalance
diff --git a/src/Transaction.tsx b/src/Transaction.tsx
index 4235c3e..6c646fb 100644
--- a/src/Transaction.tsx
+++ b/src/Transaction.tsx
@@ -209,7 +209,7 @@ const Transaction: React.FC = () => {
                   <Timestamp value={txData.timestamp} />
                 </InfoRow>
                 <InfoRow title="From">
-                  <div className="flex items-baseline space-x-2">
+                  <div className="flex items-baseline space-x-2 -ml-1">
                     <AddressHighlighter address={txData.from}>
                       <AddressOrENSName
                         address={txData.from}
@@ -220,7 +220,7 @@ const Transaction: React.FC = () => {
                   </div>
                 </InfoRow>
                 <InfoRow title="Interacted With (To)">
-                  <div className="flex items-baseline space-x-2">
+                  <div className="flex items-baseline space-x-2 -ml-1">
                     <AddressHighlighter address={txData.to}>
                       <AddressOrENSName
                         address={txData.to}
diff --git a/src/components/InternalTransfer.tsx b/src/components/InternalTransfer.tsx
index e2f19d1..c135a43 100644
--- a/src/components/InternalTransfer.tsx
+++ b/src/components/InternalTransfer.tsx
@@ -25,36 +25,40 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
         <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
       </span>
       <span>{ethers.utils.formatEther(transfer.value)} Ether</span>
-      <span className="text-gray-500">From</span>
-      <AddressHighlighter address={transfer.from}>
-        <div
-          className={`flex items-baseline space-x-1 ${
-            fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
-          }`}
-        >
-          {fromMiner && (
-            <span className="text-yellow-400" title="Miner address">
-              <FontAwesomeIcon icon={faCoins} size="1x" />
-            </span>
-          )}
-          <AddressLink address={transfer.from} />
-        </div>
-      </AddressHighlighter>
-      <span className="text-gray-500">To</span>
-      <AddressHighlighter address={transfer.to}>
-        <div
-          className={`flex items-baseline space-x-1 px-2 py-1 ${
-            toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
-          }`}
-        >
-          {toMiner && (
-            <span className="text-yellow-400" title="Miner address">
-              <FontAwesomeIcon icon={faCoins} size="1x" />
-            </span>
-          )}
-          <AddressLink address={transfer.to} />
-        </div>
-      </AddressHighlighter>
+      <div className="flex items-baseline">
+        <span className="text-gray-500">From</span>
+        <AddressHighlighter address={transfer.from}>
+          <div
+            className={`flex items-baseline space-x-1 ${
+              fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
+            }`}
+          >
+            {fromMiner && (
+              <span className="text-yellow-400" title="Miner address">
+                <FontAwesomeIcon icon={faCoins} size="1x" />
+              </span>
+            )}
+            <AddressLink address={transfer.from} />
+          </div>
+        </AddressHighlighter>
+      </div>
+      <div className="flex items-baseline">
+        <span className="text-gray-500">To</span>
+        <AddressHighlighter address={transfer.to}>
+          <div
+            className={`flex items-baseline space-x-1 ${
+              toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
+            }`}
+          >
+            {toMiner && (
+              <span className="text-yellow-400" title="Miner address">
+                <FontAwesomeIcon icon={faCoins} size="1x" />
+              </span>
+            )}
+            <AddressLink address={transfer.to} />
+          </div>
+        </AddressHighlighter>
+      </div>
     </div>
   );
 };
diff --git a/src/search/ResultHeader.tsx b/src/search/ResultHeader.tsx
index 0b63c90..13880bd 100644
--- a/src/search/ResultHeader.tsx
+++ b/src/search/ResultHeader.tsx
@@ -15,8 +15,8 @@ const ResultHeader: React.FC<ResultHeaderProps> = ({
     <div>Method</div>
     <div>Block</div>
     <div>Age</div>
-    <div className="col-span-2">From</div>
-    <div className="col-span-2">To</div>
+    <div className="col-span-2 ml-1">From</div>
+    <div className="col-span-2 ml-1">To</div>
     <div className="col-span-2">Value</div>
     <div>
       <button

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 5/7] 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);

From 1e095b6dd3bacce0819519f572d0061974335d6b Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 14 Jul 2021 16:30:28 -0300
Subject: [PATCH 6/7] Extract subcomponents

---
 src/Transaction.tsx         | 209 ++----------------------------------
 src/transaction/Details.tsx | 144 +++++++++++++++++++++++++
 src/transaction/Logs.tsx    |  57 ++++++++++
 3 files changed, 212 insertions(+), 198 deletions(-)
 create mode 100644 src/transaction/Details.tsx
 create mode 100644 src/transaction/Logs.tsx

diff --git a/src/Transaction.tsx b/src/Transaction.tsx
index e18a163..3f450e9 100644
--- a/src/Transaction.tsx
+++ b/src/Transaction.tsx
@@ -7,27 +7,11 @@ import React, {
 } from "react";
 import { Route, Switch, useParams } from "react-router-dom";
 import { BigNumber, ethers } from "ethers";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faCheckCircle,
-  faTimesCircle,
-} from "@fortawesome/free-solid-svg-icons";
 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";
-import AddressLink from "./components/AddressLink";
-import Copy from "./components/Copy";
-import Timestamp from "./components/Timestamp";
-import InternalTransfer from "./components/InternalTransfer";
-import MethodName from "./components/MethodName";
-import GasValue from "./components/GasValue";
-import FormattedBalance from "./components/FormattedBalance";
-import TokenTransferItem from "./TokenTransferItem";
+import Details from "./transaction/Details";
+import Logs from "./transaction/Logs";
 import erc20 from "./erc20.json";
 import { TokenMetas, TokenTransfer, TransactionData, Transfer } from "./types";
 import { RuntimeContext } from "./useRuntime";
@@ -140,7 +124,7 @@ const Transaction: React.FC = () => {
     return false;
   }, [txData, transfers]);
 
-  const traceTransfersUsingOtsTrace = useCallback(async () => {
+  const traceTransfers = useCallback(async () => {
     if (!provider || !txData) {
       return;
     }
@@ -160,8 +144,8 @@ const Transaction: React.FC = () => {
     setTransfers(_transfers);
   }, [provider, txData]);
   useEffect(() => {
-    traceTransfersUsingOtsTrace();
-  }, [traceTransfersUsingOtsTrace]);
+    traceTransfers();
+  }, [traceTransfers]);
 
   const selectionCtx = useSelection();
 
@@ -178,185 +162,14 @@ const Transaction: React.FC = () => {
           </div>
           <Switch>
             <Route path="/tx/:txhash/" exact>
-              <ContentFrame tabs>
-                <InfoRow title="Transaction Hash">
-                  <div className="flex items-baseline space-x-2">
-                    <span className="font-hash">{txData.transactionHash}</span>
-                    <Copy value={txData.transactionHash} />
-                  </div>
-                </InfoRow>
-                <InfoRow title="Status">
-                  {txData.status ? (
-                    <span className="flex items-center w-min rounded-lg space-x-1 px-3 py-1 bg-green-50 text-green-500 text-xs">
-                      <FontAwesomeIcon icon={faCheckCircle} size="1x" />
-                      <span>Success</span>
-                    </span>
-                  ) : (
-                    <span className="flex items-center w-min rounded-lg space-x-1 px-3 py-1 bg-red-50 text-red-500 text-xs">
-                      <FontAwesomeIcon icon={faTimesCircle} size="1x" />
-                      <span>Fail</span>
-                    </span>
-                  )}
-                </InfoRow>
-                <InfoRow title="Block">
-                  <div className="flex items-baseline space-x-2">
-                    <BlockLink blockTag={txData.blockNumber} />
-                    <span className="rounded text-xs bg-gray-100 text-gray-500 px-2 py-1">
-                      {txData.confirmations} Block Confirmations
-                    </span>
-                  </div>
-                </InfoRow>
-                <InfoRow title="Timestamp">
-                  <Timestamp value={txData.timestamp} />
-                </InfoRow>
-                <InfoRow title="From">
-                  <div className="flex items-baseline space-x-2 -ml-1">
-                    <AddressHighlighter address={txData.from}>
-                      <AddressOrENSName
-                        address={txData.from}
-                        minerAddress={txData.miner}
-                      />
-                    </AddressHighlighter>
-                    <Copy value={txData.from} />
-                  </div>
-                </InfoRow>
-                <InfoRow title="Interacted With (To)">
-                  <div className="flex items-baseline space-x-2 -ml-1">
-                    <AddressHighlighter address={txData.to}>
-                      <AddressOrENSName
-                        address={txData.to}
-                        minerAddress={txData.miner}
-                      />
-                    </AddressHighlighter>
-                    <Copy value={txData.to} />
-                  </div>
-                  {transfers && (
-                    <div className="mt-2 space-y-1">
-                      {transfers.map((t, i) => (
-                        <InternalTransfer
-                          key={i}
-                          txData={txData}
-                          transfer={t}
-                        />
-                      ))}
-                    </div>
-                  )}
-                </InfoRow>
-                <InfoRow title="Transaction Action">
-                  <MethodName data={txData.data} />
-                </InfoRow>
-                {txData.tokenTransfers.length > 0 && (
-                  <InfoRow
-                    title={`Tokens Transferred (${txData.tokenTransfers.length})`}
-                  >
-                    <div className="space-y-2">
-                      {txData.tokenTransfers.map((t, i) => (
-                        <TokenTransferItem
-                          key={i}
-                          t={t}
-                          tokenMetas={txData.tokenMetas}
-                        />
-                      ))}
-                    </div>
-                  </InfoRow>
-                )}
-                <InfoRow title="Value">
-                  <span className="rounded bg-gray-100 px-2 py-1 text-xs">
-                    {ethers.utils.formatEther(txData.value)} Ether
-                  </span>
-                </InfoRow>
-                <InfoRow title="Transaction Fee">
-                  <FormattedBalance value={txData.fee} /> Ether
-                </InfoRow>
-                <InfoRow title="Gas Price">
-                  <div className="flex items-baseline space-x-1">
-                    <span>
-                      <FormattedBalance value={txData.gasPrice} /> Ether (
-                      <FormattedBalance
-                        value={txData.gasPrice}
-                        decimals={9}
-                      />{" "}
-                      Gwei)
-                    </span>
-                    {sendsEthToMiner && (
-                      <span className="rounded text-yellow-500 bg-yellow-100 text-xs px-2 py-1">
-                        Flashbots
-                      </span>
-                    )}
-                  </div>
-                </InfoRow>
-                <InfoRow title="Ether Price">N/A</InfoRow>
-                <InfoRow title="Gas Limit">
-                  <GasValue value={txData.gasLimit} />
-                </InfoRow>
-                <InfoRow title="Gas Used by Transaction">
-                  <GasValue value={txData.gasUsed} /> (
-                  {(txData.gasUsedPerc * 100).toFixed(2)}%)
-                </InfoRow>
-                <InfoRow title="Nonce">{txData.nonce}</InfoRow>
-                <InfoRow title="Position in Block">
-                  <span className="rounded px-2 py-1 bg-gray-100 text-gray-500 text-xs">
-                    {txData.transactionIndex}
-                  </span>
-                </InfoRow>
-                <InfoRow title="Input Data">
-                  <textarea
-                    className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
-                    value={txData.data}
-                    readOnly
-                  />
-                </InfoRow>
-              </ContentFrame>
+              <Details
+                txData={txData}
+                transfers={transfers}
+                sendsEthToMiner={sendsEthToMiner}
+              />
             </Route>
             <Route path="/tx/:txhash/logs/" exact>
-              <ContentFrame tabs>
-                <div className="text-sm py-4">
-                  Transaction Receipt Event Logs
-                </div>
-                {txData &&
-                  txData.logs.map((l, i) => (
-                    <div className="flex space-x-10 py-5" key={i}>
-                      <div>
-                        <span className="rounded-full w-12 h-12 flex items-center justify-center bg-green-50 text-green-500">
-                          {l.logIndex}
-                        </span>
-                      </div>
-                      <div className="w-full space-y-2">
-                        <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
-                          <div className="font-bold text-right">Address</div>
-                          <div className="col-span-11">
-                            <AddressLink address={l.address} />
-                          </div>
-                        </div>
-                        {l.topics.map((t, i) => (
-                          <div
-                            className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm"
-                            key={i}
-                          >
-                            <div className="text-right">
-                              {i === 0 && "Topics"}
-                            </div>
-                            <div className="flex space-x-2 items-center col-span-11 font-mono">
-                              <span className="rounded bg-gray-100 text-gray-500 px-2 py-1 text-xs">
-                                {i}
-                              </span>
-                              <span>{t}</span>
-                            </div>
-                          </div>
-                        ))}
-                        <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
-                          <div className="text-right pt-2">Data</div>
-                          <div className="col-span-11">
-                            <textarea
-                              className="w-full h-20 bg-gray-50 font-mono focus:outline-none border rounded p-2"
-                              value={l.data}
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-              </ContentFrame>
+              <Logs txData={txData} />
             </Route>
           </Switch>
         </SelectionContext.Provider>
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
new file mode 100644
index 0000000..f5022da
--- /dev/null
+++ b/src/transaction/Details.tsx
@@ -0,0 +1,144 @@
+import React from "react";
+import { ethers } from "ethers";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faCheckCircle,
+  faTimesCircle,
+} from "@fortawesome/free-solid-svg-icons";
+import ContentFrame from "../ContentFrame";
+import InfoRow from "../components/InfoRow";
+import BlockLink from "../components/BlockLink";
+import AddressHighlighter from "../components/AddressHighlighter";
+import AddressOrENSName from "../components/AddressOrENSName";
+import Copy from "../components/Copy";
+import Timestamp from "../components/Timestamp";
+import InternalTransfer from "../components/InternalTransfer";
+import MethodName from "../components/MethodName";
+import GasValue from "../components/GasValue";
+import FormattedBalance from "../components/FormattedBalance";
+import TokenTransferItem from "../TokenTransferItem";
+import { TransactionData, Transfer } from "../types";
+
+type DetailsProps = {
+  txData: TransactionData;
+  transfers?: Transfer[];
+  sendsEthToMiner: boolean;
+};
+
+const Details: React.FC<DetailsProps> = ({
+  txData,
+  transfers,
+  sendsEthToMiner,
+}) => (
+  <ContentFrame tabs>
+    <InfoRow title="Transaction Hash">
+      <div className="flex items-baseline space-x-2">
+        <span className="font-hash">{txData.transactionHash}</span>
+        <Copy value={txData.transactionHash} />
+      </div>
+    </InfoRow>
+    <InfoRow title="Status">
+      {txData.status ? (
+        <span className="flex items-center w-min rounded-lg space-x-1 px-3 py-1 bg-green-50 text-green-500 text-xs">
+          <FontAwesomeIcon icon={faCheckCircle} size="1x" />
+          <span>Success</span>
+        </span>
+      ) : (
+        <span className="flex items-center w-min rounded-lg space-x-1 px-3 py-1 bg-red-50 text-red-500 text-xs">
+          <FontAwesomeIcon icon={faTimesCircle} size="1x" />
+          <span>Fail</span>
+        </span>
+      )}
+    </InfoRow>
+    <InfoRow title="Block">
+      <div className="flex items-baseline space-x-2">
+        <BlockLink blockTag={txData.blockNumber} />
+        <span className="rounded text-xs bg-gray-100 text-gray-500 px-2 py-1">
+          {txData.confirmations} Block Confirmations
+        </span>
+      </div>
+    </InfoRow>
+    <InfoRow title="Timestamp">
+      <Timestamp value={txData.timestamp} />
+    </InfoRow>
+    <InfoRow title="From">
+      <div className="flex items-baseline space-x-2 -ml-1">
+        <AddressHighlighter address={txData.from}>
+          <AddressOrENSName address={txData.from} minerAddress={txData.miner} />
+        </AddressHighlighter>
+        <Copy value={txData.from} />
+      </div>
+    </InfoRow>
+    <InfoRow title="Interacted With (To)">
+      <div className="flex items-baseline space-x-2 -ml-1">
+        <AddressHighlighter address={txData.to}>
+          <AddressOrENSName address={txData.to} minerAddress={txData.miner} />
+        </AddressHighlighter>
+        <Copy value={txData.to} />
+      </div>
+      {transfers && (
+        <div className="mt-2 space-y-1">
+          {transfers.map((t, i) => (
+            <InternalTransfer key={i} txData={txData} transfer={t} />
+          ))}
+        </div>
+      )}
+    </InfoRow>
+    <InfoRow title="Transaction Action">
+      <MethodName data={txData.data} />
+    </InfoRow>
+    {txData.tokenTransfers.length > 0 && (
+      <InfoRow title={`Tokens Transferred (${txData.tokenTransfers.length})`}>
+        <div className="space-y-2">
+          {txData.tokenTransfers.map((t, i) => (
+            <TokenTransferItem key={i} t={t} tokenMetas={txData.tokenMetas} />
+          ))}
+        </div>
+      </InfoRow>
+    )}
+    <InfoRow title="Value">
+      <span className="rounded bg-gray-100 px-2 py-1 text-xs">
+        {ethers.utils.formatEther(txData.value)} Ether
+      </span>
+    </InfoRow>
+    <InfoRow title="Transaction Fee">
+      <FormattedBalance value={txData.fee} /> Ether
+    </InfoRow>
+    <InfoRow title="Gas Price">
+      <div className="flex items-baseline space-x-1">
+        <span>
+          <FormattedBalance value={txData.gasPrice} /> Ether (
+          <FormattedBalance value={txData.gasPrice} decimals={9} /> Gwei)
+        </span>
+        {sendsEthToMiner && (
+          <span className="rounded text-yellow-500 bg-yellow-100 text-xs px-2 py-1">
+            Flashbots
+          </span>
+        )}
+      </div>
+    </InfoRow>
+    <InfoRow title="Ether Price">N/A</InfoRow>
+    <InfoRow title="Gas Limit">
+      <GasValue value={txData.gasLimit} />
+    </InfoRow>
+    <InfoRow title="Gas Used by Transaction">
+      <GasValue value={txData.gasUsed} /> (
+      {(txData.gasUsedPerc * 100).toFixed(2)}%)
+    </InfoRow>
+    <InfoRow title="Nonce">{txData.nonce}</InfoRow>
+    <InfoRow title="Position in Block">
+      <span className="rounded px-2 py-1 bg-gray-100 text-gray-500 text-xs">
+        {txData.transactionIndex}
+      </span>
+    </InfoRow>
+    <InfoRow title="Input Data">
+      <textarea
+        className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
+        value={txData.data}
+        readOnly
+      />
+    </InfoRow>
+  </ContentFrame>
+);
+
+export default React.memo(Details);
diff --git a/src/transaction/Logs.tsx b/src/transaction/Logs.tsx
new file mode 100644
index 0000000..eda12be
--- /dev/null
+++ b/src/transaction/Logs.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import ContentFrame from "../ContentFrame";
+import AddressLink from "../components/AddressLink";
+import { TransactionData } from "../types";
+
+type LogsProps = {
+  txData: TransactionData;
+};
+
+const Logs: React.FC<LogsProps> = ({ txData }) => (
+  <ContentFrame tabs>
+    <div className="text-sm py-4">Transaction Receipt Event Logs</div>
+    {txData &&
+      txData.logs.map((l, i) => (
+        <div className="flex space-x-10 py-5" key={i}>
+          <div>
+            <span className="rounded-full w-12 h-12 flex items-center justify-center bg-green-50 text-green-500">
+              {l.logIndex}
+            </span>
+          </div>
+          <div className="w-full space-y-2">
+            <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
+              <div className="font-bold text-right">Address</div>
+              <div className="col-span-11">
+                <AddressLink address={l.address} />
+              </div>
+            </div>
+            {l.topics.map((t, i) => (
+              <div
+                className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm"
+                key={i}
+              >
+                <div className="text-right">{i === 0 && "Topics"}</div>
+                <div className="flex space-x-2 items-center col-span-11 font-mono">
+                  <span className="rounded bg-gray-100 text-gray-500 px-2 py-1 text-xs">
+                    {i}
+                  </span>
+                  <span>{t}</span>
+                </div>
+              </div>
+            ))}
+            <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
+              <div className="text-right pt-2">Data</div>
+              <div className="col-span-11">
+                <textarea
+                  className="w-full h-20 bg-gray-50 font-mono focus:outline-none border rounded p-2"
+                  value={l.data}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+  </ContentFrame>
+);
+
+export default React.memo(Logs);

From 8f51e6433a1d367ee177742a729cd9e0ff610bbf Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 14 Jul 2021 16:57:08 -0300
Subject: [PATCH 7/7] Extract subcomponents

---
 src/BlockTransactionHeader.tsx  | 21 +++++++++
 src/BlockTransactionResults.tsx | 78 +++++++++++++++++++++++++++++++++
 src/BlockTransactions.tsx       | 72 ++++--------------------------
 3 files changed, 107 insertions(+), 64 deletions(-)
 create mode 100644 src/BlockTransactionHeader.tsx
 create mode 100644 src/BlockTransactionResults.tsx

diff --git a/src/BlockTransactionHeader.tsx b/src/BlockTransactionHeader.tsx
new file mode 100644
index 0000000..65a8288
--- /dev/null
+++ b/src/BlockTransactionHeader.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { ethers } from "ethers";
+import StandardSubtitle from "./StandardSubtitle";
+import BlockLink from "./components/BlockLink";
+
+type BlockTransactionHeaderProps = {
+  blockTag: ethers.providers.BlockTag;
+};
+
+const BlockTransactionHeader: React.FC<BlockTransactionHeaderProps> = ({
+  blockTag,
+}) => (
+  <>
+    <StandardSubtitle>Transactions</StandardSubtitle>
+    <div className="pb-2 text-sm text-gray-500">
+      For Block <BlockLink blockTag={blockTag} />
+    </div>
+  </>
+);
+
+export default React.memo(BlockTransactionHeader);
diff --git a/src/BlockTransactionResults.tsx b/src/BlockTransactionResults.tsx
new file mode 100644
index 0000000..74e2783
--- /dev/null
+++ b/src/BlockTransactionResults.tsx
@@ -0,0 +1,78 @@
+import React, { useContext } from "react";
+import ContentFrame from "./ContentFrame";
+import PageControl from "./search/PageControl";
+import ResultHeader from "./search/ResultHeader";
+import PendingResults from "./search/PendingResults";
+import TransactionItem from "./search/TransactionItem";
+import { useFeeToggler } from "./search/useFeeToggler";
+import { RuntimeContext } from "./useRuntime";
+import { SelectionContext, useSelection } from "./useSelection";
+import { useENSCache } from "./useReverseCache";
+import { ProcessedTransaction } from "./types";
+import { PAGE_SIZE } from "./params";
+
+type BlockTransactionResultsProps = {
+  page?: ProcessedTransaction[];
+  total: number;
+  pageNumber: number;
+};
+
+const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
+  page,
+  total,
+  pageNumber,
+}) => {
+  const selectionCtx = useSelection();
+  const [feeDisplay, feeDisplayToggler] = useFeeToggler();
+  const { provider } = useContext(RuntimeContext);
+  const reverseCache = useENSCache(provider, page);
+
+  return (
+    <ContentFrame>
+      <div className="flex justify-between items-baseline py-3">
+        <div className="text-sm text-gray-500">
+          {page === undefined ? (
+            <>Waiting for search results...</>
+          ) : (
+            <>A total of {total} transactions found</>
+          )}
+        </div>
+        <PageControl
+          pageNumber={pageNumber}
+          pageSize={PAGE_SIZE}
+          total={total}
+        />
+      </div>
+      <ResultHeader
+        feeDisplay={feeDisplay}
+        feeDisplayToggler={feeDisplayToggler}
+      />
+      {page ? (
+        <SelectionContext.Provider value={selectionCtx}>
+          {page.map((tx) => (
+            <TransactionItem
+              key={tx.hash}
+              tx={tx}
+              ensCache={reverseCache}
+              feeDisplay={feeDisplay}
+            />
+          ))}
+          <div className="flex justify-between items-baseline py-3">
+            <div className="text-sm text-gray-500">
+              A total of {total} transactions found
+            </div>
+            <PageControl
+              pageNumber={pageNumber}
+              pageSize={PAGE_SIZE}
+              total={total}
+            />
+          </div>
+        </SelectionContext.Provider>
+      ) : (
+        <PendingResults />
+      )}
+    </ContentFrame>
+  );
+};
+
+export default React.memo(BlockTransactionResults);
diff --git a/src/BlockTransactions.tsx b/src/BlockTransactions.tsx
index 7578d31..8ded619 100644
--- a/src/BlockTransactions.tsx
+++ b/src/BlockTransactions.tsx
@@ -3,19 +3,11 @@ import { useParams, useLocation } from "react-router";
 import { ethers } from "ethers";
 import queryString from "query-string";
 import StandardFrame from "./StandardFrame";
-import StandardSubtitle from "./StandardSubtitle";
-import ContentFrame from "./ContentFrame";
-import PageControl from "./search/PageControl";
-import ResultHeader from "./search/ResultHeader";
-import PendingResults from "./search/PendingResults";
-import TransactionItem from "./search/TransactionItem";
-import BlockLink from "./components/BlockLink";
+import BlockTransactionHeader from "./BlockTransactionHeader";
+import BlockTransactionResults from "./BlockTransactionResults";
 import { ProcessedTransaction } from "./types";
 import { PAGE_SIZE } from "./params";
-import { useFeeToggler } from "./search/useFeeToggler";
 import { RuntimeContext } from "./useRuntime";
-import { useENSCache } from "./useReverseCache";
-import { SelectionContext, useSelection } from "./useSelection";
 
 type BlockParams = {
   blockNumber: string;
@@ -111,64 +103,16 @@ const BlockTransactions: React.FC = () => {
   }, [txs, pageNumber]);
   const total = useMemo(() => txs?.length ?? 0, [txs]);
 
-  const reverseCache = useENSCache(provider, page);
-
   document.title = `Block #${blockNumber} Txns | Otterscan`;
 
-  const [feeDisplay, feeDisplayToggler] = useFeeToggler();
-
-  const selectionCtx = useSelection();
-
   return (
     <StandardFrame>
-      <StandardSubtitle>Transactions</StandardSubtitle>
-      <div className="pb-2 text-sm text-gray-500">
-        For Block <BlockLink blockTag={blockNumber.toNumber()} />
-      </div>
-      <ContentFrame>
-        <div className="flex justify-between items-baseline py-3">
-          <div className="text-sm text-gray-500">
-            {page === undefined ? (
-              <>Waiting for search results...</>
-            ) : (
-              <>A total of {total} transactions found</>
-            )}
-          </div>
-          <PageControl
-            pageNumber={pageNumber}
-            pageSize={PAGE_SIZE}
-            total={total}
-          />
-        </div>
-        <ResultHeader
-          feeDisplay={feeDisplay}
-          feeDisplayToggler={feeDisplayToggler}
-        />
-        {page ? (
-          <SelectionContext.Provider value={selectionCtx}>
-            {page.map((tx) => (
-              <TransactionItem
-                key={tx.hash}
-                tx={tx}
-                ensCache={reverseCache}
-                feeDisplay={feeDisplay}
-              />
-            ))}
-            <div className="flex justify-between items-baseline py-3">
-              <div className="text-sm text-gray-500">
-                A total of {total} transactions found
-              </div>
-              <PageControl
-                pageNumber={pageNumber}
-                pageSize={PAGE_SIZE}
-                total={total}
-              />
-            </div>
-          </SelectionContext.Provider>
-        ) : (
-          <PendingResults />
-        )}
-      </ContentFrame>
+      <BlockTransactionHeader blockTag={blockNumber.toNumber()} />
+      <BlockTransactionResults
+        page={page}
+        total={total}
+        pageNumber={pageNumber}
+      />
     </StandardFrame>
   );
 };