x402 Explorer

Eine Beispiel-App, die das „ x402 “-Protokoll von Quicknode für den Blockchain-API-Zugriff nach dem Pay-per-Request-Prinzip demonstriert. Verbinden Sie Ihre Wallet, authentifizieren Sie sich bei SIWE und rufen Sie RPC-/REST-Methoden über mehrere Blockchains hinweg mit EVM-Zahlungssignaturen auf.

Autor

Sergen Uysal

App bereitstellen

Repo anzeigen

Frontend-Framework/Bibliothek:

Reagieren

Sprache:

TypeScript

Build-Tool/Entwicklungsserver:

Next.js

Übersicht

Diese Beispiel-App veranschaulicht das „ x402 “-Protokoll vonQuicknode für den Blockchain-API-Zugriff auf Pay-per-Request-Basis. Das „x402 “-Protokoll ermöglicht nahtlose Mikrozahlungen für API-Aufrufe – jede Anfrage wird mit einer EVM-Signatur bezahlt, wodurch herkömmliche API-Schlüssel oder Abonnementmodelle überflüssig werden.

Verbinden Sie Ihre Wallet, authentifizieren Sie sich über „Sign-In with Ethereum “ (SIWE) und fordern Sie „ testnet “-USDC vom Faucet an. Wenn Sie Blockchain-Methoden ausführen und nicht über genügend Credits verfügen, kauft die App automatisch Test-Credits mit Ihrem „ testnet “-USDC. Führen Sie RPC-/REST-Methoden in mehreren Netzwerken aus, darunter Ethereum, Base (Sepolia), Arbitrum, Polygon und Aptos.

Architektur

Wallet ──► SIWE-Authentifizierung ──► JWT-Token
                            │
                            ▼
             x402  Fetch-Wrapper (JWT + EVM-Zahlungssignatur)
                            │
                            ▼
             Quicknode  x402  API ──► Blockchain-RPC / REST

Jede API-Anfrage wird von @x402/fetch, das eine Zahlungsautorisierung automatisch über Ihre verbundene Wallet signiert. Das Backend von „ x402 “ überprüft die Signatur, zieht das Guthaben ab und leitet die Anfrage an das Ziel-Blockchain-Netzwerk weiter.

Funktionen

Verbindung mit einer Wallet über ConnectKit (MetaMask, Coinbase Smart Wallet usw.)
SIWE-Authentifizierung zum Erhalt eines Sitzungs-JWT
Testnet USDC-Faucet auf Base Sepolia – Guthaben wird bei Bedarf automatisch mit testnet USDC erworben
Multi-Chain-RPC/REST-Ausführung über Ethereum, Base Sepolia, Arbitrum, Polygon und Aptos
Mit jeder Antwort werden Metadaten zur Zahlungsprüfung zurückgegeben
Unterstützung für JSON-RPC, REST, „ gRPC-Web“ und WebSocket

Unterstützte Methoden

Da alle JSON-RPC-, REST-, „ gRPC “-Web- und WebSocket-Methoden unterstützt werden, können Sie jede im Zielnetzwerk verfügbare Methode aufrufen. Zur Veranschaulichung enthält die App Schaltflächen für gängige Methoden:

Verfahren	Protokoll	Netzwerk
`eth_blockNumber`	JSON-RPC	Base Sepolia, Arbitrum, Polygon
`eth_gasPrice`	JSON-RPC	Base
`eth_chainId`	JSON-RPC	Ethereum
Hauptbuch-Informationen	REST	Aptos
Nach Höhe gruppieren	REST	Aptos

Voraussetzungen

Node.js v18+
pnpm v8+
Eine Browser-Wallet (z. B. MetaMask), in der Base Sepolia testnet konfiguriert ist

Projektstruktur

src/
├── app/                  # Next.js-App-Router (Seiten und Layouts)
├── components/
│   ├── providers.tsx     # Wagmi + React Query + ConnectKit-Provider
│   └── wallet-connection-shell.tsx
├── hooks/
│   ├── use-x402-auth.ts  # SIWE-Authentifizierungsstatus
│   ├── use-credits.ts    # Abruf des Guthabens
│   └── use-x402-fetch.ts # Wrapper für das Abrufen nach Authentifizierung
└── lib/
    ├── constants.ts      # x402 -URLs, Chain-IDs, Vertragsadressen
    ├── methods.ts        # Definitionen der verfügbaren RPC-/REST-Methoden
    ├── types.ts          # TypeScript-Typen
    └── x402.ts           # Kernlogik von „ x402 “ (Authentifizierung, Credits, Ausführung)

Umgebungsvariablen

Variable	Standard	Beschreibung
`NEXT_PUBLIC_X402_BASE_URL`	`https://x402.quicknode.com/`	x402 API-Basis-URL

Erstellen Sie ein .env.local Datei, die überschrieben werden soll; standardmäßig wird jedoch auf die öffentliche Datei „ x402 “ unterendpoint verwiesen, die Sie ohne jegliche Einrichtung zu Testzwecken nutzen können.

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

Erste Schritte

1. Das Repository klonen

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

2. Abhängigkeiten installieren

pnpm installieren

3. Starten Sie den Entwicklungsserver

pnpm dev

Öffnen Sie http://localhost:3000 in Ihrem Browser. Verbinden Sie Ihre Wallet, authentifizieren Sie sich bei SIWE, fordern Sie testnet USDC vom Faucet an und beginnen Sie mit der Durchführung von API-Aufrufen auf Pay-per-Request-Basis – Credits werden bei Bedarf automatisch mit Ihrem testnet USDC erworben.