shadcn.io is not affiliated with official shadcn/ui
Wallet Balance Web3 Block for Svelte
A pocket wallet's balance: a headline total that rolls between USD, EUR and ETH, a Hide balances under number field, and eight token rows where the small ones collapse into one line that opens in place.
Installation
Overview
Show what a wallet holds without drowning it in dust, with this wallet balance panel for Svelte with Ark UI. It's the balance screen of Pocketwren, a pocket wallet app, and every figure is a typed sample, not market data. A Segment Group at the header's end switches the display unit between USD, EUR and ETH, and the headline total in a sliding number rolls to the new unit. Under it a Number Input with a stepper sets Hide balances under, in the chosen unit. Eight token rows, each with a two-letter tile, the name, the amount, its value and a signed 24 hour move written as a sign, an arrow and a word, sit in a scroll region that keeps its height; the rows under the threshold collapse into one Collapsible line, for example 3 hidden, worth $8.33, that opens in place. The total always counts every token, so hiding changes the list and never the money. For wallets, portfolio apps and any screen that lists balances.
FAQ
How are the units converted?
Every token has a sample USD rate in TOKENS. EUR multiplies the total by EUR_PER_USD and ETH divides it by USD_PER_ETH, both typed. They are samples, labelled as such in the header, not live prices. Changing the unit resets the threshold to that unit's starting value (5 for the fiat units, 0.002 for ETH), so the field never holds a number in the wrong unit.
What does Hide balances under do?
It moves every token worth less than the number, in the chosen unit, from the list into the collapsed line, which shows how many and what they are worth together. The stepper moves by 1 or 0.001, and typed values are read in plain digits, including Arabic-Indic ones in an RTL page. The total keeps counting hidden tokens, and a note says so.
What stays local, and how do I wire it?
All of it. Nothing reads a wallet or a price feed: amounts, rates and moves are typed constants. In your app load balances from your node or indexer, load prices from your price source, store the threshold with the user's preferences, and keep the total computed from every token, not from the visible ones.
How is the 24 hour move shown?
As a sign, an arrow and a word, never a color: a plus and an up arrow with up for screen readers, a true minus and a down arrow with down, and a dash with unchanged for zero. Amounts and values are set in tabular figures so columns line up as the unit changes.
Is it accessible from the keyboard?
Yes. The units are a radio-style Segment Group, the number field takes typing and the arrow keys, the scroll region is named and focusable, and the Collapsible line is a button that says what it opens. One polite status message says how many balances show and how many are hidden.