story-research-zapwall/features/implementation-summary.md

Résumé des implémentations - Nostr Paywall

Date : Décembre 2025 (mise à jour)

✅ Mises à jour Déc 2025

• Séries et critiques : pages série dédiées (pages/series/[id].tsx), agrégats sponsoring/achats/remerciements, filtrage par série sur le profil, affichage des critiques avec formatage auteur/date et total des remerciements.
• NIP-95 médias : upload images (≤5Mo PNG/JPG/JPEG/WebP) et vidéos (≤45Mo MP4/WebM) via lib/nip95.ts, insertion dans markdown et bannière.
• Agrégations zap : lib/zapAggregation.ts, lib/seriesAggregation.ts, lib/reviewAggregation.ts pour cumuls sponsoring/achats/remerciements par auteur/série/article.
• Tags Nostr enrichis : lib/nostrTags.ts, lib/articlePublisher.ts, lib/articleMutations.ts intègrent kind_type, seriesId, bannières, médias, catégories, site/type (science-fiction/research).
• Hooks et subscriptions : useArticles / useUserArticles corrigent la gestion des unsub synchro (pas de .then), pas de fallback.
• Stockage privé : contenu chiffré en IndexedDB (WebCrypto AES-GCM) via lib/storage/indexedDB.ts + helpers lib/storage/cryptoHelpers.ts.
• Qualité stricte : exactOptionalPropertyTypes respecté (props optionnelles typées | undefined), fonctions < 40 lignes et fichiers < 250 lignes (refactors multiples).
• Navigation : liens directs vers page série depuis cartes et liste d’articles, filtrage par série depuis la liste utilisateur.

✅ Implémentations complétées

Priorité 1 - Fonctionnalités critiques

1. Parsing des tags invoice depuis les événements Nostr ✅

• Fichiers modifiés :

  • types/nostr.ts : Ajout de invoice et paymentHash à l'interface Article
  • lib/nostr.ts : Parsing des tags invoice et payment_hash dans parseArticleFromEvent
  • lib/payment.ts : Utilisation prioritaire de l'invoice depuis les tags de l'événement

• Fonctionnement :

  • L'invoice créée par l'auteur est stockée dans les tags de l'événement Nostr
  • Les lecteurs peuvent récupérer l'invoice directement depuis l'événement
  • Fallback sur localStorage puis création d'une nouvelle invoice si nécessaire

2. Génération d'invoice côté auteur ✅

• Fichiers modifiés :

  • lib/articlePublisher.ts : Création d'invoice lors de la publication
  • lib/payment.ts : Vérification de l'invoice de l'auteur avant d'en créer une nouvelle

• Fonctionnement :

  • L'auteur crée une facture Lightning via Alby/WebLN lors de la publication
  • L'invoice est stockée dans les tags de l'événement (invoice, payment_hash)
  • Stockage également dans localStorage pour récupération rapide

3. Signature distante améliorée ✅

• Fichiers modifiés :

  • lib/nostrRemoteSigner.ts : Support amélioré pour la signature
  • lib/articlePublisher.ts : Clé privée optionnelle
  • components/ArticleEditor.tsx : Utilisation améliorée

• Note : Utilise actuellement la signature directe si la clé privée est disponible via NostrConnect

Priorité 2 - Améliorations UX/UI

4. QR Code pour factures Lightning ✅

• Dépendance ajoutée : react-qr-code

• Fichiers modifiés :

  • components/PaymentModal.tsx : Affichage d'un QR code pour scanner avec un portefeuille mobile
  • package.json : Ajout de react-qr-code

• Fonctionnement :

  • QR code affiché avec l'invoice Lightning
  • Format lightning:lnbc... pour compatibilité universelle
  • Taille et style adaptés

5. Gestion de l'expiration des factures ✅

• Fichiers modifiés :

  • components/PaymentModal.tsx : Timer en temps réel avec compte à rebours

• Fonctionnalités :

  • Affichage du temps restant en format MM:SS
  • Indication visuelle (rouge si < 60 secondes)
  • Message d'expiration si la facture a expiré
  • Mise à jour toutes les secondes

6. Retry logic et gestion d'erreurs robuste ✅

• Fichiers créés :

  • lib/retry.ts : Utilitaire de retry avec backoff exponentiel

• Fichiers modifiés :

  • lib/alby.ts : Intégration du retry pour createInvoice et sendPayment
  • components/PaymentModal.tsx : Gestion d'erreurs améliorée
  • components/ArticleCard.tsx : Messages d'erreur plus explicites

• Fonctionnalités :

  • Retry automatique avec backoff exponentiel
  • Détection des erreurs réseau retryables
  • Gestion des erreurs utilisateur (rejet, annulation)
  • Logging structuré des erreurs

7. Détection et guide d'installation Alby ✅

• Fichiers créés :

  • components/AlbyInstaller.tsx : Composant pour guider l'installation

• Fichiers modifiés :

  • components/PaymentModal.tsx : Intégration du composant AlbyInstaller

• Fonctionnalités :

  • Détection automatique de l'extension Alby
  • Message d'information si non installé
  • Bouton "Install Alby" avec lien vers getalby.com
  • Bouton "Already installed? Connect" pour reconnecter
  • Design responsive et accessible

Architecture

Flux de paiement

1. Publication d'article :

   • Auteur crée l'article avec titre, preview, contenu privé, montant
   • Auteur crée une invoice Lightning via Alby
   • Publication de l'événement Nostr (kind:1) avec tags invoice et payment_hash
   • Stockage du contenu privé dans localStorage

2. Lecture d'article :

   • Lecteur voit le preview gratuit
   • Lecteur clique sur "Unlock" pour débloquer
   • Système récupère l'invoice depuis les tags de l'événement (ou crée une nouvelle)
   • Affichage de la modal de paiement avec QR code

3. Paiement :

   • Lecteur paie via Alby/WebLN ou scanne le QR code
   • Vérification du paiement via zap receipts sur Nostr
   • Envoi automatique du contenu privé chiffré (kind:4) à l'utilisateur
   • Déblocage de l'article pour le lecteur

Technologies utilisées

• Frontend : Next.js 14, React, TypeScript, Tailwind CSS
• Nostr : nostr-tools 1.17.0 (compat signEvent, verifyEvent)
• Lightning : Alby/WebLN
• QR Code : react-qr-code

Fichiers créés/modifiés

Nouveaux fichiers

• lib/retry.ts - Utilitaire de retry
• components/AlbyInstaller.tsx - Composant d'installation Alby
• features/priority1-implementation.md - Documentation priorité 1
• features/implementation-summary.md - Ce document

Fichiers modifiés

• types/nostr.ts - Ajout de invoice et paymentHash
• lib/nostr.ts - Parsing des tags invoice
• lib/articlePublisher.ts - Création d'invoice côté auteur
• lib/payment.ts - Utilisation des invoices depuis les tags
• lib/alby.ts - Intégration du retry logic
• components/PaymentModal.tsx - QR code, timer, AlbyInstaller
• components/ArticleCard.tsx - Gestion d'erreurs améliorée
• lib/nostrRemoteSigner.ts - Support amélioré
• package.json - Ajout de react-qr-code

Prochaines étapes (Priorité 3)

Filtrage et recherche d'articles

• Barre de recherche par titre/contenu
• Filtres (par auteur, date, prix)
• Tri (date, popularité)

Profil utilisateur et articles de l'utilisateur

• Page /profile ou /user/[pubkey]
• Liste des articles publiés
• Statistiques (vues, paiements reçus)

Système de notifications

• Notifications en temps réel via relay Nostr
• Badge de notification dans l'UI
• Centre de notifications

Amélioration du stockage du contenu privé

• Utiliser une base de données au lieu de localStorage
• Gestion de l'expiration des contenus stockés
• Sauvegarde sécurisée des clés privées

Notes importantes

• Stockage : Actuellement, le contenu privé est stocké dans localStorage. Pour la production, il faudrait utiliser une base de données.
• Signature distante : NIP-46 complet non implémenté (nécessite WebSocket relay). Actuellement, utilise la clé privée fournie par NostrConnect.
• Vérification des paiements : Basée sur les zap receipts (kind:9735) avec vérification de signature complète.

Tests et validation

⚠️ Aucun test automatisé actuellement - À implémenter en priorité 4

Pour tester manuellement :

1. Installer l'extension Alby
2. Se connecter via NostrConnect (use.nsec.app)
3. Publier un article avec invoice
4. Ouvrir l'article depuis un autre compte
5. Payer et vérifier le déblocage du contenu privé