Feat/payments devtools skeletons errorboundary (#374)

* feat: add /payments page with chronological transaction log

- New /payments route showing all payments made by connected wallet
- Sortable table (date desc by default, toggle amount) with pagination (20/page)
- Total paid summary: "You have paid X XLM across Y invoices"
- Download CSV exports full payment history
- Empty state with Browse Invoices CTA
- Responsive: table on desktop, card list on mobile
- SkeletonPaymentRow placeholder during loading
- Redirects to home if wallet is not connected

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: add Zustand stores with Redux DevTools integration

- wallet, invoice, and UI Zustand stores in src/lib/stores/
- devtools middleware applied to all stores with explicit names:
  WalletStore, InvoiceStore, UIStore
- immer middleware alongside devtools for ergonomic nested updates
- DevTools enabled only in development (enabled: process.env.NODE_ENV === 'development')
- Named set calls for every action (e.g. "wallet/setConnected")
- 13 new store unit tests covering all state transitions
- CONTRIBUTING.md: "Debugging state with Redux DevTools" section

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: expand skeleton screens for perceived-performance polish

- SkeletonPaymentRow: matches payment history table row / mobile card
- SkeletonLeaderboardRow: matches leaderboard row layout
- SkeletonCreatorProfile: avatar + name + 3-stat grid
- SkeletonDashboardStats: 4-card dashboard stats grid
- InvoiceListSkeleton now accepts count prop (default 6)
- DeferredSkeleton wrapper: suppresses skeleton if data loads < 200ms
- useDeferredShow hook: 200ms delay before showing skeleton
- All new skeletons have aria-busy="true" and aria-label="Loading..."
- shimmer uses animate-pulse (light + dark mode compatible)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: integrate Sentry error reporting into error boundaries

- @sentry/nextjs installed and configured via sentry.{client,server,edge}.config.ts
- Sentry.init only called when NEXT_PUBLIC_SENTRY_DSN is set (disabled in dev)
- withSentryConfig wraps next.config.js for source map upload on build
- ErrorBoundary dynamically imports Sentry, calls captureException, displays event ID
- "Something went wrong" fallback now shows Reload Page + Go to Dashboard buttons
- Route-level error.tsx boundaries in /invoice/[id] and /dashboard
- /payments/error.tsx added with route-level Sentry capture
- Pre-existing bugs fixed: duplicate useRouter in DashboardClient, unclosed Link tag,
  missing JSX sibling wrapper, undefined canvas reference in timelineImageExport,
  missing "reminder" and "expired" notification types, mismatched ref type

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Emmanuel Chukwunyere <emmanuelanalaba@gmail.com>

Author: 3 people

CONTRIBUTING.md

@@ -67,6 +67,35 @@ feat: add invoice search to dashboard (#7)
 - Keep components small and focused (single responsibility).
 - All interactive elements must be keyboard-accessible.
 
+## Debugging State with Redux DevTools
+
+StellarSplit uses [Zustand](https://github.com/pmndrs/zustand) for client-side state. Three stores are available:
+
+| Store | Location | DevTools name |
+|---|---|---|
+| Wallet | `src/lib/stores/walletStore.ts` | `WalletStore` |
+| Invoice | `src/lib/stores/invoiceStore.ts` | `InvoiceStore` |
+| UI | `src/lib/stores/uiStore.ts` | `UIStore` |
+
+### Setting up the extension
+
+1. Install the [Redux DevTools browser extension](https://github.com/reduxjs/redux-devtools#browser-extension).
+2. Run the dev server: `npm run dev`.
+3. Open DevTools → **Redux** tab.
+
+The three stores appear by name. You can:
+- **Inspect** current state and individual action payloads.
+- **Time-travel** by clicking any action in the log to jump to that state snapshot.
+- **Replay** a sequence of actions to reproduce a bug.
+
+### DevTools is development-only
+
+The middleware is tree-shaken out in production (`NODE_ENV !== 'development'`). No DevTools overhead ships to users.
+
+### Named actions
+
+Each `set` call in the stores uses a named action (e.g. `"wallet/setConnected"`). When adding new state mutations, keep this convention so the DevTools log stays readable.
+
 ## Questions?
 
 Open a [Discussion](../../discussions) or ask in the issue thread.

next.config.js

@@ -1,6 +1,7 @@
 const withBundleAnalyzer = require("@next/bundle-analyzer")({
   enabled: process.env.ANALYZE === "true",
 });
+const { withSentryConfig } = require("@sentry/nextjs");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -40,4 +41,17 @@ const nextConfig = {
   },
 };
 
-module.exports = withBundleAnalyzer(nextConfig);
+const sentryWebpackPluginOptions = {
+  org: process.env.SENTRY_ORG,
+  project: process.env.SENTRY_PROJECT,
+  authToken: process.env.SENTRY_AUTH_TOKEN,
+  // Only upload source maps when a real DSN is configured (i.e. in CI / production)
+  silent: true,
+  disableServerWebpackPlugin: !process.env.NEXT_PUBLIC_SENTRY_DSN,
+  disableClientWebpackPlugin: !process.env.NEXT_PUBLIC_SENTRY_DSN,
+};
+
+module.exports = withSentryConfig(
+  withBundleAnalyzer(nextConfig),
+  sentryWebpackPluginOptions
+);