shadcn.io is not affiliated with official shadcn/ui
Portfolio Tracker Web3 Block for React Aria
A multi-network portfolio with a By asset and By chain switch: a matrix of seven assets across four chains with row and column totals, and a side cell that reads where the chosen asset or chain lives.
Installation
Overview
See where a portfolio lives, not only what it is worth, with this portfolio tracker for React with React Aria. It's the holdings screen of Chainfolio, a multi-network portfolio tool, and every figure is a typed sample, not market data. A Segment Group switches the same fourteen holdings between By asset and By chain. By asset is a matrix with seven assets in rows, four chains in columns, the value and amount in each cell, and a total at the end of every row and column; By chain is one row per chain with its total and a bar for its share. Pressing a row head, a column head or a chain fills the side cell with a reading such as USDC: 41% on Base, 33% on Arbitrum, with a bar and a value for each part. Shares are whole percents that add to 100. Both views share one grid cell, so the panel never changes height. For wallets, portfolio apps and any screen that spreads holdings over several networks.
FAQ
How are the shares worked out?
Each cell is amount times a sample USD rate from the typed ASSETS list. A share is that value over the row's or column's total, rounded down, and the leftover points go to the largest remainders, so the parts always add to exactly 100. The bars use the same numbers as the text beside them, and zero holdings read None.
What does the switch change?
By asset keeps assets in rows and chains in columns and lets you read either one; By chain lists the four chains with their totals and shares. If an asset was selected when you switch to By chain, the reading moves to Base so the highlighted row and the side cell always agree.
What stays local, and how do I wire it?
All of it. Nothing reads a wallet, an indexer or a price feed: holdings and rates are typed constants and the selection is local state. In your app load balances per chain from your own node or indexer, price them from your price source, and keep the totals computed from every holding rather than from the rows on screen.
Is it accessible from the keyboard?
Yes. The two views are a radio-style Segment Group, every row head, column head and chain row is a real button with a pressed state, and the matrix sits in a named, focusable scroll region so it can be scrolled with the arrow keys. One polite status message repeats the reading whenever the selection changes.