React Widget

Drop-in IntentGuardButton component for React dApps. Shows QR, polls for commit, and returns verified status.

Install

npm install intentguard-sdk @solana/web3.js

Basic Usage

import { IntentGuardButton } from 'intentguard-sdk/react';

function SwapPage() {
  return (
    <IntentGuardButton
      action="swap"
      params={{ amount: 1_000_000_000, mint: 'EPjFWdd5...' }}
      appId="JUP6Lkb..."
      user={walletPublicKey}
      connection={connection}
      onVerified={(hash) => executeSwap(hash)}
      onExpired={() => showError('Intent expired')}
    />
  );
}

Props

Prop	Type	Required	Description
`action`	`string`	Yes	Action name for hash computation
`params`	`object`	Yes	Action parameters for hash computation
`appId`	`string \| PublicKey`	Yes	Target app program ID
`user`	`PublicKey`	Yes	User's wallet public key
`connection`	`Connection`	Yes	Solana RPC connection
`onVerified`	`(hash) => void`	Yes	Called when intent is verified on-chain
`onExpired`	`() => void`	No	Called when intent TTL expires
`ttl`	`number`	No	TTL in seconds (default 300)
`pollInterval`	`number`	No	Poll interval in ms (default 2000)
`allowManualHash`	`boolean`	No	Show manual hash entry fallback for CLI users

Widget States

idle — Button shows "Verify with IntentGuard"
show_qr — QR code displayed for mobile scanning
waiting — Polling for on-chain commit detection
verified — Intent verified, onVerified callback fires
expired — TTL passed, onExpired callback fires
manual_input — Manual hex hash entry (CLI fallback)

QR Payload Format

{
  "protocol": "intentguard",
  "version": 1,
  "app": "JUP6Lkb...",
  "action": "swap",
  "params": { "amount": 1000000000, ... },
  "display": { "title": "Swap 1 SOL", "description": "..." }
}

The mobile app scans this QR, shows the human-readable display, and commits the intent hash on-chain after biometric confirmation.

Deep Links

For direct mobile integration without QR scanning:

intentguard://commit?payload=base64_encoded_qr_payload