Skip to contentAnkur Jaiswal
Case study · LEVEL 01 · WEB3

Staking & vaults — Kelp

Transaction UX for a $2B+ TVL restaking protocol: pre-flight simulation, explicit approval and slippage states, five chains.

KernelDAO (Kelp) · Frontend Engineer · Remote

Problem

Owned the staking and vaults frontend — the primary surface through which users deposit into and exit a $2B+ TVL restaking protocol.

Approach

Rebuilt core staking flows in Next.js and TypeScript, cutting failed transactions through pre-flight simulation, clearer gas estimation and explicit slippage and approval states.

Wired position and yield feeds from The Graph subgraphs and internal APIs, with a TanStack Query caching layer that eliminated redundant RPC calls.

Edge states

Built the wallet layer on wagmi/viem, handling chain switching, signature rejection and reconnect edge cases across Ethereum, Arbitrum, Base, Linea and Mantle.

The staking flow, state by state

  1. Connect

    Wallet and network are read first, so nothing is asked of the user before the app knows where it stands.

  2. Approve

    Approval is its own step, with the spender and its scope shown before the wallet opens.

  3. Simulate

    A pre-flight simulation runs first, so a revert is caught here instead of on-chain.

    If simulation reverts

    Simulation reverted

    Nothing was signed and nothing moved. Adjust, then simulate again.

  4. Confirm

    The user signs with the gas estimate and the slippage bound in view.

  5. Pending

    In flight. Progress lives on the path itself, never a spinner that could mean anything.

  6. Confirmed

    Settled. The position view refreshes from the chain, not from an optimistic guess.

Stack

  • Next.js
  • TypeScript
  • wagmi / viem
  • TanStack Query
  • The Graph
← Back to the trail