📌 Description
There is a toast z-index token but no runtime toast system. Wallet
connect/disconnect, copy-to-clipboard, and validation actions currently have no
transient feedback surface. This issue adds a Zustand-backed toast store and a
ToastViewport that renders queued toasts.
🎯 Requirements and Context
- A Zustand store with
push, dismiss, auto-expiry, and a max-visible cap.
- A
ToastViewport using the toast z-index token and aria-live="polite".
- Success/error/info variants mapped to color tokens.
- Respect
prefers-reduced-motion for enter/exit.
🛠️ Suggested Execution
1. Fork the repo and create a branch
git checkout -b feature/toast-store
2. Implement changes
- New
src/Zustand/toastStore.ts and src/components/ToastViewport.tsx.
- Mount viewport in
src/components/Layout.tsx.
- Tests:
src/Zustand/__tests__/toastStore.test.ts,
src/components/__tests__/ToastViewport.test.tsx.
- Docs:
design-system/documentation/toast.md.
3. Test and commit
- Run
npm test.
- Cover edge cases: auto-expiry timers, manual dismiss, max-visible overflow,
duplicate ids, reduced-motion path.
Example commit message
feat: add toast store and viewport using the toast z-index token
✅ Guidelines
- Minimum 95% test coverage on the new/changed lines.
- Live-region announcements; reduced-motion aware.
- Timeframe: 96 hours.
🏷️ Labels
type-feature · area-frontend · MAYBE REWARDED · GRANTFOX OSS · OFFICIAL CAMPAIGN
💬 Community & Support
- Join the Disciplr contributor Discord to coordinate, ask questions, and get
unblocked fast: https://discord.gg/xvNAvMJf
- Please introduce yourself in the channel before you start so we can avoid
duplicate work, pair you with a reviewer, and get your PR merged quickly.
- Maintainers actively triage this channel and aim for fast, clear, respectful
reviews — reach out any time you're blocked.
📌 Description
There is a
toastz-index token but no runtime toast system. Walletconnect/disconnect, copy-to-clipboard, and validation actions currently have no
transient feedback surface. This issue adds a Zustand-backed toast store and a
ToastViewportthat renders queued toasts.🎯 Requirements and Context
push,dismiss, auto-expiry, and a max-visible cap.ToastViewportusing thetoastz-index token andaria-live="polite".prefers-reduced-motionfor enter/exit.🛠️ Suggested Execution
1. Fork the repo and create a branch
2. Implement changes
src/Zustand/toastStore.tsandsrc/components/ToastViewport.tsx.src/components/Layout.tsx.src/Zustand/__tests__/toastStore.test.ts,src/components/__tests__/ToastViewport.test.tsx.design-system/documentation/toast.md.3. Test and commit
npm test.duplicate ids, reduced-motion path.
Example commit message
✅ Guidelines
🏷️ Labels
type-feature·area-frontend·MAYBE REWARDED·GRANTFOX OSS·OFFICIAL CAMPAIGN💬 Community & Support
unblocked fast: https://discord.gg/xvNAvMJf
duplicate work, pair you with a reviewer, and get your PR merged quickly.
reviews — reach out any time you're blocked.