Gate a Next.js route in five lines

Add EntrosGate to a Next.js app and check stored wallet history before content renders.

Wrap a component in EntrosGate to show it when the wallet's stored score and verification timestamp meet your display requirements. This client-side component supports progressive disclosure. It does not authorize server data, claims, or other protected actions.

Use Verification flow for a new capture and the protected-action example for server authorization.

Prerequisite. EntrosGate depends on the Solana wallet adapter providers (ConnectionProvider, WalletProvider, WalletModalProvider). The component throws at render time without them. Step 2 below sets them up — do that first if your app doesn't already have a wallet adapter wiring at the root.

1. Install

npm install @entros/pulse-sdk @solana/wallet-adapter-react @solana/wallet-adapter-react-ui @solana/web3.js lucide-react

The SDK declares @coral-xyz/anchor, @solana/wallet-adapter-base, and @solana/web3.js as optional peers. EntrosGate renders WalletMultiButton while disconnected, so the install command includes @solana/wallet-adapter-react-ui. It also uses icons from lucide-react.

2. Set up the wallet adapter providers

EntrosGate reads from useWallet() and useConnection(), and its fallback renders WalletMultiButton. All three need provider wrappers at the app root. If your app already has the standard Solana wallet adapter setup, skip to Step 3. Otherwise:

app/providers.tsx

"use client";
import {
  ConnectionProvider,
  WalletProvider,
} from "@solana/wallet-adapter-react";
import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
import { useMemo } from "react";

export function SolanaProviders({ children }: { children: React.ReactNode }) {
  const endpoint = useMemo(
    () => process.env.NEXT_PUBLIC_SOLANA_RPC ?? "https://api.devnet.solana.com",
    [],
  );
  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={[]} autoConnect>
        <WalletModalProvider>{children}</WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  );
}

Mount SolanaProviders once around your app in app/layout.tsx:

app/layout.tsx

import { SolanaProviders } from "./providers";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <SolanaProviders>{children}</SolanaProviders>
      </body>
    </html>
  );
}

You also need the wallet-adapter-ui stylesheet imported once. Add it to your global CSS or root layout:

import "@solana/wallet-adapter-react-ui/styles.css";

3. Add the gate component

EntrosGate is published as a single-file React component you copy into your project. The canonical source is in the entros.io repo at src/components/ui/entros-gate.tsx—copy it into your own components/ directory. A standalone npm package is on the near-term roadmap.

4. Wrap your display component

app/protected/page.tsx

import { EntrosGate } from "@/components/ui/entros-gate";

export default function ProtectedPage() {
  return (
    <EntrosGate minTrustScore={100}>
      <h1>Verification history available.</h1>
      <p>This view only renders for wallets above the threshold.</p>
    </EntrosGate>
  );
}

That's the integration. EntrosGate does three things:

Reads the wallet's Anchor PDA on Solana.
Compares the Trust Score against minTrustScore, and the last verification against maxVerificationAge.
Renders children if both pass, otherwise a fallback prompt linking to /verify.

Setting the thresholds

minTrustScore sets the display floor. Choose it for your application and check the current protocol configuration before setting a maximum. maxVerificationAge is seconds since the stored verification timestamp and defaults to one day.

Higher score requirements ask for more wallet verification history. Another immediate capture does not guarantee a higher score. Keep server authorization requirements in the server's versioned policy. A rendered button does not grant permission to execute its action.

<EntrosGate minTrustScore={100} maxVerificationAge={3600}>
  <VerificationHistory />
</EntrosGate>

What the user sees

If the connected wallet has no Anchor: a prompt linking to https://entros.io/verify by default (configurable via the verifyHref prop if you self-host the verification flow). If the wallet has an Anchor below the score floor, or has not verified inside maxVerificationAge: a re-verify prompt. If the wallet meets both: your component.

The component doesn't open wallet adapter modals on its own. Wallet connection is the user's responsibility, then <EntrosGate> handles the rest.

Next steps

Show a Trust Score badge without gating
Display wallet verification history
Configure SAS attestations for cross-program composability