feat(tx): TX Analyser — call tree, state changes, and contract enrichment#281
Open
feat(tx): TX Analyser — call tree, state changes, and contract enrichment#281
Conversation
… enrichment Adds a TX Analyser panel (super user mode) to the transaction details page. - Adds getAnalyserCallTrace / getAnalyserPrestateTrace to all network adapters (EVM, Arbitrum, Optimism, Base, BNB, Polygon) using debug_traceTransaction with callTracer / prestateTracer; Arbitrum falls back to arbtrace_transaction - New CallNode / PrestateTrace types in NetworkAdapter - New callTreeUtils: normalizeGethCallTrace, normalizeParityCallTrace, countCalls, countReverts, countByType, collectAddresses, hexToGas - New contractLookup utility: fetches contract name + ABI from Sourcify (Etherscan fallback when key configured); session-level cache - New useCallTreeEnrichment hook: enriches all call tree addresses in parallel, aborts on tree change - TxAnalyser component: Call Tree tab with expandable nodes, decoded function calls, contract names, per-type summary; State Changes tab with balance/nonce/storage/code diffs and contract names - Collapsible TX Analyser section in TransactionDisplay (super users only) - Translations for all 5 locales (en, es, ja, pt-BR, zh) - All CSS styles for analyser, call tree, and state change components
|
🚀 Preview: https://pr-281--openscan.netlify.app |
Adds a Gas Profiler tab to the TX Analyser that shows how gas is spent across all operations in a transaction. Flattens the call tree into a sorted table with columns: type, contract, function, gas used (with percentage bar). Reuses existing call tree data — no additional RPC calls needed. Translations added for all 5 locales (en, es, ja, pt-BR, zh).
…it for contract enrichment Replace the table-based Gas Profiler with a Tenderly-style icicle/flame chart with click-to-zoom and breakdown panel. All analyser tabs now wait for contract ABI enrichment to complete before rendering, ensuring decoded function names are displayed instead of raw selectors.
In super user mode, event logs are now displayed inside the TX Analyser as a dedicated Events tab instead of a separate collapsible section. The Events tab leverages enriched contract ABIs from the call tree enrichment to decode events from all addresses, not just the tx recipient. Non-super-user mode retains the original collapsible event logs section.
In super user mode, raw and decoded input data are now displayed inside the TX Analyser as an Input Data tab. The tab also tries enriched ABIs from call tree enrichment as a fallback for decoding. Non-super-user mode retains the original input data rows in the transaction details.
Remove the collapsible toggle button — the TX Analyser section is now always visible when super user mode is active.
Fix race condition where call tree tabs rendered with empty contracts for one frame before the enrichment useEffect had a chance to run. Track a pendingEnrichment state to bridge the gap between when the call tree arrives and when the async enrichment effect fires.
Replace pendingEnrichment workaround with a simpler done-flag approach. enrichmentLoading is now true from the moment a call tree exists until all contract info has been fetched, eliminating any render gap.
Sourcify V2 API does not have a top-level 'name' field — the contract name is nested under compilation.name. Changed the request from ?fields=abi,name (which returned a 400 error) to ?fields=abi,compilation and extracted the name from compilation.name.
…Data tabs The TX Analyser is now always visible on transaction pages. Base users see Events and Input Data tabs. Super user mode unlocks Call Tree, Gas Profiler, and State Changes tabs. Trace fetching is skipped in base mode. Removed duplicate event logs and input data sections from TransactionDisplay since TxAnalyser now handles them for all users.
Base user tabs (Events, Input Data) use --text-primary when active. Super user tabs (Call Tree, Gas Profiler, State Changes) use --color-accent to visually signal the user is viewing advanced data.
Member
|
This looks really really good!!
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds a TX Analyser panel to the transaction details page (visible in Super User mode). Inspired by tools like Tenderly, it provides a deep-dive into transaction execution without leaving OpenScan.
Related Issue
Closes #274
Type of Change
Changes Made
Adapters
getAnalyserCallTraceandgetAnalyserPrestateTraceabstract methods toNetworkAdapterdebug_traceTransactionwithcallTracer/prestateTracerarbtrace_transaction(Parity flat format)Utilities
callTreeUtils.ts— normalize Geth and Parity/arbtrace traces to a unifiedCallNodetree; helpers:countCalls,countReverts,countByType,collectAddresses,hexToGascontractLookup.ts— fetch contract name + ABI from Sourcify (Etherscan V2 fallback when API key is configured); session-level cache keyed bychainId:addressHooks
useCallTreeEnrichment— enriches all addresses in a call tree in parallel; aborts on tree/network changeUI (
TxAnalyser.tsx)from → towith contract names, decoded function calls (transfer(0x1234…, 100)), ETH value, gas used, error badges3× STATICCALL), revert count, enrichment loading indicatorIntegration
TransactionDisplay.tsx— collapsible "TX Analyser ▼" section, shown only whenisSuperUseris enabledanalyser.*keysScreenshots (if applicable)
To be added — test with any mainnet transaction on a trace-enabled RPC (dRPC, Tenderly).
Checklist
npm run format:fixandnpm run lint:fixnpm run typecheckwith no errorsnpm run test:runAdditional Notes
debug_traceTransaction(dRPC free tier, Tenderly, Alchemy, Ankr with key). The UI shows a clear "not supported" message with provider suggestions when the RPC doesn't support traces.settings.apiKeys.etherscanis set (opt-in).etherscanfield added toApiKeystype in anticipation of PR feat(address): proxy contract detection + Etherscan verification source #279 (Etherscan as verification source).