@arqera/react

React hooks + components for ARQERA substrate citizenship.

Built on @arqera/substrate (TypeScript SDK).

Install

npm install @arqera/react @arqera/substrate react

Setup

Wrap your app once in SubstrateProvider. It generates a per-session peer, publishes it, and makes the peer available to every nested component.

import { SubstrateProvider } from "@arqera/react";

export function App() {
  return (
    <SubstrateProvider
      bearerToken={process.env.NEXT_PUBLIC_ARQERA_TOKEN}
      capabilities={["my-frontend"]}
      endpoints={{ web: window.location.origin }}
    >
      <YourApp />
    </SubstrateProvider>
  );
}

Emit acts from components

Imperative — useSubstrateAct

import { useSubstrateAct } from "@arqera/react";

function CheckoutButton({ orderId, amount }) {
  const { emit, emitting, address } = useSubstrateAct();
  return (
    <>
      <button
        disabled={emitting}
        onClick={() =>
          emit({
            kind: "checkout_completed",
            reference: orderId,
            payload: { amount, currency: "GBP" },
          })
        }
      >
        {emitting ? "Recording…" : "Pay"}
      </button>
      {address && <small>Recorded at {address}</small>}
    </>
  );
}

Declarative — <SubstrateAct>

import { SubstrateAct } from "@arqera/react";

function PricingPage({ userId }) {
  return (
    <>
      <SubstrateAct kind="user_viewed_pricing" reference={userId} />
      <Plans />
    </>
  );
}

Or with a when guard so the act fires only on the desired transition:

<SubstrateAct
  kind="checkout_completed"
  reference={orderId}
  payload={{ amount, currency }}
  when={paymentResponse?.status === "succeeded"}
>
  {({ address }) => address && <Receipt address={address} />}
</SubstrateAct>

Status indicator

import { PeerStatus } from "@arqera/react";

export function Footer() {
  return (
    <footer>
      <PeerStatus />
    </footer>
  );
}

Why React-first

Every interaction in a React frontend is a substrate-eligible event: page view, button click, form submit, payment, signup, settings change. These hooks let you emit signed acts without leaving the component tree.

License

BUSL-1.1