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,54 +77,56 @@ const Transaction: React.FC = () => {
   const txDesc = useTransactionDescription(metadata, txData);
 
   return (
-    <StandardFrame>
-      <StandardSubtitle>Transaction Details</StandardSubtitle>
-      {txData === null && (
-        <ContentFrame>
-          <div className="py-4 text-sm">
-            Transaction <span className="font-hash">{txhash}</span> not found.
-          </div>
-        </ContentFrame>
-      )}
-      {txData && (
-        <SelectionContext.Provider value={selectionCtx}>
-          <Tab.Group>
-            <Tab.List className="flex space-x-2 border-l border-r border-t rounded-t-lg bg-white">
-              <NavTab href={`/tx/${txhash}`}>Overview</NavTab>
-              {txData.confirmedData?.blockNumber !== undefined && (
-                <NavTab href={`/tx/${txhash}/logs`}>
-                  Logs
-                  {txData && ` (${txData.confirmedData?.logs?.length ?? 0})`}
-                </NavTab>
-              )}
-            </Tab.List>
-          </Tab.Group>
-          <React.Suspense fallback={null}>
-            <Switch>
-              <Route path="/tx/:txhash/" exact>
-                <Details
-                  txData={txData}
-                  txDesc={txDesc}
-                  userDoc={metadata?.output.userdoc}
-                  devDoc={metadata?.output.devdoc}
-                  internalOps={internalOps}
-                  sendsEthToMiner={sendsEthToMiner}
-                  ethUSDPrice={blockETHUSDPrice}
-                  resolvedAddresses={resolvedAddresses}
-                />
-              </Route>
-              <Route path="/tx/:txhash/logs/" exact>
-                <Logs
-                  txData={txData}
-                  metadata={metadata}
-                  resolvedAddresses={resolvedAddresses}
-                />
-              </Route>
-            </Switch>
-          </React.Suspense>
-        </SelectionContext.Provider>
-      )}
-    </StandardFrame>
+    <SelectedTransactionContext.Provider value={txData}>
+      <StandardFrame>
+        <StandardSubtitle>Transaction Details</StandardSubtitle>
+        {txData === null && (
+          <ContentFrame>
+            <div className="py-4 text-sm">
+              Transaction <span className="font-hash">{txhash}</span> not found.
+            </div>
+          </ContentFrame>
+        )}
+        {txData && (
+          <SelectionContext.Provider value={selectionCtx}>
+            <Tab.Group>
+              <Tab.List className="flex space-x-2 border-l border-r border-t rounded-t-lg bg-white">
+                <NavTab href={`/tx/${txhash}`}>Overview</NavTab>
+                {txData.confirmedData?.blockNumber !== undefined && (
+                  <NavTab href={`/tx/${txhash}/logs`}>
+                    Logs
+                    {txData && ` (${txData.confirmedData?.logs?.length ?? 0})`}
+                  </NavTab>
+                )}
+              </Tab.List>
+            </Tab.Group>
+            <React.Suspense fallback={null}>
+              <Switch>
+                <Route path="/tx/:txhash/" exact>
+                  <Details
+                    txData={txData}
+                    txDesc={txDesc}
+                    userDoc={metadata?.output.userdoc}
+                    devDoc={metadata?.output.devdoc}
+                    internalOps={internalOps}
+                    sendsEthToMiner={sendsEthToMiner}
+                    ethUSDPrice={blockETHUSDPrice}
+                    resolvedAddresses={resolvedAddresses}
+                  />
+                </Route>
+                <Route path="/tx/:txhash/logs/" exact>
+                  <Logs
+                    txData={txData}
+                    metadata={metadata}
+                    resolvedAddresses={resolvedAddresses}
+                  />
+                </Route>
+              </Switch>
+            </React.Suspense>
+          </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 DecoratedAddressLink from "../components/DecoratedAddressLink";
+import TransactionAddress from "../components/TransactionAddress";
 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}>
-              <DecoratedAddressLink
-                address={txData.from}
-                miner={txData.from === txData.confirmedData?.miner}
-                txFrom
-                resolvedAddresses={resolvedAddresses}
-              />
-            </AddressHighlighter>
+            <TransactionAddress
+              address={txData.from}
+              resolvedAddresses={resolvedAddresses}
+            />
             <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}>
-              <DecoratedAddressLink
-                address={txData.to}
-                miner={txData.to === txData.confirmedData?.miner}
-                txTo
-                resolvedAddresses={resolvedAddresses}
-              />
-            </AddressHighlighter>
+            <TransactionAddress
+              address={txData.to}
+              resolvedAddresses={resolvedAddresses}
+            />
             <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>
+              resolvedAddresses={resolvedAddresses}
+            />
             <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 DecoratedAddressLink from "../components/DecoratedAddressLink";
+import TransactionAddress from "../components/TransactionAddress";
 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}>
-                <DecoratedAddressLink
-                  address={log.address}
-                  miner={log.address === txData.confirmedData?.miner}
-                  txFrom={log.address === txData.from}
-                  txTo={log.address === txData.to}
-                  resolvedAddresses={resolvedAddresses}
-                />
-              </AddressHighlighter>
+              <TransactionAddress
+                address={log.address}
+                resolvedAddresses={resolvedAddresses}
+              />
               <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()}>
-      <DecoratedAddressLink
-        address={r.toString()}
-        miner={r.toString() === txData.confirmedData?.miner}
-        txFrom={r.toString() === txData.from}
-        txTo={r.toString() === txData.to}
-        resolvedAddresses={resolvedAddresses}
-      />
-    </AddressHighlighter>
+    <TransactionAddress
+      address={r.toString()}
+      resolvedAddresses={resolvedAddresses}
+    />
     <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
-              r={r}
-              txData={txData}
-              resolvedAddresses={resolvedAddresses}
-            />
+            <AddressDecoder r={r} 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);