@abstraxn/warrant-react

React components for KYI Framework → Warrant — structured mandate forms and deterministic English readback (never LLM).

Use with @abstraxn/warrant on the server to seal mandates after the owner reviews the readback and signs.

Related packages:

| Package | Role | |---------|------| | @abstraxn/warrant | Server / Node client | | @abstraxn/warrant-react | MandateForm + Readback | | @abstraxn/warrant-verifier | Offline receipt verify + CLI |

Installation

npm install @abstraxn/warrant-react @abstraxn/warrant

yarn add @abstraxn/warrant-react @abstraxn/warrant

pnpm add @abstraxn/warrant-react @abstraxn/warrant

Prerequisites

• React >= 18
• @abstraxn/warrant (peer / dependency for RuleSet types)

Basic integration

MandateForm + Readback

import { MandateForm, Readback, mandateReadback } from '@abstraxn/warrant-react';
import { Warrant } from '@abstraxn/warrant';

export function CreateMandatePage() {
  return (
    <MandateForm
      initial={{
        domain: 'web3',
        amountMaxPerAction: 100,
        currency: 'USD',
        categoryDenylist: '',
        counterpartyAllowlist: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
      }}
      submitLabel="Review & continue"
      onSubmit={async ({ domain, rules, readback }) => {
        // 1. Show readback to the owner (also rendered live inside the form)
        console.log(readback);

        // 2. Owner signs mandate hash (passkey / wallet) — your app
        const owner_signature = await signMandateHash(/* … */);
        const owner_pubkey_ref = 'wallet:0x…';

        // 3. Seal via server SDK (application API key — keep on backend)
        const admin = new Warrant({
          apiUrl: process.env.NEXT_PUBLIC_WARRANT_URL!,
          apiKey: process.env.ABSTRAXN_API_KEY!,
        });
        await admin.createMandate({
          agent_id: 'agent_web3_demo',
          principal_id: 'owner_demo',
          domain,
          rules,
          owner_signature,
          owner_pubkey_ref,
        });
      }}
    />
  );
}

Standalone Readback

import { Readback, mandateReadback } from '@abstraxn/warrant-react';
import type { RuleSet } from '@abstraxn/warrant';

const rules: RuleSet = {
  rules: [
    { type: 'amount_max_per_action', value: 100, currency: 'USD' },
  ],
};

const text = mandateReadback(rules, 'web3');

return <Readback text={text} />;

API reference

<MandateForm />

Structured fields only — no free-text policy rules.

| Prop | Type | Default | Description | |------|------|---------|-------------| | onSubmit | (payload) => void \| Promise<void> | — | Receives { domain, rules, readback } | | initial | Partial<MandateFormValues> | food / INR defaults | Prefill form fields | | submitLabel | string | 'Review & continue' | Submit button label | | disabled | boolean | false | Disable inputs / submit |

type MandateFormValues = {
  domain: string;
  amountMaxPerAction: number;
  currency: string;
  categoryDenylist: string;      // comma-separated
  counterpartyAllowlist: string; // comma-separated
};

<Readback />

Renders the deterministic English summary.

| Prop | Type | Description | |------|------|-------------| | text | string | Output of mandateReadback() |

mandateReadback(rules, domain)

Builds a stable English paragraph from a RuleSet. Sorting is deterministic so the same rules always produce the same string.

Design rules

• Structured fields only — owners never type free-text policies
• Deterministic readback — template sentences, not an LLM
• Agent never sees rules — runtime only gets ALLOW / DENY / ESCALATE

License

MIT