Skip to content

feat: integrate Sonner toast system with Toaster component and global API error interceptor (Fixes #19) - #61

Open
waterWang wants to merge 1 commit into
LatterFixxx:mainfrom
waterWang:feat/029-toast-notification-system
Open

feat: integrate Sonner toast system with Toaster component and global API error interceptor (Fixes #19)#61
waterWang wants to merge 1 commit into
LatterFixxx:mainfrom
waterWang:feat/029-toast-notification-system

Conversation

@waterWang

Copy link
Copy Markdown
Contributor

Summary

Implements issue #19 — Toast Notification System for Payment & Error Events.

The codebase already had a NotificationProvider (powered by Sonner) plus notify / notifySuccess / notifyError calls wired into 11+ components and providers (wallet connection, socket events, payment submission, contract invocation, clipboard, bulk payment tracking, network switch). However, Sonner's <Toaster /> component was never rendered, so every toast call was silently invisible to users.

Changes

  1. frontend/src/main.tsx — Render Sonner's <Toaster /> (top-right, rich colors, close button, 4s duration, max 5 toasts) inside ThemeProvider so all existing notification calls become visible. Styled to match the app's dark design system via toast-notification class.

  2. frontend/src/services/apiErrorInterceptor.ts (new) — Global Axios response interceptor that converts HTTP 4xx/5xx failures into actionable error toasts:

    • Friendly status-specific messages (401 session expired, 403 permission, 429 rate limit, 5xx server errors, etc.)
    • Surfaces the backend's message field when available
    • Skips noise: localhost/dev requests, auth-endpoint 401s (handled by AuthProvider), and /api/contracts (has its own retry logic)

Acceptance Criteria

  • Sonner toast system integrated — <Toaster /> mounted so notifications actually render
  • Success/Error notification patterns established — notifySuccess / notifyError used across wallet, payment, contract, and API layers
  • Notifications provide actionable info — payment tx hashes, wallet addresses, specific backend error messages

Verification

  • npx tsc --noEmit passes (exit 0)
  • Existing tests still pass (Needs CI to confirm)

Fixes #19

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

019: Add Toast Notification System for Payment & Error Events

1 participant