📌 Description
src/pages/VaultDetail.tsx is reached from Dashboard, the Vaults list, and the
verifier flows, but offers no breadcrumb showing where the user came from. A
token-styled breadcrumb (Home / Vaults / {vault name}) would orient users and
provide a reliable back path independent of browser history.
🎯 Requirements and Context
- A
Breadcrumb component driven by an array of { label, to } segments.
- Last segment is the current page (non-link,
aria-current="page").
- Use spacing/typography tokens; truncate the vault name segment with the
existing truncation helper if very long.
- Wire it into
VaultDetail, VaultTransactions, and ValidationDetail.
🛠️ Suggested Execution
1. Fork the repo and create a branch
git checkout -b feature/breadcrumb
2. Implement changes
- New
src/components/Breadcrumb.tsx.
- Wire into
src/pages/VaultDetail.tsx, src/pages/VaultTransactions.tsx,
src/pages/ValidationDetail.tsx.
- Tests:
src/components/__tests__/Breadcrumb.test.tsx.
- Docs:
design-system/documentation/breadcrumb.md.
3. Test and commit
- Run
npm test.
- Cover edge cases: single segment, very long current label, missing
to,
aria-current on last item only.
Example commit message
feat: add Breadcrumb component and wire into vault/verifier detail pages
✅ Guidelines
- Minimum 95% test coverage on the new/changed lines.
- Accessible breadcrumb semantics (nav + ordered list).
- 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
src/pages/VaultDetail.tsxis reached from Dashboard, the Vaults list, and theverifier flows, but offers no breadcrumb showing where the user came from. A
token-styled breadcrumb (Home / Vaults / {vault name}) would orient users and
provide a reliable back path independent of browser history.
🎯 Requirements and Context
Breadcrumbcomponent driven by an array of{ label, to }segments.aria-current="page").existing truncation helper if very long.
VaultDetail,VaultTransactions, andValidationDetail.🛠️ Suggested Execution
1. Fork the repo and create a branch
2. Implement changes
src/components/Breadcrumb.tsx.src/pages/VaultDetail.tsx,src/pages/VaultTransactions.tsx,src/pages/ValidationDetail.tsx.src/components/__tests__/Breadcrumb.test.tsx.design-system/documentation/breadcrumb.md.3. Test and commit
npm test.to,aria-currenton last item only.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.