X402 Service Bazaar

A web application for discovering and browsing X402 protocol services from the Coinbase Developer Platform. This app fetches X402 services via the discovery API, stores them in a Supabase database, and provides an intuitive interface for filtering and exploring available services.

Features

• Service Discovery: Fetch X402 services from the Coinbase API via a serverless edge function
• Database Storage: Persist services in Supabase for fast querying and offline access
• Advanced Filtering: Filter services by category, network, and search terms
• Service Details: View detailed information about each service including:
  • Resource URL and description
  • Accepted payment assets and amounts
  • Network information
  • Supported HTTP methods
  • Input/output schemas
  • Custom metadata

Tech Stack

• Frontend: React 18 + TypeScript + Vite
• Styling: Tailwind CSS
• Icons: Lucide React
• Database: Supabase (PostgreSQL)
• API Proxy: Supabase Edge Functions (Deno)

Architecture

Frontend (src/)

• App.tsx - Main application component with filtering and service management
• components/ServiceCard.tsx - Card display for individual services
• components/ServiceDetailsModal.tsx - Modal for detailed service information
• services/x402Service.ts - Business logic for fetching and syncing services
• lib/supabase.ts - Supabase client configuration

Backend

• supabase/functions/fetch-x402-services/ - Edge function to proxy Coinbase API requests (bypasses CORS)
• supabase/migrations/ - Database schema with RLS policies

Database Schema

Table: x402_services

• id - UUID primary key
• resource_url - Unique service URL
• name - Service name
• description - Service description
• category - Service category (nft, tokens, wallet, data, defi, general)
• accepted_assets - JSON array of accepted payment assets
• max_payment_amount - Maximum payment amount
• payment_timeout - Payment timeout in seconds
• network - Blockchain network (e.g., base)
• supported_methods - Array of HTTP methods
• input_schema - JSON schema for inputs
• output_schema - JSON schema for outputs
• metadata - Additional service metadata
• last_synced_at - Last sync timestamp
• created_at - Creation timestamp
• updated_at - Update timestamp

Setup

1. Environment variables are pre-configured in .env

2. Install dependencies:

   npm install
   

3. Start development server:

   npm run dev
   

4. Build for production:

   npm run build
   

Usage

1. Sync Services: Click "Sync Services" to fetch the latest X402 services from the Coinbase API
2. Search: Use the search bar to filter services by name or description
3. Filter by Category: Select a category (NFT, Tokens, Wallet, Data, DeFi, General)
4. Filter by Network: Filter services by blockchain network
5. View Details: Click on any service card to see detailed information

Security

• Row Level Security (RLS) enabled on all database tables
• Public read access for service data
• Edge function handles API authentication securely
• No API keys exposed to the frontend

License

MIT