shadcn.io is not affiliated with official shadcn/ui
Impermanent Loss Web3 Block for React Aria
An impermanent loss calculator: an initial value field and a price change slider from minus 90 to plus 400 percent draw the loss curve, give held value against pool value, the fees to break even, and a six-row reference table.
Installation
Overview
Work out what providing liquidity costs against simply holding, with this impermanent loss calculator for React with React Aria. It's Offsetly, a sample liquidity calculator, and everything is arithmetic on the numbers you type. A Number Input takes the initial value in USD and a Slider the price change of one token against the other, from minus 90 to plus 400 percent. The real formula, 2 times the square root of the price ratio over 1 plus the ratio, minus 1, draws the loss curve in an SVG with a marker on your point. Four readings give the held value, the value in the pool, the difference and the fees needed to break even, and a six-row reference table from the same helper outlines the row nearest the slider. For liquidity providers, pool explainers and DeFi education, with a note that the figures are examples and not advice.
FAQ
What is the formula?
For a 50/50 pool, if one price moves by a ratio r against the other, the pool is worth the initial value times the square root of r, while holding would be worth the initial value times 1 plus r over 2. The loss is 2 times the square root of r over 1 plus r, minus 1, always zero or below. A ratio and its inverse lose the same, which is why each reference row reads plus 100% or minus 50%.
What are the fees to break even?
The share of the pool value the fees would have to add for the pool to match holding: held value over pool value, minus 1. At a price ratio of 2 that is about 6.1%. It ignores gas and any change in price after the fees are earned, and says so by being a plain ratio.
What stays local, and how do I wire it?
All of it: no price is read and nothing touches a wallet. In your app you could seed the price change from a pool's entry and current prices, use the position's real deposit as the initial value, and add the fees earned so far to show how far a position is from break even.
How does the value field behave?
It takes plain digits, including Arabic-Indic ones on an RTL page, steps by 500 with the buttons or arrow keys, and an empty or negative entry counts as zero. React Aria commits a typed value when you leave the field or press Enter, not on every keystroke.
How is the curve drawn without a chart library?
It is one SVG path computed from the same helper as the readings, 99 points from minus 90 to plus 400 percent, with a zero line and a marker placed from the slider. The figure has a caption, and the readings and the table carry the same numbers as text.