diff --git a/src/components/TransactionAddress.tsx b/src/components/TransactionAddress.tsx index 1595ef0..28540dd 100644 --- a/src/components/TransactionAddress.tsx +++ b/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 = ({ address, addressCtx, resolvedAddresses, + metadata, }) => { const txData = useSelectedTransaction(); // TODO: push down creation coloring logic into DecoratedAddressLink @@ -30,6 +33,7 @@ const TransactionAddress: React.FC = ({ txTo={address === txData?.to || creation} creation={creation} resolvedAddresses={resolvedAddresses} + metadata={metadata} /> ); diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx index ef6a5fa..37226f7 100644 --- a/src/transaction/Details.tsx +++ b/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 = ({ 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 ( @@ -155,6 +180,7 @@ const Details: React.FC = ({ @@ -167,6 +193,9 @@ const Details: React.FC = ({