shadcn.io is not affiliated with official shadcn/ui
DEX Aggregator Web3 Block for Ark UI
The same ETH sale priced across four invented venues from their sample pools, the best marked and the rest compared to it, plus a slider that splits the amount between the best two and ticks the split that pays most.
Installation
Overview
Find the best price across venues, and see when splitting helps, with this swap aggregator panel for React with Ark UI. It's the quote table of Routewright, a swap aggregator, and every pool is a typed sample. You enter how much ETH to sell and pick the token you want in a Native Select. A table prices the sale at four invented venues (Orrowmere, Tindlecross, Quillpool and Mossquay Pool), each with its own depth, fee and price, using the constant-product pool formula. The best output carries the word Best and weight, the others say how far they fall short, for example 0.4% against the best, and the header sentence says what the best saves against the worst. A radio in each row chooses a venue and a three-step route lists what happens to your amount. In the side cell a slider splits the amount between the best two venues, scans all 101 splits and marks the one that pays most with a tick, because two smaller trades move each pool's price less than one large one. The one Shine Button reads Swap via and the chosen venue. For aggregators, wallets and any screen that compares execution.
FAQ
How is each venue's output worked out?
Each venue is a typed pool: the dollars it holds on each side, its fee and how far its price sits from the reference. The reserves follow from the sample ETH rate, and the output is reserveOut x in x (1 - fee) / (reserveIn + in x (1 - fee)). A deep pool with a 0.30% fee wins on large amounts and a shallow pool with a tiny fee wins on small ones, which is why the best venue changes when you change the amount.
How is the best split found?
For the two venues with the best output, a helper tries every share from 0% to 100% in steps of 1, adds the output of the two smaller trades and keeps the share that pays most. That share is the tick under the slider, and Use the best split moves the slider to it. If one venue is simply better at that amount the tick sits at an end.
What stays local, and how do I wire a real aggregator?
All of it. Depths, fees, prices and the ETH rate are typed constants, the route is three sentences built from them, and Swap via only changes this page. In your app request quotes from your aggregator's API, show the route it returns, simulate before signing and send from the connected wallet. Treat the split as a suggestion the router can place as two calls.
What does the route list show?
Three steps for the chosen venue: the amount you send to its pool, the fee the pool keeps from what goes in, and what you receive. It changes with the amount, the pair and the venue, and it is the same arithmetic as the table.