shadcn.io is not affiliated with official shadcn/ui
Profit Loss Web3 Block for Radix UI
A profit and loss ledger with a market-move slider: six assets with typed lots matched first in, first out, diverging bars from a zero line, and each asset's break-even move.
Installation
Overview
Show what a holding has earned, and what a market move would do to it, with this profit and loss panel for React with Radix UI. It's the ledger page of Bookwick, and the lots and prices are typed samples, not market data. Six assets have typed buys and sales, and one helper matches each sale to the oldest lots first (first in, first out), which gives every asset a cost basis and a realized result. A Slider named Market moves, from minus 40 to plus 40 percent, applies one move to every current value, so the figures band (invested, current value, unrealized, realized) and a bar per asset re-derive. The bars grow from a zero line, with a sign, an arrow and a number, and each asset says what move it still needs, for example Needs +6.2% to break even. Not tax advice.
FAQ
How is the cost basis worked out?
Each asset in ASSETS has typed buy lots and sales. Every sale is matched to the oldest lot that still has tokens, which gives the realized result, and what remains of the lots is the cost basis of what you hold. Unrealized is the current value, after the market move, minus that cost basis. It is first in, first out, and the footer says so.
What does break even mean here?
The move, from the one chosen on the slider, that would bring an asset's value back to its cost: cost over value minus one. A losing asset needs a positive move; an asset above its cost says the fall at which its cost is covered and no more.
Why do the bars keep one scale?
They are drawn against the biggest gain or loss the slider can produce, minus 40 to plus 40 percent, so a bar grows and shrinks as you drag instead of being rescaled to the biggest one on screen. The zero line is always in the middle, losses grow toward the start and gains toward the end.
What stays local, and how do I wire it?
All of it. Lots, sales and prices are typed constants, and the move is local state; nothing is read from an exchange or a wallet. In your app keep lots per account, price them from your source, and decide with an accountant which lot method applies to you before showing a realized result.