React Component

The <WaspadaScanner /> component is a self-contained, drop-in fraud evidence scanner with built-in UI, state management, and visual telemetry.

Installation

pnpm add @waspada/react @waspada/sdk @waspada/types

Basic Usage

import { WaspadaScanner } from '@waspada/react';
import '@waspada/react/dist/style.css';

export default function SecurityCenter() {
  return (
    <WaspadaScanner
      config={{ source_platform: 'PARTNER_123', signPayload: myKeySigner }}
      onThreatDetected={(alert) => sendToFMS(alert)}
    />
  );
}

5 Lines of Code

That's all it takes to add enterprise-grade fraud detection to your app. The component handles model loading, file processing, PII stripping, and result display.

Props

Prop	Type	Required	Description
config	WaspadaSdkConfig	Yes	SDK configuration (platform ID, signer)
onThreatDetected	(result, metrics) => void	—	Fires when threat indicators are extracted
onClean	(result, metrics) => void	—	Fires when no threats are found
onError	(error) => void	—	Fires on SDK or processing errors
className	string	—	Additional CSS class for the root element

State Machine

The component follows a deterministic state machine:

IDLE → LOADING_MODELS → READY → SCANNING → THREAT_DETECTED
                          ↑                       │
                          └───── (Scan Another) ───┘
                          ↑
                     SCANNING → CLEAN
                          ↑       │
                          └───────┘

State	UI	Description
IDLE	—	Initial mount, before SDK init
LOADING_MODELS	Progress bar	Downloading OCR + NER models
READY	Drop zone	Ready to accept evidence files
SCANNING	Progress animation	Processing file through pipeline
THREAT_DETECTED	Metrics + Indicators	Threat indicators found
CLEAN	Metrics	No actionable indicators
ERROR	Error message	SDK or processing failure

Visual Telemetry

When a scan completes, the component renders four real-time metrics:

Metric	Color Coding	Data Source
Latency	🟢 <100ms · 🟡 <500ms · 🔴 >500ms	performance.now() delta
Engine Tier	🔵 Regex · 🟣 NER · 🔷 Hybrid	result.extraction_tier
Confidence	Percentage	result.confidence
PII Status	🟢 Clean · 🔴 Detected	Warning scan

useWaspada() Hook

For custom UIs, use the hook directly:

import { useWaspada } from '@waspada/react';

function CustomScanner() {
  const {
    state,
    initStatus,
    lastResult,
    lastMetrics,
    processFile,
    reset,
    error,
  } = useWaspada(
    { source_platform: 'MY_APP', signPayload: signer },
    {
      onThreatDetected: (result, metrics) => {
        console.log(`Threat found in ${metrics.latencyMs}ms`);
      },
    }
  );

  return (
    <div>
      <p>State: {state}</p>
      {state === 'READY' && (
        <input
          type="file"
          onChange={(e) => e.target.files?.[0] && processFile(e.target.files[0])}
        />
      )}
      {lastResult && (
        <pre>{JSON.stringify(lastResult.indicators, null, 2)}</pre>
      )}
    </div>
  );
}

Hook Return Values

Property	Type	Description
state	ScannerState	Current state machine state
initStatus	InitStatus | null	SDK init details (storage backend, cached models)
lastResult	ExtractionResult | null	Most recent extraction result
lastMetrics	ScanMetrics | null	Performance metrics for last scan
version	string	SDK version
warnings	string[]	Warnings from last operation
error	string | null	Error message (if in ERROR state)
processFile	(file: File) => Promise<void>	Trigger evidence processing
reset	() => void	Reset to READY state

Styling

The component ships with encapsulated CSS Module styles that won't conflict with your app. Import the stylesheet:

import '@waspada/react/dist/style.css';

To customize, override CSS variables on the component's root:

.my-scanner {
  --w-blue: #2563eb;      /* Brand blue */
  --w-purple: #7c3aed;    /* Brand purple */
  --w-bg-deep: #0f172a;   /* Background */
  --w-radius: 16px;       /* Border radius */
}

<WaspadaScanner className="my-scanner" config={config} />