shadcn.io is not affiliated with official shadcn/ui
Music NFT Music Block for Solid
A sample track edition with a drawn waveform sigil, a bid field that checks the minimum next bid (top bid plus 5%, rounded up to 0.01 ETH), the 10% resale royalty worked out on the top bid, and a bid history that your bid joins.
Installation
Overview
Explain how a bid on a track edition works, with this edition auction for Solid with Ark UI. It draws a sample from Editionhall in a hairline frame with a plus mark on each corner, in two cells. At the start is the edition: a drawn waveform sigil, "Edition 7 of 25", its length, the owner's shortened address in mono, and a Toggle that starts a preview. At the end the sums are worked out from typed amounts: the top bid, the floor, the minimum next bid (the top bid plus 5%, rounded up to 0.01 ETH, with its reason) and the 10% resale royalty to the artist on the top bid. A bid field checks the amount against that minimum and the 0.01 step, and Place bid, the one Shine Button, adds it to the top of the history as "You, in this demo" and raises the minimum. It is a fictional collectible and a sample: no wallet connects, nothing is sent and no audio plays. It's built from Field, Input, Toggle, Badge, Shine Button and Guides. For music marketplaces, edition drops and any auction with a minimum raise.
FAQ
How is the minimum next bid worked out?
It is the top bid plus 5%, rounded up to the next 0.01 ETH. With a top bid of 1.20 ETH, 5% is 0.06 ETH and the minimum is 1.26 ETH; with a top bid of 1.26 ETH it is 1.323 ETH, rounded up to 1.33 ETH. The amounts are held in thousandths of an ETH as whole numbers, so nothing drifts with decimals. The panel says the rule in words under the figures.
What is the resale royalty?
It is the share of a later sale that goes back to the artist, 10% here. The panel works it out on the top bid so you can see what it would be today: 0.126 ETH on 1.26 ETH. It is a worked example of the rule, not a payment, and it changes as the top bid does.
What does Place bid check?
That the field holds a number of ETH, that it moves in steps of 0.01 ETH, and that it is at least the minimum. If not, a message under the field says what is wrong and the bid is not placed. A valid bid goes to the top of the history, becomes the top bid, and the field resets to the new minimum.
What is real here, and what is a sample?
Nothing is real: the edition, the artist, the addresses and the amounts are made up, the sigil is drawn from the edition number, and "Sample" is on the card. No wallet connects, no transaction is sent and the status line says so. In your app read the auction from your contract or indexer and send the bid from place through the visitor's wallet.