shadcn.io is not affiliated with official shadcn/ui
Smart Contract Web3 Block for Ark UI
A contract console in a fixed-height window: eight functions of a demo token in Read and Write groups, argument fields with checks, a folded ABI tree, and a call history log. Reads answer from typed data and writes are simulated.
Installation
Overview
Let people try a contract's functions without a wallet, with this console for React with Ark UI. It's the workbench of Contractyard, shown as a window with a top bar, a start pane and an end pane. The top bar has the heading, the contract's short address with a Copy Button and the one action: a Shine Button Simulate write for a write, an outline Query for a read. The start pane lists eight functions of a demo token in two groups, Read and Write, as one radio group you can walk with the arrow keys. The end pane shows the chosen function with its signature, argument fields checked against their types, the function's ABI folded in a JSON Tree View, and below it the call history, a log with the newest call last. A read answers from a few invented holders; a write waits a moment and records a simulated call with a sample hash. On a phone the list becomes a Native Select above the detail. For contract tooling, docs and block explorers.
FAQ
Why is it a window and not a panel?
A console is a list and its detail that you work in for a while, so it takes a fixed height, with only the function list, the detail and the history scrolling. It has no catalog sidebar: its list is a radio group in the start pane, and the window keeps its frame, a top bar and a one-line status foot.
What do reads return, and what do writes do?
Reads answer from typed data: the token's name, a total supply, and a balance for two invented holders (anyone else holds nothing). Writes run a short wait and record transfer(0x3Fa9…0c7d, 25) with a sample hash derived from the call, labelled Simulated. No balance changes, no wallet is asked and nothing is sent.
How do I wire a real contract?
Replace METHODS with your contract's ABI and the readOf and writeOf helpers with calls through your client library (a read is a call against a node, a write is a transaction the wallet signs). Keep the history: store the transaction hash and its status instead of the sample, and update the entry when it confirms.
How does the history behave?
It's a log region, so a new call is announced politely and scrolls into view at the end. Clear empties it and an empty state says so. Calls keep their numbers within the session; the first two are typed examples.
Is it accessible from the keyboard?
Yes. The functions are native radios in one group (arrow keys move and choose, Tab leaves), fields are labelled with their types, the ABI is a disclosure, and one polite status line in the foot reports each result. Focus never moves when you choose a function, only to a field that needs fixing after a refused call.