Skip to main content

Frontend Application

Next.js application demonstrating x402 FHE payments.

Overview​

The frontend provides:

  • Wallet connection with RainbowKit
  • ERC7984 token operations
  • x402 payment flow integration
  • Balance encryption/decryption UI

Project Structure​

x402-zama-example/
├── app/
│   ├── page.tsx              # Main page
│   ├── layout.tsx            # App layout
│   ├── _components/
│   │   └── ERC7984Demo.tsx   # Demo component
│   └── api/
│       ├── facilitator/      # Facilitator proxy
│       └── premium-data/     # Protected resource
├── hooks/
│   ├── erc7984/
│   │   └── useERC7984Wagmi.tsx  # Token hook
│   └── x402/
│       └── useX402Payment.tsx   # Payment hook
├── lib/
│   └── x402-fhe/
│       ├── types.ts          # Type definitions
│       ├── client.ts         # Client utilities
│       └── middleware.ts     # Server middleware
└── components/
    └── DappWrapperWithProviders.tsx

Running​

Development​

cd packages/x402-zama-example
pnpm dev

Opens at http://localhost:3000.

Production​

pnpm build
pnpm start

Key Hooks​

useERC7984Wagmi​

Manages ERC7984 token operations:

const {
  handle,              // Encrypted balance handle
  clear,               // Decrypted balance
  isDecrypted,
  refreshBalanceHandle,
  decryptBalanceHandle,
  transferTokens,
  canTransfer,
  isProcessing,
} = useERC7984Wagmi({ instance });

useX402Payment​

Handles x402 payment flow:

const {
  fetchWithPayment,
  reset,
  state,
  isReady,
} = useX402Payment({ instance });

// Usage
const result = await fetchWithPayment('/api/premium-data', 1000000);

API Routes​

/api/premium-data​

Protected resource requiring payment:

  • Without payment: Returns 402 with requirements
  • With payment: Returns premium content

/api/facilitator/verify​

Proxies requests to facilitator service.

/api/facilitator/supported​

Returns supported tokens and networks.

State Management​

Payment state machine:

idle -> requesting -> payment_required -> signing ->
transferring -> verifying -> success/error

Styling​

  • Tailwind CSS 4
  • DaisyUI 5
  • Dark theme default