KeyStone Elements

Not yet released. The packages on this page are not published to npm yet, so the install commands below will not resolve. The documented interface is stable and the code exists; only publication is outstanding. To use KeyStone from a frontend today, call the REST API or the TypeScript SDK, which is published. Contact us if you need early access.

KeyStone Elements is a set of packages that let platforms integrate settlement functionality into their applications with minimal code. Think Stripe Elements, but for settlement orchestration.

Packages

Package	What it does	When to use
`@keystoneos/react`	React hooks and provider (headless)	You want full UI control with your own components
`@keystoneos/react-ui`	Pre-built styled components	You want drop-in widgets that just work
`@keystoneos/elements-core`	Framework-agnostic core	You’re not using React, or building a custom integration
`@keystoneos/node`	Server-side helpers	Creating session tokens, handling webhooks

Integration Tiers

Elements supports three integration patterns depending on how your platform handles custody and signing:

Tier 1: View-Only

Your backend handles everything via the SDK and webhooks. The frontend only displays settlement status.

import { KeystoneProvider, useSettlement } from '@keystoneos/react';

function SettlementTracker({ id }) {
  const { settlement, isLoading } = useSettlement(id);
  if (isLoading) return <Spinner />;
  return <div>State: {settlement.state}</div>;
}

Tier 2: Interactive + Custody (Most Common)

The widget collects user decisions (confirm, deposit). Deposit execution routes through your backend to a custody provider like Fireblocks or BitGo.

<KeystoneProvider
  sessionToken={token}
  actionDelegates={{
    onDepositRequired: async (leg, info) => {
      // Your backend submits to Fireblocks
      const result = await fetch('/api/deposit', {
        method: 'POST',
        body: JSON.stringify(info),
      }).then(r => r.json());
      return { txHash: result.txHash };
    },
  }}
>
  <YourSettlementUI />
</KeystoneProvider>

Tier 3: Full Self-Service

End-users connect their own wallets. The widget handles on-chain transactions directly via wagmi.

<WagmiProvider config={wagmiConfig}>
  <KeystoneProvider sessionToken={token}>
    <YourSettlementUI />
  </KeystoneProvider>
</WagmiProvider>

Overview

Backend SDKs

Frontend Library

Tools

Packages

Integration Tiers

Tier 1: View-Only

Tier 2: Interactive + Custody (Most Common)

Tier 3: Full Self-Service

How It Works

Getting Started

Hooks Reference

​Packages

​Integration Tiers

​Tier 1: View-Only

​Tier 2: Interactive + Custody (Most Common)

​Tier 3: Full Self-Service

​How It Works

Getting Started

Hooks Reference

Packages

Integration Tiers

Tier 1: View-Only

Tier 2: Interactive + Custody (Most Common)

Tier 3: Full Self-Service

How It Works