Skip to content

Add a vault detail breadcrumb and back-navigation trail to VaultDetail #454

Description

@1nonlypiece

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

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