DEV Community: Zakayo Thuku

Web3 Chucker: In-App OkHttp JSON-RPC Inspector & EVM Revert Decoder

Zakayo Thuku — Mon, 31 Aug 2026 09:46:13 +0000

Building decentralized mobile applications (dApps) and crypto wallets on Android involves frequent JSON-RPC communications with Ethereum, Polygon, Arbitrum, or Solana RPC nodes (via Infura, Alchemy, or QuickNode).

Debugging failed transactions is notoriously difficult when raw JSON-RPC responses only return opaque 4-byte revert signatures (0x08c379a0) or generic execution reverted messages without clear parameter decoding.

web3-chucker extends OkHttp to inspect, parse, and decode Web3 JSON-RPC transactions and smart contract revert errors directly on-device.

🏗️ Architecture: JSON-RPC Parsing & Revert Lookup Engine

Method-Aware RPC Filtering: Automatically tags and filters JSON-RPC methods (eth_sendRawTransaction, eth_call, eth_estimateGas, personal_sign, solana_sendTransaction).
4-Byte Revert Decoder: Translates opaque error selectors (e.g. 0x4e487b71 -> Panic(uint256)) into human-readable contract revert reasons.
Latency & Gas Tracking: Measures round-trip RPC execution latency and flags gas estimation spikes.

🛠️ Step-by-Step Implementation Guide

1. Add Gradle Dependency

dependencies {
    // Debug builds: full JSON-RPC inspector & overlay UI
    debugImplementation("io.github.zakayothuku:web3-chucker:1.0.0")

    // Release builds: zero-overhead no-op artifact
    releaseImplementation("io.github.zakayothuku:web3-chucker-noop:1.0.0")
}

2. Configure Web3ChuckerInterceptor with OkHttp

val okHttpClient = OkHttpClient.Builder()
    .addInterceptor(
        Web3ChuckerInterceptor(
            context = applicationContext,
            maxContentLength = 250_000L,
            decodeReverts = true
        )
    )
    .build()

// Provide client to Web3j or custom RPC client
val web3j = Web3j.build(HttpService("https://mainnet.infura.io/v3/YOUR_KEY", okHttpClient))

3. Attach Floating Overlay

@Composable
fun WalletApp() {
    Box(modifier = Modifier.fillMaxSize()) {
        WalletNavHost()

        if (BuildConfig.DEBUG) {
            Web3ChuckerOverlay()
        }
    }
}

👉 GitHub Repository: github.com/zakayothuku/web3-chucker

Compose Room Inspector: In-App SQLite & Room DB Browser with Jetpack Compose Overlay

Zakayo Thuku — Mon, 31 Aug 2026 09:45:36 +0000

Debugging local database state on Android often requires tethering the device to Android Studio to use the App Inspection tab. However, when QA engineers or developers are testing in the field, verifying whether an offline sync job or local caching mutation wrote the correct database records is impossible without desktop access.

compose-room-inspector is an on-device SQLite & Room database inspector featuring live table browsing, schema introspection, and an interactive raw SQL console with query timing.

🏗️ Architecture & Security Model

Zero Schema Boilerplate: Automatically introspects all tables, column types, and primary key (🔑) constraints at runtime using SQLite pragmas.
2D Virtualized Grid: Horizontally and vertically scrollable table viewer with sticky column headers and real-time column search.
SQL Console with Execution Profiling: Execute ad-hoc queries with an execution time badge (e.g. ⚡ 14 ms) to verify query efficiency.
1-Tap Export: Copy table records as structured CSV or JSON to the clipboard for bug reports.

🛠️ Step-by-Step Implementation Guide

1. Add Gradle Dependency

dependencies {
    // Debug builds: in-app SQLite & Room inspector overlay
    debugImplementation("io.github.zakayothuku:compose-room-inspector:1.0.0")

    // Release builds: zero-overhead no-op artifact
    releaseImplementation("io.github.zakayothuku:compose-room-inspector-noop:1.0.0")
}

2. Register Your Database Instance

In your Application class or Dependency Injection module:

@Provides
@Singleton
fun provideAppDatabase(@ApplicationContext context: Context): AppDatabase {
    val database = Room.databaseBuilder(
        context,
        AppDatabase::class.java,
        "app_commerce.db"
    ).build()

    // Register database with the inspector in debug builds
    if (BuildConfig.DEBUG) {
        ComposeRoomInspector.register(
            name = "Commerce DB",
            database = database.openHelper.writableDatabase
        )
    }

    return database
}

3. Display the Inspector Overlay

@Composable
fun AppRoot() {
    Box(modifier = Modifier.fillMaxSize()) {
        MainNavigation()

        if (BuildConfig.DEBUG) {
            ComposeRoomInspectorOverlay()
        }
    }
}

👉 GitHub Repository: github.com/zakayothuku/compose-room-inspector

Compose Chaos Proxy: On-Device Network Latency & HTTP Chaos Simulator for Android

Zakayo Thuku — Mon, 31 Aug 2026 09:44:50 +0000

Modern mobile applications must gracefully handle harsh real-world network conditions — from spotty subway tunnels and high-latency 3G networks to expired OAuth tokens (401) and server outages (500/503).

Traditionally, testing these states required desktop proxy tools like Charles Proxy, Proxyman, or mitmproxy, involving Wi-Fi proxy configurations and installing custom root SSL certificates on test devices.

compose-chaos-proxy eliminates the desktop proxy requirement by providing an on-device network chaos engine with a floating Jetpack Compose control overlay.

🏗️ Architecture: OkHttp Interceptor + Dynamic Rule Engine

Seamless OkHttp Integration: Plugs directly into your existing OkHttpClient pipeline.
Granular URL Regex Filtering: Target specific endpoints (e.g., /api/v1/checkout.* or /auth/refresh) without affecting analytics or image loading.
Configurable Failure Rates: Simulate flaky connections by failing a percentage of requests (e.g. 25% failure probability).
Custom JSON Mock Payloads: Return custom error JSON responses matching your backend error schemas.

🛠️ Step-by-Step Implementation Guide

1. Add Gradle Dependency

dependencies {
    // Debug builds: on-device network chaos simulator & UI overlay
    debugImplementation("io.github.zakayothuku:compose-chaos-proxy:1.0.0")

    // Release builds: zero-overhead no-op artifact
    releaseImplementation("io.github.zakayothuku:compose-chaos-proxy-noop:1.0.0")
}

2. Attach Interceptor to OkHttpClient

val okHttpClient = OkHttpClient.Builder()
    .addInterceptor(ComposeChaosInterceptor(context = applicationContext))
    .connectTimeout(15, TimeUnit.SECONDS)
    .readTimeout(15, TimeUnit.SECONDS)
    .build()

3. Add the Floating Chaos Control Overlay

Add ComposeChaosOverlay to your root Composable:

@Composable
fun RootApp() {
    Box(modifier = Modifier.fillMaxSize()) {
        AppContent()

        // Draggable floating chaos control trigger
        if (BuildConfig.DEBUG) {
            ComposeChaosOverlay()
        }
    }
}

🧪 Real-World QA & Testing Scenarios

Testing Token Expiry (401 Unauthorized):
- Inject a 401 error rule on /api/v1/user/profile.
- Verify that your Authenticator or refresh token interceptor automatically triggers a refresh and replays the original request seamlessly.
Testing Optimistic UI Rollbacks:
- Inject a 500 Internal Server Error rule on "Like Tweet" or "Add to Cart".
- Verify that your UI immediately updates optimistically, catches the 500 failure, reverts the UI state, and shows a friendly snackbar.
Testing Slow 3G Connections:
- Inject a 3000ms latency rule on product search queries.
- Verify that shimmer loading placeholders display correctly without layout shifts.

👉 GitHub Repository: github.com/zakayothuku/compose-chaos-proxy

Compose Recomposition Highlighter: On-Device Visual Recomposition Heatmap for Android

Zakayo Thuku — Mon, 31 Aug 2026 09:44:49 +0000

In Jetpack Compose, the declarative UI paradigm simplifies state synchronization, but unintentional recomposition cascades remain one of the primary causes of UI micro-stutters (jank) and battery drain.

While the desktop Android Studio Layout Inspector provides recomposition counts, diagnosing performance regressions on physical devices in real-world conditions (without being tethered to a workstation over USB) has historically been challenging.

To solve this, we built compose-recomposition-highlighter — an open-source, on-device visual performance auditor for Jetpack Compose.

🏗️ Architectural Overview & How It Works

compose-recomposition-highlighter operates through a lightweight modifier and a thread-safe recomposition registry:

Draw-Phase Tracking: Uses Modifier.drawWithCache to read and increment render passes during the draw phase, ensuring the tracking itself does not trigger additional recomposition loops.
Dynamic Heatmap Mapping: Maps the render frequency to a high-contrast color gradient:
- 🟢 Green (1–2x): Healthy, expected recomposition.
- 🟡 Yellow (3–5x): Moderate activity.
- 🟠 Orange (6–9x): High recomposition rate.
- 🔴 Red (10x+): Severe hotspot / infinite recomposition alert.
Hotspot Velocity Metrics: Calculates velocity (recomps/sec) to help you spot runaway loops immediately.

🛠️ Step-by-Step Implementation Guide

1. Add Gradle Dependency

Add the library from Maven Central using debugImplementation so it is automatically stripped from release builds:

dependencies {
    // Debug builds: full highlighter engine + UI overlay
    debugImplementation("io.github.zakayothuku:compose-recomposition-highlighter:1.0.0")

    // Release builds: zero-overhead no-op artifact
    releaseImplementation("io.github.zakayothuku:compose-recomposition-highlighter-noop:1.0.0")
}

2. Attach the Modifier to Target Composables

Attach .recompositionHighlighter() to any composable you want to monitor:

@Composable
fun UserProfileCard(
    user: UserUiModel,
    onFollowClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier
            .fillMaxWidth()
            .recompositionHighlighter(tag = "UserProfileCard")
            .padding(16.dp)
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(text = user.name, style = MaterialTheme.typography.titleMedium)
            Text(text = user.bio, style = MaterialTheme.typography.bodyMedium)
            Button(onClick = onFollowClick) {
                Text(text = if (user.isFollowing) "Following" else "Follow")
            }
        }
    }
}

3. Mount the Floating Performance HUD

In your root application screen or navigation host, wrap your content with ComposeRecompositionOverlay:

@Composable
fun MainAppScreen() {
    Box(modifier = Modifier.fillMaxSize()) {
        // App Navigation & Screens
        AppNavigationGraph()

        // Floating Draggable On-Device Recomposition Monitor
        ComposeRecompositionOverlay(
            enabled = BuildConfig.DEBUG,
            showCountBadges = true,
            warningThreshold = 5,
            criticalThreshold = 10
        )
    }
}

🔍 Common Jetpack Compose Traps You Will Catch

Unstable Lambda Parameters: Passing non-memoized lambdas (e.g. { viewModel.doSomething(item.id) }) inside LazyColumn items causing whole-list invalidations.
Un-remembered Derived Computations: Calculating heavy sorted lists or date formats directly inside the composable body without remember { ... }.
Over-Observing StateFlows: Observing a coarse-grained UI state object when a composable only needs a single primitive boolean.

👉 GitHub Repository: github.com/zakayothuku/compose-recomposition-highlighter