shadcn.io is not affiliated with official shadcn/ui
Escrow Web3 Block for Radix UI
A milestone escrow with three roles: a funds bar of released, in escrow and locked, four milestones in a Steps list, an event log, and a buyer, seller and arbiter switch that decides who can deliver, release, dispute or rule.
Installation
Overview
Hold the money until the work is accepted, with this escrow panel for React with Radix UI. It's a project held by Bondstone, an escrow service for freelancers: 4.8 ETH across four milestones. A Toggle Group in the header switches the demo identity between buyer, seller and arbiter. A funds bar splits the money into released, in escrow and locked, with the figures under it, and a vertical Steps list shows each milestone with its amount and where it stands. The seller marks the open milestone delivered, the buyer releases it or disputes it, and the arbiter rules for one side on a dispute; every move updates the bar, the steps and an event log. The foot's Shine Button is the one move the chosen role may make now, for example Release 1.2 ETH, and when it is not their turn it stays off and the status line says why. For marketplaces, freelance platforms and anywhere funds wait on a decision.
FAQ
What are the rules?
Milestones settle in order; only the first unsettled one is open. It starts awaiting delivery. The seller marks it delivered; the buyer then releases it (paid to the seller) or disputes it; on a dispute only the arbiter can act, ruling for the seller (released) or the buyer (refunded). A settled milestone opens the next one. Anyone else sees why they cannot act.
How is the funds bar worked out?
Released counts settled milestones, split in the figures into paid to the seller and refunded to the buyer. In escrow is the open milestone and locked is everything after it. Amounts are whole thousandths of an ETH, and the three parts always add up to 4.8 ETH.
What does the event log record?
Who did what to which milestone, newest first, with no times because the demo has no clock. It is a scroll region that holds its height, and the page reads it in the order things happened. Start over restores the starting state and log.
What stays local, and how do I wire it?
All of it. Switching roles is a demo control, and every move only changes this page. In your app the roles are real accounts, each move is a signed transaction to the escrow contract, and the page should show a move as pending until it confirms. A real arbiter needs a defined process and a time limit.