feat: notification preferences, transaction history, dark mode, key comparison (#1083, #1084, #1085, #1086)

[Abidoyesimze]

Closes #1083
Closes #1084
Closes #1085
Closes #1086

These four issues are in one PR as requested, with one commit per issue so each can be reviewed or reverted on its own. A fifth commit adds dark-mode styles to the compare UI; that's only needed once #1085 and #1086 are both in.

#1083 Notification preferences (/settings/notifications)

• Covers price alert, milestone, vesting cliff, staking reward, governance vote, referral earned, and key deprecated. Each type has its own email and in-app switch.
• An "All notifications" switch turns every type on or off for both channels at once.
• Every change saves straight away and shows a confirmation toast on success.
• If a save fails, the change is undone, an error toast appears, and a banner offers Retry, which resends the same change. If the initial load fails, the page shows a "Try again" state.
• Types the API leaves out get a default instead of breaking the page.
• The Notifications page now has a "Preferences" link.

#1084 Transaction history (/transactions)

• Each row shows the type icon, a description, the key name, the amount with an in/out sign, the fee, and a relative timestamp (the absolute time is in the title).
• Type filter: All / Buys / Sells / Stakes (stake + unstake) / Claims / Swaps / Referrals.
• Date range presets: Today / 7 days / 30 days (default) / Custom, plus All time. A custom range where the start is after the end shows a validation message and doesn't fetch.
• Load more uses cursor pagination and skips rows already shown. Rows are also checked against the active filters on the client, in case the API ignores a parameter.
• CSV export downloads the rows currently shown. Fields are escaped and protected against spreadsheet formula injection.
• Web3Provider wraps this route only, in line with a066172, which removed it from the app root so wallet extensions don't start on every page. A "Transaction history" link is added to the wallet menu.

#1085 Dark mode

• On a first visit, the site follows the device's prefers-color-scheme and keeps following it if the device setting changes.
• A manual choice is saved in localStorage and overrides the device setting. Choosing "System" clears it.
• Changes sync across open tabs through the storage event.
• A small inline script in index.html applies the theme before the first paint, so there's no flash of the wrong theme. Switching themes fades over 300ms (instant for users who prefer reduced motion), and never animates on page load.
• There's a toggle in the nav bar and a Light / Dark / System choice on a new /settings page.
• Dark styles are added to the home page sections (header, spotlight, trending, cards, FAQ, footer). Pages built on the theme tokens adapt automatically.
• useSystemTheme now follows the app theme instead of reading the device setting directly.

#1086 Key comparison (/compare)

• Trending creator cards get a Compare button, capped at 3 keys. Once the limit is reached, the button uses aria-disabled (not disabled) so keyboard users can still focus it and read the tooltip.
• A sticky bar lists the selected keys, each with a remove button, plus "Clear all" and a "Compare keys" link that appears once 2 or more keys are selected.
• The compare table shows price, 24h volume, holders, unique traders (30d), rating, curve milestone (with a progress bar), and yield. Each column has an Invest button linking to /creator/:id.
• Metrics load separately for each key, so one failure doesn't blank the table: price and volume fall back to the card data and other values show "—".
• The selection is saved in sessionStorage.

API contracts (backend needed)

None of these endpoints exist yet. The client expects the existing APIResponse<T> envelope:

Endpoint	Shape
GET /notifications/preferences	Record<type, { email: boolean; inApp: boolean }>
PUT /notifications/preferences	Same shape; the full map is sent on every save
GET /wallet/:address/transactions?types=&from=&to=&cursor=&limit=	{ items: WalletTransaction[]; nextCursor: string | null }. from and to are ISO timestamps; types is a comma-separated list
GET /creators/:id/metrics	{ price, volume24h, holders, uniqueTraders, rating | null, curveMilestone: { label, progressPercent } | null, yieldPercent | null }

The exact types are in src/services/notificationPreferences.service.ts, transactionHistory.service.ts, and keyMetrics.service.ts.

Already broken on main (not fixed here)

Current main shows a blank page on every route, for two reasons:

1. App calls useRouteChangeLogging() (which uses useLocation) outside <RouterProvider>, so it throws.
2. Since a066172, HomePage renders components that need wagmi and react-query (NotificationBell, WalletStatusChip, CreatorSpotlight), but no provider wraps them.

To check these features in the browser, I temporarily moved the hook and wrapped the router locally. That patch is not in this PR, and the fix should probably be a separate PR.

Testing

• pnpm build type-check (tsc -b) and pnpm lint both pass.
• 47 new tests across 5 files cover the acceptance criteria for each issue.
• Full suite: 1,102 tests, 92 failing. All 92 already fail on main (I ran a baseline), so this PR adds no new failures.
• Checked by hand in headless Chrome, with the local fix above applied and the API mocked:
  • Preferences: save fails → the change is undone and the error banner shows → Retry → success toast.
  • Dark mode: the device's dark setting is applied on load, the nav toggle switches and saves the choice, and Settings shows it.
  • Compare: add 3 keys → the fourth button shows the limit tooltip → the bar → the compare table → Invest goes to /creator/2.

🤖 Generated with Claude Code

[drips-wave]

@Abidoyesimze Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[netlify]

✅ Deploy Preview for accesslayer ready!

Name	Link
🔨 Latest commit	c156f85
🔍 Latest deploy log	https://app.netlify.com/projects/accesslayer/deploys/6ad25f4b048c1af4ba0f9b8b
😎 Deploy Preview	https://deploy-preview-1096--accesslayer.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

👋 Thanks for your contribution! We don't accept pull requests directly to main. Please re-open your PR targeting the dev branch instead. See our contributing guide for details.