Cryptoon

Web3 manga/webtoon reader with zero-commission payments for creators, powered by Coinbase AgentKit

Problem Statement

Traditional webtoon/manga platforms take 30-50% commission from creators. Small creators struggle with:

High platform fees eating into revenue
No control over pricing
Delayed payments (30-90 days)
Geographic payment restrictions

Our Solution

Cryptoon is a Web3 manga/webtoon reader designed for the community and creators:

Free to read - First chapters are completely free for everyone
Support your favorite artists - Latest chapter requires payment (0.01 USDC)
Zero commission - Creators keep 100% of revenue
Instant settlement - Payments arrive in seconds, not months
Global access - No geographic restrictions with USDC
Autonomous payments - AgentKit auto-purchases new chapters
Transparent - All transactions verifiable on-chain

Not a marketplace - We're a reader platform focused on supporting artists without privatizing content. Read for free, pay to support!

Quick Start

1. Clone the Repository

git clone https://github.com/hallzyx/x402-demo.git
cd x402-demo/cryptoon

2. Install Dependencies

# Install all dependencies (root, server, and client)
npm run setup

# Or manually:
cd server && npm install
cd ../client && npm install
cd ..

3. Configure Environment Variables

Server Configuration

cd server
cp .env.example .env

Edit server/.env with your CDP credentials:

# Receiver wallet for payments
RECEIVER_WALLET=0xYourWalletAddress

# CDP API Credentials (from https://portal.cdp.coinbase.com/)
CDP_API_KEY_ID=your-uuid-key-id
CDP_API_KEY_SECRET=your-base64-secret

# CDP Wallet Secret (PEM format)
CDP_WALLET_SECRET="-----BEGIN EC PRIVATE KEY-----\nYourPrivateKey\n-----END EC PRIVATE KEY-----"

# Server port (optional)
PORT=3001

Client Configuration (Optional)

cd client
cp .env.example .env.local

Edit client/.env.local if needed:

NEXT_PUBLIC_CDP_PROJECT_ID=your-cdp-project-id
NEXT_PUBLIC_API_URL=http://localhost:3001
NEXT_PUBLIC_NETWORK=base-sepolia
NEXT_PUBLIC_CHAIN_ID=84532

4. Start the Application

Option A: Start Both Servers Together

# From project root
npm run dev

This will start:

Backend server: http://localhost:3001
Frontend client: http://localhost:3000

Option B: Start Servers Separately

# Terminal 1: Start backend
cd server
npm run dev

# Terminal 2: Start frontend
cd client
npm run dev

5. Verify Installation

Run the readiness check script:

./check-readiness.sh

Expected output:

✅ Node.js version check passed
✅ npm version check passed
✅ Dependencies installed
✅ Environment files configured
✅ Security checks passed

ALL CHECKS PASSED! You're ready to go.

6. Access the Application

Open your browser and navigate to:

Frontend: http://localhost:3000
Admin Dashboard: http://localhost:3000/admin
API Health Check: http://localhost:3001/health

Architecture

graph TD
    Reader[Reader<br/>Client]
    
    Reader -->|CDP Embedded Wallet<br/>Login| Auth{Authentication}
    
    Auth -->|Manual Payment| Manual[x402 Payment<br/>Manual]
    Auth -->|Automated| Agent[AgentKit<br/>Automated]
    
    Manual -->|402 Payment Required<br/>USDC Transfer| Backend
    Agent -->|Auto-purchase<br/>Scheduled checks| Backend
    
    Backend[Node.js Backend Server<br/>────────────────<br/>x402 Facilitator<br/>CDP Faucet API<br/>Token Balances<br/>Agent Wallet]
    
    Backend -->|Transaction| Blockchain[Base Sepolia<br/>Blockchain]
    
    Blockchain -->|Payment| Creator[Creator Wallet<br/>100% Revenue]
    
    style Reader fill:#e1f5ff
    style Manual fill:#fff4e6
    style Agent fill:#f3e5f5
    style Backend fill:#e8f5e9
    style Blockchain fill:#fce4ec
    style Creator fill:#fff9c4

Coinbase Developer Platform Products Used

Client-Side

CDP Embedded Wallet - Web2-friendly auth (no seed phrases, no extensions)
x402 Protocol - Seamless micropayments for content access

Server-Side

AgentKit (CDP SDK v2) - Autonomous agent for auto-purchasing chapters
CDP x402 Facilitator - Payment verification and settlement
CDP Faucet API - One-click testnet USDC distribution
CDP Token Balances API - Real-time wallet balance tracking
CDP Wallet Management - Programmatic wallet creation and transactions

Features

✅ Implemented & Functional

1. Web3 Authentication

CDP Embedded Wallet integration
Multiple auth methods (email, passkey, social)
No browser extension required

2. x402 Micropayments

Pay-per-chapter model (0.01 USDC)
HTTP 402 "Payment Required" protocol
Instant access after payment

3. AgentKit Auto-Purchase

Autonomous agent monitoring favorites
Auto-purchase new premium chapters
Monthly spending limits

4. AI Recommendations

n8n workflow integration with OpenAI
Personalized manga/webtoon suggestions
Webhook-triggered recommendations

AI recommendation system powered by n8n + OpenAI

Webhook configuration for real-time recommendations

5. AI Chat Assistant (x402-Powered)

Pay-per-query AI chat with manga characters
x402 payment for external n8n webhook API calls
Demonstrates x402 versatility:
- ✅ Backend APIs - Chapter access payments
- ✅ External Webhooks - n8n AI chat payments
- ✅ AgentKit - Autonomous chapter purchases

Why This Matters:
This feature showcases the full versatility of x402 protocol by implementing three distinct payment scenarios in one platform:

Traditional Backend - Direct server-to-server payments for content
External Services - Pay for third-party webhook/API calls (n8n)
Autonomous Agents - AgentKit handles payments automatically

Use Case: Readers can chat with their favorite manga characters (e.g., "Ask Chronos about time travel") for 0.01 USDC per message. Payment flows through x402 to cover the n8n + OpenAI API costs.

Documentation

ARCHITECTURE.md - Complete technical documentation, payment flows, and CDP integration details
CHECKLIST.md - Pre-hackathon verification checklist and testing guide
check-readiness.sh - Automated verification script

Implementation Status

Feature	Status
CDP Wallet Auth	✅ Functional
x402 Payments	✅ Functional
AgentKit Auto-Purchase	✅ Functional
Faucet System	✅ Functional
AI Recommendations (n8n + OpenAI)	✅ Functional
AI Chat Assistant (x402 + n8n)	✅ Functional

x402 Protocol Versatility

Cryptoon demonstrates three distinct use cases for x402 micropayments:

1. Backend Content Access

Use Case: Pay to unlock latest manga chapters
Flow: User → x402 → Backend API → Content
Price: 0.01 USDC per chapter

2. External Webhook Services

Use Case: AI Chat with manga characters (n8n + OpenAI)
Flow: User → x402 → n8n Webhook → OpenAI → Response
Price: 0.01 USDC per message
Why x402? Covers external API costs (n8n hosting + OpenAI tokens)

3. Autonomous Agent Payments

Use Case: AgentKit auto-purchases new chapters
Flow: Agent → x402 → Backend → Chapter unlocked
Price: 0.01 USDC per auto-purchase
Why x402? Agent can execute payments without user approval

Important Links

USDC Contract: 0x036CbD53842c5426634e7929541eC2318f3dCF7e
Network: Base Sepolia (Chain ID: 84532)
Explorer: https://sepolia.basescan.org/

Roadmap

Phase 1: Hackathon MVP ✅

CDP Wallet + x402 + AgentKit

Phase 2: Post-Hackathon

AI recommendations
Multi-creator support
IPFS integration

Phase 3: Production

Mainnet deployment
Database migration
Mobile app

License

MIT License

Built for creators. Powered by Coinbase. Zero commission. Forever.

Name		Name	Last commit message	Last commit date
Latest commit History 15 Commits
assets/img		assets/img
client		client
server		server
.gitignore		.gitignore
ARCHITECTURE.md		ARCHITECTURE.md
README.md		README.md
check-readiness.sh		check-readiness.sh
package-lock.json		package-lock.json
package.json		package.json
pdr.md		pdr.md
pdr.pdf		pdr.pdf

hallzyx/cryptoon

Folders and files

Latest commit

History

Repository files navigation