Add Sourcify decoration to addresses in tx details page

src/components/TransactionAddress.tsx

@@ -4,17 +4,20 @@ import DecoratedAddressLink from "./DecoratedAddressLink";
 import { ResolvedAddresses } from "../api/address-resolver";
 import { useSelectedTransaction } from "../useSelectedTransaction";
 import { AddressContext } from "../types";
+import { Metadata } from "../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();
   // TODO: push down creation coloring logic into DecoratedAddressLink
@@ -30,6 +33,7 @@ const TransactionAddress: React.FC<TransactionAddressProps> = ({
         txTo={address === txData?.to || creation}
         creation={creation}
         resolvedAddresses={resolvedAddresses}
+        metadata={metadata}
       />
     </AddressHighlighter>
   );

src/transaction/Details.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useContext, useMemo } from "react";
 import {
   TransactionDescription,
   Fragment,
@@ -26,15 +26,21 @@ import USDValue from "../components/USDValue";
 import FormattedBalance from "../components/FormattedBalance";
 import ETH2USDValue from "../components/ETH2USDValue";
 import TokenTransferItem from "../TokenTransferItem";
-import { TransactionData, InternalOperation } from "../types";
+import {
+  TransactionData,
+  InternalOperation,
+  ChecksummedAddress,
+} from "../types";
 import PercentageBar from "../components/PercentageBar";
 import ExternalLink from "../components/ExternalLink";
 import RelativePosition from "../components/RelativePosition";
 import PercentagePosition from "../components/PercentagePosition";
 import InputDecoder from "./decoder/InputDecoder";
 import { rawInputTo4Bytes, use4Bytes } from "../use4Bytes";
-import { DevDoc, UserDoc } from "../useSourcify";
+import { DevDoc, useMultipleMetadata, UserDoc } from "../useSourcify";
 import { ResolvedAddresses } from "../api/address-resolver";
+import { RuntimeContext } from "../useRuntime";
+import { useAppConfigContext } from "../useAppConfig";
 
 type DetailsProps = {
   txData: TransactionData;
@@ -80,6 +86,25 @@ const Details: React.FC<DetailsProps> = ({
   const userMethod = txDesc ? userDoc?.methods[txDesc.signature] : undefined;
   const devMethod = txDesc ? devDoc?.methods[txDesc.signature] : undefined;
 
+  const { provider } = useContext(RuntimeContext);
+  const addresses = useMemo(() => {
+    const _addresses: ChecksummedAddress[] = [];
+    if (txData.to) {
+      _addresses.push(txData.to);
+    }
+    if (txData.confirmedData?.createdContractAddress) {
+      _addresses.push(txData.confirmedData.createdContractAddress);
+    }
+    return _addresses;
+  }, [txData]);
+  const { sourcifySource } = useAppConfigContext();
+  const metadatas = useMultipleMetadata(
+    undefined,
+    addresses,
+    provider?.network.chainId,
+    sourcifySource
+  );
+
   return (
     <ContentFrame tabs>
       <InfoRow title="Transaction Hash">
@@ -155,6 +180,7 @@ const Details: React.FC<DetailsProps> = ({
             <TransactionAddress
               address={txData.to}
               resolvedAddresses={resolvedAddresses}
+              metadata={metadatas?.[txData.to]}
             />
             <Copy value={txData.to} />
           </div>
@@ -167,6 +193,9 @@ const Details: React.FC<DetailsProps> = ({
             <TransactionAddress
               address={txData.confirmedData?.createdContractAddress!}
               resolvedAddresses={resolvedAddresses}
+              metadata={
+                metadatas?.[txData.confirmedData?.createdContractAddress!]
+              }
             />
             <Copy value={txData.confirmedData.createdContractAddress!} />
           </div>