@orangecheck/react

@orangecheck/react

React components for OrangeCheck. Three focused primitives:

• <OcBadge> — display a proof-of-Bitcoin-stake badge (inline pill or card).
• <OcGate> — client-side conditional render based on OC status.
• <OcChallengeButton> — run the signed-challenge auth flow in-browser.

Zero styling framework required. No global CSS. Inline styles so the components render correctly in any host app.

yarn add @orangecheck/react

React 18 or 19. @orangecheck/sdk is a peer dependency (pulled in automatically).

<OcBadge>

Render a proof using data from check() or verify():

import { OcBadge } from '@orangecheck/react';
import { check } from '@orangecheck/sdk';

const r = await check({ addr });
return (
    <OcBadge
        address={r.address!}
        sats={r.sats}
        days={r.days}
        score={r.score}
        variant="card" // or "compact" (default)
        theme="dark" // or "light" (default)
    />
);

Props:

Prop	Type	Default	Notes
address	string	—	Bitcoin address bound to the proof.
sats	number	—	Sats bonded.
days	number	—	Days unspent.
score	number	compute(sats, days)	Optional; computed if omitted.
algorithm	'v0' | 'tier' | 'none'	'v0'	Score display mode.
variant	'compact' | 'card'	'compact'	Inline pill vs full card.
theme	'light' | 'dark'	'light'	Colour theme.
hideScore	boolean	false	Show raw metrics only.

<OcGate>

Render children only when the subject's OrangeCheck proof passes your thresholds.

import { OcGate } from '@orangecheck/react';

<OcGate
    address={userBtcAddress}
    minSats={100_000}
    minDays={30}
    loading={<Spinner />}
    fallback={<Callout>You need at least 100k sats bonded for 30 days to post.</Callout>}
>
    <CommentForm />
</OcGate>;

Or pass a render-prop to get the resolved CheckResult:

<OcGate address={addr} minSats={100_000}>
    {(result) => <p>You have {result.sats.toLocaleString()} sats bonded.</p>}
</OcGate>

Security warning. <OcGate> is a UI convenience, not a security boundary. An adversary can bypass client state trivially. Real access control must happen on the server — use @orangecheck/gate or call /api/check directly from your API route.

<OcChallengeButton>

Run the signed-challenge flow end-to-end — issue challenge → user signs → server verifies → your onVerified callback fires with the proven address.

import { OcChallengeButton } from '@orangecheck/react';

<OcChallengeButton
    address={userAddr}
    sign={(msg) => window.unisat.signMessage(msg, 'bip322-simple')}
    audience="https://example.com"
    purpose="login"
    onVerified={({ address, nonce }) => {
        // Address is cryptographically proven. Attach to session.
        console.log('verified:', address);
    }}
    onError={(e) => console.error(e)}
>
    Sign in with Bitcoin
</OcChallengeButton>;

Because every wallet's signing API is different (UniSat, Xverse, Leather, Alby, paste-from-Sparrow), the component takes a sign prop — you supply the adapter, the component handles the rest.

Adapter examples:

// UniSat
(msg) => (window as any).unisat.signMessage(msg, 'bip322-simple');

// Xverse / Sats Connect
async (msg) => {
    const r = await signMessage({
        payload: { network: { type: 'Mainnet' }, address: userAddr, message: msg },
    });
    return r.signature;
};

// Alby (Liquid Browser)
(msg) => (window as any).webln.signMessage(msg);

// Manual / hardware wallet — pop a dialog, user pastes a signature
async (msg) => {
    const sig = prompt(`Sign the message below in Sparrow, paste signature:\n\n${msg}`);
    if (!sig) throw new Error('cancelled');
    return sig;
};

Subpath imports (for tree-shaking)

import { OcBadge } from '@orangecheck/react/badge';
import { OcChallengeButton } from '@orangecheck/react/challenge';
import { OcGate } from '@orangecheck/react/gate';

License

MIT. The OrangeCheck protocol is CC-BY-4.0.