shadcn.io is not affiliated with official shadcn/ui
NFT Detail Web3 Block for Svelte
A token page: a large greyscale sigil beside the asking price, a Buy now and a Make offer popover, then tabs for six traits with their share of the collection, the latest sales and the open offers.
Installation
Overview
Give one token its own page, with this NFT detail for Svelte with Ark UI. It's a token page from Easelhouse, an NFT showcase, for Saltglass 142: a large greyscale sigil drawn from the token number sits beside a buy cell with the collection, the short owner, "Rank 142 of 10,000", the asking price in ETH and a sample dollar figure. Buy now is the only Shine Button; Make offer is an outline Button that opens a Popover with a Number Input for the amount and a Native Select for the expiry. Under it, Tabs hold the six traits, each with its share of the collection and a rarity word worked out from that share, the latest sales as a table with dates, prices and short buyers, and the open offers with their expiry counted from a fixed date. Buying and offering are local, and the foot says so. For marketplaces, collection sites and any page about a single token.
FAQ
How do I fill it with my token?
Edit the constants at the top: TOKEN_NAME, RANK, ASK (in hundredths of an ETH, so 420 is 4.20), and the TRAITS, SALES and OFFERS lists. A trait's share is typed in basis points (410 is 4.1%) and its word comes from it: under 5% Rare, under 15% Uncommon, otherwise Common. Replace the sigil with the token's image, the sample dollar rate USD_PER_ETH with your price feed, and the fixed AS_OF date with the current time in your app.
What do Buy now and Make offer really do?
Nothing leaves the page. Buy now marks the token as owned by "You (demo)", adds a sale to the table, turns the button into a disabled "Bought in this demo" and offers an Undo. Send offer checks the amount (0.01 to 1,000 ETH, below the asking price) and adds your offer to the list, sorted with the others and counted in the tab. In your app these call your marketplace contract through your wallet library, after the person has seen the amount and the fee.
How is an offer's expiry shown?
From the fixed AS_OF date, counted in whole days with Date.UTC, so it reads the same on the server and in every time zone: "Expires in 2 days", "Expires today" or "Expired". Your own offer's last day is AS_OF plus the days you chose.
Do the tabs change the height?
No. Each panel has the same minimum height and the sales table shows the latest four rows, so switching tabs, buying or offering never moves the foot.