← All ProjectsCase Study

Arrow Markets

Centralized-exchange UX, on-chain settlement.

A hybrid web3 options trading interface on Avalanche - real-time options chains, payoff visualizations, and a strategy-based position builder that makes DeFi options feel as smooth as Robinhood.

ReactTypeScriptWeb3Avalancheethers.jsWebSocketsRechartsTailwind
Role
Frontend / Web3 Engineer
Type
DeFi Trading dApp
Stack
React · TypeScript · ethers.js · Avalanche
Live
arrow.markets
Arrow Markets position builder showing a Long Put with leverage, max profit/risk, and a payoff chart

01 - The Challenge

On-chain options are powerful, but historically brutal to use.

Options give traders precise, leveraged exposure - but in DeFi they've been notoriously painful: confusing chains, slow quotes, illiquid markets, and risk that's terrifyingly easy to misjudge. Most on-chain options venues feel like a spreadsheet bolted onto a wallet.

Arrow Marketsis a first-of-its-kind hybrid web3 options protocol on the Avalanche C-Chain, built around one belief - borrowed from its namesake, economist Kenneth Arrow - that markets work best when they're both efficient and accessible. Its tagline says it plainly: "Leverage without Liquidation."

The architecture is deliberately split. Pricing and hedging run through a network of off-chain market makers via a Request-for-Execution (RFE) system - an evolution of the classic RFQ - while settlement, ownership, and transfers all happen on-chain. The goal for the frontend: a hybrid protocol whose interface is polished enough to rival a centralized exchange. Backed by Framework Ventures and Delphi Ventures, the bar was high.


02 - Lite Mode

For most people, the answer is "hide the complexity."

Lite Mode is a beginner-friendly, strategy-based flow. Instead of asking a newcomer to assemble option legs by hand, it starts from a simple question - what's your outlook on the market? - and recommends an option strategy that fits. The mechanics stay hidden; the decision stays human.

Behind that simplicity is real engineering: translating a directional view into concrete strategies, surfacing the trade-offs in plain language, and keeping the flow fast enough that it never feels like you're wrestling with a protocol.

Lite Mode - a simplified, recommendation-driven flow that turns a market outlook into a ready-to-trade option strategy.

03 - The Position Builder

Every trade, shown as a picture of its risk.

The position builder is the heart of the interface. Pick a Long Put or a spread, and the panel comes alive: live leverage (4.16x on the card shown), max profit ($3,940.79), max risk ($759.21), and a total cost that already folds in fees. Alongside the numbers sits an interactive payoff chart with a clearly marked breakeven, so traders can see the shape of a position before committing capital.

That meant building financial payoff diagrams in the browser with Recharts and custom SVG, formatting precise on-chain numbers without floating-point drift, and reflecting market-maker quotes in real time - recomputing payoffs and risk metrics on every quote update without ever blocking the UI.

Long Put position card with leverage, max profit and risk, an expected P/L payoff chart, and a strategy rail
The position builder - leverage, max profit/loss, total cost, and an expected-P/L payoff chart with breakeven, beside a list of put-debit-spread strategies.

04 - Pro Mode & the Options Chain

And for the pros, the full chain.

Pro Mode exposes everything. The full options chain spans Strike, Delta, Theta, Gamma, Open Interest, Leverage, and live Sell/Buy prices across expiries - the kind of dense, data-rich grid serious options traders expect, right down to the AVAX rebate banner.

The hard part is that none of it is static. Live quotes stream over WebSockets from the RFE market-maker network, so the challenge was keeping a wide grid responsive under rapid updates - diffing incoming quotes, batching renders, and animating only what changed, so the table stays readable instead of flickering on every tick.

Pro Mode options chain with CALL/PUT tabs, expiry, and columns for Strike, Delta, Theta, Gamma, Open Interest, Leverage, Sell and Buy
Pro Mode - the full options chain with greeks, open interest, and live sell/buy prices, plus a position summary rail.

05 - Wallet & On-Chain Settlement

Off-chain speed, on-chain truth.

This is where the hybrid model becomes real. The interface handles multi-chain wallet connection across Avalanche, Arbitrum, and Berachain, then takes the quote a user accepts and turns it into an Open Position transaction signed in their wallet.

Getting that right meant handling slippage tolerance against fast-moving quotes, surfacing AVAX gas and rebates clearly, and making on-chain ownership and transfer of option contracts feel like a normal action rather than a leap of faith - all with ethers.js wiring the UI to the chain.

Arrow Markets trade builder showing a spread being configured before on-chain settlement
The spread builder - configuring a multi-leg position before it's opened and settled on-chain.

- The Result -

DeFi options that finally feel like a centralized exchange.

The end product is an options platform that genuinely feels like a centralized exchange - fast quotes, clear risk, and two modes for two audiences: Lite for newcomers, Pro for traders who want the whole chain. The hybrid architecture stays invisible to the user; what they feel is speed and confidence.

Looking back, the real work was on the frontend: streaming real-time data without melting the UI, doing precise financial math in the browser, and designing Web3 UX that doesn't scare people away. Done well, "on-chain" stops being a warning label and just becomes how it works.

Next Project

OG Edge - Edge infrastructure, end to end.