story-research-zapwall/features/nostr-paywall-implementation.md

Nostr Paywall - Site d'articles avec aperçus gratuits et contenu payant

Auteur : Équipe 4NK

Objectif

Implémenter un site d'articles sur Nostr permettant :

• L'affichage d'aperçus gratuits (notes publiques)
• Le déblocage du contenu complet après un zap Lightning de 800 sats
• La connexion via NostrConnect (préconisé use.nsec.app)
• Une interface moderne et intuitive en TypeScript/Next.js

Impacts

Utilisateurs

• Accès gratuit aux aperçus d'articles
• Possibilité de débloquer le contenu complet via paiement Lightning instantané
• Connexion sécurisée via NostrConnect sans partager de clés privées
• Expérience utilisateur fluide avec gestion des paiements intégrée

Développeurs

• Architecture modulaire avec séparation des responsabilités
• Utilisation de nostr-tools pour toutes les opérations Nostr
• TypeScript pour la sécurité de type
• Hooks React personnalisés pour la gestion de l'état
• Service de connexion NostrConnect réutilisable

Technique

• Dépendance principale : nostr-tools (bibliothèque standard Nostr)
• Framework : Next.js 14 avec React 18
• Styling : Tailwind CSS
• Relay par défaut : wss://relay.damus.io
• Bridge NostrConnect : https://use.nsec.app

Modifications

Structure du projet

nostr_paywall/
├── pages/
│   ├── index.tsx          # Page principale avec liste des articles
│   └── _app.tsx           # Configuration Next.js
├── components/
│   ├── ConnectButton.tsx  # Bouton de connexion NostrConnect
│   └── ArticleCard.tsx    # Carte d'article avec aperçu et déblocage
├── hooks/
│   ├── useNostrConnect.ts # Hook pour la connexion NostrConnect
│   └── useArticles.ts     # Hook pour la gestion des articles
├── lib/
│   ├── nostr.ts           # Service Nostr (publications, abonnements, zaps)
│   └── nostrconnect.ts    # Service NostrConnect (NIP-46)
├── types/
│   └── nostr.ts           # Types TypeScript pour Nostr
└── styles/
    └── globals.css        # Styles globaux avec Tailwind

Composants clés

lib/nostr.ts - Service Nostr

• SimplePool pour la gestion des connexions aux relais
• Méthodes pour publier et s'abonner aux événements
• Parsing des articles depuis les événements kind:1
• Gestion des messages privés chiffrés (kind:4) avec NIP-04
• Création de zap requests (kind:9734)
• Vérification des zap receipts (kind:9735)

lib/nostrconnect.ts - Service NostrConnect

• Implémentation du protocole NIP-46 via use.nsec.app
• Communication via messages postMessage avec popup
• Persistance de l'état de connexion dans localStorage
• Gestion du profil utilisateur

components/ArticleCard.tsx

• Affichage de l'aperçu (contenu public)
• Bouton de déblocage conditionnel (nécessite connexion)
• Création de zap request lors du clic
• Vérification du paiement et chargement du contenu privé
• Affichage du contenu complet une fois débloqué

Format des articles

Les articles sont publiés sous forme d'événements Nostr avec :

Note publique (kind:1) - Aperçu :

• Tags : title, preview, zap (montant en sats)
• Contenu : Aperçu de l'article

Message privé (kind:4) - Contenu complet :

• Tag e : ID de l'article lié
• Contenu : Contenu complet chiffré avec NIP-04
• Envoyé après réception du zap

Flux de paiement

1. Utilisateur clique sur "Unlock for 800 sats"
2. Création d'un zap request (kind:9734) avec tags p, e, amount
3. Le zap request est publié sur le relay
4. L'utilisateur complète le paiement via son wallet Lightning
5. Vérification du zap receipt (kind:9735) sur le relay
6. Déchiffrement et affichage du contenu privé

Modalités de déploiement

Prérequis

• Node.js 18+ et npm
• Accès à un relay Nostr public ou privé
• Configuration de variables d'environnement optionnelles

Variables d'environnement

Créer un fichier .env.local :

NEXT_PUBLIC_NOSTR_RELAY_URL=wss://relay.damus.io
NEXT_PUBLIC_NOSTRCONNECT_BRIDGE=https://use.nsec.app

Installation

npm install

Développement

npm run dev

Le site sera accessible sur http://localhost:3000

Build de production

npm run build
npm start

Déploiement

Le projet peut être déployé sur :

• Vercel (recommandé pour Next.js)
• Netlify
• Tout hébergeur supportant Node.js

Important : Pour la production, configurer :

• Variables d'environnement dans le panneau d'administration
• HTTPS (obligatoire pour NostrConnect)
• Relay Nostr fiable et performant

Modalités d'analyse

Logs et debugging

Les erreurs sont loggées dans la console du navigateur :

• Erreurs de connexion aux relais
• Erreurs de déchiffrement
• Erreurs de parsing d'articles

Métriques à surveiller

1. Connectivité

   • Taux de connexion réussie via NostrConnect
   • Temps de réponse des relais

2. Articles

   • Nombre d'articles chargés
   • Temps de chargement des aperçus
   • Taux de conversion (aperçu → déblocage)

3. Paiements

   • Nombre de zap requests créés
   • Taux de confirmation des zaps
   • Temps moyen entre zap request et receipt

4. Utilisateurs

   • Nombre d'utilisateurs connectés
   • Profils chargés avec succès

Points d'amélioration

1. Gestion des zaps

   • Implémentation complète du flux Lightning avec intégration wallet
   • Webhooks pour les confirmations de zap
   • Interface de paiement intégrée (LNURL, Lightning Address)

2. Sécurité

   • Vérification des signatures des zap receipts
   • Validation stricte des événements reçus
   • Gestion des erreurs de déchiffrement

3. Performance

   • Mise en cache des articles chargés
   • Pagination pour les grandes listes
   • Indexation des articles par tags

4. UX

   • Feedback visuel pendant le traitement des zaps
   • Gestion des états de chargement
   • Messages d'erreur plus explicites

Tests recommandés

1. Tests unitaires

   • Parsing d'événements en articles
   • Déchiffrement de messages privés
   • Création de zap requests

2. Tests d'intégration

   • Flux complet de connexion NostrConnect
   • Flux complet de déblocage d'article
   • Gestion des erreurs réseau

3. Tests end-to-end

   • Scénario utilisateur complet (connexion → aperçu → paiement → contenu)