Extract utility component TransactionAddress

src/Transaction.tsx

@@ -15,6 +15,7 @@ import {
   transactionDataCollector,
   useResolvedAddresses,
 } from "./useResolvedAddresses";
+import { SelectedTransactionContext } from "./useSelectedTransaction";
 
 const Details = React.lazy(
   () =>
@@ -76,6 +77,7 @@ const Transaction: React.FC = () => {
   const txDesc = useTransactionDescription(metadata, txData);
 
   return (
+    <SelectedTransactionContext.Provider value={txData}>
       <StandardFrame>
         <StandardSubtitle>Transaction Details</StandardSubtitle>
         {txData === null && (
@@ -124,6 +126,7 @@ const Transaction: React.FC = () => {
           </SelectionContext.Provider>
         )}
       </StandardFrame>
+    </SelectedTransactionContext.Provider>
   );
 };
 

src/components/TransactionAddress.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import AddressHighlighter from "./AddressHighlighter";
+import DecoratedAddressLink from "./DecoratedAddressLink";
+import { ResolvedAddresses } from "../api/address-resolver";
+import { useSelectedTransaction } from "../useSelectedTransaction";
+
+type TransactionAddressProps = {
+  address: string;
+  resolvedAddresses: ResolvedAddresses | undefined;
+};
+
+const TransactionAddress: React.FC<TransactionAddressProps> = ({
+  address,
+  resolvedAddresses,
+}) => {
+  const txData = useSelectedTransaction();
+  // TODO: push down creation coloring logic into DecoratedAddressLink
+  const creation = address === txData?.confirmedData?.createdContractAddress;
+
+  return (
+    <AddressHighlighter address={address}>
+      <DecoratedAddressLink
+        address={address}
+        miner={address === txData?.confirmedData?.miner}
+        txFrom={address === txData?.from}
+        txTo={address === txData?.to || creation}
+        creation={creation}
+        resolvedAddresses={resolvedAddresses}
+      />
+    </AddressHighlighter>
+  );
+};
+
+export default TransactionAddress;

src/transaction/Details.tsx

@@ -15,8 +15,7 @@ import ContentFrame from "../ContentFrame";
 import InfoRow from "../components/InfoRow";
 import BlockLink from "../components/BlockLink";
 import BlockConfirmations from "../components/BlockConfirmations";
-import AddressHighlighter from "../components/AddressHighlighter";
+import TransactionAddress from "../components/TransactionAddress";
-import DecoratedAddressLink from "../components/DecoratedAddressLink";
 import Copy from "../components/Copy";
 import Nonce from "../components/Nonce";
 import Timestamp from "../components/Timestamp";
@@ -152,14 +151,10 @@ const Details: React.FC<DetailsProps> = ({
       <InfoRow title="From / Nonce">
         <div className="flex divide-x-2 divide-dotted divide-gray-300">
           <div className="flex items-baseline space-x-2 -ml-1 mr-3">
-            <AddressHighlighter address={txData.from}>
+            <TransactionAddress
-              <DecoratedAddressLink
               address={txData.from}
-                miner={txData.from === txData.confirmedData?.miner}
-                txFrom
               resolvedAddresses={resolvedAddresses}
             />
-            </AddressHighlighter>
             <Copy value={txData.from} />
           </div>
           <div className="flex items-baseline pl-3">
@@ -170,14 +165,10 @@ const Details: React.FC<DetailsProps> = ({
       <InfoRow title={txData.to ? "Interacted With (To)" : "Contract Created"}>
         {txData.to ? (
           <div className="flex items-baseline space-x-2 -ml-1">
-            <AddressHighlighter address={txData.to}>
+            <TransactionAddress
-              <DecoratedAddressLink
               address={txData.to}
-                miner={txData.to === txData.confirmedData?.miner}
-                txTo
               resolvedAddresses={resolvedAddresses}
             />
-            </AddressHighlighter>
             <Copy value={txData.to} />
           </div>
         ) : txData.confirmedData === undefined ? (
@@ -186,16 +177,10 @@ const Details: React.FC<DetailsProps> = ({
           </span>
         ) : (
           <div className="flex items-baseline space-x-2 -ml-1">
-            <AddressHighlighter
+            <TransactionAddress
               address={txData.confirmedData?.createdContractAddress!}
-            >
-              <DecoratedAddressLink
-                address={txData.confirmedData.createdContractAddress!}
-                creation
-                txTo
               resolvedAddresses={resolvedAddresses}
             />
-            </AddressHighlighter>
             <Copy value={txData.confirmedData.createdContractAddress!} />
           </div>
         )}

src/transaction/LogEntry.tsx

@@ -2,8 +2,7 @@ import React, { useMemo } from "react";
 import { Log } from "@ethersproject/abstract-provider";
 import { Fragment, Interface, LogDescription } from "@ethersproject/abi";
 import { Tab } from "@headlessui/react";
-import AddressHighlighter from "../components/AddressHighlighter";
+import TransactionAddress from "../components/TransactionAddress";
-import DecoratedAddressLink from "../components/DecoratedAddressLink";
 import Copy from "../components/Copy";
 import ModeTab from "../components/ModeTab";
 import DecodedParamsTable from "./decoder/DecodedParamsTable";
@@ -63,15 +62,10 @@ const LogEntry: React.FC<LogEntryProps> = ({
           <div className="font-bold text-right">Address</div>
           <div className="col-span-11 mr-auto">
             <div className="flex items-baseline space-x-2 -ml-1 mr-3">
-              <AddressHighlighter address={log.address}>
+              <TransactionAddress
-                <DecoratedAddressLink
                 address={log.address}
-                  miner={log.address === txData.confirmedData?.miner}
-                  txFrom={log.address === txData.from}
-                  txTo={log.address === txData.to}
                 resolvedAddresses={resolvedAddresses}
               />
-              </AddressHighlighter>
               <Copy value={log.address} />
             </div>
           </div>

src/transaction/decoder/AddressDecoder.tsx

@@ -1,31 +1,22 @@
 import React from "react";
-import AddressHighlighter from "../../components/AddressHighlighter";
-import DecoratedAddressLink from "../../components/DecoratedAddressLink";
 import Copy from "../../components/Copy";
-import { TransactionData } from "../../types";
 import { ResolvedAddresses } from "../../api/address-resolver";
+import TransactionAddress from "../../components/TransactionAddress";
 
 type AddressDecoderProps = {
   r: any;
-  txData: TransactionData;
   resolvedAddresses?: ResolvedAddresses | undefined;
 };
 
 const AddressDecoder: React.FC<AddressDecoderProps> = ({
   r,
-  txData,
   resolvedAddresses,
 }) => (
   <div className="flex items-baseline space-x-2 -ml-1 mr-3">
-    <AddressHighlighter address={r.toString()}>
+    <TransactionAddress
-      <DecoratedAddressLink
       address={r.toString()}
-        miner={r.toString() === txData.confirmedData?.miner}
-        txFrom={r.toString() === txData.from}
-        txTo={r.toString() === txData.to}
       resolvedAddresses={resolvedAddresses}
     />
-    </AddressHighlighter>
     <Copy value={r.toString()} />
   </div>
 );

src/transaction/decoder/DecodedParamRow.tsx

@@ -75,11 +75,7 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
           {paramType.baseType === "uint256" ? (
             <Uint256Decoder r={r} />
           ) : paramType.baseType === "address" ? (
-            <AddressDecoder
+            <AddressDecoder r={r} resolvedAddresses={resolvedAddresses} />
-              r={r}
-              txData={txData}
-              resolvedAddresses={resolvedAddresses}
-            />
           ) : paramType.baseType === "bool" ? (
             <BooleanDecoder r={r} />
           ) : paramType.baseType === "bytes" ? (

src/useSelectedTransaction.ts

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+import { TransactionData } from "./types";
+
+export const SelectedTransactionContext = createContext<
+  TransactionData | null | undefined
+>(undefined);
+
+export const useSelectedTransaction = () =>
+  useContext(SelectedTransactionContext);