diff --git a/package-lock.json b/package-lock.json index e441646..ef51571 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,7 +41,7 @@ "react-blockies": "^1.4.1", "react-chartjs-2": "^3.3.0", "react-dom": "^17.0.2", - "react-error-boundary": "^3.1.3", + "react-error-boundary": "^3.1.4", "react-helmet-async": "^1.1.2", "react-image": "^4.0.3", "react-router-dom": "^5.3.0", @@ -14621,9 +14621,9 @@ } }, "node_modules/react-error-boundary": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.3.tgz", - "integrity": "sha512-A+F9HHy9fvt9t8SNDlonq01prnU8AmkjvGKV4kk8seB9kU3xMEO8J/PQlLVmoOIDODl5U2kufSBs4vrWIqhsAA==", + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz", + "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==", "dependencies": { "@babel/runtime": "^7.12.5" }, @@ -29543,9 +29543,9 @@ } }, "react-error-boundary": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.3.tgz", - "integrity": "sha512-A+F9HHy9fvt9t8SNDlonq01prnU8AmkjvGKV4kk8seB9kU3xMEO8J/PQlLVmoOIDODl5U2kufSBs4vrWIqhsAA==", + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz", + "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==", "requires": { "@babel/runtime": "^7.12.5" } diff --git a/package.json b/package.json index 64fe411..d301e67 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "react-blockies": "^1.4.1", "react-chartjs-2": "^3.3.0", "react-dom": "^17.0.2", - "react-error-boundary": "^3.1.3", + "react-error-boundary": "^3.1.4", "react-helmet-async": "^1.1.2", "react-image": "^4.0.3", "react-router-dom": "^5.3.0", diff --git a/src/AddressTransactions.tsx b/src/AddressTransactions.tsx index 53f92bf..19d41bb 100644 --- a/src/AddressTransactions.tsx +++ b/src/AddressTransactions.tsx @@ -26,7 +26,7 @@ import PendingResults from "./search/PendingResults"; import TransactionItem from "./search/TransactionItem"; import { SearchController } from "./search/search"; import { RuntimeContext } from "./useRuntime"; -import { useENSCache } from "./useReverseCache"; +import { pageCollector, useResolvedAddresses } from "./useResolvedAddresses"; import { useFeeToggler } from "./search/useFeeToggler"; import { SelectionContext, useSelection } from "./useSelection"; import { useMultipleETHUSDOracle } from "./usePriceOracle"; @@ -165,7 +165,8 @@ const AddressTransactions: React.FC = () => { }, [provider, checksummedAddress, params.direction, hash, controller]); const page = useMemo(() => controller?.getPage(), [controller]); - const reverseCache = useENSCache(provider, page); + const addrCollector = useMemo(() => pageCollector(page), [page]); + const resolvedAddresses = useResolvedAddresses(provider, addrCollector); const blockTags: BlockTag[] = useMemo(() => { if (!page) { @@ -277,13 +278,13 @@ const AddressTransactions: React.FC = () => { feeDisplay={feeDisplay} feeDisplayToggler={feeDisplayToggler} /> - {controller ? ( + {page ? ( - {controller.getPage().map((tx) => ( + {page.map((tx) => ( = ({ t, txData, tokenMeta, + resolvedAddresses, }) => (
@@ -64,10 +67,7 @@ const TokenTransferItem: React.FC = ({
diff --git a/src/Transaction.tsx b/src/Transaction.tsx index 04cdd8b..b6934fa 100644 --- a/src/Transaction.tsx +++ b/src/Transaction.tsx @@ -11,6 +11,10 @@ import { useInternalOperations, useTxData } from "./useErigonHooks"; import { useETHUSDOracle } from "./usePriceOracle"; import { useAppConfigContext } from "./useAppConfig"; import { useSourcify, useTransactionDescription } from "./useSourcify"; +import { + transactionDataCollector, + useResolvedAddresses, +} from "./useResolvedAddresses"; const Details = React.lazy( () => @@ -42,6 +46,11 @@ const Transaction: React.FC = () => { const { txhash } = params; const txData = useTxData(provider, txhash); + const addrCollector = useMemo( + () => transactionDataCollector(txData), + [txData] + ); + const resolvedAddresses = useResolvedAddresses(provider, addrCollector); const internalOps = useInternalOperations(provider, txData); const sendsEthToMiner = useMemo(() => { @@ -107,10 +116,15 @@ const Transaction: React.FC = () => { internalOps={internalOps} sendsEthToMiner={sendsEthToMiner} ethUSDPrice={blockETHUSDPrice} + resolvedAddresses={resolvedAddresses} /> - + diff --git a/src/api/address-resolver/CompositeAddressResolver.ts b/src/api/address-resolver/CompositeAddressResolver.ts new file mode 100644 index 0000000..55a7318 --- /dev/null +++ b/src/api/address-resolver/CompositeAddressResolver.ts @@ -0,0 +1,28 @@ +import { BaseProvider } from "@ethersproject/providers"; +import { IAddressResolver } from "./address-resolver"; + +export type SelectedResolvedName = [IAddressResolver, T] | null; + +export class CompositeAddressResolver + implements IAddressResolver> +{ + private resolvers: IAddressResolver[] = []; + + addResolver(resolver: IAddressResolver) { + this.resolvers.push(resolver); + } + + async resolveAddress( + provider: BaseProvider, + address: string + ): Promise | undefined> { + for (const r of this.resolvers) { + const resolvedAddress = await r.resolveAddress(provider, address); + if (resolvedAddress !== undefined) { + return [r, resolvedAddress]; + } + } + + return null; + } +} diff --git a/src/api/address-resolver/ENSAddressResolver.ts b/src/api/address-resolver/ENSAddressResolver.ts new file mode 100644 index 0000000..820a51f --- /dev/null +++ b/src/api/address-resolver/ENSAddressResolver.ts @@ -0,0 +1,15 @@ +import { BaseProvider } from "@ethersproject/providers"; +import { IAddressResolver } from "./address-resolver"; + +export class ENSAddressResolver implements IAddressResolver { + async resolveAddress( + provider: BaseProvider, + address: string + ): Promise { + const name = await provider.lookupAddress(address); + if (name === null) { + return undefined; + } + return name; + } +} diff --git a/src/api/address-resolver/ERCTokenResolver.ts b/src/api/address-resolver/ERCTokenResolver.ts new file mode 100644 index 0000000..02625dc --- /dev/null +++ b/src/api/address-resolver/ERCTokenResolver.ts @@ -0,0 +1,30 @@ +import { BaseProvider } from "@ethersproject/providers"; +import { Contract } from "@ethersproject/contracts"; +import { IAddressResolver } from "./address-resolver"; +import erc20 from "../../erc20.json"; +import { TokenMeta } from "../../types"; + +export class ERCTokenResolver implements IAddressResolver { + async resolveAddress( + provider: BaseProvider, + address: string + ): Promise { + const erc20Contract = new Contract(address, erc20, provider); + try { + const [name, symbol, decimals] = await Promise.all([ + erc20Contract.name(), + erc20Contract.symbol(), + erc20Contract.decimals(), + ]); + return { + name, + symbol, + decimals, + }; + } catch (err) { + // Ignore on purpose; this indicates the probe failed and the address + // is not a token + } + return undefined; + } +} diff --git a/src/api/address-resolver/address-resolver.ts b/src/api/address-resolver/address-resolver.ts new file mode 100644 index 0000000..12d289e --- /dev/null +++ b/src/api/address-resolver/address-resolver.ts @@ -0,0 +1,16 @@ +import React from "react"; +import { BaseProvider } from "@ethersproject/providers"; + +export interface IAddressResolver { + resolveAddress( + provider: BaseProvider, + address: string + ): Promise; +} + +export type ResolvedAddressRenderer = ( + address: string, + resolvedAddress: T, + linkable: boolean, + dontOverrideColors: boolean +) => React.ReactElement; diff --git a/src/api/address-resolver/index.ts b/src/api/address-resolver/index.ts new file mode 100644 index 0000000..dc72a9f --- /dev/null +++ b/src/api/address-resolver/index.ts @@ -0,0 +1,57 @@ +import { BaseProvider } from "@ethersproject/providers"; +import { ensRenderer } from "../../components/ENSName"; +import { tokenRenderer } from "../../components/TokenName"; +import { IAddressResolver, ResolvedAddressRenderer } from "./address-resolver"; +import { + CompositeAddressResolver, + SelectedResolvedName, +} from "./CompositeAddressResolver"; +import { ENSAddressResolver } from "./ENSAddressResolver"; +import { ERCTokenResolver } from "./ERCTokenResolver"; + +export type ResolvedAddresses = Record>; + +// Create and configure the main resolver +export const ensResolver = new ENSAddressResolver(); +export const ercTokenResolver = new ERCTokenResolver(); + +const _mainResolver = new CompositeAddressResolver(); +_mainResolver.addResolver(ensResolver); +_mainResolver.addResolver(ercTokenResolver); + +export const mainResolver: IAddressResolver> = + _mainResolver; + +export const resolverRendererRegistry = new Map< + IAddressResolver, + ResolvedAddressRenderer +>(); +resolverRendererRegistry.set(ensResolver, ensRenderer); +resolverRendererRegistry.set(ercTokenResolver, tokenRenderer); + +// TODO: implement progressive resolving +export const batchPopulate = async ( + provider: BaseProvider, + addresses: string[], + currentMap: ResolvedAddresses | undefined +): Promise => { + const solvers: Promise | undefined>[] = []; + const unresolvedAddresses = addresses.filter( + (a) => currentMap?.[a] === undefined + ); + for (const a of unresolvedAddresses) { + solvers.push(mainResolver.resolveAddress(provider, a)); + } + + const resultMap: ResolvedAddresses = currentMap ? { ...currentMap } : {}; + const results = await Promise.all(solvers); + for (let i = 0; i < results.length; i++) { + const r = results[i]; + if (r === undefined) { + continue; + } + resultMap[unresolvedAddresses[i]] = r; + } + + return resultMap; +}; diff --git a/src/block/BlockTransactionResults.tsx b/src/block/BlockTransactionResults.tsx index b911013..f9cfc27 100644 --- a/src/block/BlockTransactionResults.tsx +++ b/src/block/BlockTransactionResults.tsx @@ -8,7 +8,7 @@ import TransactionItem from "../search/TransactionItem"; import { useFeeToggler } from "../search/useFeeToggler"; import { RuntimeContext } from "../useRuntime"; import { SelectionContext, useSelection } from "../useSelection"; -import { useENSCache } from "../useReverseCache"; +import { pageCollector, useResolvedAddresses } from "../useResolvedAddresses"; import { ProcessedTransaction } from "../types"; import { PAGE_SIZE } from "../params"; import { useMultipleETHUSDOracle } from "../usePriceOracle"; @@ -29,7 +29,8 @@ const BlockTransactionResults: React.FC = ({ const selectionCtx = useSelection(); const [feeDisplay, feeDisplayToggler] = useFeeToggler(); const { provider } = useContext(RuntimeContext); - const reverseCache = useENSCache(provider, page); + const addrCollector = useMemo(() => pageCollector(page), [page]); + const resolvedAddresses = useResolvedAddresses(provider, addrCollector); const blockTags = useMemo(() => [blockTag], [blockTag]); const priceMap = useMultipleETHUSDOracle(provider, blockTags); @@ -59,7 +60,7 @@ const BlockTransactionResults: React.FC = ({ diff --git a/src/components/Address.tsx b/src/components/Address.tsx deleted file mode 100644 index d7694e5..0000000 --- a/src/components/Address.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from "react"; - -type AddressProps = { - address: string; -}; - -const Address: React.FC = ({ address }) => ( - - {address} - -); - -export default React.memo(Address); diff --git a/src/components/AddressOrENSName.tsx b/src/components/AddressOrENSName.tsx index c0defc0..62ee289 100644 --- a/src/components/AddressOrENSName.tsx +++ b/src/components/AddressOrENSName.tsx @@ -1,51 +1,49 @@ import React from "react"; -import Address from "./Address"; -import AddressLink from "./AddressLink"; -import ENSName from "./ENSName"; -import ENSNameLink from "./ENSNameLink"; +import { + ResolvedAddresses, + resolverRendererRegistry, +} from "../api/address-resolver"; +import PlainAddress from "./PlainAddress"; type AddressOrENSNameProps = { address: string; - ensName?: string; selectedAddress?: string; - text?: string; dontOverrideColors?: boolean; + resolvedAddresses?: ResolvedAddresses | undefined; }; const AddressOrENSName: React.FC = ({ address, - ensName, selectedAddress, - text, dontOverrideColors, -}) => ( - <> - {address === selectedAddress ? ( - <> - {ensName ? ( - - ) : ( -
- )} - - ) : ( - <> - {ensName ? ( - - ) : ( - - )} - - )} - -); + resolvedAddresses, +}) => { + const resolvedAddress = resolvedAddresses?.[address]; + const linkable = address !== selectedAddress; + + if (!resolvedAddress) { + return ( + + ); + } + + const [resolver, resolvedName] = resolvedAddress; + const renderer = resolverRendererRegistry.get(resolver); + if (renderer === undefined) { + return ( + + ); + } + + return renderer(address, resolvedName, linkable, !!dontOverrideColors); +}; export default AddressOrENSName; diff --git a/src/components/DecoratedAddressLink.tsx b/src/components/DecoratedAddressLink.tsx index a39d2d8..cadc77f 100644 --- a/src/components/DecoratedAddressLink.tsx +++ b/src/components/DecoratedAddressLink.tsx @@ -5,36 +5,32 @@ import { faBomb } from "@fortawesome/free-solid-svg-icons/faBomb"; import { faMoneyBillAlt } from "@fortawesome/free-solid-svg-icons/faMoneyBillAlt"; import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn"; import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins"; -import TokenLogo from "./TokenLogo"; import AddressOrENSName from "./AddressOrENSName"; -import { AddressContext, TokenMeta, ZERO_ADDRESS } from "../types"; +import { AddressContext, ZERO_ADDRESS } from "../types"; +import { ResolvedAddresses } from "../api/address-resolver"; type DecoratedAddressLinkProps = { address: string; - ensName?: string; selectedAddress?: string; - text?: string; addressCtx?: AddressContext; creation?: boolean; miner?: boolean; selfDestruct?: boolean; txFrom?: boolean; txTo?: boolean; - tokenMeta?: TokenMeta | null | undefined; + resolvedAddresses?: ResolvedAddresses | undefined; }; -const DecoratedAddresssLink: React.FC = ({ +const DecoratedAddressLink: React.FC = ({ address, - ensName, selectedAddress, - text, addressCtx, creation, miner, selfDestruct, txFrom, txTo, - tokenMeta, + resolvedAddresses, }) => { const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS; const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS; @@ -74,20 +70,14 @@ const DecoratedAddresssLink: React.FC = ({ )} - {tokenMeta && ( -
- -
- )} ); }; -export default React.memo(DecoratedAddresssLink); +export default React.memo(DecoratedAddressLink); diff --git a/src/components/ENSName.tsx b/src/components/ENSName.tsx index 7bc8032..f12f416 100644 --- a/src/components/ENSName.tsx +++ b/src/components/ENSName.tsx @@ -1,25 +1,75 @@ import React from "react"; +import { NavLink } from "react-router-dom"; +import { ResolvedAddressRenderer } from "../api/address-resolver/address-resolver"; import ENSLogo from "./ensLogo.svg"; type ENSNameProps = { name: string; address: string; + linkable: boolean; + dontOverrideColors?: boolean; }; -const ENSName: React.FC = ({ name, address }) => ( -
+const ENSName: React.FC = ({ + name, + address, + linkable, + dontOverrideColors, +}) => { + if (linkable) { + return ( + + + + ); + } + + return ( +
+ +
+ ); +}; + +type ContentProps = { + linkable: boolean; + name: string; +}; + +const Content: React.FC = ({ linkable, name }) => ( + <> ENS Logo {name} -
+ ); -export default React.memo(ENSName); +export const ensRenderer: ResolvedAddressRenderer = ( + address, + resolvedAddress, + linkable, + dontOverrideColors +) => ( + +); + +export default ENSName; diff --git a/src/components/InternalTransactionOperation.tsx b/src/components/InternalTransactionOperation.tsx index 095162f..7de3bb2 100644 --- a/src/components/InternalTransactionOperation.tsx +++ b/src/components/InternalTransactionOperation.tsx @@ -3,17 +3,23 @@ import InternalTransfer from "./InternalTransfer"; import InternalSelfDestruct from "./InternalSelfDestruct"; import InternalCreate from "./InternalCreate"; import { TransactionData, InternalOperation, OperationType } from "../types"; +import { ResolvedAddresses } from "../api/address-resolver"; type InternalTransactionOperationProps = { txData: TransactionData; internalOp: InternalOperation; + resolvedAddresses: ResolvedAddresses | undefined; }; const InternalTransactionOperation: React.FC = - ({ txData, internalOp }) => ( + ({ txData, internalOp, resolvedAddresses }) => ( <> {internalOp.type === OperationType.TRANSFER && ( - + )} {internalOp.type === OperationType.SELF_DESTRUCT && ( diff --git a/src/components/InternalTransfer.tsx b/src/components/InternalTransfer.tsx index dc53d05..2958452 100644 --- a/src/components/InternalTransfer.tsx +++ b/src/components/InternalTransfer.tsx @@ -5,15 +5,18 @@ import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight"; import AddressHighlighter from "./AddressHighlighter"; import DecoratedAddressLink from "./DecoratedAddressLink"; import { TransactionData, InternalOperation } from "../types"; +import { ResolvedAddresses } from "../api/address-resolver"; type InternalTransferProps = { txData: TransactionData; internalOp: InternalOperation; + resolvedAddresses: ResolvedAddresses | undefined; }; const InternalTransfer: React.FC = ({ txData, internalOp, + resolvedAddresses, }) => { const fromMiner = txData.confirmedData?.miner !== undefined && diff --git a/src/components/PlainAddress.tsx b/src/components/PlainAddress.tsx new file mode 100644 index 0000000..fbc37ca --- /dev/null +++ b/src/components/PlainAddress.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import { NavLink } from "react-router-dom"; + +type PlainAddressProps = { + address: string; + linkable: boolean; + dontOverrideColors: boolean | undefined; +}; + +const PlainAddress: React.FC = ({ + address, + linkable, + dontOverrideColors, +}) => { + if (linkable) { + return ( + + {address} + + ); + } + + return ( + + {address} + + ); +}; + +export default PlainAddress; diff --git a/src/components/TokenLogo.tsx b/src/components/TokenLogo.tsx index c6f5b8b..8568a0b 100644 --- a/src/components/TokenLogo.tsx +++ b/src/components/TokenLogo.tsx @@ -9,7 +9,7 @@ type TokenLogoProps = { }; const TokenLogo: React.FC = (props) => ( - }> + ); diff --git a/src/components/TokenName.tsx b/src/components/TokenName.tsx new file mode 100644 index 0000000..5c3e91b --- /dev/null +++ b/src/components/TokenName.tsx @@ -0,0 +1,91 @@ +import React from "react"; +import { NavLink } from "react-router-dom"; +import TokenLogo from "./TokenLogo"; +import { ResolvedAddressRenderer } from "../api/address-resolver/address-resolver"; +import { TokenMeta } from "../types"; + +type TokenNameProps = { + address: string; + name: string; + symbol: string; + linkable: boolean; + dontOverrideColors?: boolean; +}; + +const TokenName: React.FC = ({ + address, + name, + symbol, + linkable, + dontOverrideColors, +}) => { + if (linkable) { + return ( + + + + ); + } + + return ( +
+ +
+ ); +}; + +type ContentProps = { + address: string; + name: string; + symbol: string; + linkable: boolean; +}; + +const Content: React.FC = ({ + address, + name, + symbol, + linkable, +}) => ( + <> +
+ +
+ + {name} ({symbol}) + + +); + +export const tokenRenderer: ResolvedAddressRenderer = ( + address, + tokenMeta, + linkable, + dontOverrideColors +) => ( + +); + +export default TokenName; diff --git a/src/search/TransactionItem.tsx b/src/search/TransactionItem.tsx index 76e58e7..2e6132d 100644 --- a/src/search/TransactionItem.tsx +++ b/src/search/TransactionItem.tsx @@ -14,14 +14,15 @@ import TransactionDirection, { Flags, } from "../components/TransactionDirection"; import TransactionValue from "../components/TransactionValue"; -import { ENSReverseCache, ProcessedTransaction } from "../types"; +import { ProcessedTransaction } from "../types"; import { FeeDisplay } from "./useFeeToggler"; import { formatValue } from "../components/formatter"; import ETH2USDValue from "../components/ETH2USDValue"; +import { ResolvedAddresses } from "../api/address-resolver"; type TransactionItemProps = { tx: ProcessedTransaction; - ensCache?: ENSReverseCache; + resolvedAddresses?: ResolvedAddresses; selectedAddress?: string; feeDisplay: FeeDisplay; priceMap: Record; @@ -29,7 +30,7 @@ type TransactionItemProps = { const TransactionItem: React.FC = ({ tx, - ensCache, + resolvedAddresses, selectedAddress, feeDisplay, priceMap, @@ -50,12 +51,6 @@ const TransactionItem: React.FC = ({ } } - const ensFrom = ensCache && tx.from && ensCache[tx.from]; - const ensTo = ensCache && tx.to && ensCache[tx.to]; - const ensCreated = - ensCache && - tx.createdContractAddress && - ensCache[tx.createdContractAddress]; const flash = tx.gasPrice.isZero() && tx.internalMinerInteraction; return ( @@ -87,9 +82,9 @@ const TransactionItem: React.FC = ({ )} @@ -107,18 +102,18 @@ const TransactionItem: React.FC = ({ ) : ( )} @@ -144,4 +139,4 @@ const TransactionItem: React.FC = ({ ); }; -export default React.memo(TransactionItem); +export default TransactionItem; diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx index 4746cc5..9c9e29d 100644 --- a/src/transaction/Details.tsx +++ b/src/transaction/Details.tsx @@ -38,6 +38,7 @@ import ModeTab from "../components/ModeTab"; import DecodedParamsTable from "./decoder/DecodedParamsTable"; import { rawInputTo4Bytes, use4Bytes } from "../use4Bytes"; import { DevDoc, UserDoc } from "../useSourcify"; +import { ResolvedAddresses } from "../api/address-resolver"; type DetailsProps = { txData: TransactionData; @@ -47,6 +48,7 @@ type DetailsProps = { internalOps?: InternalOperation[]; sendsEthToMiner: boolean; ethUSDPrice: BigNumber | undefined; + resolvedAddresses: ResolvedAddresses | undefined; }; const Details: React.FC = ({ @@ -57,6 +59,7 @@ const Details: React.FC = ({ internalOps, sendsEthToMiner, ethUSDPrice, + resolvedAddresses, }) => { const hasEIP1559 = txData.confirmedData?.blockBaseFeePerGas !== undefined && @@ -154,6 +157,7 @@ const Details: React.FC = ({ address={txData.from} miner={txData.from === txData.confirmedData?.miner} txFrom + resolvedAddresses={resolvedAddresses} /> @@ -171,6 +175,7 @@ const Details: React.FC = ({ address={txData.to} miner={txData.to === txData.confirmedData?.miner} txTo + resolvedAddresses={resolvedAddresses} /> @@ -188,6 +193,7 @@ const Details: React.FC = ({ address={txData.confirmedData.createdContractAddress!} creation txTo + resolvedAddresses={resolvedAddresses} /> @@ -200,6 +206,7 @@ const Details: React.FC = ({ key={i} txData={txData} internalOp={op} + resolvedAddresses={resolvedAddresses} /> ))} @@ -219,6 +226,7 @@ const Details: React.FC = ({ t={t} txData={txData} tokenMeta={txData.tokenMetas[t.token]} + resolvedAddresses={resolvedAddresses} /> ))} diff --git a/src/transaction/LogEntry.tsx b/src/transaction/LogEntry.tsx index 23ab883..2993e16 100644 --- a/src/transaction/LogEntry.tsx +++ b/src/transaction/LogEntry.tsx @@ -10,14 +10,21 @@ import DecodedParamsTable from "./decoder/DecodedParamsTable"; import DecodedLogSignature from "./decoder/DecodedLogSignature"; import { TransactionData } from "../types"; import { useTopic0 } from "../useTopic0"; +import { ResolvedAddresses } from "../api/address-resolver"; type LogEntryProps = { txData: TransactionData; log: Log; logDesc: LogDescription | null | undefined; + resolvedAddresses: ResolvedAddresses | undefined; }; -const LogEntry: React.FC = ({ txData, log, logDesc }) => { +const LogEntry: React.FC = ({ + txData, + log, + logDesc, + resolvedAddresses, +}) => { const rawTopic0 = log.topics[0]; const topic0 = useTopic0(rawTopic0); @@ -62,6 +69,7 @@ const LogEntry: React.FC = ({ txData, log, logDesc }) => { miner={log.address === txData.confirmedData?.miner} txFrom={log.address === txData.from} txTo={log.address === txData.to} + resolvedAddresses={resolvedAddresses} /> diff --git a/src/transaction/Logs.tsx b/src/transaction/Logs.tsx index 45fe491..1fd4207 100644 --- a/src/transaction/Logs.tsx +++ b/src/transaction/Logs.tsx @@ -5,13 +5,15 @@ import LogEntry from "./LogEntry"; import { TransactionData } from "../types"; import { useAppConfigContext } from "../useAppConfig"; import { Metadata, useMultipleMetadata } from "../useSourcify"; +import { ResolvedAddresses } from "../api/address-resolver"; type LogsProps = { txData: TransactionData; metadata: Metadata | null | undefined; + resolvedAddresses: ResolvedAddresses | undefined; }; -const Logs: React.FC = ({ txData, metadata }) => { +const Logs: React.FC = ({ txData, metadata, resolvedAddresses }) => { const baseMetadatas = useMemo((): Record => { if (!txData.to || metadata === undefined) { return {}; @@ -70,6 +72,7 @@ const Logs: React.FC = ({ txData, metadata }) => { txData={txData} log={l} logDesc={logDescs?.[i]} + resolvedAddresses={resolvedAddresses} /> ))} diff --git a/src/types.ts b/src/types.ts index e71a492..f54f94a 100644 --- a/src/types.ts +++ b/src/types.ts @@ -32,10 +32,6 @@ export type TransactionChunk = { lastPage: boolean; }; -export type ENSReverseCache = { - [address: string]: string; -}; - export type TransactionData = { transactionHash: string; from: string; diff --git a/src/url.ts b/src/url.ts index 4639738..647fc42 100644 --- a/src/url.ts +++ b/src/url.ts @@ -38,7 +38,7 @@ const resolveSourcifySource = (source: SourcifySource) => { return sourcifyHttpRepoPrefix; } - throw new Error(`Unknown Sourcify intergration source code: ${source}`); + throw new Error(`Unknown Sourcify integration source code: ${source}`); }; export const sourcifyMetadata = ( diff --git a/src/useProvider.ts b/src/useProvider.ts index 7f89f36..b189b7f 100644 --- a/src/useProvider.ts +++ b/src/useProvider.ts @@ -1,5 +1,9 @@ import { useEffect, useState } from "react"; -import { JsonRpcProvider, WebSocketProvider } from "@ethersproject/providers"; +import { + JsonRpcProvider, + JsonRpcBatchProvider, + WebSocketProvider, +} from "@ethersproject/providers"; import { ConnectionStatus } from "./types"; import { MIN_API_LEVEL } from "./params"; @@ -35,7 +39,7 @@ export const useProvider = ( if (erigonURL?.startsWith("ws://") || erigonURL?.startsWith("wss://")) { provider = new WebSocketProvider(erigonURL); } else { - provider = new JsonRpcProvider(erigonURL); + provider = new JsonRpcBatchProvider(erigonURL); } // Check if it is at least a regular ETH node diff --git a/src/useResolvedAddresses.ts b/src/useResolvedAddresses.ts new file mode 100644 index 0000000..1936da0 --- /dev/null +++ b/src/useResolvedAddresses.ts @@ -0,0 +1,92 @@ +import { useState, useEffect, useRef } from "react"; +import { JsonRpcProvider } from "@ethersproject/providers"; +import { ProcessedTransaction, TransactionData } from "./types"; +import { batchPopulate, ResolvedAddresses } from "./api/address-resolver"; + +export type AddressCollector = () => string[]; + +export const pageCollector = + (page: ProcessedTransaction[] | undefined): AddressCollector => + () => { + if (!page) { + return []; + } + + const uniqueAddresses = new Set(); + for (const tx of page) { + if (tx.from) { + uniqueAddresses.add(tx.from); + } + if (tx.to) { + uniqueAddresses.add(tx.to); + } + } + + return Array.from(uniqueAddresses); + }; + +export const transactionDataCollector = + (txData: TransactionData | null | undefined): AddressCollector => + () => { + if (!txData) { + return []; + } + + const uniqueAddresses = new Set(); + + // Standard fields + uniqueAddresses.add(txData.from); + if (txData.to) { + uniqueAddresses.add(txData.to); + } + if (txData.confirmedData?.createdContractAddress) { + uniqueAddresses.add(txData.confirmedData?.createdContractAddress); + } + + // Dig token transfers + for (const t of txData.tokenTransfers) { + uniqueAddresses.add(t.from); + uniqueAddresses.add(t.to); + uniqueAddresses.add(t.token); + } + + // Dig log addresses + if (txData.confirmedData) { + for (const l of txData.confirmedData.logs) { + uniqueAddresses.add(l.address); + // TODO: find a way to dig over decoded address log attributes + } + } + + return Array.from(uniqueAddresses); + }; + +export const useResolvedAddresses = ( + provider: JsonRpcProvider | undefined, + addrCollector: AddressCollector +) => { + const [names, setNames] = useState(); + const ref = useRef(); + useEffect(() => { + ref.current = names; + }); + + useEffect( + () => { + if (!provider) { + return; + } + + const populate = async () => { + const _addresses = addrCollector(); + const _names = await batchPopulate(provider, _addresses, ref.current); + setNames(_names); + }; + populate(); + }, + // DON'T put names variables in dependency array; this is intentional; useRef + [provider, addrCollector] + ); + + return names; +}; diff --git a/src/useReverseCache.ts b/src/useReverseCache.ts deleted file mode 100644 index 365888a..0000000 --- a/src/useReverseCache.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { useState, useEffect } from "react"; -import { JsonRpcProvider } from "@ethersproject/providers"; -import { ENSReverseCache, ProcessedTransaction } from "./types"; - -export const useENSCache = ( - provider?: JsonRpcProvider, - page?: ProcessedTransaction[] -) => { - const [reverseCache, setReverseCache] = useState(); - - useEffect(() => { - if (!provider || !page) { - return; - } - - const addrSet = new Set(); - for (const tx of page) { - if (tx.from) { - addrSet.add(tx.from); - } - if (tx.to) { - addrSet.add(tx.to); - } - } - const addresses = Array.from(addrSet); - - const reverseResolve = async () => { - const solvers: Promise[] = []; - for (const a of addresses) { - solvers.push(provider.lookupAddress(a)); - } - - const results = await Promise.all(solvers); - const cache: ENSReverseCache = {}; - for (let i = 0; i < results.length; i++) { - const r = results[i]; - if (r === null) { - continue; - } - cache[addresses[i]] = r; - } - setReverseCache(cache); - }; - reverseResolve(); - }, [provider, page]); - - return reverseCache; -}; diff --git a/topic0 b/topic0 index 52559d5..5026a20 160000 --- a/topic0 +++ b/topic0 @@ -1 +1 @@ -Subproject commit 52559d5690d491f8191a2d3fdb3c037516adc68f +Subproject commit 5026a20b712c1cad66878821c38e1f070e4a3799