fix: bw/stats 404, gateway links, history crash

- swr.ts: remove useBandwidth(), drop bw from useDashboard() - events/route.ts: skip bandwidth SSE (Kubo 0.28.0 unsupported) - usage/page.tsx: remove getBWStats call + bw references - helpers.ts: gatewayLink -> ipfs.maos.dedyn.io (subdomain only) - upload/page.tsx: fix local gatewayLink (subdomain only) - storage.ts: update default gatewayUrl, add defensive getHistory()
2026-07-05 16:57:29 +02:00
parent c9432a16ba
commit 99c113b6f5
42 changed files with 10081 additions and 263 deletions
@@ -0,0 +1,166 @@
+# IPFS Portal Feature Plan
+
+## A. Payment / Blockchain Features
+
+### A1. Multi-chain Support
+- **Status**: `getWalletClient()` en `getPublicClient()` hardcoden naar `zkSyncLocal`
+- **Wijzigingen**:
+  - `src/lib/payment/read-service.ts`: `getPublicClient()` chain parameter toevoegen
+  - `src/lib/payment/write-service.ts`: `getWalletClient()` chain configurable maken
+  - `src/lib/payment/abi.ts`: `ChainConfig[]` type, default chains (zkSync Local + optioneel Polygon/Arbitrum)
+  - `src/lib/payment/service.ts`: chain selector in constructor
+  - `src/components/PaymentPanel.tsx`: chain switcher UI
+  - `src/app/admin/payment/page.tsx`: multi-chain admin overzicht
+- **Bestanden**: `src/lib/payment/read-service.ts`, `write-service.ts`, `abi.ts`, `service.ts`, `src/components/PaymentPanel.tsx`, `src/app/admin/payment/page.tsx`
+
+### A2. Gas Estimator
+- **Status**: Geen indicatie van transactiekosten voor gebruiker
+- **Wijzigingen**:
+  - `src/lib/payment/read-service.ts`: `estimateGas()` methode
+  - `src/lib/payment/write-service.ts`: gas estimation voor `payWithETH`, `approveAndPayWithToken`
+  - `src/components/PaymentPanel.tsx`: gas fee display naast prijs
+- **Bestanden**: `src/lib/payment/read-service.ts`, `write-service.ts`, `src/components/PaymentPanel.tsx`
+
+### A3. Batch Upload + Single Payment
+- **Status**: 1 file → 1 upload → 1 tx (sequentieel via `startUpload()`)
+- **Wijzigingen**:
+  - `src/lib/payment/write-service.ts`: `payWithBatch(provider, cids[], totalBytes, priceWei)` — encodet meerdere CIDs in 1 tx
+  - `src/app/upload/page.tsx`: batch selectie in crypto tab
+  - `src/components/PaymentPanel.tsx`: multiple files support
+- **Bestanden**: `src/lib/payment/write-service.ts`, `src/app/upload/page.tsx`, `src/components/PaymentPanel.tsx`
+
+### A4. Storage Quota UI
+- **Status**: `getUserStats()` returned `totalBytes/uploadCount/remainingFree` maar nergens getoond als overzicht
+- **Wijzigingen**:
+  - Nieuw component: `src/components/StorageQuota.tsx` — balkje met used/free/total
+  - `src/app/dashboard/page.tsx`: storage quota card toevoegen
+  - `src/components/PaymentPanel.tsx`: quota status in payment panel
+- **Bestanden**: NIEUW `src/components/StorageQuota.tsx`, `src/app/dashboard/page.tsx`, `src/components/PaymentPanel.tsx`
+
+### A5. On-chain Transaction History
+- **Status**: History page gebruikt alleen localStorage; contract heeft `getUserUploads(address)` met records
+- **Wijzigingen**:
+  - `src/lib/payment/read-service.ts`: `getUserUploads()` bestaat al — wordt gebruikt in UsersPage
+  - `src/app/history/page.tsx`: "On-chain History" tab toevoegen naast localStorage tab
+  - Nieuw component: `src/components/ChainHistory.tsx`
+- **Bestanden**: `src/app/history/page.tsx`, NIEUW `src/components/ChainHistory.tsx`
+
+### A6. Token Auto-router
+- **Status**: Gebruiker kiest handmatig token in PaymentPanel
+- **Wijzigingen**:
+  - `src/components/PaymentPanel.tsx`: auto-select goedkoopste token op basis van `finalWei` / `weiPerToken`
+  - Optioneel: "Auto" button naast token lijst
+- **Bestanden**: `src/components/PaymentPanel.tsx`
+
+### A7. Subscription / Pre-paid Tegoed
+- **Status**: Per-file betaling; contract heeft `getUserStats()` met `remainingFree`
+- **Wijzigingen**:
+  - Nieuw component: `src/components/DepositPanel.tsx` — stort ETH/tokens op contract
+  - Nieuw component: `src/components/BalanceDisplay.tsx` — toon tegoed
+  - `src/app/dashboard/page.tsx`: balance card
+  - `src/lib/payment/write-service.ts`: `deposit(provider, amount)` methode
+- **Bestanden**: NIEUW `src/components/DepositPanel.tsx`, NIEUW `src/components/BalanceDisplay.tsx`, `src/app/dashboard/page.tsx`, `src/lib/payment/write-service.ts`
+
+---
+
+## B. IPFS Explorer — Content Viewing
+
+### B1. Video Preview (.mp4, .webm, .mov)
+- **Status**: valt onder `'other'` → "Preview not available"
+- **Wijzigingen**:
+  - `src/app/explorer/components/FilePreview.tsx`: `detectFileType()` uitbreiden met `'video'` type
+  - `src/app/explorer/components/FilePreview.tsx`: `<video>` element met lokale gateway URL
+  - `src/lib/gateway.ts`: `gatewayUrl(cid)` helper (gebruik `maos.dedyn.io/ipfs/` ipv `ipfs.io`)
+- **Bestanden**: `src/app/explorer/components/FilePreview.tsx`, `src/lib/gateway.ts` (NIEUW of bestaande helper)
+
+### B2. Audio Preview (.mp3, .wav, .ogg)
+- **Status**: valt onder `'other'` → "Preview not available"
+- **Wijzigingen**:
+  - `src/app/explorer/components/FilePreview.tsx`: `detectFileType()` uitbreiden met `'audio'` type
+  - `<audio>` element met controls
+- **Bestanden**: `src/app/explorer/components/FilePreview.tsx`
+
+### B3. PDF Inline Viewer
+- **Status**: valt onder `'other'` → "Preview not available"
+- **Wijzigingen**:
+  - `src/app/explorer/components/FilePreview.tsx`: `detectFileType()` uitbreiden met `'pdf'` type
+  - `<iframe>` of `<embed>` met gateway URL
+  - Fallback naar download als browser geen PDF ondersteunt
+- **Bestanden**: `src/app/explorer/components/FilePreview.tsx`
+
+### B4. HTML Preview
+- **Status**: `.html` valt onder `'text'` → raw content tonen
+- **Wijzigingen**:
+  - `src/app/explorer/components/FilePreview.tsx`: `detectFileType()` uitbreiden met `'html'` type
+  - `<iframe>` met `srcdoc` om HTML veilig te renderen (sandboxed)
+- **Bestanden**: `src/app/explorer/components/FilePreview.tsx`
+
+### B5. Eigen Gateway voor Afbeeldingen
+- **Status**: `FilePreview.tsx` gebruikt hardcoded `https://ipfs.io/ipfs/${cid}` voor images
+- **Wijzigingen**:
+  - `src/app/explorer/components/FilePreview.tsx`: vervang door `settings.gatewayUrl` uit localStorage
+  - Of `src/lib/gateway.ts`: `imageUrl(cid)` die `maos.dedyn.io/ipfs/${cid}` gebruikt
+- **Bestanden**: `src/app/explorer/components/FilePreview.tsx`, `src/lib/storage.ts` (gateway setting)
+
+### B6. Full-Screen Preview Mode
+- **Status**: Preview is inline card onder directory listing
+- **Wijzigingen**:
+  - `src/app/explorer/components/FilePreview.tsx`: full-screen toggle
+  - NIEUW `src/app/explorer/components/FullScreenPreview.tsx`: overlay modal met grotere view
+  - Keyboard shortcuts: Escape, pijltjes voor navigatie
+- **Bestanden**: `src/app/explorer/components/FilePreview.tsx`, NIEUW `src/app/explorer/components/FullScreenPreview.tsx`, `src/app/explorer/page.tsx`
+
+### B7. Directory Tree View
+- **Status**: Alleen flat listing, 1 level diep
+- **Wijzigingen**:
+  - `src/app/explorer/components/DirectoryListing.tsx`: recursive toggle — klik op dir opent inline ipv nieuwe pagina
+  - `src/app/explorer/page.tsx`: tree mode / flat mode toggle
+- **Bestanden**: `src/app/explorer/components/DirectoryListing.tsx`, `src/app/explorer/page.tsx`
+
+### B8. Content Type Icons
+- **Status**: `FileIcon.tsx` toont alleen folder/file icoon
+- **Wijzigingen**:
+  - `src/components/FileIcon.tsx`: specifieke iconen voor image/video/audio/pdf/code per extensie
+  - Gebruik Lucide icons: `FileImage`, `FileVideo`, `FileAudio`, `FileText`
+- **Bestanden**: `src/components/FileIcon.tsx`
+
+---
+
+## C. Prioriteit & Volgorde
+
+| Prio | Feature | Impact | Effort |
+|------|---------|--------|--------|
+| P0 | **B5** Eigen gateway voor media | Direct zichtbare verbetering, laag risico | 1 file, ~5 min |
+| P0 | **B1-B4** Video/Audio/PDF/HTML preview | Meeste gebruikerswaarde Explorer | ~2 files, ~30 min |
+| P0 | **B6** Full-screen preview | UX upgrade | ~2 files, ~20 min |
+| P1 | **A5** On-chain history | Nuttig voor betalende gebruikers | ~2 files, ~30 min |
+| P1 | **A4** Storage quota UI | Inzicht voor gebruikers | ~2 files, ~20 min |
+| P1 | **B7** Directory tree | Explorer power feature | ~2 files, ~30 min |
+| P1 | **B8** Content type icons | Polijsting | 1 file, ~10 min |
+| P2 | **A1** Multi-chain | Uitbreiding naar andere chains | ~5 files, ~1-2 uur |
+| P2 | **A6** Token auto-router | Gemak voor betalende gebruikers | 1 file, ~15 min |
+| P2 | **A2** Gas estimator | Transparantie | ~2 files, ~20 min |
+| P3 | **A3** Batch upload + betaling | Nieuwe feature | ~3 files, ~1 uur |
+| P3 | **A7** Subscription / tegoed | Grote nieuwe feature | ~4 files, ~2+ uur |
+
+---
+
+## D. Graph Impact
+
+Deze features veranderen de knowledge graph:
+
+```
+HUIDIGE COMMUNITIES:
+  WalletProvider ── PaymentService ── Smart Contract
+          │               │
+          │         ExplorerPage ── FilePreview ── Kubo API
+          │               │
+          │         UploadPage ── PaymentPanel
+
+NA DEZE FEATURES:
+  ChainManager ──► PaymentService ──► SmartContract (multi-chain)
+  StorageQuota ──► Dashboard ──► PaymentService
+  ChainHistory ──► HistoryPage ──► PaymentReadService
+  TreeView ──► ExplorerPage ──► DirectoryListing ──► FilePreview
+  FullScreenPreview ──► FilePreview ──► Gateway
+```