Add address resolution support to trace tool

src/Transaction.tsx

@@ -127,7 +127,7 @@ const Transaction: React.FC = () => {
                 />
               </Route>
               <Route path="/tx/:txhash/trace" exact>
-                <Trace txData={txData} />
+                <Trace txData={txData} resolvedAddresses={resolvedAddresses} />
               </Route>
             </Switch>
           </React.Suspense>

src/transaction/Trace.tsx

@@ -2,17 +2,19 @@ import React, { useContext } from "react";
 import AddressHighlighter from "../components/AddressHighlighter";
 import DecoratedAddressLink from "../components/DecoratedAddressLink";
 import ContentFrame from "../ContentFrame";
+import TraceItem from "./TraceItem";
 import { TransactionData } from "../types";
 import { useBatch4Bytes } from "../use4Bytes";
 import { useTraceTransaction, useUniqueSignatures } from "../useErigonHooks";
 import { RuntimeContext } from "../useRuntime";
-import TraceItem from "./TraceItem";
+import { ResolvedAddresses } from "../api/address-resolver";
 
 type TraceProps = {
   txData: TransactionData;
+  resolvedAddresses: ResolvedAddresses | undefined;
 };
 
-const Trace: React.FC<TraceProps> = ({ txData }) => {
+const Trace: React.FC<TraceProps> = ({ txData, resolvedAddresses }) => {
   const { provider } = useContext(RuntimeContext);
   const traces = useTraceTransaction(provider, txData.transactionHash);
   const uniqueSignatures = useUniqueSignatures(traces);
@@ -28,6 +30,7 @@ const Trace: React.FC<TraceProps> = ({ txData }) => {
               miner={txData.from === txData.confirmedData?.miner}
               txFrom
               txTo={txData.from === txData.to}
+              resolvedAddresses={resolvedAddresses}
             />
           </AddressHighlighter>
         </div>
@@ -41,6 +44,7 @@ const Trace: React.FC<TraceProps> = ({ txData }) => {
                 txData={txData}
                 last={i === a.length - 1}
                 fourBytesMap={sigMap}
+                resolvedAddresses={resolvedAddresses}
               />
             ))}
           </div>

src/transaction/TraceItem.tsx

@@ -6,12 +6,14 @@ import FunctionSignature from "./FunctionSignature";
 import { TransactionData } from "../types";
 import { extract4Bytes, FourBytesEntry } from "../use4Bytes";
 import { TraceGroup } from "../useErigonHooks";
+import { ResolvedAddresses } from "../api/address-resolver";
 
 type TraceItemProps = {
   t: TraceGroup;
   txData: TransactionData;
   last: boolean;
   fourBytesMap: Record<string, FourBytesEntry | null | undefined>;
+  resolvedAddresses: ResolvedAddresses | undefined;
 };
 
 const TraceItem: React.FC<TraceItemProps> = ({
@@ -19,6 +21,7 @@ const TraceItem: React.FC<TraceItemProps> = ({
   txData,
   last,
   fourBytesMap,
+  resolvedAddresses,
 }) => {
   const raw4Bytes = extract4Bytes(t.input);
   const sigText =
@@ -42,6 +45,7 @@ const TraceItem: React.FC<TraceItemProps> = ({
                 miner={t.to === txData.confirmedData?.miner}
                 txFrom={t.to === txData.from}
                 txTo={t.to === txData.to}
+                resolvedAddresses={resolvedAddresses}
               />
             </AddressHighlighter>
           </span>
@@ -66,6 +70,7 @@ const TraceItem: React.FC<TraceItemProps> = ({
               txData={txData}
               last={i === a.length - 1}
               fourBytesMap={fourBytesMap}
+              resolvedAddresses={resolvedAddresses}
             />
           ))}
         </div>

src/useResolvedAddresses.ts

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from "react";
 import { JsonRpcProvider } from "@ethersproject/providers";
 import { ProcessedTransaction, TransactionData } from "./types";
 import { batchPopulate, ResolvedAddresses } from "./api/address-resolver";
+import { TraceGroup } from "./useErigonHooks";
 
 export type AddressCollector = () => string[];
 
@@ -61,6 +62,31 @@ export const transactionDataCollector =
     return Array.from(uniqueAddresses);
   };
 
+export const tracesCollector =
+  (traces: TraceGroup[] | undefined): AddressCollector =>
+  () => {
+    if (traces === undefined) {
+      return [];
+    }
+
+    const uniqueAddresses = new Set<string>();
+    let searchTraces = [...traces];
+    while (searchTraces.length > 0) {
+      const nextSearch: TraceGroup[] = [];
+
+      for (const g of searchTraces) {
+        uniqueAddresses.add(g.from);
+        uniqueAddresses.add(g.to);
+        if (g.children) {
+          nextSearch.push(...g.children);
+        }
+      }
+
+      searchTraces = nextSearch;
+    }
+    return Array.from(uniqueAddresses);
+  };
+
 export const useResolvedAddresses = (
   provider: JsonRpcProvider | undefined,
   addrCollector: AddressCollector