SIWE auth, API proxy fixes, dashboard, login, usage pages

- SIWE auth flow: challenge/login/logout/me API routes + JWT middleware - Fixed [...path] catch-all: Kubo proxy with matchRoute() + mapToKuboAPI() - Fixed session_id → nonce field mismatch in AuthProvider - Fixed dashboard pins crash: Kubo returns {Keys: {...}}, not array - Added middleware route guard (307 redirect to /login) - Added login, register, profile, usage, upload pages - Added dashboard components (StorageGauge, FreeTierProgress) - Added SWR hooks + AuthGuard + Providers + Toast/ErrorBoundary - Added payment integration (smart contract ABI, tiers, tokens) - Fixed IPNS key listing: Name/Id → name/id mapping - Added PWA support (manifest, service worker, icons) - Added tests for helpers, limits, search-index, wallet
2026-06-28 18:31:05 +02:00
parent 1ddc89479c
commit c9432a16ba
84 changed files with 6679 additions and 1426 deletions
@@ -0,0 +1,64 @@
+'use client';
+
+/* ════════════════════════════ ErrorBoundary ════════════════════════════
+ * Vangt render crashes op en toont een fallback UI i.p.v. een lege pagina.
+ */
+
+import { Component, type ReactNode, type ErrorInfo } from 'react';
+import { AlertCircle, RefreshCw } from 'lucide-react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+  /** Optional: label om te tonen welk onderdeel crashed */
+  label?: string;
+}
+
+interface State {
+  error: Error | null;
+  info: ErrorInfo | null;
+}
+
+export default class ErrorBoundary extends Component<Props, State> {
+  state: State = { error: null, info: null };
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error(`[ErrorBoundary${this.props.label ? ` ${this.props.label}` : ''}]`, error, info);
+    this.setState({ info });
+  }
+
+  handleRetry = () => {
+    this.setState({ error: null, info: null });
+  };
+
+  render() {
+    if (this.state.error) {
+      if (this.props.fallback) return this.props.fallback;
+
+      return (
+        <div className="glass rounded-xl p-8 text-center max-w-lg mx-auto my-8">
+          <AlertCircle className="w-10 h-10 text-accent-rose mx-auto mb-4" />
+          <h3 className="text-surface-200 font-semibold mb-1">
+            {this.props.label ? `Fout in ${this.props.label}` : 'Er ging iets mis'}
+          </h3>
+          <p className="text-xs text-surface-500 mb-2 max-w-sm mx-auto">
+            {this.state.error.message || 'Onbekende fout'}
+          </p>
+          <button
+            onClick={this.handleRetry}
+            className="inline-flex items-center gap-2 px-5 py-2 rounded-xl bg-brand-600 hover:bg-brand-500 text-white text-sm font-medium transition-colors"
+          >
+            <RefreshCw className="w-4 h-4" />
+            Probeer opnieuw
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}