[V2 200pts] Build personal currency watchlist — pin favourite pairs to dashboard with live rate updates

[portableDD]

Summary

Allow users to pin their favourite currency pairs to a personal watchlist on the dashboard. Instead of seeing all available rates, users see only the pairs they care about most — NGN/USD, NGN/GBP, etc. — with live rate updates.

What Needs to Be Done

1. Watchlist persistence

Store the user's watchlist in localStorage (no backend required for this feature):

// lib/utils/watchlist.ts
export const getWatchlist = (): string[] => ...       // returns ['NGN/USD', 'NGN/EUR']
export const addToWatchlist = (pair: string): void => ...
export const removeFromWatchlist = (pair: string): void => ...
export const isInWatchlist = (pair: string): boolean => ...

2. components/dashboard/watchlist.tsx

• List of pinned currency pairs, each showing:
  • Pair label: "NGN / USD"
  • Current rate: "1 USD = 1,721.45 NGN"
  • 24h change: "+0.23%" in green or "-0.15%" in red (if backend provides historical rates)
  • Remove pin button (×)
• "Add pair" button → dropdown of available pairs to add
• Empty state: "No pairs saved. Add a currency pair to your watchlist."
• Auto-refresh every 60 seconds (reuse exchange rate fetching from issue Skeletal Layout Loader for Term of Services #25)

3. Add/remove from market overview

On each rate card in components/dashboard/market-overview.tsx:

• Star/pin icon button
• Filled star = in watchlist, outline star = not in watchlist
• Clicking toggles the pair in/out of the watchlist

4. Position on dashboard

• Watchlist section appears at the top of the dashboard (above account overview) if the user has at least one pinned pair
• Hidden entirely if the watchlist is empty

Acceptance Criteria

• Pinning a pair from market overview adds it to the watchlist
• Watchlist persists across page refresh (localStorage)
• Watchlist hidden when empty
• Auto-refresh every 60 seconds
• Remove button removes the pair immediately
• "Add pair" dropdown shows available pairs not already in watchlist
• npm run build and npm run lint pass

---

⚠️ IMPORTANT — READ BEFORE SUBMITTING YOUR PR
Your pull request MUST target the v2 branch.
PRs targeting main or any other branch will not be reviewed and will not be merged.

Base branch: v2   ✅
Base branch: main ❌  → will be closed without review

Complexity: High — 200 points

[khanavi272-spec]

@khanavi272-spec has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

I would like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @khanavi272-spec to this issue.

[temieehade-coder]

@temieehade-coder has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello Maintainer, I can fix this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @temieehade-coder to this issue.

[nelly439]

@nelly439 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi! I'd like to work on this issue.

I have experience building React/Next.js dashboards, client-side persistence, and reusable UI components. I can implement a lightweight currency watchlist that integrates with the existing market overview and persists locally without requiring backend changes.

My implementation plan is to:

Create lib/utils/watchlist.ts with a simple, typed localStorage API:
getWatchlist()
addToWatchlist()
removeFromWatchlist()
isInWatchlist()
Build components/dashboard/watchlist.tsx featuring:
A list of pinned currency pairs.
Current exchange rates.
24-hour change indicators (when historical data is available).
Remove (×) action.
"Add pair" dropdown that excludes already pinned pairs.
An accessible empty state when no pairs are saved.
Reuse the existing exchange-rate fetching logic so the watchlist refreshes automatically every 60 seconds instead of introducing duplicate polling.
Update components/dashboard/market-overview.tsx to add a star/pin toggle on each currency pair card:
Filled icon for pinned pairs.
Outline icon for unpinned pairs.
Instant UI updates when toggled.
Ensure the dashboard only renders the watchlist section when at least one pair is pinned, placing it above the account overview as specified.
Add or update tests covering:
Adding/removing pairs.
localStorage persistence across refreshes.
Hidden state when empty.
Correct filtering of the "Add pair" dropdown.
Auto-refresh behavior.
Pin icon state synchronization between Market Overview and Watchlist.

Before opening the PR, I'll run npm run lint and npm run build, verify persistence and refresh behavior manually, and include the build/test results in the PR description.

Could you please assign this issue to me? Thank you!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @nelly439 to this issue.

[ayshadogo]

@ayshadogo has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Good day

I have read the requirements of this issue and i am confident that i can solve this

ℹ️ Repo Maintainers: To accept this application, review their application or assign @ayshadogo to this issue.

[drips-wave]

Congratulations, @ayshadogo! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @ayshadogo: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @ayshadogo as part of the Stellar Wave Program's 7th Wave 🥳

😎 @ayshadogo: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.