feat(tx): TX Analyser — call tree, state changes, and contract enrichment#281
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.
|
This looks really really good!!
|
…fix links
- Make event logs and state changes collapsible by default with
expand/collapse all buttons
- Show full addresses in call tree instead of shortened
- Fix all address links to use /{networkId}/address/{addr} path format
- Add expandAll/collapseAll i18n keys to all 5 locales
- Fetch contract info for event log addresses independently of call tree, so event decoding works for all users (not just super user) - Resolve proxy contract implementations via Sourcify proxyResolution and merge implementation ABI for proper event/function decoding
- Stabilize usePersistentCache callbacks with refs so toggling isSuperUser doesn't recreate getCached/setCached identities - Reset active analyser tab to a base tab when leaving super user mode
- Add collapse/expand button on the tab bar with text and arrow - Clicking active tab toggles collapse; clicking other tab expands to it - Base user mode starts collapsed; super user mode starts expanded - Switching to super user auto-expands the analyser - Add expand/collapse i18n keys to all 5 locales
|
@AugustoL a few things I noticed during review: 1. In if (n.to) addrs.add(n.to.toLowerCase());Contracts acting as callers in if (n.from) addrs.add(n.from.toLowerCase());
if (n.to) addrs.add(n.to.toLowerCase());2.
3. Log enrichment runs on mount regardless of active tab The 4. In a few |
|
Thanks for the review! Here's the status: 1. 2. TxAnalyser.tsx too large — Fixed. Split into 6 files under 3. Log enrichment runs on mount — Keeping as-is. We need to start fetching contract data (names + ABIs) as soon as the component mounts so it's ready by the time the user opens the Events tab. Waiting until tab activation would add a visible loading delay since Sourcify lookups take time, especially for txs with many unique contracts. 4. |
- Split TxAnalyser.tsx (1,272 lines) into 6 files under analyser/ directory - Fix collectAddresses to collect both from and to addresses (DELEGATECALL enrichment) - Fix CSS "monospace" to unquoted generic family name
|
@MatiasOS Thanks for the feedback! Fixed both items:
Pushed to |
josealoha666
left a comment
josealoha666
left a comment
There was a problem hiding this comment.
Reviewed the current head SHA. I don’t see anything obviously blocking from a quick pass, but I’m leaving this as a comment rather than approval so a human can confirm intent and coverage.
josealoha666
left a comment
josealoha666
left a comment
There was a problem hiding this comment.
A couple of things to address before merge:
src/components/pages/evm/tx/TransactionDisplay.tsxstill contains TODO/FIXME markers in the diff.
josealoha666
left a comment
josealoha666
left a comment
There was a problem hiding this comment.
I checked the current head and I do not see an obvious blocking issue from the diff/API view. If CI is green, this looks fine from my side.
3 participants
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).