shadcn.io is not affiliated with official shadcn/ui
Invoice Crypto Web3 Block for Ark UI
A freelancer's invoice with its token rate locked at issue: a bordered sheet of three lines, a USDC, DAI or ETH toggle that converts the total at the locked and today's sample rates, copyable amount and address, and a download.
Installation
Overview
Ask for a crypto payment without the client chasing the rate, with this invoice panel for React with Ark UI. It's an invoice from Billhook, an invoicing tool for freelancers: a bordered sheet with the number, the issued and due dates (with the days remaining), who it is from and to, a Table of three lines of hours times a rate, the total in dollars and the rate it was locked at. In the side cell a Toggle Group of USDC, DAI and ETH converts the total two ways: the amount at the rate locked when the invoice was issued, which is what the client pays, and what it would be at today's sample rate, with the difference in words. The amount and the pay-to address each have a copy button. The foot's Shine Button copies a payment request, and Download invoice saves a text copy. For freelancers, agencies and anyone invoicing in tokens.
FAQ
What does the locked rate mean?
When an invoice is issued, the dollar total is converted once and the token amount is written on it. The page shows that amount, and next to it what the same total would be at today's sample rate, so you see what a later conversion would change. With USDC both are the same; with DAI and ETH the typed rates differ, and the line says by how much and in which direction. The client pays the locked amount.
How are the amounts written?
As whole millionths of a token, converted from the dollar total in cents with integer maths and rounded once, then shown with commas and without trailing zeros. The rates are typed samples and labelled as such; nothing is read from a price feed.
What do the buttons really do?
The copy buttons and Copy payment request write real text to the clipboard (the payment request is a sentence with the amount, the address, the invoice number and the dates), and Download invoice builds a small text file in the browser and saves it. Nothing leaves the page. Printing was left out on purpose so the page has one way to get a copy out.
What stays local, and how do I wire it?
The invoice, the rates, the address and the dates are typed samples; the address would receive nothing. In your app issue the invoice from your records, store the locked rate on it, give each invoice its own address or payment reference, and mark it paid only when the chain shows the payment.