Yield farming APY calculator slider UI: an honest build

A yield farming APY calculator with a slider UI is a projection tool: the user drags a slider to set a deposit amount, picks a duration, and sees an estimated return based on a pool’s APY, recalculated live as they move the slider. The build is a smooth slider driving a compound-interest calculation, with the numbers updating instantly. The single most important thing is honest framing: APY in DeFi is variable, not promised, and a calculator shows an estimate, never a guarantee. It is a projection screen, not a wallet, so it never touches private keys or seed phrases. The fastest way to get it looking right is to start from a free VP0 design and let Claude Code or Cursor read its source page, then wire the slider and the math.

A calculator that overstates certainty is worse than no calculator, because it implies a return the protocol cannot promise. The sections below cover the slider, the live math, presenting APY honestly, and the risk the UI has to show.

How do you build a yield farming APY calculator in React Native?

You build a slider for the deposit amount, an input or slider for the duration, and a results area that recalculates live from the pool’s APY. As the user drags, the projected earnings and final value update instantly, which is what makes a calculator feel responsive. The slider is the centerpiece, so it has to be smooth and precise, and the math behind it is a standard compound-interest formula applied to the APY.

The honest version of this screen presents the output as an estimate. A pool advertising, say, an 8% APY can change that rate block by block, so the projection is a snapshot under current conditions, not a forecast. Building the screen around that framing, with the estimate clearly labeled as such, is what separates a useful tool from a misleading one. The swap and pool patterns this sits alongside are covered in the Uniswap-style crypto swap UI.

The slider and the live calculation

The slider drives everything, so it needs to feel smooth and update the result on every move. A community slider component or a custom one built with Reanimated gives you a precise, responsive control, and you map its value to the deposit amount, recalculating as it changes.

const [amount, setAmount] = useState(1000);
const projected = useMemo(() => {
  const years = days / 365;
  return amount * Math.pow(1 + apy / 100 / compoundsPerYear, compoundsPerYear * years) - amount;
}, [amount, days, apy]);

<Slider minimumValue={0} maximumValue={10000} value={amount} onValueChange={setAmount} />

Keep the recalculation cheap so it runs on every slider move without lag, and animate the resulting numbers counting up or down so the change reads as connected to the drag. For a custom slider with a gradient track or a glow, Reanimated drives it on the UI thread so it stays smooth. The detail that makes a calculator feel precise is the slider snapping to sensible increments and showing the exact value, so the user is never guessing what they set.

Number formatting is the other half of feeling precise. A money figure should be formatted with the right separators and a sensible number of decimals, so a projection reads as “$1,284.50” rather than a long unrounded float, and large values stay readable. Use the device locale for separators and currency where you can, and avoid showing more decimal places than the number deserves, since a yield projection padded to eight decimals looks more like noise than precision. Clean, locale-aware formatting is a small thing that makes the whole calculator feel trustworthy.

Presenting APY honestly

APY is where a calculator most easily misleads, so present it carefully. APY includes compounding while APR does not, so be clear which you are showing, and make the compounding frequency visible since it changes the result. Most importantly, a DeFi APY is variable: it moves with pool utilization, rewards, and token prices, so the figure you calculate from is a current snapshot, not a fixed rate.

The honest design shows the projection as an estimate under current conditions, labels it as such, and avoids language that implies a guaranteed return. Showing a range, or a note that the rate can change, is more truthful than a single confident number. A calculator that says “you will earn X” is making a promise the protocol does not; one that says “at the current rate, this would project to about X” is telling the truth. This framing is not a disclaimer to bury, it is the core of a responsible tool, and it belongs where the user reads the result.

The risk the UI has to show

Yield farming carries real risks that the calculator should surface, not hide, because a screen that shows only upside is misleading. The big ones are impermanent loss, where providing liquidity to a pair can leave you worse off than simply holding if the prices diverge, variable APY that can drop sharply, and smart-contract risk in the protocol itself. A projection that ignores impermanent loss can look far rosier than reality.

Two principles keep the tool responsible. Show the risks plainly alongside the projection, so the user sees the downside, not just the estimated yield, and make clear that this is a calculator, not financial advice, and not a place to connect a wallet or enter a seed phrase. The calculator projects numbers; it never custodies funds or keys. Keeping it a pure projection tool, with no key handling at all, is both safer for the user and simpler to build. The wallet itself is a separate concern, covered in the crypto wallet UI kit.

Making it smooth with AI and a real design

AI builders produce a slider and a number quickly and skip the honesty. Claude Code and Cursor will wire a slider to a compound-interest formula, but they tend to present the output as a definite return, omit impermanent loss and the variable-rate caveat, and sometimes add a wallet-connect or seed-phrase field the calculator has no business having. The screen looks polished and overstates certainty.

A real design plus honest-framing rules fixes most of it. When the slider, results layout, and the placement of the estimate label and risk notes are already decided, the model builds a tool that frames the numbers honestly, and you instruct it to present projections as estimates, show impermanent loss, and never add key handling. Starting from a free VP0 design gives that structure, since each design has a machine-readable source page Claude Code, Cursor, or Rork read from a pasted link. The portfolio side of this, where real positions are tracked, is covered in the crypto portfolio tracker template.

Common APY calculator mistakes

A few mistakes recur, and some are about honesty rather than code. Presenting a projection as a guaranteed return is the worst, since DeFi APY is variable; label it an estimate. Ignoring impermanent loss is the second, which makes the projection look better than reality for liquidity positions.

A laggy slider that does not recalculate smoothly is the third, which makes the core interaction feel broken. Confusing APY and APR, or hiding the compounding frequency, is the fourth, since those change the result significantly. The fifth is the dangerous one: adding wallet-connect or seed-phrase handling to what should be a pure calculator, which both confuses the purpose and creates a security risk. An honest estimate, visible risks, a smooth slider, clear APY framing, and zero key handling are what make the tool both useful and responsible.

When a simpler input works

A full slider calculator is not always needed. For a single fixed-rate product or a simple “enter an amount, see the yield” case, a plain number input may be clearer than a slider, and there is less to build. The slider earns its place when exploring different amounts and seeing the result change in real time is the actual value, which is true for a comparison or planning tool.

For a one-off calculation, the interactivity of a slider is overhead, and a text input does the job. Matching the input to whether the user is exploring a range or entering one known number keeps the screen as simple as the task allows. Decide by whether real-time exploration helps or whether a single calculation is all that is needed.

Key takeaways: an honest APY calculator

Build the calculator around a smooth slider that recalculates a compound-interest projection live, with the result animating as the user drags. Present the APY honestly: label the output an estimate, show the compounding frequency, and make clear the rate is variable, not promised. Surface the real risks, impermanent loss, variable yield, contract risk, alongside the projection, and keep the screen a pure calculator that never touches a wallet, private key, or seed phrase, with nothing presented as financial advice. Let an AI builder build it from a real design, then enforce the honest framing yourself. A commissioned DeFi feature can cost $5,000 or more, while starting from a free VP0 design gives you the layout for nothing.

You can browse VP0 designs to start your calculator from a real layout rather than a blank screen.

Frequently asked questions

How do you build a yield farming APY calculator in React Native?

Build a slider for the deposit amount and an input or slider for the duration, then recalculate a compound-interest projection live from the pool’s APY as the user drags, animating the result. Use a community slider or a Reanimated-driven custom one for smoothness, and keep the math cheap so it runs on every move. Most importantly, present the output as an estimate, since DeFi APY is variable, and keep the screen a pure calculator with no wallet or key handling. Starting from a free VP0 design gets the layout right so you focus on the slider and math.

Is a DeFi APY a guaranteed return?

No. APY in yield farming is variable: it moves with pool utilization, rewards, and token prices, so any figure is a current snapshot, not a promise. A calculator should present its output as an estimate under current conditions and avoid language that implies a guaranteed return. Showing a note that the rate can change, and surfacing risks like impermanent loss, is more honest than a single confident number, and it is what separates a responsible tool from a misleading one. None of this is financial advice.

Should an APY calculator connect a wallet?

No. A calculator is a projection tool, and it has no reason to connect a wallet, hold a private key, or ask for a seed phrase. Adding those both confuses the purpose and creates a real security risk, since key handling is exactly what attackers target. Keep the calculator a pure math-and-display screen, and leave any actual transactions to a separate, properly secured wallet flow. A tool that only projects numbers never needs to custody funds.

Can VP0 provide a free React Native template for a crypto calculator?

Yes. VP0 is a free iOS app design library where every design has a machine-readable source page an AI builder reads from a pasted link, with React Native and SwiftUI variants. You start from the calculator design, with its slider, results layout, and risk notes already placed, hand its source to Claude Code, Cursor, or Rork, and wire the slider and the math on top, rather than building the screen and its honest framing from scratch.

What common errors happen when building an APY calculator?

The frequent ones are presenting a projection as a guaranteed return when DeFi APY is variable, ignoring impermanent loss so the estimate looks rosier than reality, a laggy slider that does not recalculate smoothly, confusing APY and APR or hiding the compounding frequency, and the dangerous one, adding wallet-connect or seed-phrase handling to a pure calculator. The fixes are an honest estimate label, visible risks, a smooth slider, clear APY framing, and zero key handling.