WIP: feat: solana devtools

[stevesarmiento]

No description provided.

[vercel]

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

Project	Deployment	Review	Updated (UTC)
connectorkit-playground	Ready	Preview, Comment	Jan 22, 2026 7:39am

[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 introduces a major architectural refactor that replaces the React-based debugger package with a new framework-agnostic devtools package. The new implementation uses Web Components with Shadow DOM for style isolation and follows a TanStack-style imperative API (mount/unmount).

Key Changes:

• Replaces React-based debugger UI with vanilla JavaScript Web Components using Shadow DOM
• Implements persistent localStorage caching for events and transactions that survives page reloads
• Adds inflight transaction tracking that captures transactions before they receive signatures
• Uses @solana/kit v5.0 for transaction wire decoding and compute budget extraction
• Provides plugin-based architecture with built-in Overview, Events, and Transactions tabs
• Implements proper HTML escaping in transaction plugin to prevent XSS
• Auto-detects window.__connectorClient for zero-config setup in React apps
• Includes session-scoped cache with persistSessionId for discarding stale data across builds

Architecture:

• Core devtools class manages lifecycle, subscriptions, and plugin rendering
• Plugins receive a PluginContext with access to client, cache, and theme
• Storage utilities provide safe localStorage access with try-catch guards
• RPC utilities fetch transaction status and details with proper type conversions
• Event subscription captures transaction lifecycle from preparing → signing → sent

The implementation shows solid engineering practices with proper error handling, HTML escaping for user-controlled data, safe JSON parsing, and SSR guards.

Confidence Score: 4/5

• This PR is safe to merge after addressing minor concerns around potential memory leaks and DOM cleanup
• The PR demonstrates strong engineering with proper security practices (HTML escaping, safe storage access), comprehensive error handling, and a well-designed plugin architecture. Score is 4/5 rather than 5/5 due to a few areas needing attention: potential memory leak if plugin icons contain event listeners, missing cleanup for document-level event listeners in the Shadow DOM, and the use of any type casts in several RPC calls that could be tightened
• Pay close attention to packages/devtools/src/components/devtools-element.ts for DOM cleanup and packages/devtools/src/plugins/transactions.ts for the polling interval cleanup logic

Important Files Changed

Filename	Overview
packages/devtools/src/core.ts	Main devtools class implementing TanStack-style mount/unmount API with event subscription, persistent cache, and plugin system
packages/devtools/src/utils/storage.ts	Safe localStorage utilities with JSON parsing guards and session-scoped cache management
packages/devtools/src/utils/tx-decode.ts	Transaction wire decoding utilities using @solana/kit to extract compute budget and transaction metadata
packages/devtools/src/plugins/transactions.ts	Transactions plugin with inflight transaction tracking, RPC fetching, HTML escaping for all user-controlled data, and detailed transaction inspection UI
packages/devtools/src/components/devtools-element.ts	Shadow DOM-based web component implementation with panel animations, tab navigation, and plugin rendering lifecycle
examples/next-js/app/providers.tsx	Example integration showing dynamic import of devtools in development mode with proper cleanup

Sequence Diagram

sequenceDiagram
    participant App as Application
    participant Provider as ConnectorProvider
    participant Client as ConnectorClient
    participant Devtools as ConnectorDevtools
    participant Plugin as Plugin (Transactions/Events/Overview)
    participant Storage as localStorage
    participant RPC as Solana RPC

    App->>Provider: Render with ConnectorProvider
    Provider->>Client: Initialize ConnectorClient
    Provider->>Client: Expose as window.__connectorClient
    
    App->>Devtools: new ConnectorDevtools()
    Devtools->>Storage: Load persisted state/cache
    Storage-->>Devtools: Return cached data
    Devtools->>Client: Auto-detect from window.__connectorClient
    
    App->>Devtools: mount(container)
    Devtools->>Client: Subscribe to events (on)
    Devtools->>Devtools: Create Shadow DOM element
    Devtools->>Plugin: Initialize plugins (Overview, Events, Transactions)
    
    Client->>Devtools: Emit transaction:preparing
    Devtools->>Storage: Update cache with inflight transaction
    Devtools->>Plugin: Notify cache subscribers
    
    Client->>Devtools: Emit transaction:signing
    Devtools->>Storage: Update inflight stage
    
    Client->>Devtools: Emit transaction:sent (signature)
    Devtools->>Storage: Persist transaction to cache
    Devtools->>Client: Track transaction via client.trackTransaction()
    
    Plugin->>RPC: fetchSignatureStatus(signature)
    RPC-->>Plugin: Return status/confirmations
    Plugin->>RPC: fetchTransactionJsonParsed(signature)
    RPC-->>Plugin: Return transaction details
    
    Plugin->>Devtools: updateCache with RPC data
    Devtools->>Storage: Persist updated cache
    Devtools->>Client: updateTransactionStatus()
    
    App->>Devtools: unmount()
    Devtools->>Client: Unsubscribe from events
    Devtools->>Plugin: Call plugin.destroy()
    Devtools->>Devtools: Remove Shadow DOM

Loading

[greptile-apps]

_{60 files reviewed, 5 comments}

_{Edit Code Review Agent Settings | Greptile}