React Quickstart

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

import { MandateForm } from '@abstraxn/warrant-react';

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

        // 2. Owner signs mandate hash — wallet / passkey in your app
        const owner_signature = await signMandateHash(rules);
        const owner_pubkey_ref = 'eip155:84532:0xYourOwner…';

        // 3. Seal on your backend (application API key stays server-side)
        await fetch('/api/mandates', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            agent_id: 'agent_web3_demo',
            principal_id: '0xYourOwner…',
            domain,
            rules,
            owner_signature,
            owner_pubkey_ref,
          }),
        });
      }}
    />
  );
}

import { Warrant } from '@abstraxn/warrant';

const admin = new Warrant({
  apiKey: process.env.ABSTRAXN_API_KEY!,
  // apiUrl optional — defaults to https://api-warrant.abstraxn.com
});

export async function POST(req: Request) {
  const body = await req.json();
  const mandate = await admin.createMandate(body);
  return Response.json({ id: mandate.id, apiKey: mandate.apiKey });
}

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} />;

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