diff --git a/src/AddressTransactions.tsx b/src/AddressTransactions.tsx index 19d41bb..a1013c8 100644 --- a/src/AddressTransactions.tsx +++ b/src/AddressTransactions.tsx @@ -31,7 +31,8 @@ import { useFeeToggler } from "./search/useFeeToggler"; import { SelectionContext, useSelection } from "./useSelection"; import { useMultipleETHUSDOracle } from "./usePriceOracle"; import { useAppConfigContext } from "./useAppConfig"; -import { useSourcify } from "./useSourcify"; +import { useMultipleMetadata } from "./useSourcify"; +import { ChecksummedAddress } from "./types"; import SourcifyLogo from "./sourcify.svg"; type BlockParams = { @@ -181,12 +182,31 @@ const AddressTransactions: React.FC = () => { const [feeDisplay, feeDisplayToggler] = useFeeToggler(); const selectionCtx = useSelection(); + const addresses = useMemo(() => { + const _addresses: ChecksummedAddress[] = []; + if (checksummedAddress) { + _addresses.push(checksummedAddress); + } + if (page) { + for (const t of page) { + if (t.to) { + _addresses.push(t.to); + } + } + } + return _addresses; + }, [checksummedAddress, page]); const { sourcifySource } = useAppConfigContext(); - const rawMetadata = useSourcify( - checksummedAddress, + const metadatas = useMultipleMetadata( + undefined, + addresses, provider?.network.chainId, sourcifySource ); + const addressMetadata = + checksummedAddress !== undefined + ? metadatas[checksummedAddress] + : undefined; return ( @@ -224,18 +244,18 @@ const AddressTransactions: React.FC = () => { Contract - {rawMetadata === undefined ? ( + {addressMetadata === undefined ? ( - ) : rawMetadata === null ? ( + ) : addressMetadata === null ? ( @@ -288,6 +308,7 @@ const AddressTransactions: React.FC = () => { selectedAddress={checksummedAddress} feeDisplay={feeDisplay} priceMap={priceMap} + metadatas={metadatas} /> ))}
@@ -316,7 +337,7 @@ const AddressTransactions: React.FC = () => { diff --git a/src/block/BlockTransactionResults.tsx b/src/block/BlockTransactionResults.tsx index f9cfc27..969e4a4 100644 --- a/src/block/BlockTransactionResults.tsx +++ b/src/block/BlockTransactionResults.tsx @@ -9,9 +9,11 @@ import { useFeeToggler } from "../search/useFeeToggler"; import { RuntimeContext } from "../useRuntime"; import { SelectionContext, useSelection } from "../useSelection"; import { pageCollector, useResolvedAddresses } from "../useResolvedAddresses"; -import { ProcessedTransaction } from "../types"; +import { ChecksummedAddress, ProcessedTransaction } from "../types"; import { PAGE_SIZE } from "../params"; import { useMultipleETHUSDOracle } from "../usePriceOracle"; +import { useAppConfigContext } from "../useAppConfig"; +import { useMultipleMetadata } from "../useSourcify"; type BlockTransactionResultsProps = { blockTag: BlockTag; @@ -34,6 +36,21 @@ const BlockTransactionResults: React.FC = ({ const blockTags = useMemo(() => [blockTag], [blockTag]); const priceMap = useMultipleETHUSDOracle(provider, blockTags); + const addresses = useMemo((): ChecksummedAddress[] => { + if (!page) { + return []; + } + + return page.map((t) => t.to).filter((to): to is string => to !== undefined); + }, [page]); + const { sourcifySource } = useAppConfigContext(); + const metadatas = useMultipleMetadata( + undefined, + addresses, + provider?.network.chainId, + sourcifySource + ); + return (
@@ -63,6 +80,7 @@ const BlockTransactionResults: React.FC = ({ resolvedAddresses={resolvedAddresses} feeDisplay={feeDisplay} priceMap={priceMap} + metadatas={metadatas} /> ))}
diff --git a/src/components/DecoratedAddressLink.tsx b/src/components/DecoratedAddressLink.tsx index cadc77f..087da7f 100644 --- a/src/components/DecoratedAddressLink.tsx +++ b/src/components/DecoratedAddressLink.tsx @@ -8,6 +8,8 @@ import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins"; import AddressOrENSName from "./AddressOrENSName"; import { AddressContext, ZERO_ADDRESS } from "../types"; import { ResolvedAddresses } from "../api/address-resolver"; +import { Metadata } from "../useSourcify"; +import SourcifyLogo from "../sourcify.svg"; type DecoratedAddressLinkProps = { address: string; @@ -19,6 +21,7 @@ type DecoratedAddressLinkProps = { txFrom?: boolean; txTo?: boolean; resolvedAddresses?: ResolvedAddresses | undefined; + metadata?: Metadata | null | undefined; }; const DecoratedAddressLink: React.FC = ({ @@ -31,6 +34,7 @@ const DecoratedAddressLink: React.FC = ({ txFrom, txTo, resolvedAddresses, + metadata, }) => { const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS; const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS; @@ -70,6 +74,17 @@ const DecoratedAddressLink: React.FC = ({ )} + {metadata && ( + + Sourcify logo + + )} = ({ 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/search/TransactionItem.tsx b/src/search/TransactionItem.tsx index 2e6132d..446daf4 100644 --- a/src/search/TransactionItem.tsx +++ b/src/search/TransactionItem.tsx @@ -14,11 +14,12 @@ import TransactionDirection, { Flags, } from "../components/TransactionDirection"; import TransactionValue from "../components/TransactionValue"; -import { ProcessedTransaction } from "../types"; +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 "../useSourcify"; type TransactionItemProps = { tx: ProcessedTransaction; @@ -26,6 +27,7 @@ type TransactionItemProps = { selectedAddress?: string; feeDisplay: FeeDisplay; priceMap: Record; + metadatas: Record; }; const TransactionItem: React.FC = ({ @@ -34,6 +36,7 @@ const TransactionItem: React.FC = ({ selectedAddress, feeDisplay, priceMap, + metadatas, }) => { let direction: Direction | undefined; if (selectedAddress) { @@ -105,6 +108,7 @@ const TransactionItem: React.FC = ({ selectedAddress={selectedAddress} miner={tx.miner === tx.to} resolvedAddresses={resolvedAddresses} + metadata={metadatas[tx.to]} /> ) : ( @@ -114,6 +118,7 @@ const TransactionItem: React.FC = ({ selectedAddress={selectedAddress} creation resolvedAddresses={resolvedAddresses} + metadata={metadatas[tx.createdContractAddress!]} /> )} diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx index 86526aa..92f46c8 100644 --- a/src/transaction/Details.tsx +++ b/src/transaction/Details.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useContext, useMemo } from "react"; import { TransactionDescription } from "@ethersproject/abi"; import { BigNumber } from "@ethersproject/bignumber"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -22,7 +22,11 @@ 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"; @@ -33,8 +37,10 @@ import { use4Bytes, useTransactionDescription, } 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; @@ -73,6 +79,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 ( @@ -148,6 +173,7 @@ const Details: React.FC = ({
@@ -160,6 +186,9 @@ const Details: React.FC = ({
diff --git a/src/transaction/LogEntry.tsx b/src/transaction/LogEntry.tsx index de34971..109ec1e 100644 --- a/src/transaction/LogEntry.tsx +++ b/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; }; const LogEntry: React.FC = ({ log, logDesc, resolvedAddresses, + metadatas, }) => { const rawTopic0 = log.topics[0]; const topic0 = useTopic0(rawTopic0); @@ -62,6 +66,7 @@ const LogEntry: React.FC = ({
diff --git a/src/transaction/Logs.tsx b/src/transaction/Logs.tsx index 85104f7..bbf0475 100644 --- a/src/transaction/Logs.tsx +++ b/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 = ({ 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 = ({ txData, metadata, resolvedAddresses }) => { log={l} logDesc={logDescs?.[i]} resolvedAddresses={resolvedAddresses} + metadatas={metadatas} /> ))} diff --git a/src/types.ts b/src/types.ts index f54f94a..fde36bb 100644 --- a/src/types.ts +++ b/src/types.ts @@ -67,6 +67,9 @@ export type ConfirmedTransactionData = { // The VOID... export const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000"; +// TODO: replace all occurrences of plain string +export type ChecksummedAddress = string; + export enum AddressContext { FROM, TO, diff --git a/src/url.ts b/src/url.ts index 647fc42..471c9d8 100644 --- a/src/url.ts +++ b/src/url.ts @@ -1,4 +1,5 @@ import { BlockTag } from "@ethersproject/abstract-provider"; +import { ChecksummedAddress } from "./types"; export const fourBytesURL = ( assetsURLPrefix: string, @@ -42,23 +43,23 @@ const resolveSourcifySource = (source: SourcifySource) => { }; export const sourcifyMetadata = ( - checksummedAddress: string, - networkId: number, + address: ChecksummedAddress, + chainId: number, source: SourcifySource ) => `${resolveSourcifySource( source - )}/contracts/full_match/${networkId}/${checksummedAddress}/metadata.json`; + )}/contracts/full_match/${chainId}/${address}/metadata.json`; export const sourcifySourceFile = ( - checksummedAddress: string, - networkId: number, + address: ChecksummedAddress, + chainId: number, filepath: string, source: SourcifySource ) => `${resolveSourcifySource( source - )}/contracts/full_match/${networkId}/${checksummedAddress}/sources/${filepath}`; + )}/contracts/full_match/${chainId}/${address}/sources/${filepath}`; export const openInRemixURL = (checksummedAddress: string, networkId: number) => `https://remix.ethereum.org/#call=source-verification//fetchAndSave//${checksummedAddress}//${networkId}`; diff --git a/src/useSourcify.ts b/src/useSourcify.ts index 0d6ea59..10f0c68 100644 --- a/src/useSourcify.ts +++ b/src/useSourcify.ts @@ -1,6 +1,6 @@ import { useState, useEffect, useMemo } from "react"; import { Interface } from "@ethersproject/abi"; -import { TransactionData } from "./types"; +import { ChecksummedAddress, TransactionData } from "./types"; import { sourcifyMetadata, SourcifySource, sourcifySourceFile } from "./url"; export type UserMethod = { @@ -65,24 +65,19 @@ export type Metadata = { }; }; -export const fetchSourcifyMetadata = async ( - checksummedAddress: string, +const fetchSourcifyMetadata = async ( + address: ChecksummedAddress, chainId: number, source: SourcifySource, abortController: AbortController ): Promise => { try { - const contractMetadataURL = sourcifyMetadata( - checksummedAddress, - chainId, - source - ); - const result = await fetch(contractMetadataURL, { + const metadataURL = sourcifyMetadata(address, chainId, source); + const result = await fetch(metadataURL, { signal: abortController.signal, }); if (result.ok) { - const _metadata = await result.json(); - return _metadata; + return await result.json(); } return null; @@ -92,15 +87,16 @@ export const fetchSourcifyMetadata = async ( } }; +// TODO: replace every occurrence with the multiple version one export const useSourcify = ( - checksummedAddress: string | undefined, + address: ChecksummedAddress | undefined, chainId: number | undefined, source: SourcifySource ): Metadata | null | undefined => { const [rawMetadata, setRawMetadata] = useState(); useEffect(() => { - if (!checksummedAddress || chainId === undefined) { + if (!address || chainId === undefined) { return; } setRawMetadata(undefined); @@ -108,7 +104,7 @@ export const useSourcify = ( const abortController = new AbortController(); const fetchMetadata = async () => { const _metadata = await fetchSourcifyMetadata( - checksummedAddress, + address, chainId, source, abortController @@ -120,47 +116,53 @@ export const useSourcify = ( return () => { abortController.abort(); }; - }, [checksummedAddress, chainId, source]); + }, [address, chainId, source]); return rawMetadata; }; export const useMultipleMetadata = ( - baseMetadatas: Record, - checksummedAddress: (string | undefined)[], + baseMetadatas: Record | undefined, + addresses: (ChecksummedAddress | undefined)[], chainId: number | undefined, source: SourcifySource -): Record => { +): Record => { const [rawMetadata, setRawMetadata] = useState< Record >({}); useEffect(() => { - if (!checksummedAddress || chainId === undefined) { + if (!addresses || chainId === undefined) { return; } setRawMetadata({}); const abortController = new AbortController(); - const fetchMetadata = async (addresses: string[]) => { + const fetchMetadata = async (dedupedAddresses: string[]) => { const promises: Promise[] = []; - for (const addr of addresses) { + for (const address of dedupedAddresses) { promises.push( - fetchSourcifyMetadata(addr, chainId, source, abortController) + fetchSourcifyMetadata(address, chainId, source, abortController) ); } const results = await Promise.all(promises); - const metadatas: Record = { ...baseMetadatas }; + if (abortController.signal.aborted) { + return; + } + const metadatas: Record = baseMetadatas + ? { ...baseMetadatas } + : {}; for (let i = 0; i < results.length; i++) { - metadatas[addresses[i]] = results[i]; + metadatas[dedupedAddresses[i]] = results[i]; } setRawMetadata(metadatas); }; const deduped = new Set( - checksummedAddress.filter( - (a): a is string => a !== undefined && baseMetadatas[a] === undefined + addresses.filter( + (a): a is ChecksummedAddress => + a !== undefined && baseMetadatas?.[a] === undefined ) ); fetchMetadata(Array.from(deduped)); @@ -168,7 +170,7 @@ export const useMultipleMetadata = ( return () => { abortController.abort(); }; - }, [baseMetadatas, checksummedAddress, chainId, source]); + }, [baseMetadatas, addresses, chainId, source]); return rawMetadata; };