Replace batch calls of address resolution caches and deep props down with in-place useSWR calls

src/TokenTransferItem.tsx

@@ -10,13 +10,11 @@ import {
   TokenMeta,
   TokenTransfer,
 } from "./types";
-import { ResolvedAddresses } from "./api/address-resolver";
 import { Metadata } from "./sourcify/useSourcify";
 
 type TokenTransferItemProps = {
   t: TokenTransfer;
   tokenMeta?: TokenMeta | null | undefined;
-  resolvedAddresses: ResolvedAddresses | undefined;
   metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
 };
 
@@ -24,7 +22,6 @@ type TokenTransferItemProps = {
 const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
   t,
   tokenMeta,
-  resolvedAddresses,
   metadatas,
 }) => (
   <div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100">
@@ -37,7 +34,6 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
         <TransactionAddress
           address={t.from}
           addressCtx={AddressContext.FROM}
-          resolvedAddresses={resolvedAddresses}
           metadata={metadatas[t.from]}
         />
       </div>
@@ -46,7 +42,6 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
         <TransactionAddress
           address={t.to}
           addressCtx={AddressContext.TO}
-          resolvedAddresses={resolvedAddresses}
           metadata={metadatas[t.to]}
         />
       </div>
@@ -60,11 +55,7 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
             />
           </ValueHighlighter>
         </span>
-        <TransactionAddress
+        <TransactionAddress address={t.token} metadata={metadatas[t.token]} />
-          address={t.token}
-          resolvedAddresses={resolvedAddresses}
-          metadata={metadatas[t.token]}
-        />
       </div>
     </div>
   </div>

src/Transaction.tsx

@@ -11,10 +11,7 @@ import { useInternalOperations, useTxData } from "./useErigonHooks";
 import { useETHUSDOracle } from "./usePriceOracle";
 import { useAppConfigContext } from "./useAppConfig";
 import { useSourcify, useTransactionDescription } from "./sourcify/useSourcify";
-import {
+import { transactionDataCollector } from "./useResolvedAddresses";
-  transactionDataCollector,
-  useResolvedAddresses,
-} from "./useResolvedAddresses";
 import { SelectedTransactionContext } from "./useSelectedTransaction";
 
 const Details = React.lazy(
@@ -49,7 +46,6 @@ const Transaction: React.FC = () => {
     () => transactionDataCollector(txData),
     [txData]
   );
-  const resolvedAddresses = useResolvedAddresses(provider, addrCollector);
 
   const internalOps = useInternalOperations(provider, txData);
   const sendsEthToMiner = useMemo(() => {
@@ -119,29 +115,14 @@ const Transaction: React.FC = () => {
                       internalOps={internalOps}
                       sendsEthToMiner={sendsEthToMiner}
                       ethUSDPrice={blockETHUSDPrice}
-                      resolvedAddresses={resolvedAddresses}
                     />
                   }
                 />
                 <Route
                   path="logs"
-                  element={
+                  element={<Logs txData={txData} metadata={metadata} />}
-                    <Logs
-                      txData={txData}
-                      metadata={metadata}
-                      resolvedAddresses={resolvedAddresses}
-                    />
-                  }
-                />
-                <Route
-                  path="trace"
-                  element={
-                    <Trace
-                      txData={txData}
-                      resolvedAddresses={resolvedAddresses}
-                    />
-                  }
                 />
+                <Route path="trace" element={<Trace txData={txData} />} />
               </Routes>
             </React.Suspense>
           </SelectionContext.Provider>

src/address/AddressTransactionResults.tsx

@@ -104,7 +104,6 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
 
   // Resolve all addresses that appear on this page results
   const addrCollector = useMemo(() => pageCollector(page), [page]);
-  const resolvedAddresses = useResolvedAddresses(provider, addrCollector);
 
   // Calculate Sourcify metadata for all addresses that appear on this page results
   const addresses = useMemo(() => {
@@ -152,7 +151,6 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
             <TransactionItem
               key={tx.hash}
               tx={tx}
-              resolvedAddresses={resolvedAddresses}
               selectedAddress={address}
               feeDisplay={feeDisplay}
               priceMap={priceMap}

src/block/BlockTransactionResults.tsx

@@ -8,7 +8,7 @@ import TransactionItem from "../search/TransactionItem";
 import { useFeeToggler } from "../search/useFeeToggler";
 import { RuntimeContext } from "../useRuntime";
 import { SelectionContext, useSelection } from "../useSelection";
-import { pageCollector, useResolvedAddresses } from "../useResolvedAddresses";
+import { pageCollector } from "../useResolvedAddresses";
 import { ChecksummedAddress, ProcessedTransaction } from "../types";
 import { PAGE_SIZE } from "../params";
 import { useMultipleETHUSDOracle } from "../usePriceOracle";
@@ -31,7 +31,6 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
   const selectionCtx = useSelection();
   const [feeDisplay, feeDisplayToggler] = useFeeToggler();
   const addrCollector = useMemo(() => pageCollector(page), [page]);
-  const resolvedAddresses = useResolvedAddresses(provider, addrCollector);
   const blockTags = useMemo(() => [blockTag], [blockTag]);
   const priceMap = useMultipleETHUSDOracle(provider, blockTags);
 
@@ -79,7 +78,6 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
             <TransactionItem
               key={tx.hash}
               tx={tx}
-              resolvedAddresses={resolvedAddresses}
               feeDisplay={feeDisplay}
               priceMap={priceMap}
               metadatas={metadatas}

src/components/AddressOrENSName.tsx

@@ -1,24 +1,22 @@
-import React from "react";
+import React, { useContext } from "react";
-import {
+import { resolverRendererRegistry } from "../api/address-resolver";
-  ResolvedAddresses,
+import { useResolvedAddress } from "../useResolvedAddresses";
-  resolverRendererRegistry,
+import { RuntimeContext } from "../useRuntime";
-} from "../api/address-resolver";
 import PlainAddress from "./PlainAddress";
 
 type AddressOrENSNameProps = {
   address: string;
   selectedAddress?: string;
   dontOverrideColors?: boolean;
-  resolvedAddresses?: ResolvedAddresses | undefined;
 };
 
 const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
   address,
   selectedAddress,
   dontOverrideColors,
-  resolvedAddresses,
 }) => {
-  const resolvedAddress = resolvedAddresses?.[address];
+  const { provider } = useContext(RuntimeContext);
+  const resolvedAddress = useResolvedAddress(provider, address);
   const linkable = address !== selectedAddress;
 
   if (!resolvedAddress) {

src/components/DecoratedAddressLink.tsx

@@ -9,7 +9,6 @@ import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins";
 import AddressOrENSName from "./AddressOrENSName";
 import SourcifyLogo from "../sourcify/SourcifyLogo";
 import { AddressContext, ZERO_ADDRESS } from "../types";
-import { ResolvedAddresses } from "../api/address-resolver";
 import { Metadata } from "../sourcify/useSourcify";
 
 type DecoratedAddressLinkProps = {
@@ -21,7 +20,6 @@ type DecoratedAddressLinkProps = {
   selfDestruct?: boolean;
   txFrom?: boolean;
   txTo?: boolean;
-  resolvedAddresses?: ResolvedAddresses | undefined;
   metadata?: Metadata | null | undefined;
 };
 
@@ -34,7 +32,6 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
   selfDestruct,
   txFrom,
   txTo,
-  resolvedAddresses,
   metadata,
 }) => {
   const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
@@ -87,7 +84,6 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
         address={address}
         selectedAddress={selectedAddress}
         dontOverrideColors={mint || burn}
-        resolvedAddresses={resolvedAddresses}
       />
     </div>
   );

src/components/InternalCreate.tsx

@@ -5,17 +5,12 @@ import TransactionAddress from "./TransactionAddress";
 import AddressHighlighter from "./AddressHighlighter";
 import DecoratedAddressLink from "./DecoratedAddressLink";
 import { InternalOperation } from "../types";
-import { ResolvedAddresses } from "../api/address-resolver";
 
 type InternalCreateProps = {
   internalOp: InternalOperation;
-  resolvedAddresses: ResolvedAddresses | undefined;
 };
 
-const InternalCreate: React.FC<InternalCreateProps> = ({
+const InternalCreate: React.FC<InternalCreateProps> = ({ internalOp }) => (
-  internalOp,
-  resolvedAddresses,
-}) => (
   <div className="flex items-baseline space-x-1 whitespace-nowrap">
     <span className="text-gray-500">
       <FontAwesomeIcon icon={faAngleRight} size="1x" /> CREATE
@@ -23,20 +18,11 @@ const InternalCreate: React.FC<InternalCreateProps> = ({
     <span>Contract</span>
     <div className="flex items-baseline">
       <AddressHighlighter address={internalOp.to}>
-        <DecoratedAddressLink
+        <DecoratedAddressLink address={internalOp.to} creation />
-          address={internalOp.to}
-          creation
-          resolvedAddresses={resolvedAddresses}
-        />
       </AddressHighlighter>
     </div>
     <span className="flex items-baseline text-gray-400">
-      (Creator:{" "}
+      (Creator: <TransactionAddress address={internalOp.from} />)
-      <TransactionAddress
-        address={internalOp.from}
-        resolvedAddresses={resolvedAddresses}
-      />
-      )
     </span>
   </div>
 );

src/components/InternalSelfDestruct.tsx

@@ -5,19 +5,16 @@ import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
 import AddressHighlighter from "./AddressHighlighter";
 import DecoratedAddressLink from "./DecoratedAddressLink";
 import { TransactionData, InternalOperation } from "../types";
-import { ResolvedAddresses } from "../api/address-resolver";
 import TransactionAddress from "./TransactionAddress";
 
 type InternalSelfDestructProps = {
   txData: TransactionData;
   internalOp: InternalOperation;
-  resolvedAddresses: ResolvedAddresses | undefined;
 };
 
 const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
   txData,
   internalOp,
-  resolvedAddresses,
 }) => {
   const toMiner =
     txData.confirmedData?.miner !== undefined &&
@@ -32,21 +29,12 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
         <span>Contract</span>
         <div className="flex items-baseline">
           <AddressHighlighter address={internalOp.from}>
-            <DecoratedAddressLink
+            <DecoratedAddressLink address={internalOp.from} selfDestruct />
-              address={internalOp.from}
-              selfDestruct
-              resolvedAddresses={resolvedAddresses}
-            />
           </AddressHighlighter>
         </div>
         {internalOp.value.isZero() && (
           <div className="flex items-baseline text-gray-400">
-            (To:{" "}
+            (To: <TransactionAddress address={internalOp.to} />)
-            <TransactionAddress
-              address={internalOp.to}
-              resolvedAddresses={resolvedAddresses}
-            />
-            )
           </div>
         )}
       </div>
@@ -64,11 +52,7 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
                   toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
                 }`}
               >
-                <DecoratedAddressLink
+                <DecoratedAddressLink address={internalOp.to} miner={toMiner} />
-                  address={internalOp.to}
-                  miner={toMiner}
-                  resolvedAddresses={resolvedAddresses}
-                />
               </div>
             </AddressHighlighter>
           </div>

src/components/InternalTransactionOperation.tsx

@@ -3,37 +3,24 @@ import InternalTransfer from "./InternalTransfer";
 import InternalSelfDestruct from "./InternalSelfDestruct";
 import InternalCreate from "./InternalCreate";
 import { TransactionData, InternalOperation, OperationType } from "../types";
-import { ResolvedAddresses } from "../api/address-resolver";
 
 type InternalTransactionOperationProps = {
   txData: TransactionData;
   internalOp: InternalOperation;
-  resolvedAddresses: ResolvedAddresses | undefined;
 };
 
 const InternalTransactionOperation: React.FC<InternalTransactionOperationProps> =
-  ({ txData, internalOp, resolvedAddresses }) => (
+  ({ txData, internalOp }) => (
     <>
       {internalOp.type === OperationType.TRANSFER && (
-        <InternalTransfer
+        <InternalTransfer txData={txData} internalOp={internalOp} />
-          txData={txData}
-          internalOp={internalOp}
-          resolvedAddresses={resolvedAddresses}
-        />
       )}
       {internalOp.type === OperationType.SELF_DESTRUCT && (
-        <InternalSelfDestruct
+        <InternalSelfDestruct txData={txData} internalOp={internalOp} />
-          txData={txData}
-          internalOp={internalOp}
-          resolvedAddresses={resolvedAddresses}
-        />
       )}
       {(internalOp.type === OperationType.CREATE ||
         internalOp.type === OperationType.CREATE2) && (
-        <InternalCreate
+        <InternalCreate internalOp={internalOp} />
-          internalOp={internalOp}
-          resolvedAddresses={resolvedAddresses}
-        />
       )}
     </>
   );

src/components/InternalTransfer.tsx

@@ -5,18 +5,15 @@ import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
 import AddressHighlighter from "./AddressHighlighter";
 import DecoratedAddressLink from "./DecoratedAddressLink";
 import { TransactionData, InternalOperation } from "../types";
-import { ResolvedAddresses } from "../api/address-resolver";
 
 type InternalTransferProps = {
   txData: TransactionData;
   internalOp: InternalOperation;
-  resolvedAddresses: ResolvedAddresses | undefined;
 };
 
 const InternalTransfer: React.FC<InternalTransferProps> = ({
   txData,
   internalOp,
-  resolvedAddresses,
 }) => {
   const fromMiner =
     txData.confirmedData?.miner !== undefined &&
@@ -44,7 +41,6 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
               miner={fromMiner}
               txFrom={internalOp.from === txData.from}
               txTo={internalOp.from === txData.to}
-              resolvedAddresses={resolvedAddresses}
             />
           </div>
         </AddressHighlighter>
@@ -62,7 +58,6 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
               miner={toMiner}
               txFrom={internalOp.to === txData.from}
               txTo={internalOp.to === txData.to}
-              resolvedAddresses={resolvedAddresses}
             />
           </div>
         </AddressHighlighter>

src/components/TransactionAddress.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import AddressHighlighter from "./AddressHighlighter";
 import DecoratedAddressLink from "./DecoratedAddressLink";
-import { ResolvedAddresses } from "../api/address-resolver";
 import { useSelectedTransaction } from "../useSelectedTransaction";
 import { AddressContext } from "../types";
 import { Metadata } from "../sourcify/useSourcify";
@@ -9,14 +8,12 @@ import { Metadata } from "../sourcify/useSourcify";
 type TransactionAddressProps = {
   address: string;
   addressCtx?: AddressContext | undefined;
-  resolvedAddresses: ResolvedAddresses | undefined;
   metadata?: Metadata | null | undefined;
 };
 
 const TransactionAddress: React.FC<TransactionAddressProps> = ({
   address,
   addressCtx,
-  resolvedAddresses,
   metadata,
 }) => {
   const txData = useSelectedTransaction();
@@ -32,7 +29,6 @@ const TransactionAddress: React.FC<TransactionAddressProps> = ({
         txFrom={address === txData?.from}
         txTo={address === txData?.to || creation}
         creation={creation}
-        resolvedAddresses={resolvedAddresses}
         metadata={metadata}
       />
     </AddressHighlighter>

src/search/TransactionItem.tsx

@@ -18,12 +18,10 @@ import { ChecksummedAddress, ProcessedTransaction } from "../types";
 import { FeeDisplay } from "./useFeeToggler";
 import { formatValue } from "../components/formatter";
 import ETH2USDValue from "../components/ETH2USDValue";
-import { ResolvedAddresses } from "../api/address-resolver";
 import { Metadata } from "../sourcify/useSourcify";
 
 type TransactionItemProps = {
   tx: ProcessedTransaction;
-  resolvedAddresses?: ResolvedAddresses;
   selectedAddress?: string;
   feeDisplay: FeeDisplay;
   priceMap: Record<BlockTag, BigNumber>;
@@ -32,7 +30,6 @@ type TransactionItemProps = {
 
 const TransactionItem: React.FC<TransactionItemProps> = ({
   tx,
-  resolvedAddresses,
   selectedAddress,
   feeDisplay,
   priceMap,
@@ -87,7 +84,6 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
                 address={tx.from}
                 selectedAddress={selectedAddress}
                 miner={tx.miner === tx.from}
-                resolvedAddresses={resolvedAddresses}
               />
             </AddressHighlighter>
           )}
@@ -110,7 +106,6 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
                 address={tx.to}
                 selectedAddress={selectedAddress}
                 miner={tx.miner === tx.to}
-                resolvedAddresses={resolvedAddresses}
                 metadata={metadatas[tx.to]}
               />
             </AddressHighlighter>
@@ -120,7 +115,6 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
                 address={tx.createdContractAddress!}
                 selectedAddress={selectedAddress}
                 creation
-                resolvedAddresses={resolvedAddresses}
                 metadata={metadatas[tx.createdContractAddress!]}
               />
             </AddressHighlighter>

src/transaction/Details.tsx

@@ -42,7 +42,6 @@ import {
   useTransactionDescription,
 } from "../use4Bytes";
 import { DevDoc, Metadata, useError, UserDoc } from "../sourcify/useSourcify";
-import { ResolvedAddresses } from "../api/address-resolver";
 import { RuntimeContext } from "../useRuntime";
 import { useContractsMetadata } from "../hooks";
 import { useTransactionError } from "../useErigonHooks";
@@ -56,7 +55,6 @@ type DetailsProps = {
   internalOps?: InternalOperation[];
   sendsEthToMiner: boolean;
   ethUSDPrice: BigNumber | undefined;
-  resolvedAddresses: ResolvedAddresses | undefined;
 };
 
 const Details: React.FC<DetailsProps> = ({
@@ -68,7 +66,6 @@ const Details: React.FC<DetailsProps> = ({
   internalOps,
   sendsEthToMiner,
   ethUSDPrice,
-  resolvedAddresses,
 }) => {
   const hasEIP1559 =
     txData.confirmedData?.blockBaseFeePerGas !== undefined &&
@@ -200,7 +197,6 @@ const Details: React.FC<DetailsProps> = ({
                         hasParamNames
                         userMethod={userError}
                         devMethod={devError}
-                        resolvedAddresses={resolvedAddresses}
                       />
                     )}
                   </Tab.Panel>
@@ -252,10 +248,7 @@ 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">
-            <TransactionAddress
+            <TransactionAddress address={txData.from} />
-              address={txData.from}
-              resolvedAddresses={resolvedAddresses}
-            />
             <Copy value={txData.from} />
           </div>
           <div className="flex items-baseline pl-3">
@@ -268,7 +261,6 @@ const Details: React.FC<DetailsProps> = ({
           <div className="flex items-baseline space-x-2 -ml-1">
             <TransactionAddress
               address={txData.to}
-              resolvedAddresses={resolvedAddresses}
               metadata={metadatas?.[txData.to]}
             />
             <Copy value={txData.to} />
@@ -281,7 +273,6 @@ const Details: React.FC<DetailsProps> = ({
           <div className="flex items-baseline space-x-2 -ml-1">
             <TransactionAddress
               address={txData.confirmedData?.createdContractAddress!}
-              resolvedAddresses={resolvedAddresses}
               metadata={
                 metadatas?.[txData.confirmedData?.createdContractAddress!]
               }
@@ -296,7 +287,6 @@ const Details: React.FC<DetailsProps> = ({
                 key={i}
                 txData={txData}
                 internalOp={op}
-                resolvedAddresses={resolvedAddresses}
               />
             ))}
           </div>
@@ -314,7 +304,6 @@ const Details: React.FC<DetailsProps> = ({
               key={i}
               t={t}
               tokenMeta={txData.tokenMetas[t.token]}
-              resolvedAddresses={resolvedAddresses}
               metadatas={metadatas}
             />
           ))}
@@ -438,7 +427,6 @@ const Details: React.FC<DetailsProps> = ({
           data={txData.data}
           userMethod={userMethod}
           devMethod={devMethod}
-          resolvedAddresses={resolvedAddresses}
         />
       </InfoRow>
     </ContentFrame>

src/transaction/LogEntry.tsx

@@ -8,23 +8,16 @@ import ModeTab from "../components/ModeTab";
 import DecodedParamsTable from "./decoder/DecodedParamsTable";
 import DecodedLogSignature from "./decoder/DecodedLogSignature";
 import { useTopic0 } from "../useTopic0";
-import { ResolvedAddresses } from "../api/address-resolver";
 import { ChecksummedAddress } from "../types";
 import { Metadata } from "../sourcify/useSourcify";
 
 type LogEntryProps = {
   log: Log;
   logDesc: LogDescription | null | undefined;
-  resolvedAddresses: ResolvedAddresses | undefined;
   metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
 };
 
-const LogEntry: React.FC<LogEntryProps> = ({
+const LogEntry: React.FC<LogEntryProps> = ({ log, logDesc, metadatas }) => {
-  log,
-  logDesc,
-  resolvedAddresses,
-  metadatas,
-}) => {
   const rawTopic0 = log.topics[0];
   const topic0 = useTopic0(rawTopic0);
 
@@ -65,7 +58,6 @@ const LogEntry: React.FC<LogEntryProps> = ({
             <div className="flex items-baseline space-x-2 -ml-1 mr-3">
               <TransactionAddress
                 address={log.address}
-                resolvedAddresses={resolvedAddresses}
                 metadata={metadatas[log.address]}
               />
               <Copy value={log.address} />
@@ -109,7 +101,6 @@ const LogEntry: React.FC<LogEntryProps> = ({
                         args={resolvedLogDesc.args}
                         paramTypes={resolvedLogDesc.eventFragment.inputs}
                         hasParamNames={resolvedLogDesc === logDesc}
-                        resolvedAddresses={resolvedAddresses}
                       />
                     </div>
                   </div>

src/transaction/Logs.tsx

@@ -4,17 +4,15 @@ import ContentFrame from "../ContentFrame";
 import LogEntry from "./LogEntry";
 import { TransactionData } from "../types";
 import { Metadata } from "../sourcify/useSourcify";
-import { ResolvedAddresses } from "../api/address-resolver";
 import { RuntimeContext } from "../useRuntime";
 import { useContractsMetadata } from "../hooks";
 
 type LogsProps = {
   txData: TransactionData;
   metadata: Metadata | null | undefined;
-  resolvedAddresses: ResolvedAddresses | undefined;
 };
 
-const Logs: React.FC<LogsProps> = ({ txData, metadata, resolvedAddresses }) => {
+const Logs: React.FC<LogsProps> = ({ txData, metadata }) => {
   const baseMetadatas = useMemo((): Record<string, Metadata | null> => {
     if (!txData.to || metadata === undefined) {
       return {};
@@ -68,7 +66,6 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata, resolvedAddresses }) => {
                   key={i}
                   log={l}
                   logDesc={logDescs?.[i]}
-                  resolvedAddresses={resolvedAddresses}
                   metadatas={metadatas}
                 />
               ))}

src/transaction/Trace.tsx

@@ -6,32 +6,19 @@ import { TransactionData } from "../types";
 import { useBatch4Bytes } from "../use4Bytes";
 import { useTraceTransaction, useUniqueSignatures } from "../useErigonHooks";
 import { RuntimeContext } from "../useRuntime";
-import { ResolvedAddresses } from "../api/address-resolver";
+import { tracesCollector } from "../useResolvedAddresses";
-import { tracesCollector, useResolvedAddresses } from "../useResolvedAddresses";
 
 type TraceProps = {
   txData: TransactionData;
-  resolvedAddresses: ResolvedAddresses | undefined;
 };
 
-const Trace: React.FC<TraceProps> = ({ txData, resolvedAddresses }) => {
+const Trace: React.FC<TraceProps> = ({ txData }) => {
   const { provider } = useContext(RuntimeContext);
   const traces = useTraceTransaction(provider, txData.transactionHash);
   const uniqueSignatures = useUniqueSignatures(traces);
   const sigMap = useBatch4Bytes(uniqueSignatures);
 
   const addrCollector = useMemo(() => tracesCollector(traces), [traces]);
-  const traceResolvedAddresses = useResolvedAddresses(provider, addrCollector);
-  const mergedResolvedAddresses = useMemo(() => {
-    const merge = {};
-    if (resolvedAddresses) {
-      Object.assign(merge, resolvedAddresses);
-    }
-    if (traceResolvedAddresses) {
-      Object.assign(merge, traceResolvedAddresses);
-    }
-    return merge;
-  }, [resolvedAddresses, traceResolvedAddresses]);
 
   return (
     <ContentFrame tabs>
@@ -39,10 +26,7 @@ const Trace: React.FC<TraceProps> = ({ txData, resolvedAddresses }) => {
         {traces ? (
           <>
             <div className="border hover:border-gray-500 rounded px-1 py-0.5">
-              <TransactionAddress
+              <TransactionAddress address={txData.from} />
-                address={txData.from}
-                resolvedAddresses={resolvedAddresses}
-              />
             </div>
             <div className="ml-5 space-y-3 self-stretch">
               {traces.map((t, i, a) => (
@@ -51,7 +35,6 @@ const Trace: React.FC<TraceProps> = ({ txData, resolvedAddresses }) => {
                   t={t}
                   last={i === a.length - 1}
                   fourBytesMap={sigMap}
-                  resolvedAddresses={mergedResolvedAddresses}
                 />
               ))}
             </div>

src/transaction/TraceInput.tsx

@@ -7,7 +7,6 @@ import FunctionSignature from "./FunctionSignature";
 import InputDecoder from "./decoder/InputDecoder";
 import ExpanderSwitch from "../components/ExpanderSwitch";
 import { TraceEntry } from "../useErigonHooks";
-import { ResolvedAddresses } from "../api/address-resolver";
 import {
   extract4Bytes,
   FourBytesEntry,
@@ -17,14 +16,9 @@ import {
 type TraceInputProps = {
   t: TraceEntry;
   fourBytesMap: Record<string, FourBytesEntry | null | undefined>;
-  resolvedAddresses: ResolvedAddresses | undefined;
 };
 
-const TraceInput: React.FC<TraceInputProps> = ({
+const TraceInput: React.FC<TraceInputProps> = ({ t, fourBytesMap }) => {
-  t,
-  fourBytesMap,
-  resolvedAddresses,
-}) => {
   const raw4Bytes = extract4Bytes(t.input);
   const fourBytes = raw4Bytes !== null ? fourBytesMap[raw4Bytes] : null;
   const sigText =
@@ -54,10 +48,7 @@ const TraceInput: React.FC<TraceInputProps> = ({
         ) : (
           <>
             <span>
-              <TransactionAddress
+              <TransactionAddress address={t.to} />
-                address={t.to}
-                resolvedAddresses={resolvedAddresses}
-              />
             </span>
             {t.type !== "CREATE" && t.type !== "CREATE2" && (
               <>
@@ -93,7 +84,6 @@ const TraceInput: React.FC<TraceInputProps> = ({
               data={t.input}
               userMethod={undefined}
               devMethod={undefined}
-              resolvedAddresses={resolvedAddresses}
             />
           </div>
           <div>)</div>

src/transaction/TraceItem.tsx

@@ -5,22 +5,15 @@ import { faMinusSquare } from "@fortawesome/free-regular-svg-icons/faMinusSquare
 import { Switch } from "@headlessui/react";
 import { FourBytesEntry } from "../use4Bytes";
 import { TraceGroup } from "../useErigonHooks";
-import { ResolvedAddresses } from "../api/address-resolver";
 import TraceInput from "./TraceInput";
 
 type TraceItemProps = {
   t: TraceGroup;
   last: boolean;
   fourBytesMap: Record<string, FourBytesEntry | null | undefined>;
-  resolvedAddresses: ResolvedAddresses | undefined;
 };
 
-const TraceItem: React.FC<TraceItemProps> = ({
+const TraceItem: React.FC<TraceItemProps> = ({ t, last, fourBytesMap }) => {
-  t,
-  last,
-  fourBytesMap,
-  resolvedAddresses,
-}) => {
   const [expanded, setExpanded] = useState<boolean>(true);
 
   return (
@@ -42,11 +35,7 @@ const TraceItem: React.FC<TraceItemProps> = ({
             />
           </Switch>
         )}
-        <TraceInput
+        <TraceInput t={t} fourBytesMap={fourBytesMap} />
-          t={t}
-          fourBytesMap={fourBytesMap}
-          resolvedAddresses={resolvedAddresses}
-        />
       </div>
       {t.children && (
         <div
@@ -54,11 +43,7 @@ const TraceItem: React.FC<TraceItemProps> = ({
             expanded ? "" : "hidden"
           }`}
         >
-          <TraceChildren
+          <TraceChildren c={t.children} fourBytesMap={fourBytesMap} />
-            c={t.children}
-            fourBytesMap={fourBytesMap}
-            resolvedAddresses={resolvedAddresses}
-          />
         </div>
       )}
     </>
@@ -68,11 +53,10 @@ const TraceItem: React.FC<TraceItemProps> = ({
 type TraceChildrenProps = {
   c: TraceGroup[];
   fourBytesMap: Record<string, FourBytesEntry | null | undefined>;
-  resolvedAddresses: ResolvedAddresses | undefined;
 };
 
 const TraceChildren: React.FC<TraceChildrenProps> = React.memo(
-  ({ c, fourBytesMap, resolvedAddresses }) => {
+  ({ c, fourBytesMap }) => {
     return (
       <>
         {c.map((tc, i, a) => (
@@ -81,7 +65,6 @@ const TraceChildren: React.FC<TraceChildrenProps> = React.memo(
             t={tc}
             last={i === a.length - 1}
             fourBytesMap={fourBytesMap}
-            resolvedAddresses={resolvedAddresses}
           />
         ))}
       </>

src/transaction/decoder/AddressDecoder.tsx

@@ -1,19 +1,14 @@
 import React from "react";
 import TransactionAddress from "../../components/TransactionAddress";
 import Copy from "../../components/Copy";
-import { ResolvedAddresses } from "../../api/address-resolver";
 
 type AddressDecoderProps = {
   r: string;
-  resolvedAddresses?: ResolvedAddresses | undefined;
 };
 
-const AddressDecoder: React.FC<AddressDecoderProps> = ({
+const AddressDecoder: React.FC<AddressDecoderProps> = ({ r }) => (
-  r,
-  resolvedAddresses,
-}) => (
   <div className="flex items-baseline space-x-2 -ml-1 mr-3">
-    <TransactionAddress address={r} resolvedAddresses={resolvedAddresses} />
+    <TransactionAddress address={r} />
     <Copy value={r} />
   </div>
 );

src/transaction/decoder/DecodedParamRow.tsx

@@ -8,7 +8,6 @@ import Uint256Decoder from "./Uint256Decoder";
 import AddressDecoder from "./AddressDecoder";
 import BooleanDecoder from "./BooleanDecoder";
 import BytesDecoder from "./BytesDecoder";
-import { ResolvedAddresses } from "../../api/address-resolver";
 import SelectionHighlighter, {
   valueSelector,
 } from "../../components/SelectionHighlighter";
@@ -20,7 +19,6 @@ type DecodedParamRowProps = {
   paramType: ParamType;
   arrayElem?: number | undefined;
   help?: string | undefined;
-  resolvedAddresses: ResolvedAddresses | undefined;
 };
 
 const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
@@ -30,7 +28,6 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
   paramType,
   arrayElem,
   help,
-  resolvedAddresses,
 }) => {
   const [showHelp, setShowHelp] = useState<boolean>(false);
 
@@ -80,10 +77,7 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
             {paramType.baseType === "uint256" ? (
               <Uint256Decoder r={r} />
             ) : paramType.baseType === "address" ? (
-              <AddressDecoder
+              <AddressDecoder r={r.toString()} />
-                r={r.toString()}
-                resolvedAddresses={resolvedAddresses}
-              />
             ) : paramType.baseType === "bool" ? (
               <BooleanDecoder r={r} />
             ) : paramType.baseType === "bytes" ? (
@@ -111,7 +105,6 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
             i={idx}
             r={e}
             paramType={paramType.components[idx]}
-            resolvedAddresses={resolvedAddresses}
           />
         ))}
       {paramType.baseType === "array" &&
@@ -122,7 +115,6 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
             r={e}
             paramType={paramType.arrayChildren}
             arrayElem={idx}
-            resolvedAddresses={resolvedAddresses}
           />
         ))}
     </>

src/transaction/decoder/DecodedParamsTable.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { ParamType, Result } from "@ethersproject/abi";
 import DecodedParamRow from "./DecodedParamRow";
 import { DevMethod, UserMethod } from "../../sourcify/useSourcify";
-import { ResolvedAddresses } from "../../api/address-resolver";
 
 type DecodedParamsTableProps = {
   args: Result;
@@ -10,7 +9,6 @@ type DecodedParamsTableProps = {
   hasParamNames?: boolean;
   userMethod?: UserMethod | undefined;
   devMethod?: DevMethod | undefined;
-  resolvedAddresses?: ResolvedAddresses | undefined;
 };
 
 const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
@@ -18,7 +16,6 @@ const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
   paramTypes,
   hasParamNames = true,
   devMethod,
-  resolvedAddresses,
 }) => (
   <table className="border w-full">
     <thead>
@@ -47,7 +44,6 @@ const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
           r={r}
           paramType={paramTypes[i]}
           help={devMethod?.params?.[paramTypes[i].name]}
-          resolvedAddresses={resolvedAddresses}
         />
       ))}
     </tbody>

src/transaction/decoder/InputDecoder.tsx

@@ -5,7 +5,6 @@ import { Tab } from "@headlessui/react";
 import ModeTab from "../../components/ModeTab";
 import DecodedParamsTable from "./DecodedParamsTable";
 import { DevMethod, UserMethod } from "../../sourcify/useSourcify";
-import { ResolvedAddresses } from "../../api/address-resolver";
 
 type InputDecoderProps = {
   fourBytes: string;
@@ -14,7 +13,6 @@ type InputDecoderProps = {
   data: string;
   userMethod: UserMethod | undefined;
   devMethod: DevMethod | undefined;
-  resolvedAddresses: ResolvedAddresses | undefined;
 };
 
 const InputDecoder: React.FC<InputDecoderProps> = ({
@@ -24,7 +22,6 @@ const InputDecoder: React.FC<InputDecoderProps> = ({
   data,
   userMethod,
   devMethod,
-  resolvedAddresses,
 }) => {
   const utfInput = useMemo(() => {
     try {
@@ -57,7 +54,6 @@ const InputDecoder: React.FC<InputDecoderProps> = ({
               hasParamNames={hasParamNames}
               userMethod={userMethod}
               devMethod={devMethod}
-              resolvedAddresses={resolvedAddresses}
             />
           )}
         </Tab.Panel>

src/useResolvedAddresses.ts

@@ -1,7 +1,13 @@
 import { useState, useEffect, useRef, useContext } from "react";
-import { JsonRpcProvider } from "@ethersproject/providers";
+import { BaseProvider, JsonRpcProvider } from "@ethersproject/providers";
 import { getAddress, isAddress } from "@ethersproject/address";
-import { batchPopulate, ResolvedAddresses } from "./api/address-resolver";
+import useSWR from "swr";
+import {
+  batchPopulate,
+  mainResolver,
+  ResolvedAddresses,
+} from "./api/address-resolver";
+import { SelectedResolvedName } from "./api/address-resolver/CompositeAddressResolver";
 import { TraceGroup } from "./useErigonHooks";
 import { RuntimeContext } from "./useRuntime";
 import {
@@ -184,3 +190,23 @@ export const useResolvedAddresses = (
 
   return names;
 };
+
+export const useResolvedAddress = (
+  provider: BaseProvider | undefined,
+  address: ChecksummedAddress
+): SelectedResolvedName<any> | undefined => {
+  const fetcher = async (
+    key: string
+  ): Promise<SelectedResolvedName<any> | undefined> => {
+    if (!provider) {
+      return undefined;
+    }
+    return mainResolver.resolveAddress(provider, address);
+  };
+
+  const { data, error } = useSWR(address, fetcher);
+  if (error) {
+    return undefined;
+  }
+  return data;
+};