shadcn.io is not affiliated with official shadcn/ui
Token Swap Web3 Block for Svelte
A swap form with a You pay amount and token, a flip button, the You receive figure, a quote worked out from a sample constant-product pool (rate, price impact, minimum received, fee) and slippage presets with a custom field.
Installation
Overview
Show what a trade really costs before it is made, with this token swap panel for Svelte with Ark UI. It's the swap screen of Swapferry, a swap interface, and it quotes from a sample pool, not market data. You type an amount in the You pay Input, pick a token in a Native Select (ETH, USDC, DAI or WBTC) and read You receive beside a second select; a button with arrows flips the pair. Under them a quote list is worked out from a typed constant-product pool with a 0.3% fee: the rate after the fee, the pool price, the price impact with a word for it (low, medium or high), the minimum received at your slippage and the fee in the token you pay. Slippage is a row of presets (0.1%, 0.5%, 1.0%) and a custom field that refuses zero and anything from 50% up. At 3% impact or more a plain line says how much less you receive than the pool price shown and the one Shine Button reads Swap anyway. Swap ends in a status that says nothing was sent. For wallets, exchanges and any app that swaps one token for another.
FAQ
How is the quote worked out?
Each token has a sample USD rate and a typed amount of dollars on each side of its pool, and a pair uses the shallower one. The pool's reserves are those dollars divided by the rates, and the output is reserveOut x in x (1 - fee) / (reserveIn + in x (1 - fee)) with a 0.3% fee. Price impact is how far the trade moves the pool's price, and the "less than the pool price" line adds the fee to it. All of it is arithmetic on typed numbers in TOKENS; try 150 ETH to see the warning.
What does slippage change, and what does the custom field refuse?
It sets the minimum received: the quoted output reduced by that percent, which is the least a real swap would accept if the price moved before it settled. The presets are 0.1%, 0.5% and 1.0%. Custom takes any number above 0 and under 50; anything else shows a problem, keeps the primary button quiet and says why in the status line.
What stays local, and how do I wire a real swap?
All of it. The balances, rates and pool depths are typed constants, Swap changes only this page, and no wallet, router or network is contacted. In your app get quotes from your router or pool contract, compare the minimum received with the real simulation before signing, send the transaction from the connected wallet and report its hash and result in place of the sentence shown here.
What does the flip button do?
It swaps the two tokens and carries the quoted output over as the new amount, so you can see the way back. Choosing the same token on both sides swaps the other side to the one it replaced, so the pair is never the same token twice.