Extract highlighter decorator component

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}

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}

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;

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
+            <AddressHighlighter address={tx.from}>
-              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>
+            </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
+          <AddressHighlighter address={tx.to}>
-            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>
+          </AddressHighlighter>
         )}
       </span>
       <span className="col-span-2 truncate">