Show a Trust Score badge
Render a wallet's verification state without gating any content.
EntrosBadge is a read-only display. Given a wallet address, it shows the verification state and Trust Score. No gating, no redirects.
Get the component
EntrosBadge is a single-file React component you copy into your project from the entros.io repo: src/components/ui/entros-badge.tsx. Drop it in a components/ directory and import from there.
The shipped @entros/verify package covers the verification trigger. EntrosBadge is a copy-source display primitive. A standalone package remains on the near-term roadmap.
Usage
// after copying entros-badge.tsx into your components/ directory
import { EntrosBadge } from "./components/EntrosBadge";
<EntrosBadge walletAddress={comment.author} />The component fetches the Anchor PDA on mount and renders one of four states:
- Entros verified - shows the current on-chain Trust Score
- No Anchor - shows a neutral state when the devnet account does not exist
- Loading - shows a placeholder with the same dimensions as the result
- Invalid address - shows an error when the prop is not a valid base58 public key
Props
| Prop | Type | Required | Default | Purpose |
|---|---|---|---|---|
walletAddress | string | yes | none | Base58-encoded wallet public key to look up |
connection | Connection | no | devnet RPC | Solana connection. Current Entros program support is devnet-only. |
className | string | no | none | Tailwind classes appended to the root element |
Where badges work well
- Author bylines. A small badge next to a comment author signals the commenter's verification level without forcing the reader to dig into a profile.
- Leaderboards and lists. Sorting or coloring rows by score gives an at-a-glance read on participant quality.
- Onboarding flows. A user progressing through verification can see their score climb without having to look up the Anchor PDA themselves.
Server-rendering badges
EntrosBadge is a client component. To render a badge as static content, read the score on the server and pass it down:
const anchor = await readAnchor(connection, walletPubkey);
return <StaticBadge score={anchor?.trustScore} lastVerifiedAt={anchor?.lastVerifiedAt} />;A badge reports state rather than granting access, so showing when the wallet last verified alongside the score is the whole job. Use EntrosGate where the answer decides what a user can do.
readAnchor is in the no-SDK quickstart, and the full PDA layout in the read-on-chain guide.
Where to look next
- Gate a route - use state in an access policy
- Read on-chain - the underlying RPC pattern