Files
maikrolf 99c113b6f5 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

8.5 KiB

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