Skip to content

feat(toast): add toast notification system (#825) - #1318

Closed
wengkit218-pixel wants to merge 1 commit into
SolFoundry:mainfrom
wengkit218-pixel:feat/toast-notification-system
Closed

feat(toast): add toast notification system (#825)#1318
wengkit218-pixel wants to merge 1 commit into
SolFoundry:mainfrom
wengkit218-pixel:feat/toast-notification-system

Conversation

@wengkit218-pixel

Copy link
Copy Markdown

Summary

Implements a complete toast notification system for the SolFoundry frontend.

Changes

New: ToastContext.tsx

  • ToastProvider — Context provider wrapping the app, renders a fixed toast container (top-right)
  • useToast() — Hook returning toast(message, variant) for triggering notifications anywhere
  • 4 variants: success (emerald), error (red), warning (amber/tier-t2), info (blue)
  • Auto-dismiss after 5 seconds with manual close button (X icon)
  • Slide-in animation from right via framer-motion (AnimatePresence + layout)
  • Stacking — Multiple toasts stack vertically with gap
  • Accessible — Each toast has role="alert" for screen readers
  • Uses existing project design tokens (bg-emerald, border-border, text-text-muted, etc.)

Modified: main.tsx

  • Added ToastProvider inside AuthProvider (so auth-dependent components can use it)

New: __tests__/ToastContext.test.tsx

  • Tests for all 4 variants rendering
  • Auto-dismiss timing (5s)
  • Manual dismiss via close button
  • Multiple toast stacking
  • Error when used outside provider

Integration Example

import { useToast } from '../contexts/ToastContext';

function SubmitButton() {
  const { toast } = useToast();

  const handleSubmit = async () => {
    try {
      await api.submit(data);
      toast('Submission successful!', 'success');
    } catch {
      toast('Submission failed. Try again.', 'error');
    }
  };
}

Acceptance Criteria Met

  • Toast notifications appear for key actions
  • Auto-dismiss with manual close option
  • Multiple toasts stack properly
  • Slide-in animation from top-right
  • Accessible (role="alert")

Closes #825

- ToastContext with useToast hook for app-wide notifications
- 4 variants: success, error, warning, info
- Auto-dismiss after 5 seconds with manual close
- Slide-in animation from top-right via framer-motion
- Stacks multiple toasts properly
- Accessible (role=alert)
- Integrated ToastProvider in main.tsx

Closes SolFoundry#825
@wengkit218-pixel

Copy link
Copy Markdown
Author

💰 Wallet: 47HxQss7ctt6fFymSo8gevkYUWJPxieYFDG1eWQK7AjU

@wengkit218-pixel

Copy link
Copy Markdown
Author

Closing - FNDRY tokens have no USD cash value. Waited 27+ days with 0 reviews.

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

🏭 Bounty T1: Toast Notification System

1 participant