x402 Explorer

A sample app demonstrating Quicknode's x402 protocol for pay-per-request blockchain API access. Connect your wallet, authenticate with SIWE, and call RPC/REST methods across multiple chains with EVM payment signatures.

アプリをデプロイする

リポジトリを表示

フロントエンドフレームワーク／ライブラリ：

React

言語：

TypeScript

ビルドツール／開発サーバー：

Next.js

概要

This sample app demonstrates Quicknode's x402 protocol for pay-per-request blockchain API access. The x402 protocol enables seamless micropayments for API calls — each request is paid for with an EVM signature, removing the need for traditional API keys or subscription plans.

Connect your wallet, authenticate with Sign-In with Ethereum (SIWE), and request testnet USDC from the faucet. When you execute blockchain methods, if you don't have enough credits, the app will automatically purchase test credits using your testnet USDC. Execute RPC/REST methods across multiple networks including Ethereum, Base Sepolia, Arbitrum, Polygon, and Aptos.

建築

Wallet ──► SIWE Auth ──► JWT Token
                            │
                            ▼
              x402 Fetch Wrapper (JWT + EVM payment signature)
                            │
                            ▼
              Quicknode x402 API ──► Blockchain RPC / REST

Each API request is wrapped by @x402/fetch, which automatically signs a payment authorization using your connected wallet. The x402 backend verifies the signature, deducts credits, and proxies the request to the target blockchain network.

特長

Wallet Connection via ConnectKit (MetaMask, Coinbase Smart Wallet, etc.)
SIWE Authentication to receive a session JWT
Testnet USDC Faucet on Base Sepolia — credits are automatically purchased with testnet USDC when needed
Multi-Chain RPC/REST Execution across Ethereum, Base Sepolia, Arbitrum, Polygon, and Aptos
Payment Metadata Inspection returned with each response
JSON-RPC, REST, gRPC-Web, and WebSocket method support

Supported Methods

As all JSON-RPC, REST, gRPC-Web, and WebSocket methods are supported, you can call any method available on the target network. For demonstration, the app includes buttons for popular methods:

方法	プロトコル	ネットワーク
`eth_blockNumber`	JSON-RPC	Base Sepolia, Arbitrum, Polygon
`eth_gasPrice`	JSON-RPC	ベース・セポリア
`eth_chainId`	JSON-RPC	イーサリアム
Ledger Info	REST	アプトス
Block by Height	REST	アプトス

前提条件

Node.js v18+
pnpm v8+
A browser wallet (e.g., MetaMask) with Base Sepolia testnet configured

プロジェクトの構成

src/
├── app/                  # Next.js App Router (pages & layouts)
├── components/
│   ├── providers.tsx     # Wagmi + React Query + ConnectKit providers
│   └── wallet-connection-shell.tsx
├── hooks/
│   ├── use-x402-auth.ts  # SIWE authentication state
│   ├── use-credits.ts    # Credit balance fetching
│   └── use-x402-fetch.ts # Authenticated fetch wrapper
└── lib/
    ├── constants.ts      # x402 URLs, chain IDs, contract addresses
    ├── methods.ts        # Available RPC/REST method definitions
    ├── types.ts          # TypeScript types
    └── x402.ts           # Core x402 logic (auth, credits, execution)

環境変数

Variable	デフォルト	説明
`NEXT_PUBLIC_X402_BASE_URL`	`https://x402.quicknode.com/`	x402 API base URL

[作成] .env.local file to override, but the default points to the public x402 endpoint which you can use for testing without any setup.

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

はじめに

1. リポジトリをクローンする

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

2. 依存関係をインストールする

pnpm install

3. Start the development server

pnpm dev

Open http://localhost:3000 in your browser. Connect your wallet, authenticate with SIWE, request testnet USDC from the faucet, and start making pay-per-request API calls — credits are automatically purchased with your testnet USDC when needed.