Apply highlighter decorator to transaction details page

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>

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>
   );

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

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>
   );
 };