Add support for multiple log emitter addresses

src/transaction/Logs.tsx

@@ -3,7 +3,8 @@ import { Interface } from "@ethersproject/abi";
 import ContentFrame from "../ContentFrame";
 import LogEntry from "./LogEntry";
 import { TransactionData } from "../types";
-import { Metadata } from "../useSourcify";
+import { Metadata, useMultipleMetadata } from "../useSourcify";
+import { SourcifySource } from "../url";
 
 type LogsProps = {
   txData: TransactionData;
@@ -11,22 +12,45 @@ type LogsProps = {
 };
 
 const Logs: React.FC<LogsProps> = ({ txData, metadata }) => {
+  const baseMetadatas = useMemo((): Record<string, Metadata | null> => {
+    if (!txData.to || metadata === undefined) {
+      return {};
+    }
+
+    const md: Record<string, Metadata | null> = {};
+    md[txData.to] = metadata;
+    return md;
+  }, [txData.to, metadata]);
+
+  const logAddresses = useMemo(
+    () => txData.confirmedData?.logs.map((l) => l.address) ?? [],
+    [txData]
+  );
+  const metadatas = useMultipleMetadata(
+    baseMetadatas,
+    logAddresses,
+    1,
+    SourcifySource.CUSTOM_SNAPSHOT_SERVER
+  );
   const logDesc = useMemo(() => {
     if (!metadata || !txData) {
       return undefined;
     }
 
-    const abi = metadata.output.abi;
+    return txData.confirmedData?.logs.map((l) => {
+      const mt = metadatas[l.address];
+      if (!mt) {
+        return undefined;
+      }
+
+      const abi = mt.output.abi;
       const intf = new Interface(abi as any);
-    return txData.confirmedData?.logs.map((l) =>
-      l.address === txData.to
-        ? intf.parseLog({
+      return intf.parseLog({
         topics: l.topics,
         data: l.data,
-          })
-        : undefined
-    );
-  }, [metadata, txData]);
+      });
+    });
+  }, [metadatas, metadata, txData]);
 
   return (
     <ContentFrame tabs>

src/useSourcify.ts

@@ -38,21 +38,12 @@ export type Metadata = {
   };
 };
 
-export const useSourcify = (
-  checksummedAddress: string | undefined,
-  chainId: number | undefined,
-  source: SourcifySource
-) => {
-  const [rawMetadata, setRawMetadata] = useState<Metadata | null | undefined>();
-
-  useEffect(() => {
-    if (!checksummedAddress || chainId === undefined) {
-      return;
-    }
-    setRawMetadata(undefined);
-
-    const abortController = new AbortController();
-    const fetchMetadata = async () => {
+export const fetchSourcifyMetadata = async (
+  checksummedAddress: string,
+  chainId: number,
+  source: SourcifySource,
+  abortController: AbortController
+): Promise<Metadata | null> => {
   try {
     const contractMetadataURL = sourcifyMetadata(
       checksummedAddress,
@@ -64,14 +55,38 @@ export const useSourcify = (
     });
     if (result.ok) {
       const _metadata = await result.json();
-          setRawMetadata(_metadata);
-        } else {
-          setRawMetadata(null);
+      return _metadata;
     }
+
+    return null;
   } catch (err) {
     console.error(err);
-        setRawMetadata(null);
+    return null;
   }
+};
+
+export const useSourcify = (
+  checksummedAddress: string | undefined,
+  chainId: number | undefined,
+  source: SourcifySource
+): Metadata | null | undefined => {
+  const [rawMetadata, setRawMetadata] = useState<Metadata | null | undefined>();
+
+  useEffect(() => {
+    if (!checksummedAddress || chainId === undefined) {
+      return;
+    }
+    setRawMetadata(undefined);
+
+    const abortController = new AbortController();
+    const fetchMetadata = async () => {
+      const _metadata = await fetchSourcifyMetadata(
+        checksummedAddress,
+        chainId,
+        source,
+        abortController
+      );
+      setRawMetadata(_metadata);
     };
     fetchMetadata();
 
@@ -83,6 +98,54 @@ export const useSourcify = (
   return rawMetadata;
 };
 
+export const useMultipleMetadata = (
+  baseMetadatas: Record<string, Metadata | null>,
+  checksummedAddress: (string | undefined)[],
+  chainId: number | undefined,
+  source: SourcifySource
+): Record<string, Metadata | null | undefined> => {
+  const [rawMetadata, setRawMetadata] = useState<
+    Record<string, Metadata | null | undefined>
+  >({});
+
+  useEffect(() => {
+    if (!checksummedAddress || chainId === undefined) {
+      return;
+    }
+    setRawMetadata({});
+
+    const abortController = new AbortController();
+    const fetchMetadata = async (addresses: string[]) => {
+      const promises: Promise<Metadata | null>[] = [];
+      for (const addr of addresses) {
+        promises.push(
+          fetchSourcifyMetadata(addr, chainId, source, abortController)
+        );
+      }
+
+      const results = await Promise.all(promises);
+      const metadatas: Record<string, Metadata | null> = { ...baseMetadatas };
+      for (let i = 0; i < results.length; i++) {
+        metadatas[addresses[i]] = results[i];
+      }
+      setRawMetadata(metadatas);
+    };
+
+    const deduped = new Set(
+      checksummedAddress.filter(
+        (a): a is string => a !== undefined && baseMetadatas[a] === undefined
+      )
+    );
+    fetchMetadata(Array.from(deduped));
+
+    return () => {
+      abortController.abort();
+    };
+  }, [baseMetadatas, checksummedAddress, chainId, source]);
+
+  return rawMetadata;
+};
+
 export const useContract = (
   checksummedAddress: string,
   networkId: number,