feat: add idl interaction and parsing to devtools

[stevesarmiento]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
connectorkit-playground	Ready	Preview, Comment	Mar 15, 2026 7:06am

[github-actions]

📊 Coverage Report

ConnectorKit Packages Test Results

Coverage reports have been generated for all packages.

📁 View Coverage Artifacts

Coverage reports have been generated for all packages:

• Combined Coverage Report
• Individual package coverage artifacts available in workflow runs

[greptile-apps]

Greptile Summary

This PR adds a full IDL interaction and parsing experience to the devtools package, along with transaction simulation, flow visualization, and several supporting features.

• New IDL plugin (packages/devtools/src/plugins/idl.ts + sub-modules): Provides an Explorer-like "Interact with IDL" panel that fetches Anchor IDLs from chain via Program Metadata, supports paste/file upload, auto-fills accounts (wallet, known addresses, PDAs), and executes instructions through the connected wallet. Well-structured with race-condition guards and proper HTML escaping.
• Transaction simulation engine (packages/devtools/src/plugins/transactions/simulation/): Adds pre-send and post-send simulation with writable account snapshots, balance change detection, token account analysis, and security warnings (owner changes, delegation, insufficient funds). Includes retry logic for BlockhashNotFound.
• Transaction flow visualization (packages/devtools/src/plugins/transactions/render-flow.ts): New SVG-based graph showing accounts → instructions → programs with transfer highlighting.
• Major transactions plugin refactor: Extracted helpers into focused sub-modules (details.ts, format.ts, render-flow.ts, render-sent-details.ts, render-simulation.ts), replacing inline utility functions with shared utils/dom.ts.
• Connector client enhancement: Added previewTransaction() method for apps that don't use the connector signer to still surface wire bytes in devtools.
• New example routes: Titan swap API proxy and modern wallet transfer example components added to next-js example app.
• Minor dead code (lamportsDelta in render-simulation.ts) and a redundant ternary in pda.ts are the only code quality items worth cleaning up.

Confidence Score: 4/5

• This PR is safe to merge — it adds well-isolated devtools features with no breaking changes to the core connector package.
• Large but well-structured feature addition. HTML escaping is consistently applied throughout the new DOM-rendering code. Race conditions are guarded with request IDs. The IDL interaction feature correctly warns on mainnet execution. Only minor code quality items (dead code, redundant ternary) and one API proxy that forwards raw error messages were flagged. No critical logic bugs found.
• packages/devtools/src/plugins/idl/pda.ts (redundant ternary), packages/devtools/src/plugins/transactions/render-simulation.ts (dead code), examples/next-js/app/api/titan/[...path]/route.ts (raw error forwarding)

Important Files Changed

Filename	Overview
packages/devtools/src/plugins/idl.ts	New IDL plugin (~989 lines) providing Explorer-like "Interact with IDL" experience. Well-structured with proper request ID tracking for race conditions, good HTML escaping, and solid error handling. State mutation during render is pragmatic for this DOM-only approach.
packages/devtools/src/plugins/idl/build-anchor-instruction.ts	Builds Anchor instructions from IDL definitions with dynamic imports. Uses as any casts for Anchor interop which is typical for this library. Handles account groups recursively with proper error messages for missing accounts.
packages/devtools/src/plugins/idl/pda.ts	PDA seed derivation logic. Has a redundant identical-branch ternary on line 61. Otherwise handles const/arg/account seed kinds correctly with proper try-catch on PublicKey construction.
packages/devtools/src/plugins/transactions.ts	Major refactor extracting helpers into sub-modules (details, format, render-flow, render-simulation, simulation). Adds simulation panel with auto-simulate, flow visualization, and details tabs. Good use of request ID tracking for stale-response prevention.
packages/devtools/src/plugins/transactions/render-simulation.ts	Renders simulation results including writable accounts, balance changes, warnings, and logs. Has an unused lamportsDelta variable (dead code) that computes in the wrong direction. Proper HTML escaping throughout.
packages/devtools/src/plugins/transactions/simulation/engine.ts	Core simulation engine that fetches pre-state, runs simulateTransaction, and computes balance changes/warnings (including token owner changes, delegation). Good retry logic for BlockhashNotFound errors. SPL token account parsing uses hardcoded 165 byte size (standard layout).
packages/devtools/src/plugins/transactions/render-flow.ts	New SVG-based transaction flow graph rendering accounts → instructions → programs. Properly escapes all user-controlled content in HTML and SVG contexts. Clean architecture with separated node/edge builders.
examples/next-js/app/api/titan/[...path]/route.ts	New API proxy route for Titan swap API to avoid CORS. Returns raw Titan error messages to clients which could leak internal API details. Token auth falls back to client-provided header when env var is missing (by design for demo).
packages/devtools/src/components/devtools-element.ts	Refactored devtools shell element with Shadow DOM isolation, plugin tab management, and dropdown support. Proper event listener cleanup via AbortController. HTML escaping applied to plugin names.
packages/connector/src/lib/core/connector-client.ts	Adds previewTransaction() method to ConnectorClient for emitting pre-send transaction previews to devtools. Clean, non-breaking addition that uses existing prepareTransactionForWallet utility.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    subgraph IDL_Plugin["IDL Plugin"]
        A[User enters Program ID] --> B{IDL Source?}
        B -->|Program Metadata| C[Fetch IDL from chain]
        B -->|Paste JSON| D[Parse pasted JSON]
        B -->|File Upload| E[Read local file]
        C --> F[Parse & validate Anchor IDL]
        D --> F
        E --> F
        F --> G[List instructions]
        G --> H[Select instruction]
        H --> I[Auto-fill accounts & args]
        I --> J[Compute PDAs]
        J --> K[Build Anchor instruction]
        K --> L{Mainnet?}
        L -->|Yes| M[Confirm dialog]
        L -->|No| N[Sign & Send via Wallet]
        M -->|OK| N
        N --> O[Emit transaction events]
    end

    subgraph Tx_Simulation["Transaction Simulation"]
        P[Wire transaction bytes] --> Q[Decode & decompile message]
        Q --> R[Fetch pre-state snapshots]
        R --> S[simulateTransaction RPC]
        S --> T[Compute balance changes]
        T --> U[Detect warnings]
        U --> V[Render simulation panel]
    end

    subgraph Tx_Flow["Transaction Flow Viz"]
        W[RPC transaction details] --> X[Build account nodes]
        X --> Y[Build instruction nodes]
        Y --> Z[Build program nodes]
        Z --> AA[Render SVG graph]
    end

    O --> P
    O --> W

Loading

_{Last reviewed commit: 170f8e7}