shadcn.io is not affiliated with official shadcn/ui
Send Receive Web3 Block for React
A payments wallet's send and receive tabs: a recipient with a shape check, an amount with a token select and Max, a fee speed, a review list before sending, and a QR code of the wallet address to copy.
Installation
Overview
Check a transfer before it goes, with this send and receive panel for React with Base UI. It's the wallet screen of Skiffpay, a payments wallet, holding sample ETH, USDC and DAI. Two Tabs sit at the top of one hairline frame. Send takes a recipient in a Field that checks the address shape, an amount in an Input with a token select and a Max button, and a fee speed in a Segment Group that spells out its gwei, its seconds and its cost in ETH and in sample dollars. The foot's Shine Button moves from Review to Send to Send another: the review is a list of who gets what, the network fee and the total in the token and in sample dollars, and the form, the review and the result share one height so nothing jumps. Receive draws a QR code of the wallet's sample address with a copy button and a line saying to send only Ethereum-network assets. For payment apps, wallets and any screen that sends tokens.
FAQ
How are amounts and fees worked out?
Every amount is a whole number of millionths of a token, so nothing is rounded as a decimal. The fee is the gas a transfer uses times the gwei price of the speed you pick (21,000 gas for ETH, 65,000 for a token), written in millionths of an ETH. Sample dollars come from a typed rate per token, labelled as samples. Max fills the balance, less the fee when you are sending ETH.
What does the form check?
The recipient must start with 0x and have 42 characters of 0 to 9 and a to f, and not be this wallet's own address. The amount must be digits and one point, up to six decimals, more than zero and no more than the balance (and, for ETH, no more than the balance less the fee). It checks the shape only, not the checksum, and the form says so. Problems show under the field they belong to, in a line that is always there.
What does the review step show?
The recipient in short form, the amount, the fee with its speed, the total (for a token, the amount plus the fee in ETH, since you pay the fee in ETH) and the total in sample dollars. Back returns to the form with everything you typed. Send changes only this page and prints a sample reference.
What stays local, and how do I wire it?
All of it. No wallet is contacted, no transaction is built and nothing is signed: the balances, rates, addresses and the reference are typed. In your app resolve the address on the server, estimate gas from your node, and make the Send button request a signature from the user's wallet, then show the pending transaction until it confirms.
Is it accessible from the keyboard?
Yes. The tabs and the fee speeds are arrow-key groups, every field has a visible label, Enter in the form moves to the review, and focus lands on the first field with a problem. The foot has one polite status line that reads the first problem or where the send stands. The copy button on the Receive tab reports through that tab's status line.