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` :

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

### Installation

```bash
npm install
```

### Développement

```bash
npm run dev
```

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

### Build de production

```bash
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)