Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Web3 blocks

Pro

Whitelist Checker Web3 Block for Radix UI

An allowlist lookup over a typed list of 40 addresses: check an address for its tier, how many it may mint and when its window opens, with a collapsible proof of three sample hashes or the public start date.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Tell a visitor whether their address is on a mint list, and when they can mint, with this allowlist checker for React with Radix UI. It's the lookup of Gatekeep, an allowlist checker, over a typed list of forty invented addresses. A Field takes an address in mono type, Use the demo account fills a listed one and Try an unlisted address fills one that isn't. Check is the only Shine Button. A listed address gets a Badge with its short form, its tier (Gold, up to 2 mints, or Silver, 1), the mint window as a date and time with how far away it is, and a Collapsible named Proof with three sample hashes. An unlisted one gets the public start date. The result band keeps its height whichever answer shows. For mint pages, allowlist sign-ups and any gated launch.

FAQ

What does Check verify?

First the shape: 0x and 40 characters from 0 to 9 and a to f, otherwise it says the text isn't an address yet and returns focus to the field. Then it looks the address up in the typed list, ignoring letter case. The checksum casing of mixed-case addresses is not verified in this demo, and the hint says so.

Where do the windows come from?

Each tier types the moment its window opens, and the public start is typed too. The text "Opens in 4 days 5 hours" is the difference between that moment and the constant AS_OF, so the answer never depends on the visitor's clock.

Is the proof real?

No. The three hashes are made in the tab from the address by a small deterministic function, so each address shows its own and they are always the same. They are not a Merkle proof and verify nothing; the note under them says so. In your app build the tree on the server and send the real proof for the address.

What stays local, and how do I wire it?

All of it. The list is a constant array of invented addresses, and nothing is requested or stored. In your app look the address up on your server, return the tier, limit and proof, and never ship the whole list to the browser.

Is it accessible from the keyboard?

Yes. The field has a visible label and a hint tied to it, Enter submits, and the result is announced by one polite status message that states the tier and the number of mints, or that the address isn't listed. The proof opens with Enter or Space.

How does it look on a phone?

The field fills the width, the two helper buttons sit above the Check button, and the three result facts stay in a row with the date wrapping inside its column.

All 100 web3 blocks