Gate402 - Web3 API Payment Gateway

Built for Mantle X402 Hackathon

Gate402 is a Web3-native payment gateway that enables developers to monetize their APIs with instant, permissionless cryptocurrency payments. Set a price, share a gateway URL, and get paid per API call—no traditional payment infrastructure required.

🚀 What is Gate402?

Gate402 transforms any HTTP API into a monetizable service through blockchain-powered micropayments. Whether you're serving AI models, weather data, market analytics, or custom tools, Gate402 provides a simple gateway that sits in front of your API and handles payments automatically.

Key Features

• 🔐 Permissionless Monetization - No need for payment processors, bank accounts, or complex integrations
• ⚡ Instant Settlements - Payments are settled on-chain in real-time using the x402 protocol
• 💰 Micropayments - Support for payments as low as $0.001 per request
• 🛡️ Gateway Protection - Your API is only accessible after payment verification
• 📊 Analytics Dashboard - Track requests, revenue, and gateway performance
• 🎯 Flexible Pricing - Set custom prices per API call or use preset options
• 🔗 Multi-Chain Support - Built on Mantle with support for multiple blockchain networks
• 🎨 Beautiful UI/UX - Modern, responsive interface with dark mode and smooth animations

🏗️ Architecture

Client Request → Gate402 Gateway → Payment Verification (x402) → Your API → Response

1. You have an API - Any HTTP endpoint you want to monetize
2. Create a Gateway - Get a unique gateway URL (e.g., https://yourapp.gate402.xyz)
3. Set a Price - Choose how much to charge per request
4. Share the URL - AI agents and developers use your gateway URL; payments happen automatically

🛠️ Tech Stack

Frontend

• React 19 - Latest React with concurrent features
• TypeScript - Type-safe development
• Vite - Lightning-fast build tool and dev server
• React Router - Client-side routing

Web3 Integration

• Wagmi - React hooks for Ethereum
• Viem - TypeScript interface for Ethereum
• RainbowKit - Wallet connection UI
• SIWE - Sign-In with Ethereum authentication

UI/UX

• Tailwind CSS 4 - Utility-first styling
• Radix UI - Accessible component primitives
• Framer Motion - Smooth animations and transitions
• GSAP - Advanced animation library
• Lenis - Smooth scroll implementation
• Lucide React - Beautiful icon set

Data & State Management

• TanStack Query - Server state management
• Axios - HTTP client
• React Table - Data table component

Additional Libraries

• Recharts - Chart visualizations
• Sonner - Toast notifications
• React Helmet Async - SEO metadata management
• React Syntax Highlighter - Code display
• next-themes - Theme management

📦 Installation

Prerequisites

• Node.js 18+
• npm or yarn
• A Web3 wallet (MetaMask, WalletConnect, etc.)

Setup

# Clone the repository
git clone https://github.com/gate402/mantle-hackathon-ui.git
cd mantle-hackathon-ui

# Install dependencies
npm install

# Start development server
npm run dev

The application will be available at http://localhost:5173

🚀 Available Scripts

# Development
npm run dev          # Start Vite dev server with HMR

# Production
npm run build        # Type-check and build for production
npm run preview      # Preview production build locally

# Code Quality
npm run lint         # Run ESLint

🌐 Environment Configuration

Create a .env file in the root directory with the following variables:

# API Configuration
VITE_API_BASE_URL=your_backend_api_url

🎯 Usage

For API Providers

1. Connect Wallet - Use RainbowKit to connect your Web3 wallet
2. Create Gateway - Click "Create Gateway" and configure:
   • Gateway name and description
   • Your API endpoint URL
   • Price per request
   • Supported payment tokens
3. Get Gateway URL - Receive your unique gateway URL
4. Share & Earn - Share the URL with developers; earn automatically

For API Consumers

1. Connect Wallet - Connect your Web3 wallet
2. Access Gateway - Make requests to the gateway URL
3. Automatic Payment - Payment is processed via x402 protocol
4. Receive Response - Get your API response after payment confirmation

📊 Project Structure

src/
├── components/          # React components
│   ├── landing/        # Landing page components
│   ├── Header.tsx      # Navigation header
│   └── ...
├── pages/              # Route pages
│   ├── SuccessGateway.tsx
│   └── ...
├── context/            # React context providers
├── hooks/              # Custom React hooks
├── lib/                # Utility libraries
├── types/              # TypeScript type definitions
├── config/             # Configuration files
│   └── seoDefaults.ts
├── wagmi.ts            # Wagmi configuration
├── App.tsx             # Main app component
└── main.tsx            # Application entry point

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License.

👥 Team

Built with ❤️ by the Gate402 team for the Mantle X402 Hackathon.

---

Note: This project is currently in active development as part of the Mantle X402 Hackathon. Features and documentation are subject to change.