@stwd/react

Embeddable React components for Steward agent wallet management. Drop-in UI for wallet overview, transaction history, policy controls, approval queues, and spend analytics.

Install

npm install @stwd/react @stwd/sdk

Quick Start

import { StewardProvider, WalletOverview, PolicyControls, TransactionHistory } from "@stwd/react";
import "@stwd/react/styles.css";
import { StewardClient } from "@stwd/sdk";

const client = new StewardClient({
  baseUrl: "https://api.steward.fi",
  bearerToken: agentJwt,
});

function AgentWalletPage({ agentId }: { agentId: string }) {
  return (
    <StewardProvider client={client} agentId={agentId}>
      <WalletOverview showQR />
      <PolicyControls />
      <TransactionHistory pageSize={10} />
    </StewardProvider>
  );
}

Components

Component	Description
`<StewardProvider>`	Context provider — wraps all other components
`<WalletOverview>`	Wallet address, balance, chain info, funding QR
`<TransactionHistory>`	Paginated tx list with status badges and explorer links
`<PolicyControls>`	Human-friendly policy toggles (spending limits, address lists, etc.)
`<ApprovalQueue>`	Pending transaction review with approve/deny
`<SpendDashboard>`	Spend tracking with budget bars and charts

Hooks

All components use public hooks. Use them directly for custom UIs:

import { useSteward, useWallet, useTransactions, usePolicies, useApprovals, useSpend } from "@stwd/react";

Hook	Returns
`useSteward()`	Client, agentId, features, theme, tenant config
`useWallet()`	Agent data, balance, addresses with auto-refresh
`useTransactions(opts?)`	Paginated tx history
`usePolicies()`	Policy CRUD + template support
`useApprovals(interval?)`	Pending approvals + approve/reject actions
`useSpend(range?)`	Spend analytics for time range

Theming

Components use CSS custom properties. Override any --stwd-* variable:

.stwd-root {
  --stwd-primary: #8B5CF6;
  --stwd-accent: #A78BFA;
  --stwd-bg: #0F0F0F;
  --stwd-surface: #1A1A2E;
  --stwd-text: #FAFAFA;
  --stwd-muted: #6B7280;
  --stwd-success: #10B981;
  --stwd-error: #EF4444;
  --stwd-warning: #F59E0B;
  --stwd-radius: 12px;
  --stwd-font: Inter, system-ui, sans-serif;
}

Or pass theme overrides to the provider:

<StewardProvider
  client={client}
  agentId={agentId}
  theme={{ primaryColor: "#FF6B35", colorScheme: "light" }}
>

Peer Dependencies

react >= 18
@stwd/sdk >= 0.1.0

License

MIT