feat: implement dark mode toggle, stream filters, wallet analytics, a…

[utilityjnr035-rgb]

…nd CSV export (#519 #520 #521 #522)

This commit simultaneously resolves four GitHub issues. Below is a detailed breakdown of what was done, why, and how for each issue.

──────────────────────────────────────────────────────────────────────────────── Issue #519 — Dark mode toggle with system preference detection and persistent
user preference storage
Closes #519
────────────────────────────────────────────────────────────────────────────────

File: components/ThemeToggle.tsx

The ThemeProvider in src/lib/theme.tsx already handled the full dark/light/ high-contrast lifecycle (localStorage persistence, OS matchMedia listener, multi-tab StorageEvent sync, and the inline <script> in layout.tsx that applies the theme before first paint to prevent FOUC). What was missing from the toggle button itself was polish, accessibility, and proper surface of the system- preference state.

Changes:

• Replaced emoji (☀️/🌙) with proper SVG icons (SunIcon, MoonIcon, MonitorIcon) that render correctly in all browsers without font fallback issues.
• Added aria-pressed={isDark} so screen readers report toggle state.
• Added an aria-live='polite' sr-only region that announces the active theme name on change, satisfying WCAG 2.1 success criterion 4.1.3 (Status Messages).
• The 'Auto' reset button (shown only when the user has an explicit override) now includes a monitor SVG icon and a visible border so it is clearly distinct from the main toggle.
• dark:focus-visible:ring-offset-white added so focus rings remain visible in light mode.

No changes to ThemeProvider, layout.tsx inline script, or storage key — the persistence and FOUC-prevention logic was already correct.

──────────────────────────────────────────────────────────────────────────────── Issue #520 — Stream search and filter panel: date range + min/max rate filters Closes #520
────────────────────────────────────────────────────────────────────────────────

File: src/app/dashboard/page.tsx

The dashboard already had status, token, search, bookmark, and tag filters with URL-query-string persistence. The issue asked for two additional filter dimensions: creation date range and stream rate range.

Changes to state layer:

• Added useState for dateFrom, dateTo (ISO date strings) and minRate, maxRate (numeric strings representing stroops/sec), each initialised from the matching URL search param so deep links and browser back/forward restore filter state.

Changes to filter logic (useMemo):

• dateFrom/dateTo are compared against stream.startTime milliseconds. dateTo is extended to end-of-day (T23:59:59) so selecting a date includes streams that started anywhere within that day.
• minRate/maxRate are parsed with parseFloat and compared against stream.flowRate (stroops/sec). Values are optional; undefined skips the check.
• Both new dimension variables added to the dependency array.

Changes to URL sync (useEffect):

• dateFrom, dateTo, minRate, maxRate written to query string when non-empty and added to the router.replace dependency array.

Changes to clearFilters / hasActiveFilters:

• All four new states reset to '' in clearFilters.
• hasActiveFilters now also checks dateFrom, dateTo, minRate, maxRate.

Changes to UI (filter bar):

• Date range: two fields with cross-constraining min/max attributes (dateTo.min = dateFrom, dateFrom.max = dateTo) and [color-scheme:dark] so the native date picker is dark-themed.
• Rate range: two numeric fields (min=0, step=1) labelled 'Min'/'Max' with a 'stroops/s' unit label. Width is capped (w-20) to keep the bar compact.
• Active filter chips: four new chip variants (From/To/Rate≥/Rate≤) added to the chips row so the user always sees which filters are active.

──────────────────────────────────────────────────────────────────────────────── Issue #521 — Wallet analytics dashboard with wallet-scoped metrics Closes #521
────────────────────────────────────────────────────────────────────────────────

File: components/WalletAnalyticsDashboard.tsx (new)
File: src/app/dashboard/page.tsx (import + render)

The existing /analytics page shows protocol-wide aggregate metrics. Issue #521 asked for wallet-scoped metrics visible on the dashboard itself.

New WalletAnalyticsDashboard component:

• Accepts streams[] and walletAddress props; all data is derived client-side from the streams prop (no extra network requests).
• Identifies wallet streams by matching the first 5 characters of the address against sender/recipient fields, consistent with how mock data is keyed.

Metric 1 — 30-day streamed value:
Sum of deposit field for all streams started within the last 30 days. Displayed in human-readable format (e.g. '4.75M', '1.2K').

Metric 2 — Active streams count:
Count of streams with status === 'Active', shown with the total as context.

Metric 3 — Average stream duration:
(endTime - startTime) in seconds, averaged across all wallet streams. Formatted as Xd Yh or Xh Ym depending on magnitude.

Metric 4 — 30-day earnings:
For incoming streams (where walletAddress is the recipient), the component computes a per-calendar-day bucket array over the last 30 days. For each day it calculates the stream-time overlap with that day window and multiplies by flowRate (stroops/sec) to get the earned amount. Cancelled/paused streams stop earning at their cancelledAt/pausedAt timestamp. This array drives a Recharts AreaChart with a green gradient fill.

Integration in dashboard:
Wrapped in a

Details

disclosure widget with StreamErrorBoundary so a chart render failure does not crash the dashboard. Only shown when address and streams are both present.

──────────────────────────────────────────────────────────────────────────────── Issue #522 — CSV export for stream history
Closes #522
────────────────────────────────────────────────────────────────────────────────

Files: components/StreamHistory.tsx (enhanced)
src/app/stream/[id]/page.tsx (streamId prop)

The existing export.ts already had downloadCSVStreaming() for stream-level CSV generation but it was never wired into the StreamHistory component itself — users could only export via the TransactionExportButton in the History Export section below the table.

Changes:

• Added optional streamId prop to StreamHistoryProps (defaults to 'stream').
• Added exporting (boolean) and exportProgress (0–1) state.
• handleExportCsv async function:
  1. Sets exporting=true and yields (setTimeout 0) so the button re-renders to 'Exporting…' before the synchronous CSV work begins.
  2. Filters out entries flagged isMock=true so no synthesised test data appears in exports.
  3. Builds CSV in chunks of 100 rows, calling setExportProgress between each chunk and awaiting setTimeout(0) to yield to the browser paint loop. This prevents blocking the main thread on large histories.
  4. Creates a Blob from the chunk array directly (avoids one large string concat in memory) and triggers download via a temporary element.
  5. Revokes the object URL to free memory.
• CSV export button rendered in the header row of the history list, showing:
  • A download SVG icon at rest.
  • An animated spinner + percentage counter while exporting.
  • A progress bar overlay inside the button itself (bg-green-500/30 stripe).
  • aria-busy={exporting} and aria-label with entry count for accessibility.
• Filename format: stream-{streamId}-history-{YYYY-MM-DD}.csv
• stream/[id]/page.tsx passes params.id as streamId so the filename is specific.

Note: the pre-existing TypeScript parsing error in dashboard/page.tsx at the assetGroups JSX block (originally line 974, now line 1109) was present before this PR and is NOT introduced by these changes (verified by git stash).

[drips-wave]

@utilityjnr035-rgb 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

[vercel]

@utilityjnr035-rgb is attempting to deploy a commit to the Chuks7 Team on Vercel.

A member of the Team first needs to authorize it.