x402 Explorer

Une application d'exemple illustrant le protocole x402 de Quicknode pour un accès à une API blockchain en paiement à la requête. Connectez votre portefeuille, authentifiez-vous via SIWE, puis appelez des méthodes RPC/REST sur plusieurs chaînes à l'aide de signatures de paiement EVM.

Déployer l'application

Consulter le dépôt

Framework/bibliothèque front-end :

Réagir

Langue :

TypeScript

Outil de compilation/serveur de développement :

Next.js

Aperçu

Cette application d'exemple illustre le protocole x402 de Quicknode, qui permet un accès à une API blockchain avec facturation à la requête. Le protocole x402 permet d'effectuer des micropaiements de manière transparente pour les appels d'API : chaque requête est réglée à l'aide d'une signature EVM, ce qui rend superflus les clés API traditionnelles ou les formules d'abonnement.

Connectez votre portefeuille, authentifiez-vous via « Sign-In with Ethereum » (SIWE), puis demandez des USDC du testnet via le « faucet ». Lorsque vous exécutez des méthodes blockchain, si vous ne disposez pas de crédits suffisants, l'application achètera automatiquement des crédits de test en utilisant vos USDC du testnet. Exécutez des méthodes RPC/REST sur plusieurs réseaux, notamment Ethereum, Base Sepolia, Arbitrum, Polygon et Aptos.

Architecture

Portefeuille ──► Authentification SIWE ──► Jeton JWT
                            │
                            ▼
              Wrapper x402 Fetch (JWT + signature de paiement EVM)
                            │
                            ▼
              API Quicknode x402 ──► RPC / REST de la blockchain

Chaque requête API est encapsulée par @x402/fetch, qui signe automatiquement une autorisation de paiement à l'aide de votre portefeuille connecté. Le backend x402 vérifie la signature, déduit les crédits et transmet la requête au réseau blockchain cible.

Fonctionnalités

Connexion d'un portefeuille via ConnectKit (MetaMask, Coinbase Smart Wallet, etc.)
Authentification SIWE pour obtenir un JWT de session
Faucet USDC du testnet sur Base Sepolia — les crédits sont automatiquement achetés avec des USDC du testnet lorsque cela est nécessaire
Exécution RPC/REST multi-chaînes sur Ethereum, Base Sepolia, Arbitrum, Polygon et Aptos
Les métadonnées relatives au paiement sont fournies avec chaque réponse
Prise en charge des méthodes JSON-RPC, REST, gRPC-Web et WebSocket

Méthodes prises en charge

Comme toutes les méthodes JSON-RPC, REST, gRPC-Web et WebSocket sont prises en charge, vous pouvez appeler n'importe quelle méthode disponible sur le réseau cible. À titre d'exemple, l'application comprend des boutons correspondant aux méthodes les plus courantes :

Méthode	Protocole	Réseau
`eth_blockNumber`	JSON-RPC	Base : Sepolia, Arbitrum, Polygon
`eth_gasPrice`	JSON-RPC	Base Sepolia
`eth_chainId`	JSON-RPC	Ethereum
Informations sur le grand livre	REST	Aptos
Trier par hauteur	REST	Aptos

Prérequis

Node.js v18 et versions ultérieures
pnpm v8+
Un portefeuille intégré au navigateur (par exemple, MetaMask) sur lequel le testnet Base Sepolia est configuré

Structure du projet

src/
├── app/                  # Routeur de l'application Next.js (pages et mises en page)
├── components/
│   ├── providers.tsx     # Fournisseurs Wagmi + React Query + ConnectKit
│   └── wallet-connection-shell.tsx
├── hooks/
│   ├── use-x402-auth.ts  # État d’authentification SIWE
│   ├── use-credits.ts    # Récupération du solde de crédits
│   └── use-x402-fetch.ts # Wrapper de récupération authentifiée
└── lib/
    ├── constants.ts      # URL x402, identifiants de chaîne, adresses de contrat
    ├── methods.ts        # Définitions des méthodes RPC/REST disponibles
    ├── types.ts          # Types TypeScript
    └── x402.ts           # Logique principale de x402 (authentification, crédits, exécution)

Variables d'environnement

Variable	Par défaut	Description
`NEXT_PUBLIC_X402_BASE_URL`	`https://x402.quicknode.com/`	URL de base de l'API x402

Créer un .env.local fichier à remplacer, mais le fichier par défaut pointe vers le point de terminaison public x402, que vous pouvez utiliser à des fins de test sans aucune configuration.

NEXT_PUBLIC_X402_BASE_URL=https://x402.quicknode.com/

Démarrer

1. Cloner le dépôt

git clone https://github.com/quiknode-labs/qn-guide-examples.git
cd qn-guide-examples/sample-dapps/x402-quicknode

2. Installer les dépendances

pnpm installer

3. Démarrer le serveur de développement

pnpm dev

Ouvrez http://localhost:3000 dans votre navigateur. Connectez votre portefeuille, authentifiez-vous via SIWE, demandez des USDC du testnet via le « faucet », puis commencez à effectuer des appels API facturés à la demande — les crédits sont automatiquement achetés avec vos USDC du testnet lorsque cela est nécessaire.