shadcn.io is not affiliated with official shadcn/ui
Name Lookup Web3 Block for Vue
A lookup for wallet names on a fictional naming service: type a name or an address, see the owner, the address, the expiry and the records, a price for a free name, a primary name for an address, and a typo guard.
Installation
Overview
Turn a name into an address, or an address back into a name, with this lookup panel for Vue with Ark UI. It's the lookup of Wickname, a fictional naming service modelled on the ones wallets use, with .wick names instead of real ones. One Input takes a name or an address, three example chips fill it, and the Shine Button runs the lookup against a typed table of eight names. A registered name shows its owner, the address it resolves to, its expiry and its records (website, handle, email and a content hash) with a Copy Button on each address. A free name says Available with a price by length and a Register for 1 year button that only reserves it in the page. An address shows its primary name or No primary name set. A name one letter away from a registered one asks Did you mean ines.wick? The result sits in a band that holds its height. For wallets, address books and any field that accepts names.
FAQ
What is the typo guard?
If a name is not registered but is exactly one edit (one letter added, removed or changed) from a name that is, the result says so and offers the near name as a button. Sending to a lookalike is the mistake it exists to catch. The edit distance is a small helper in the file, run against the typed names.
How does the address lookup work?
An address is checked for its shape (0x and 40 hex characters) and then looked up in the typed names that mark it as their primary. A match shows that name's full result; anything else says No primary name set. The checksum is not verified in this demo.
Where does the price come from?
From the length of the label: 5 or more letters is 5 USD a year, 4 letters 160 and 3 letters 640. They are invented sample prices, shown as such. Register for 1 year changes only this page's state to Reserved in this demo; nothing is paid or registered.
What stays local, and how do I wire it to a real service?
All of it. Nothing is queried: the names, owners, records and expiry dates (ENTRIES) are typed, and the expiry is counted against a fixed date. In your app resolve through your name service's contracts or API, read records from its resolver, and send registrations as a signed transaction. Wickname is invented; a real service has its own rules for normalising names.