@telaro/react-presign

Drop-in React modal that DApps render before sending a tx that delegates capital to a Telaro agent. Shows the agent's Trust Card (score, bond, action history, disputes) and gates the action with a minBond / minScore policy.

pnpm add @telaro/react-presign @telaro/sdk react

Why a wrapper modal, not Phantom-specific

Phantom, Solflare, and Backpack do not expose a public API for "show custom UI before sign". Rather than integrate per-wallet, this package wraps the DApp's own approve button. The DApp renders our modal first, then proceeds to its existing wallet-adapter flow. Same pattern WalletConnect, RainbowKit, and BlowFish use.

Requirements

• React 18 or 19 (peer dep; uses host React)
• Node 18+ with ESM
• Works in Next.js 15+, Vite, Webpack 5+, esbuild, and Rollup with no extra config

Quickstart

import { usePresignGate } from "@telaro/react-presign";
import { useWallet } from "@solana/wallet-adapter-react";

function DelegateButton({ agentPubkey, amount }) {
  const wallet = useWallet();

  const { open, ConfirmModal } = usePresignGate({
    agentPubkey,
    minBond: 1_000_000_000n, // 1_000 USDC
    minScore: 700,
    delegationAmount: amount,
    onConfirm: async () => {
      const sig = await wallet.sendTransaction(buildDelegateTx());
      console.log("delegated:", sig);
    },
  });

  return (
    <>
      <button onClick={open}>Delegate ${(Number(amount) / 1e6).toLocaleString()}</button>
      <ConfirmModal />
    </>
  );
}

Full runnable example: examples/01-basic-delegate-button.tsx.

Strict policy for large positions

For DApps that handle larger ticket sizes, bump the floors.

const { open, ConfirmModal } = usePresignGate({
  agentPubkey,
  minBond: 10_000_000_000n, // 10_000 USDC
  minScore: 850,
  delegationAmount: amount,
  apiBaseUrl: process.env.NEXT_PUBLIC_TELARO_API ?? "https://telaro.xyz",
  apiKey: process.env.NEXT_PUBLIC_TELARO_API_KEY,
  onConfirm: async () => {
    // proceed
  },
});

Full runnable example: examples/02-strict-policy.tsx.

What the modal shows

• Loading state while live agent data is fetched
• Trust Card with four stats (score, bond, actions, disputed)
• Policy badge (green if the agent passes, red if not)
• Confirm button enabled only when policy passes
• Cancel button
• Inline styles. No Tailwind or CSS framework required on the host.

Configuration

| Field | Type | Default | Notes | |---|---|---|---| | agentPubkey | string | required | Agent PDA, base58 | | minBond | bigint | 0n | Minimum acceptable bond in atomic units | | minScore | number | 0 | Minimum acceptable score (0..1000) | | delegationLabel | string | none | Human label rendered in the modal | | delegationAmount | bigint | none | Atomic amount rendered for context | | apiBaseUrl | string | https://telaro.xyz | Override for staging | | apiKey | string | none | Optional starter API key (1k req / min) | | onConfirm | () => void \| Promise<void> | required | Called when user confirms | | onCancel | () => void | none | Called when user cancels |

License

MIT.