Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Domain Manager Web3 Block for Vue

A renewal planner for six wallet names: status words from fixed expiries, a Renew for N years slider, a checkbox and a cost per name, each new expiry date, a grace-period count and a primary-name radio.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Plan renewals for a portfolio of wallet names with this domain manager for Vue with Ark UI. It's the renewal planner of Roostname, a name portfolio manager, with six .wick names on a fictional naming service. A Slider sets Renew for 1 to 5 years, and a Checkbox in each row chooses the names. Each row's status is worked out from a typed expiry and the page's fixed date: Active, Expiring, In grace with the days left of 90, or Premium auction, which cannot be renewed. The cost by name length, the total, each name's new expiry date and Names ending within 90 days all re-derive on every change. A radio on one row sets the primary name, the reverse record, and the foot's Shine Button renews the ticked names, for example Renew 2 names for 2 years. For registrars, wallets and any dashboard of things that expire.

FAQ

How are the status words worked out?

From the days between the typed expiry and the fixed date: more than 90 is Active, 0 to 90 is Expiring, up to 90 days past is In grace (the row says how many of the 90 grace days are left) and beyond that is Premium auction. The date is a constant, so the words never change under you.

How is the cost calculated?

By the length of the name before .wick, per year: 5 or more letters 5 USD, 4 letters 160 and 3 letters 640. The cost is the rate times the years on the slider, summed over the ticked names. These are invented sample prices, and nothing is charged.

What happens when I renew?

Each ticked name's expiry moves on by the chosen years from its current expiry, its status is worked out again, the header count updates and the status line says Renewed in this demo. A name in its grace period is renewed the same way. Premium auction names are disabled with their reason, because a real registrar sells them by bidding.

What stays local, and how do I wire it?

All of it. Nothing is paid or registered: the names and expiries (DOMAINS) are typed and the renewals live in local state. In your app read expiries from your registrar, price renewals from its quote, and send the renewal as a signed transaction or a payment, then refresh the row when it confirms. The primary radio would send a reverse-record transaction.

Is it accessible from the keyboard?

Yes. The slider moves with the arrow keys and announces its years, every checkbox and radio names its domain, the table has a caption and row headers, and one polite status message reports each change. Status is a word, with Expiring set in a heavier weight, never a color.

How does it look on a phone?

The table folds to the checkbox, the name with its status and expiry beneath it, and the primary radio; cost and new expiry appear from wider screens. The foot with the Renew button is pinned at the bottom of the screen.