feat(frontend): add global toast notification system - #221
Open
jeorgei wants to merge 1 commit into
Open
Conversation
Adds ToastProvider + useToast() for imperative, ad hoc feedback from any client component (trade submitted, withdrawal failed, OTP sent), distinct from the existing NotificationTray's SSE-driven trade-status toasts. Renders through the existing components/ui/Toast.tsx rather than duplicating its styling. Introduces a Providers wrapper in app/layout.tsx since ToastProvider needs to sit alongside AuthProvider and no such composition component existed yet.
|
@jeorgei 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! 🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a general-purpose, imperative toast notification system:
ToastProvider+useToast(), so any client component can calltoast.success(...)/toast.error(...)/toast.info(...)/toast.warning(...)directly, for feedbacklike trade submitted, withdrawal failed, or OTP sent.
Closes
Closes #133
Closes #135
Closes #136
Closes #104
Scope notes
components/ui/Toast.tsxfor rendering — it already has theexact colour-coded icon treatment (✓ green / ✕ red / ℹ blue / ⚠ amber) the acceptance
criteria describe. This PR adds the missing piece: the provider/hook plumbing that lets
any component trigger one imperatively, stacked, with auto-dismiss.
NotificationTray([frontend] - Implement Real-Time Trade Status Notifications #24) — that's a separate, SSE-driven system fortrade status specifically. This is a general "call it from anywhere" surface. A future
migration of
NotificationTrayonto this generic provider is a reasonable follow-up,not bundled into this PR.
Providerswrapper (app/components/Providers.tsx) — the issue's lastacceptance criterion assumes
<Providers>already exists in the root layout; it didn't,only a direct
<AuthProvider>. This PR introduces it as the single client-boundarycomposition point going forward.
useToast.tslives in a new top-levelfrontend/hooks/per the issue's specifiedlocation, while existing hooks (
useAuth,useTradeNotifications) live underapp/hooks/. Flagging this structural split rather than silently picking one — worth afollow-up decision on where hooks should live going forward.
What Changed
components/ToastProvider.tsx(new) — context, portal rendering, stacking, Tailwind-onlyenter/exit transitions (no animation library)
hooks/useToast.ts(new)app/components/Providers.tsx(new) — composesAuthProvider+ToastProviderapp/layout.tsx— now uses<Providers>instead of<AuthProvider>directlyToastProvider.test.tsx,useToast.test.tsx,Providers.test.tsxTesting
npm test— new tests pass, existing suite unaffectednpm run buildnpm run lintduration=0), and manual dismiss via the ✕ button in
npm run dev