Skip to content

Add a Toast/Snackbar store and provider wired to the toast z-index token #463

Description

@1nonlypiece

📌 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.

Metadata

Metadata

Assignees

Labels

No fields configured for Feature.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions