uratmangun

for kirodotdev

Posted on Nov 26

Building a Gasless Marketplace on Polygon with x402 Protocol

#ethereum #blockchain #tutorial #web3

Have you ever wanted to build a marketplace where users can buy and sell products using stablecoins without worrying about gas fees? In this article, I'll walk you through how I built Polygon x402 Marketplace, a gasless peer-to-peer marketplace using the x402 protocol on Polygon Amoy.

The Problem

Traditional blockchain marketplaces have a major UX problem: users need to hold native tokens (like MATIC) just to pay for gas fees. This creates friction because:

New users need to acquire native tokens from exchanges first
Users must manage multiple token balances
Gas prices fluctuate, making transaction costs unpredictable

The Solution: x402 Protocol

The x402 protocol enables gasless USDC transfers by using EIP-712 signatures and a facilitator network. Users only need USDC in their wallet to participate in the marketplace - no native tokens required!

Tech Stack

Frontend: Next.js 16, React 19, TailwindCSS 4
Web3: RainbowKit, wagmi, viem, x402-axios
Database: PostgreSQL with Drizzle ORM
Blockchain: Polygon Amoy (Testnet), USDC Token
Protocol: x402 Protocol with PayAI Facilitator

Key Features

Gasless USDC Payments

The marketplace uses the x402 protocol to handle payments. When a user makes a purchase, the payment flow works like this:

User clicks "Buy Now"
The API returns a 402 Payment Required response with payment requirements
x402-axios intercepts this and prompts the user to sign an EIP-712 message
The signed payment is sent to the PayAI facilitator for verification and settlement
The transaction is executed on-chain without the user paying gas

Product Listings

Sellers can list items with title, description, price, stock quantity, and images. The marketplace supports:

Creating new listings
Editing existing products
Automatic stock management after purchases
Comments on product listings

Wallet Integration

RainbowKit provides seamless wallet connection supporting MetaMask, WalletConnect, and more. The app automatically handles chain switching to Polygon Amoy.

Implementation Highlights

The Facilitator Proxy

One of the challenges was building a local facilitator proxy that correctly forwards requests to PayAI while maintaining proper CORS headers:

const paymentRequirements = {
  scheme: "exact",
  network: "polygon-amoy",
  maxAmountRequired: atomicAmount,
  payTo: recipientAddress,
  asset: USDC_ADDRESS,
  extra: {
    name: "USDC",
    version: "2",
  },
};

Using x402-axios

The x402-axios library makes it easy to handle the payment flow:

const axiosInstance = withPaymentInterceptor(
  axios.create(),
  walletClient
);

const response = await axiosInstance.post("/api/usdc-pay", {
  to: recipient,
  amount: amount,
});

Live Demo

Check out the live marketplace at: https://polygon-x402.vercel.app/

GitHub Repository: https://github.com/uratmangun/polygon-x402

What's Next

Deploy to Polygon Mainnet
Add order history and transaction tracking
Implement seller profiles with ratings
Support multiple stablecoins (USDT, DAI)
Mobile optimization with PWA features

How We Used Kiro in This Project

This project leverages Kiro's steering rules and MCP (Model Context Protocol) configuration to maintain consistent development practices. The .kiro folder contains:

Steering Rules

Kiro steering rules are markdown files that guide AI assistants during development:

Shell Preferences (shell-preferences.md): Enforces fish shell syntax for all terminal commands, ensuring consistent command execution across the project.
No Auto Start Dev Server (no auto start dev server.md): Prevents AI assistants from automatically starting development servers, giving developers control over resource usage.
UI Color Preferences (ui color prefer non purple primary.md): Establishes cyan/blue as primary colors instead of purple, maintaining consistent visual identity.
Package Manager Standards (use pnpm with yarn fallback for nodejs dependency manager.md): Mandates pnpm as the primary package manager with yarn as fallback, ensuring efficient disk usage and consistent dependency resolution.

MCP Configuration

The .kiro/settings/mcp.json configures Model Context Protocol servers:

chrome-devtools: Enables browser automation for testing and debugging
context7: Provides enhanced context awareness
next-devtools: Integrates Next.js-specific development tools

These Kiro configurations ensure that any AI assistant working on this project follows the same conventions, making collaboration smoother and code more consistent.

If you're interested in building gasless dApps, I highly recommend exploring the x402 protocol. It's a game-changer for blockchain UX!

Happy coding! 🚀

DEV Community