Back to Integrations
Client-Side App

Herald + React SPA

Build a single-page application with React and Vite that integrates with Herald through your backend proxy. Components for liquidation alerts, governance broadcasts, yield alerts, and usage monitoring — all keeping your API key server-side.

Ready to ship?

Start sending zero-PII notifications in minutes.

REGISTER YOUR WALLET
ZK-SECURE SOLANA NATIVE

Package: @herald-protocol/sdk

Install: npm install @herald-protocol/sdk

View full example on GitHub →

App Structure

Main App component composing dashboard panels.

Source →
React SPA / App Structure
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import { LiquidationPanel } from './components/LiquidationPanel';
import { GovernanceBoard } from './components/GovernanceBoard';
import { YieldAlert } from './components/YieldAlert';
import { UsageDisplay } from './components/UsageDisplay';


export function App() {
  return (
    <div style={{ maxWidth: 900, margin: '0 auto', padding: 24 }}>
      <h1>Herald Protocol Dashboard</h1>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <LiquidationPanel />
        <GovernanceBoard />
        <YieldAlert />
        <UsageDisplay />
      </div>
    </div>
  );
}

Call API via Backend Proxy

Client components call your backend (never expose the Herald API key).

React SPA / Call API via Backend Proxy
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
export function LiquidationPanel() {
  async function sendAlert() {
    const res = await fetch('/api/notify', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        wallet: '7xR4mKp2n...',
        subject: '⚠️ Liquidation Warning',
        body: 'Health factor dropped to 1.05. Add collateral immediately.',
        category: 'defi',
      }),
    });
    const data = await res.json();
    console.log('Sent:', data.notificationId);
  }


  return (
    <div>
      <h2>⚡ Liquidation Alert</h2>
      <button onClick={sendAlert}>Send Warning</button>
    </div>
  );
}

Common Patterns

Protocol dashboard UI components
Notification form with wallet input
Usage and quota monitoring
Billing status display

Start building with Herald

Clone the examples repo, copy the code that fits your stack, and deploy.

VIEW ON GITHUBREAD DOCS