Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Web3 blocks

Pro

Identity Badge Web3 Block for React

A wallet identity badge whose credentials expire: initials, name, address and wallet age over five credentials with time-left bars, a status line derived from their dates and a Re-verify button that sets a new expiry.

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

Show who a wallet is and how fresh the proof is with this identity badge for React with Base UI. It's the badge of Stampbook, a credential stamp service, for the fictional name mara.wick. The top band is the badge itself: an initials Avatar, the name, a short address, the wallet's age and a status line derived from the credentials, for example 3 current, 1 expiring in 41 days, 1 lapsed. Under it five credentials each show their issuer, the issue date, a bar for the time left against a fixed date, the expiry and the word Current, Expiring or Lapsed. Re-verify on an expiring or lapsed credential waits a moment and sets an expiry a year on, and the badge re-derives. A Copy Button copies a sample badge link. For profiles, wallets and any proof that has to be renewed.

FAQ

How is a credential's status decided?

From its typed expiry and the page's fixed date: before the date it is Lapsed, within 60 days it is Expiring and otherwise Current. The bar shows the share of the credential's life that is left, from its issue date to its expiry, and an empty bar means it has lapsed. Time is written as a date and a number of days, never as ago.

What does Re-verify do?

It runs a short simulated wait of under a second and then sets a new typed expiry a year after the page's date. The badge line, the counts and the bar all work out again from it, and the status line says it ran in this demo. Only one re-verify runs at a time, and the other buttons say so rather than disappearing.

What stays local, and how do I wire it?

All of it. No credential is issued, checked or revoked: the issuers, dates and the badge link (CREDENTIALS, LINK) are typed, and the new expiry is a constant. In your app read credentials from your attestation service, re-verify by asking the issuer to sign a fresh attestation, and build the link from the badge's real URL. This block never discloses credentials selectively; that is a separate screen.

Where does the wallet age come from?

From a typed first-seen date and the page's fixed date, worked out in whole years and months. Nothing is read from a chain.

Is it accessible from the keyboard?

Yes. The credentials are a list, each Re-verify button names its credential, the time bars are decoration beside the written dates, and one polite status message reports a re-verify. Status is a word with a heavier weight, never only a color.

How does it look on a phone?

The badge stacks its avatar, name and status with the copy button under them. Each credential becomes two lines: its title and status, then the expiry with its button and the bar full width beneath.

All 100 web3 blocks