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.

Author

Sergen Uysal

Implantar aplicativo

Ver Repositório

Framework/Biblioteca de Frontend:

Reagir

Idioma:

TypeScript

Servidor de ferramentas de compilação/desenvolvimento:

Next.js

Pré-visualização do aplicativo de exemplo

Visão geral

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.

Arquitetura

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

Cada pedido de API é envolvido por x402, 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.

Recursos

Ligação da carteira através do ConnectKit (MetaMask, Coinbase Smart Wallet, etc.)
Autenticação SIWE para receber um JWT de sessão
FaucetTestnet na Base — os créditos são adquiridos automaticamente com testnet sempre que necessário
Multi-Chain RPC/REST Execution across Ethereum, Base Sepolia, Arbitrum, Polygon, and Aptos
Inspeção dos metadados de pagamento incluída em cada resposta
JSON-RPC, REST, gRPC-Web, and WebSocket method support

Supported Methods

Uma vez que todos os métodos JSON-RPC, REST, gRPC e WebSocket são suportados, pode chamar qualquer método disponível na rede de destino. A título de demonstração, a aplicação inclui botões para os métodos mais comuns:

Método	Protocolo	Rede
`eth_blockNumber`	JSON-RPC	Base , Arbitrum, Polygon
`eth_gasPrice`	JSON-RPC	Base Sepolia
`eth_chainId`	JSON-RPC	Ethereum
Informações sobre o livro-razão	REST	Aptos
Bloqueio por altura	REST	Aptos

Prerequisites

Node.js v18+
pnpm v8+
Uma carteira de navegador (por exemplo, MetaMask) com testnet Base testnet

Project Structure

src/
├── app/                  # Router da aplicação Next.js (páginas e layouts)
├── components/
│   ├── providers.tsx     # Provedores Wagmi + React Query + ConnectKit
│   └── wallet-connection-shell.tsx
├── hooks/
│   ├──x402.ts  # Estado de autenticação SIWE
│   ├── use-credits.ts    # Obtenção do saldo de créditos
│   └──x402.ts # Wrapper de recuperação autenticada
└── lib/
    ├── constants.ts      # x402 , IDs de cadeia, endereços de contrato
    ├── methods.ts        # Definições dos métodos RPC/REST disponíveis
    ├── types.ts          # Tipos do TypeScript
    └── x402.ts           # x402 central x402 (autenticação, créditos, execução)

Environment Variables

Variável	Padrão	Descrição
`NEXT_PUBLIC_X402_BASE_URL`	`https://x402.quicknode.com/`	URL base x402

Criar um .env.local ficheiro a substituir, mas o predefinido aponta para oendpoint público x402 ,endpoint pode utilizar para testes sem qualquer configuração.

NEXT_PUBLIC_X402_BASE_URL=quicknode

Primeiro passos

1. Clone the repository

git clone https://github.com/quiknode-labs/qn-guide-examples.git
cdquicknode

2. Install dependencies

pnpm instalar

3. Start the development server

pnpm dev

Aceda a http://localhost:3000 no seu navegador. Ligue a sua carteira, autentique-se com o SIWE, solicite testnet através do «faucet» e comece a efetuar chamadas à API com pagamento por pedido — os créditos são adquiridos automaticamente com testnet seu testnet sempre que necessário.