shadcn.io is not affiliated with official shadcn/ui
Offer Manager Web3 Block for Ark UI
Incoming and outgoing NFT offers with counts, each compared with its collection floor and expiry, and an Accept form that previews your payout after fee and royalty and closes the token's other offers.
Installation
Overview
Handle the offers on your tokens and the ones you made, with this offer manager panel for React with Ark UI. It's the offers desk of Bidsheet, a fictional marketplace tool. Tabs split Incoming from Outgoing with counts of the open offers, and each row shows a drawn token, its name, the offer in ETH, how far it sits from that collection's typed floor in words such as 11% below the floor, and when it expires against one fixed date, for example Expires in 2 days or Expired. Accept opens a Popover with a small breakdown list: the offer, a 2.5% fee, a 5% royalty and You receive, and one Accept offer button. Accepting also closes the token's other offers and says how many. Decline and Cancel work in place, every result keeps its row with an Undo, and a tab with no open offers shows the Empty state. Sample figures, not market data. For marketplace dashboards and creator tools.
FAQ
How is the floor comparison worked out?
Each collection has a typed floor, and the text is the offer's distance from it as a rounded percent: 11% below the floor, At the floor, or 4% above the floor. It is derived from the two numbers on the row, so changing either one changes the sentence.
How is the payout calculated?
From the offer in hundredths of an ETH: the fee is 2.5% and the royalty 5%, each rounded, and You receive is the offer minus both, so the rows always add up. The sentence at the top of the popover and the You receive row say the same number.
What does accepting close?
Every other open incoming offer on the same token. They stay in the list marked Closed by an accepted offer, so no row moves. Undo on the accepted row brings it and the offers it closed back to open.
What stays local, and how do I wire it?
All of it. Offers, floors, fees and expiry dates are typed constants, and accepting, declining or cancelling only changes component state. In your app read orders from your indexer, take fees and royalties from the marketplace and the collection's contract, and make Accept offer a signed transaction.