x402-mantle-sdk 0.2.3 → 0.2.6

package/README.md

@@ -1,31 +1,61 @@
-# @x402-devkit/sdk
+# x402-mantle-sdk
 
-> Complete SDK for monetizing APIs with HTTP 402 payments on Mantle Network
+Complete SDK for monetizing APIs with HTTP 402 payments on Mantle Network
 
-[![npm version](https://img.shields.io/npm/v/@x402-devkit/sdk)](https://www.npmjs.com/package/@x402-devkit/sdk)
+[![npm version](https://img.shields.io/npm/v/x402-mantle-sdk)](https://www.npmjs.com/package/x402-mantle-sdk)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Mantle Network](https://img.shields.io/badge/Network-Mantle-blue)](https://mantle.xyz)
 
-**@x402-devkit/sdk** enables developers to monetize APIs using HTTP 402 Payment Required status code with blockchain payments on Mantle Network. Protect your API routes, handle payments automatically, and track revenue—all with a few lines of code.
+**x402-mantle-sdk** enables developers to monetize APIs using HTTP 402 Payment Required status code with blockchain payments on Mantle Network. Protect your API routes, handle payments automatically, and track revenue—all with a few lines of code.
 
-## ✨ Features
+## Features
 
-- 🚀 **Zero-Configuration Setup** - Get started in minutes
-- 💰 **Automatic Payment Handling** - Seamless wallet integration
-- 📊 **Real-Time Analytics** - Track endpoint usage and revenue
-- 🔒 **Blockchain Verification** - On-chain payment validation
-- 🎨 **Beautiful UI Components** - Ready-to-use React payment modals
-- 🌐 **Multi-Token Support** - MNT, USDC, USDT, mETH, WMNT
-- ⚡ **Ultra-Low Fees** - Gas costs under $0.001 on Mantle
-- 🔄 **Auto Endpoint Tracking** - Endpoints appear in dashboard automatically
+- **Zero-Configuration Setup** - Get started in minutes
+- **Automatic Payment Handling** - Seamless wallet integration
+- **Real-Time Analytics** - Track endpoint usage and revenue
+- **Blockchain Verification** - On-chain payment validation
+- **UI Components** - Ready-to-use React payment modals
+- **Multi-Token Support** - MNT, USDC, USDT, mETH, WMNT
+- **Ultra-Low Fees** - Gas costs under $0.001 on Mantle
+- **Auto Endpoint Tracking** - Endpoints appear in dashboard automatically
 
-## 📦 Installation
+## Installation
 
 ```bash
-npm install @x402-devkit/sdk
+npm install x402-mantle-sdk
 ```
 
-## 🚀 Quick Start
+## Quick Start
+
+### Option 1: Use the CLI (Recommended)
+
+The fastest way to get started is using the `create-x402-app` CLI tool:
+
+```bash
+npx create-x402-app my-api
+cd my-api
+npm run dev
+```
+
+This creates a fully configured project with:
+- Example API routes (free and paid)
+- Wallet connection UI
+- Payment modal integration
+- TypeScript configuration
+
+The CLI provides 4 templates:
+- `backend-hono` - Standalone Hono API server
+- `backend-express` - Standalone Express API server
+- `fullstack-hono` - Next.js app with Hono API routes
+- `fullstack-express` - Next.js app with Express-style API routes
+
+### Option 2: Manual Installation
+
+If you prefer to set up manually:
+
+```bash
+npm install x402-mantle-sdk
+```
 
 ### 1. Create a Project
 
@@ -35,7 +65,7 @@ Visit the [x402 Dashboard](https://mantle-x402.vercel.app/dashboard) to create a
 
 ```typescript
 import { Hono } from 'hono'
-import { x402 } from '@x402-devkit/sdk/server'
+import { x402 } from 'x402-mantle-sdk/server'
 
 const app = new Hono()
 
@@ -57,23 +87,23 @@ app.get('/api/premium', (c) => {
 ### 3. Handle Payments on Client
 
 ```typescript
-import { x402Fetch } from '@x402-devkit/sdk/client'
+import { x402Fetch } from 'x402-mantle-sdk/client'
 
 // Automatically handles 402 responses with payment modal
 const response = await x402Fetch('https://api.example.com/api/premium')
 const data = await response.json()
 ```
 
-**That's it!** Your API now accepts blockchain payments. 🎉
+That's it! Your API now accepts blockchain payments.
 
-## 📖 Documentation
+## Documentation
 
 ### Server Usage
 
 #### Basic Middleware
 
 ```typescript
-import { x402 } from '@x402-devkit/sdk/server'
+import { x402 } from 'x402-mantle-sdk/server'
 
 app.use('/api/data', x402({
   price: '0.001',
@@ -110,7 +140,7 @@ X402_PLATFORM_URL=https://mantle-x402.vercel.app
 #### Automatic Payment Handling
 
 ```typescript
-import { x402Fetch } from '@x402-devkit/sdk/client'
+import { x402Fetch } from 'x402-mantle-sdk/client'
 
 // Automatically intercepts 402 responses and shows payment modal
 const response = await x402Fetch('https://api.example.com/api/premium')
@@ -120,14 +150,15 @@ const data = await response.json()
 #### Custom Client Configuration
 
 ```typescript
-import { x402Client } from '@x402-devkit/sdk/client'
+import { X402Client } from 'x402-mantle-sdk/client'
 
-const client = x402Client({
+const client = new X402Client({
   autoRetry: true,
   autoSwitchNetwork: true,
   testnet: false
 })
 
+await client.initialize()
 const response = await client.fetch('https://api.example.com/api/premium')
 ```
 
@@ -136,7 +167,7 @@ const response = await client.fetch('https://api.example.com/api/premium')
 #### Basic Payment Modal
 
 ```tsx
-import { PaymentModal } from '@x402-devkit/sdk/client/react'
+import { PaymentModal } from 'x402-mantle-sdk/client/react'
 
 function App() {
   const [isOpen, setIsOpen] = useState(false)
@@ -159,7 +190,7 @@ function App() {
 #### Enhanced Payment Modal
 
 ```tsx
-import { EnhancedPaymentModal } from '@x402-devkit/sdk/client/react'
+import { EnhancedPaymentModal } from 'x402-mantle-sdk/client/react'
 
 function App() {
   const [isOpen, setIsOpen] = useState(false)
@@ -189,14 +220,14 @@ function App() {
 }
 ```
 
-## 🌐 Supported Networks
+## Supported Networks
 
 | Network | Chain ID | Status | Tokens |
 |---------|----------|--------|--------|
-| Mantle Mainnet | 5000 | ✅ Production | MNT, USDC, USDT, mETH, WMNT |
-| Mantle Sepolia | 5003 | ✅ Testnet | MNT, USDC, mETH, WMNT |
+| Mantle Mainnet | 5000 | Production | MNT, USDC, USDT, mETH, WMNT |
+| Mantle Sepolia | 5003 | Testnet | MNT, USDC, mETH, WMNT |
 
-## 💡 Use Cases
+## Use Cases
 
 - **AI & LLM APIs** - Charge per token, per request, or per compute second
 - **Data APIs** - Monetize datasets, market data, or proprietary information
@@ -204,7 +235,7 @@ function App() {
 - **Premium Content** - Articles, research, analysis with micropayments
 - **IoT & Sensors** - Sell real-time sensor data with pay-per-read
 
-## 📊 Dashboard & Analytics
+## Dashboard & Analytics
 
 All endpoints are automatically tracked in the [x402 Dashboard](https://mantle-x402.vercel.app/dashboard):
 
@@ -213,7 +244,7 @@ All endpoints are automatically tracked in the [x402 Dashboard](https://mantle-x
 - **Revenue Analytics** - Track earnings per endpoint
 - **Usage Statistics** - Monitor API usage patterns
 
-## 🔧 API Reference
+## API Reference
 
 ### Server Exports
 
@@ -221,10 +252,13 @@ All endpoints are automatically tracked in the [x402 Dashboard](https://mantle-x
 import {
   // Main middleware
   x402,
+  x402Express,
+  processPaymentMiddleware,
   
   // Payment verification
   verifyPayment,
   verifyPaymentOnChain,
+  extractPaymentReceipt,
   
   // Network utilities
   getNetworkConfig,
@@ -232,14 +266,11 @@ import {
   registerCustomNetwork,
   registerCustomTokens,
   
-  // Analytics
-  logPayment,
-  registerEndpoint,
-  
   // Platform
   initializePlatform,
   getProjectConfig,
-} from '@x402-devkit/sdk/server'
+  clearCache,
+} from 'x402-mantle-sdk/server'
 ```
 
 ### Client Exports
@@ -248,7 +279,7 @@ import {
 import {
   // Fetch with 402 handling
   x402Fetch,
-  x402Client,
+  X402Client,
   
   // Wallet utilities
   connectWallet,
@@ -258,10 +289,13 @@ import {
   // Payment processing
   processPayment,
   
+  // Payment modal
+  createVanillaPaymentModal,
+  
   // Constants
   TREASURY_ADDRESS,
   PLATFORM_FEE_BPS,
-} from '@x402-devkit/sdk/client'
+} from 'x402-mantle-sdk/client'
 ```
 
 ### React Exports
@@ -270,56 +304,61 @@ import {
 import {
   PaymentModal,          // Basic payment modal
   EnhancedPaymentModal,  // Enhanced modal with success states
-} from '@x402-devkit/sdk/client/react'
+} from 'x402-mantle-sdk/client/react'
 ```
 
-## 🏗️ Architecture
+## Architecture
 
 ```
-@x402-devkit/sdk
+x402-mantle-sdk
 ├── /server          # Server middleware (Hono, Express-compatible)
 ├── /client          # Client SDK (fetch, wallet integration)
 └── /client/react    # React components (payment modals)
 ```
 
-## 🔐 Security
+## Related Packages
+
+- **x402-mantle-sdk** - Core SDK package (this package)
+- **create-x402-app** - CLI tool for scaffolding projects
+  - Install: `npx create-x402-app my-app`
+  - Creates ready-to-use starter templates with examples
+  - [View on npm](https://www.npmjs.com/package/create-x402-app)
+
+## Security
 
 - **On-Chain Verification** - All payments verified on blockchain
 - **No Private Keys** - Wallet-based payments only
 - **Idempotent Payments** - Duplicate transaction protection
 - **Amount Tolerance** - Handles minor blockchain rounding
 
-## 💰 Pricing & Fees
+## Pricing & Fees
 
 - **Platform Fee**: 0.5% (automatically split to Treasury)
 - **Gas Costs**: < $0.001 per transaction on Mantle
 - **No Hidden Fees**: Transparent fee structure
 
-## 🤝 Contributing
+## Contributing
 
 Contributions are welcome! Please read our contributing guidelines first.
 
-## 📄 License
+## License
 
 MIT License - see [LICENSE](LICENSE) file for details.
 
-## 🔗 Links
+## Links
 
 - **Dashboard**: [https://mantle-x402.vercel.app](https://mantle-x402.vercel.app)
 - **Documentation**: [https://mantle-x402.vercel.app/dashboard?tab=docs](https://mantle-x402.vercel.app/dashboard?tab=docs)
-- **GitHub**: [https://github.com/x402-devkit/x402](https://github.com/x402-devkit/x402)
+- **GitHub**: [https://github.com/Debanjannnn/x-402-mantle-sdk](https://github.com/Debanjannnn/x-402-mantle-sdk)
 - **Mantle Network**: [https://mantle.xyz](https://mantle.xyz)
+- **npm Package**: [https://www.npmjs.com/package/x402-mantle-sdk](https://www.npmjs.com/package/x402-mantle-sdk)
 
-## 🆘 Support
+## Support
 
-- **Issues**: [GitHub Issues](https://github.com/x402-devkit/x402/issues)
+- **Issues**: [GitHub Issues](https://github.com/Debanjannnn/x-402-mantle-sdk/issues)
 - **Discord**: [Join our community](https://discord.gg/x402)
 - **Email**: support@x402.dev
 
-## 🙏 Acknowledgments
+## Acknowledgments
 
 Built for [Mantle Network](https://mantle.xyz) - the fastest and cheapest Layer 2 for Ethereum.
-
----
-
-**Made with ❤️ for the Mantle ecosystem**

package/dist/client/react.cjs

@@ -354,6 +354,7 @@ async function processPayment(request, wallet) {
 
 // src/client/modal-react.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_LOGO = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%231a1a2e'/%3E%3Cstop offset='100%25' style='stop-color:%230f0f1a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='120' height='120' rx='24' fill='url(%23bg)'/%3E%3Crect x='4' y='4' width='112' height='112' rx='20' fill='none' stroke='%23ffffff15' stroke-width='1'/%3E%3Ctext x='60' y='72' text-anchor='middle' font-family='-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif' font-size='32' font-weight='600' fill='%23ffffff'%3Ex402%3C/text%3E%3C/svg%3E`;
 function formatAddress(address) {
   if (!address || typeof address !== "string") {
     return "N/A";
@@ -363,7 +364,7 @@ function formatAddress(address) {
   }
   return `${address.slice(0, 6)}...${address.slice(-4)}`;
 }
-function PaymentModal({ request, onComplete, onCancel, isOpen }) {
+function PaymentModal({ request, onComplete, onCancel, isOpen, logo, logoAlt = "x402" }) {
   const [walletAddress, setWalletAddress] = (0, import_react.useState)(null);
   const [isConnecting, setIsConnecting] = (0, import_react.useState)(false);
   const [isProcessing, setIsProcessing] = (0, import_react.useState)(false);
@@ -541,21 +542,16 @@ function PaymentModal({ request, onComplete, onCancel, isOpen }) {
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "div",
+                      "img",
                       {
+                        src: logo || DEFAULT_LOGO,
+                        alt: logoAlt,
                         style: {
                           width: "2rem",
                           height: "2rem",
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
                           borderRadius: "0.5rem",
-                          background: "rgba(255, 255, 255, 0.1)",
-                          fontFamily: "monospace",
-                          fontSize: "0.75rem",
-                          fontWeight: "bold"
-                        },
-                        children: "x402"
+                          objectFit: "contain"
+                        }
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { style: { margin: 0, fontSize: "1.25rem", fontWeight: 300 }, children: "Payment Required" })