Documentation

Wallet state  →  SDK / data adapter  →  StreamPay UI  →  Real-time visualization
─────────────    ───────────────────    ─────────────    ─────────────────────
walletStore      IStreamService         React pages      useStreamCounter
                 ├── MockStreamService  + Zustand        + StreamClock (1 rAF loop)
                 └── ZebecStreamService   selectors

Components consume normalised, typed data — plain decimal amounts and five canonical stream statuses. They never see base units, BN instances, program-derived addresses, ABIs or RPC calls. That is what makes the protocol swappable: porting StreamPay from Zebec to Sablier, Superfluid or a bespoke contract means rewriting one adapter class, not the interface.

const live = useStreamCounter({
  baseAmount: stream.streamedAmount,        // authoritative, from chain
  syncedAt: stream.lastSyncedAt,            // when it was read
  flowRatePerSecond: stream.flowRatePerSecond,
  isActive: stream.status === 'streaming',
  maxAmount: stream.totalAmount,
});

• Derived, never accumulated. Each frame computes base + (now − syncedAt) × rate from scratch. Dropped frames, a sleeping laptop and a backgrounded tab all resolve to the correct value instantly — no drift, no catch-up animation.
• One loop for the whole app. StreamClock runs a single requestAnimationFrame loop that every ticker subscribes to, throttled to NEXT_PUBLIC_STREAM_MAX_FPS and suspended while the tab is hidden.
• Re-renders only when digits change. State is committed only when the value changes at the rendered precision, and the subscription lives in a leaf component — so a frame updates one span, not the page.
• Hydration-safe by construction. The first render returns baseAmount verbatim; Date.now() is never called during render. Server and client markup are byte-identical.
• Corrected on a slow poll. Every NEXT_PUBLIC_STREAM_SYNC_INTERVAL_MS, authoritative balances are re-read from the service and the interpolation re-anchors.