Add Sourcify decoration support to tx logs page

src/search/TransactionItem.tsx

@@ -27,9 +27,7 @@ type TransactionItemProps = {
   selectedAddress?: string;
   feeDisplay: FeeDisplay;
   priceMap: Record<BlockTag, BigNumber>;
-  metadatas:
-    | Record<ChecksummedAddress, Metadata | null | undefined>
-    | undefined;
+  metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
 };
 
 const TransactionItem: React.FC<TransactionItemProps> = ({
@@ -110,7 +108,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
                 selectedAddress={selectedAddress}
                 miner={tx.miner === tx.to}
                 resolvedAddresses={resolvedAddresses}
-                metadata={metadatas?.[tx.to]}
+                metadata={metadatas[tx.to]}
               />
             </AddressHighlighter>
           ) : (
@@ -120,7 +118,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
                 selectedAddress={selectedAddress}
                 creation
                 resolvedAddresses={resolvedAddresses}
-                metadata={metadatas?.[tx.createdContractAddress!]}
+                metadata={metadatas[tx.createdContractAddress!]}
               />
             </AddressHighlighter>
           )}

src/transaction/LogEntry.tsx

@@ -9,17 +9,21 @@ 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 "../useSourcify";
 
 type LogEntryProps = {
   log: Log;
   logDesc: LogDescription | null | undefined;
   resolvedAddresses: ResolvedAddresses | undefined;
+  metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
 };
 
 const LogEntry: React.FC<LogEntryProps> = ({
   log,
   logDesc,
   resolvedAddresses,
+  metadatas,
 }) => {
   const rawTopic0 = log.topics[0];
   const topic0 = useTopic0(rawTopic0);
@@ -62,6 +66,7 @@ const LogEntry: React.FC<LogEntryProps> = ({
               <TransactionAddress
                 address={log.address}
                 resolvedAddresses={resolvedAddresses}
+                metadata={metadatas[log.address]}
               />
               <Copy value={log.address} />
             </div>

src/transaction/Logs.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useContext, useMemo } from "react";
 import { Interface } from "@ethersproject/abi";
 import ContentFrame from "../ContentFrame";
 import LogEntry from "./LogEntry";
@@ -6,6 +6,7 @@ import { TransactionData } from "../types";
 import { useAppConfigContext } from "../useAppConfig";
 import { Metadata, useMultipleMetadata } from "../useSourcify";
 import { ResolvedAddresses } from "../api/address-resolver";
+import { RuntimeContext } from "../useRuntime";
 
 type LogsProps = {
   txData: TransactionData;
@@ -24,15 +25,16 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata, resolvedAddresses }) => {
     return md;
   }, [txData.to, metadata]);
 
-  const { sourcifySource } = useAppConfigContext();
   const logAddresses = useMemo(
     () => txData.confirmedData?.logs.map((l) => l.address) ?? [],
     [txData]
   );
+  const { provider } = useContext(RuntimeContext);
+  const { sourcifySource } = useAppConfigContext();
   const metadatas = useMultipleMetadata(
     baseMetadatas,
     logAddresses,
-    1,
+    provider?.network.chainId,
     sourcifySource
   );
   const logDescs = useMemo(() => {
@@ -72,6 +74,7 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata, resolvedAddresses }) => {
                   log={l}
                   logDesc={logDescs?.[i]}
                   resolvedAddresses={resolvedAddresses}
+                  metadatas={metadatas}
                 />
               ))}
             </>

src/useSourcify.ts

@@ -147,6 +147,9 @@ export const useMultipleMetadata = (
       }
 
       const results = await Promise.all(promises);
+      if (abortController.signal.aborted) {
+        return;
+      }
       const metadatas: Record<string, Metadata | null> = baseMetadatas
         ? { ...baseMetadatas }
         : {};