From b723182ad3d6face2b9ec3596e62083d41c44980 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sun, 7 Nov 2021 08:21:56 -0300
Subject: [PATCH 1/2] Extract utility component TransactionAddress

---
 src/Transaction.tsx                         | 99 +++++++++++----------
 src/components/TransactionAddress.tsx       | 34 +++++++
 src/transaction/Details.tsx                 | 39 +++-----
 src/transaction/LogEntry.tsx                | 16 ++--
 src/transaction/decoder/AddressDecoder.tsx  | 19 ++--
 src/transaction/decoder/DecodedParamRow.tsx |  6 +-
 src/useSelectedTransaction.ts               |  9 ++
 7 files changed, 117 insertions(+), 105 deletions(-)
 create mode 100644 src/components/TransactionAddress.tsx
 create mode 100644 src/useSelectedTransaction.ts

diff --git a/src/Transaction.tsx b/src/Transaction.tsx
index 7107b32..bd4cbaa 100644
--- a/src/Transaction.tsx
+++ b/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>
   );
 };
 
diff --git a/src/components/TransactionAddress.tsx b/src/components/TransactionAddress.tsx
new file mode 100644
index 0000000..8db3df4
--- /dev/null
+++ b/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;
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 85cb2fc..3df374a 100644
--- a/src/transaction/Details.tsx
+++ b/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>
         )}
diff --git a/src/transaction/LogEntry.tsx b/src/transaction/LogEntry.tsx
index 4e89ffd..d8bf1ea 100644
--- a/src/transaction/LogEntry.tsx
+++ b/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>
diff --git a/src/transaction/decoder/AddressDecoder.tsx b/src/transaction/decoder/AddressDecoder.tsx
index 45fb30c..ae43ee1 100644
--- a/src/transaction/decoder/AddressDecoder.tsx
+++ b/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>
 );
diff --git a/src/transaction/decoder/DecodedParamRow.tsx b/src/transaction/decoder/DecodedParamRow.tsx
index b2b0baf..677ceab 100644
--- a/src/transaction/decoder/DecodedParamRow.tsx
+++ b/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" ? (
diff --git a/src/useSelectedTransaction.ts b/src/useSelectedTransaction.ts
new file mode 100644
index 0000000..8676a53
--- /dev/null
+++ b/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);

From 128c70b972cb60136428a428f0793fbb0fcef304 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sun, 7 Nov 2021 08:56:12 -0300
Subject: [PATCH 2/2] Replace component

---
 src/TokenTransferItem.tsx             | 41 ++++++++++-----------------
 src/components/TransactionAddress.tsx |  4 +++
 2 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/src/TokenTransferItem.tsx b/src/TokenTransferItem.tsx
index e7c65c4..d28a538 100644
--- a/src/TokenTransferItem.tsx
+++ b/src/TokenTransferItem.tsx
@@ -1,9 +1,8 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
-import AddressHighlighter from "./components/AddressHighlighter";
+import TransactionAddress from "./components/TransactionAddress";
 import ValueHighlighter from "./components/ValueHighlighter";
-import DecoratedAddressLink from "./components/DecoratedAddressLink";
 import FormattedBalance from "./components/FormattedBalance";
 import {
   AddressContext,
@@ -34,27 +33,19 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
     <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}>
-          <DecoratedAddressLink
-            address={t.from}
-            addressCtx={AddressContext.FROM}
-            txFrom={t.from === txData.from}
-            txTo={t.from === txData.to}
-            resolvedAddresses={resolvedAddresses}
-          />
-        </AddressHighlighter>
+        <TransactionAddress
+          address={t.from}
+          addressCtx={AddressContext.FROM}
+          resolvedAddresses={resolvedAddresses}
+        />
       </div>
       <div className="flex space-x-1">
         <span className="font-bold">To</span>
-        <AddressHighlighter address={t.to}>
-          <DecoratedAddressLink
-            address={t.to}
-            addressCtx={AddressContext.TO}
-            txFrom={t.to === txData.from}
-            txTo={t.to === txData.to}
-            resolvedAddresses={resolvedAddresses}
-          />
-        </AddressHighlighter>
+        <TransactionAddress
+          address={t.to}
+          addressCtx={AddressContext.TO}
+          resolvedAddresses={resolvedAddresses}
+        />
       </div>
       <div className="col-span-3 flex space-x-1">
         <span className="font-bold">For</span>
@@ -66,12 +57,10 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
             />
           </ValueHighlighter>
         </span>
-        <AddressHighlighter address={t.token}>
-          <DecoratedAddressLink
-            address={t.token}
-            resolvedAddresses={resolvedAddresses}
-          />
-        </AddressHighlighter>
+        <TransactionAddress
+          address={t.token}
+          resolvedAddresses={resolvedAddresses}
+        />
       </div>
     </div>
   </div>
diff --git a/src/components/TransactionAddress.tsx b/src/components/TransactionAddress.tsx
index 8db3df4..1595ef0 100644
--- a/src/components/TransactionAddress.tsx
+++ b/src/components/TransactionAddress.tsx
@@ -3,14 +3,17 @@ import AddressHighlighter from "./AddressHighlighter";
 import DecoratedAddressLink from "./DecoratedAddressLink";
 import { ResolvedAddresses } from "../api/address-resolver";
 import { useSelectedTransaction } from "../useSelectedTransaction";
+import { AddressContext } from "../types";
 
 type TransactionAddressProps = {
   address: string;
+  addressCtx?: AddressContext | undefined;
   resolvedAddresses: ResolvedAddresses | undefined;
 };
 
 const TransactionAddress: React.FC<TransactionAddressProps> = ({
   address,
+  addressCtx,
   resolvedAddresses,
 }) => {
   const txData = useSelectedTransaction();
@@ -21,6 +24,7 @@ const TransactionAddress: React.FC<TransactionAddressProps> = ({
     <AddressHighlighter address={address}>
       <DecoratedAddressLink
         address={address}
+        addressCtx={addressCtx}
         miner={address === txData?.confirmedData?.miner}
         txFrom={address === txData?.from}
         txTo={address === txData?.to || creation}