Centralized-exchange UX, on-chain settlement
A hybrid web3 options trading interface on Avalanche, with strategy-led order building for newcomers, a full options chain for professionals, and every position shown as a picture of its own risk.
- Role
- Frontend and web3 engineering
- Type
- DeFi trading dApp
- Scope
- Lite and Pro trading, wallet, settlement
- Status
- Live at arrow.markets
- Interface modes
- 2
- Networks supported
- 3
- Streaming quotes
- Live
- Position settlement
- On-chain
On-chain options are powerful, but historically brutal to use.
Options give traders leveraged, defined-risk exposure, and in DeFi they have been painful to actually buy. Interfaces assume you already speak in Greeks, quotes arrive slowly, and thin liquidity means the price you see is rarely the price you get.
Arrow takes a hybrid approach. Pricing and hedging run through a network of off-chain market makers over a Request-for-Execution system, so quotes are fast and liquid, while ownership and settlement stay on-chain. The interface had to make that split invisible.
- Off-chain quoting and hedging through an RFE market-maker network
- On-chain ownership and settlement, with no custodial step
- Two audiences with opposite needs, sharing one product
For most people, the answer is hide the complexity.
Lite mode starts from a view rather than an instrument. You pick a direction and a shape, bearish and a breakdown, say, set the level you expect the price to cross, and choose an expiry.
From there the interface proposes the strategies that express that view and prices each one, so nobody has to assemble legs by hand to place a trade they could already describe in a sentence.
Every trade, shown as a picture of its risk.
Each candidate position is a card carrying its leverage, maximum profit, maximum risk, and total cost including fees, next to a payoff chart with the breakeven marked directly on the curve.
The charts are built with Recharts plus custom SVG so the profit and loss regions, the breakeven line, and the expiration price all read at a glance. Comparing a long put against two put debit spreads becomes a visual decision rather than an arithmetic one.
- Leverage, max profit, max risk, and net cost on every card
- Payoff curves with breakeven and expiration markers
- Side-by-side comparison before anything is committed
And for the pros, the full chain.
Pro mode drops the guidance and shows the options chain: strike, delta, theta, gamma, open interest, leverage, and both sides of the price, sortable across every listed expiry.
Quotes stream over WebSockets, so the grid updates in place rather than on refresh, and the order panel keeps total cost, leverage, expected profit and loss, and breakeven live alongside it as the size changes.
Off-chain speed, on-chain truth.
Wallet connection and transactions run through ethers.js across Avalanche, Arbitrum, and Berachain, so a position is genuinely owned by the trader rather than recorded in an exchange's ledger.
The outcome is DeFi options that finally feel like a centralized exchange: quotes arrive instantly, risk is visible before you commit, and settlement is still verifiable on-chain.
What we built it with
Production-proven tools chosen for performance, developer velocity, and long-term maintainability.
React
TypeScript
ethers.js
- AVAXAvalanche
- WSWebSockets
- RcRecharts
Tailwind CSS
Web3
What shipped
- Two interfaces over one engine, for newcomers and for professionals
- Strategy-led order building from a plain-language market view
- Payoff charts with breakeven, max profit, and max risk on every position
- Full options chain with Greeks, streaming over WebSockets
- Multi-chain wallet support across Avalanche, Arbitrum, and Berachain
- Off-chain RFE pricing with on-chain ownership and settlement
Want results like these?
Book a free 30-minute call. We'll scope your project, recommend the right approach, and tell you honestly if we're the right fit.