Skip to content

feat: add watchlist panel for pinned counterparties and assets - #1144

Open
ifygreg01-best wants to merge 1 commit into
Stellopay:mainfrom
ifygreg01-best:feature/dashboard-watchlist-panel
Open

feat: add watchlist panel for pinned counterparties and assets#1144
ifygreg01-best wants to merge 1 commit into
Stellopay:mainfrom
ifygreg01-best:feature/dashboard-watchlist-panel

Conversation

@ifygreg01-best

Copy link
Copy Markdown

Summary

Closes #891

Adds a Watchlist Panel to the dashboard that lets users pin counterparty addresses or assets for quick reference without filtering the full transaction list.

Changes

File Change
types/watchlist.ts New — WatchlistItem TypeScript type
context/wallet-context.tsx New — WatchlistProvider, useWatchlist hook, per-account localStorage persistence
components/dashboard/watchlist-panel.tsx New — full panel UI (empty state, loading skeleton, add form, item cards, search/filter)
components/dashboard/watchlist-panel.test.tsx New — 59 Vitest unit tests
tests/watchlist.spec.ts New — 18 Playwright E2E tests + 3 axe-core a11y scans
app/layout.tsx WatchlistProvider wrapped inside WalletProvider
components/dashboard/dashboard-page.tsx <WatchlistPanel /> rendered on the dashboard
design/dashboard-redesign.md Full feature spec

Features

  • Pin / unpin — address or asset, with an optional label (≤ 40 chars)
  • Per-account persistencelocalStorage key stellopay.watchlist.<address>; empty list shown when disconnected
  • Item cards — show balance, last-amount (±), last-activity timestamp, status badge, token badge
  • Search / filter — by address fragment, label, or token symbol; clear button restores the full list
  • Duplicate guard — case-insensitive; silently ignored
  • Responsive — single column < 768 px, two columns ≥ 768 px

Accessibility (WCAG 2.1 AA)

  • <section aria-labelledby> tied to <h2>
  • <ul aria-label="N pinned items">, <article aria-label="Watchlist item: …">
  • All controls are native <button> / <input> — no custom tabindex
  • aria-expanded, aria-required, aria-invalid, aria-describedby on form inputs
  • role="alert" on validation errors
  • role="status" aria-busy aria-live on loading skeleton
  • focus-visible:ring-2 focus-visible:ring-blue-500 on every interactive element

Testing

  • 59 unit tests (all passing): render, empty state, add-item form, remove/unpin, search/filter, item card display, localStorage persistence, useWatchlist guard, accessibility spot-checks
  • 18 E2E tests: panel visibility, pin (with/without label, validation, cancel), unpin, persistence across reload, per-account scoping, disconnect/reconnect, search/filter, and 3 axe-core scans (empty / with items / form open)
npm test -- watchlist-panel   # 59/59 unit tests pass
npx playwright test tests/watchlist.spec.ts

@vercel

vercel Bot commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

@ifygreg01-best is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel.

A member of the Team first needs to authorize it.

…opay#891)

- Add WatchlistItem type in types/watchlist.ts
- Add WatchlistProvider, useWatchlist hook, and per-account localStorage
  persistence helpers to context/wallet-context.tsx
  (key: stellopay.watchlist.<address>)
- Add WatchlistPanel component with empty state, loading skeleton,
  add-item form (address + optional label, validation, duplicate guard),
  item cards (balance/amount/token/status display), unpin button,
  and search/filter input
- Register WatchlistProvider inside WalletProvider in app/layout.tsx
- Render <WatchlistPanel /> in dashboard-page.tsx between AnalyticsInsights
  and ClientAnalyticsView
- Add 59 Vitest unit tests in watchlist-panel.test.tsx covering render,
  empty state, add form, remove, search, persistence, and accessibility
- Add 18 Playwright E2E tests in tests/watchlist.spec.ts covering pin,
  unpin, persistence across reload, per-account scoping, search/filter,
  and axe-core a11y scans
- Add design spec in design/dashboard-redesign.md

WCAG 2.1 AA: aria-labelledby, aria-expanded, aria-required, aria-invalid,
role=alert, role=status, aria-live, focus-visible rings on all controls
@ifygreg01-best
ifygreg01-best force-pushed the feature/dashboard-watchlist-panel branch from 22168aa to ec1b512 Compare August 3, 2026 09:00
@ifygreg01-best

Copy link
Copy Markdown
Author

Hi maintainer I have completed the implementation for this issue.could you please approve the workflow so the vercel checks can run? Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add a watchlist panel for pinned counterparties or assets to components/dashboard/dashboard-page.tsx

1 participant