feat: Add Toast Notifications System

[Benedict315]

PR Description

Summary

This PR implements a comprehensive toast notification system using react-hot-toast to provide user feedback for wallet connections, WebSocket events, and agent messages.

Changes Made

1. Package Installation

• Added react-hot-toast: ^2.4.1 to package.json

2. Layout Setup (src/app/layout.tsx)

• Imported Toaster component from react-hot-toast
• Added Toaster component to the root layout with custom styling to match the app's theme
• Configured toast position (top-right) and duration (4 seconds default)

3. Wallet Connection Toasts (src/hooks/useFreighter.ts)

• Added success toast when wallet connects successfully: "Wallet connected successfully! 🎉"
• Added error toast when wallet connection fails: "Failed to connect wallet. Please try again."
• Added error toast when Freighter is not installed: "Freighter wallet not detected. Please install the extension and refresh the page."
• Added info toast when wallet disconnects: "Wallet disconnected"

4. WebSocket Notification Toasts (src/hooks/useNotifications.ts)

• Added success toast when WebSocket connects: "Connected to notification service"
• Added error toast when WebSocket encounters errors: "Connection to notification service failed"
• Added error toast when WebSocket disconnects: "Disconnected from notification service"

5. Agent Message Toasts (src/app/page.tsx)

• Added notification toast for proactive agent messages: "💡 New suggestion from OpenClaw"
• Added error toast for WebSocket connection failures in the app

Acceptance Criteria ✅

• Toast notifications appear properly: Toasts display with appropriate styling and positioning
• Error states are elegantly handled: All error scenarios (wallet connection, WebSocket failures) show user-friendly toast notifications
• Success feedback provided: Successful wallet connections and WebSocket connections show positive feedback

Technical Details

• Library: react-hot-toast - lightweight, accessible, and highly customizable
• Styling: Custom toast styling with backdrop blur and theme-consistent colors
• Accessibility: Toasts include proper ARIA attributes and keyboard navigation
• Duration: 4 seconds for regular toasts, 6 seconds for important prompts

Testing

• Verified toast imports and usage in all modified files
• Ensured no breaking changes to existing functionality
• Toast positioning and styling match app design

Files Changed

• package.json (dependency added)
• layout.tsx
• useFreighter.ts
• useNotifications.ts
• page.tsx

The toast notification system is now complete and ready for review! 🚀✨

You can now create the pull request on GitHub using the link provided above.

Made changes.
closes #41

[drips-wave]

@Benedict315 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits