shadcn.io is not affiliated with official shadcn/ui
Contract Deploy Web3 Block for React
A three-step deploy wizard for a token contract: configure the name, compiler and optimizer runs, set the constructor, review. The constructor is encoded as words and a size and gas estimate follows every field; Deploy stops at a typed sample address.
Installation
Overview
Walk through a deployment and see what it would send, without deploying anything, with this wizard for React with Base UI. It's the deployer of Launchbench, shown in a hairline frame with a plus mark on each corner. A row of three steps (Configure, Constructor, Review, collapsing to Step 2 of 3 on a phone) sits over the fields. Configure has a contract name, a Native Select for the compiler and a range for the optimizer runs; Constructor has the token's name, symbol and initial supply. Two readouts follow every field: the constructor arguments encoded as 32-byte words with their offsets, lengths and padded text, and the code size, its share of the 24,576-byte limit and the deploy gas, from a typed formula. Review is a list of everything. The one Shine Button is Next, then Deploy, which waits a moment and ends Deployed in this demo at a typed sample address; no contract is created. For launch tools, contract factories and developer docs.
FAQ
How is the constructor encoded?
As the ABI does for constructor(string, string, uint256): three head words (the offset of the name, the offset of the symbol and the supply), then each string as a length word and its text padded to whole words. The words are listed with a label, so you can see the offsets move when a name grows past 32 bytes. The demo limits names to 32 bytes and says so.
Where do the size and gas numbers come from?
From a formula in the file, not a compiler: a base of bytecode, a cost per constructor argument and a little per optimizer run, then 53,000 gas plus 200 per byte of code and 16 per byte of arguments. It is labelled a sample formula. In your app compile the contract and read the real size and the node's estimate.
What stays local, and how do I wire it?
All of it. Deploy waits 800 ms in a timer and shows 0x5E19…c0A4, a typed sample, with the sentence No contract was created. In your app replace the timer in deploy with your wallet library's contract creation, show the real address when the receipt arrives, and keep Deploy busy until then.
What is checked before each step?
Next checks the fields of its step: the contract name must be an identifier, the token name 1 to 32 bytes, the symbol 2 to 8 capital letters or digits and the supply an amount above zero. The first invalid field takes focus and the status line says to fix it; nothing moves forward until the step is valid.
Is it accessible from the keyboard?
Yes. The step list names the current step, fields have labels and notes, the encoded words are a named scroll region, and the status line reports each move and the result. Steps that aren't showing are inert, so Tab only meets the current one, and the panel keeps its height from step to step.