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 the read-only display primitive — same on-chain source, different surface. A standalone @entros/badge package is 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:
- Verified—shows "Verified · Trust: score" with the on-chain Trust Score
- Not verified—shows a neutral "Not Verified" indicator
- Loading—shows a "Verifying Entros…" placeholder with the same dimensions as the eventual content
- Invalid address—shows an "Invalid Address" indicator when the prop is not a valid base58 pubkey
Props
| Prop | Type | Required | Default | Purpose |
|---|---|---|---|---|
walletAddress | string | yes | — | Base58-encoded wallet pubkey to look up |
connection | Connection | no | devnet RPC | Solana connection. Provide your own to read mainnet or use a different RPC. |
className | string | no | — | 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 score = await readTrustScore(connection, walletPubkey);
return <StaticBadge score={score} />;The PDA layout is documented in the read-on-chain integration guide.
Where to look next
- Gate a route—when you want to block, not just display
- Read on-chain—the underlying RPC pattern