shadcn.io is not affiliated with official shadcn/ui
Hardware Wallet Web3 Block for Solid
A hardware signer's add accounts panel: three devices, three derivation paths and a table of the first five addresses each path would give, with balances that change per path and an Add accounts button.
Installation
Overview
Show people which accounts a device would give before they add any, with this hardware wallet panel for Solid with Ark UI. It's the Add accounts screen of Pebblekey, a hardware signer. A hairline frame with a plus mark on each corner holds a list cell at the start with two Radio Groups: the devices, each with its state in words (ready to pair over USB, locked, not detected, which can't be chosen), and the derivation paths, each with its template in mono type and a one-line note on when it's used. Beside it a table lists the first five addresses the chosen path would give, with a Checkbox on each row, its index, a short address, a balance in ETH and an In use Badge where one is typed. Changing the path swaps the rows, so a balance that vanishes on the wrong path is seen, and a line under the table gives the same device's total on the other two. Load 5 more extends the table to ten, and Add accounts, the only Shine Button, records the ticked ones. On a phone the list cell stacks above the table and the paths become a Native Select. For wallet apps, treasury tools and any flow that imports accounts from a signer.
FAQ
Why do the balances change with the path?
A derivation path decides which key, and so which address, comes at each index. The same device gives different addresses on a different path, and an account that holds funds on one path shows as empty on another. The table is typed data per path (ADDRESSES, BALANCES and USED), and the line under it works out the same device's total on the other two paths from that data.
What stays local, and how do I connect a real device?
Everything. No device is contacted and the addresses are typed samples, not derived from a key, which the panel says under the table. Add accounts only records the ticked rows as Added and says so in a polite status message. In your app read the addresses from the device through its own SDK (WebUSB or WebHID in the browser), derive them on the device for the chosen path, and fetch the balances from your own source.
What do the device states do?
Ready to pair can add accounts. Locked can be chosen, but Add accounts answers Unlock the device first and records nothing. Not detected is disabled and can't be chosen. Keep the states as words, as here, so they never depend on a color.
How does ticking work?
Each path keeps its own ticks: the rows already in use are ticked to begin with, switching paths shows that path's ticks and the button counts every path's pending ones. Rows already added are ticked and disabled with an Added mark. The button reads Add accounts when nothing is ticked and says what to do in the status line.
Is it accessible from the keyboard?
Yes. The devices and the paths are radio groups with arrow keys, the table is a real table with a caption, column headers and a labelled, focusable scroll region, and each checkbox is named by its row's address. Arrow keys skip the device that isn't detected. The table keeps its height when you load more rows, so the foot never moves.
How does it look on a phone?
The list cell stacks above the table. The paths become one Native Select with the chosen path's note under it, the Index column hides and the In use and Added marks move under each address, so there is no sideways scroll. The status line and Add accounts ride a bar at the foot.