create-x402-app 0.1.2 → 0.1.4

package/templates/fullstack-hono/src/app/api/premium/route.ts

@@ -0,0 +1,52 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { processPaymentMiddleware, initializePlatform } from 'x402-mantle-sdk/server'
+
+let initialized = false
+
+export async function GET(request: NextRequest) {
+  // Initialize platform once
+  if (!initialized) {
+    await initializePlatform()
+    initialized = true
+  }
+
+  // Convert headers to plain object
+  const headers: Record<string, string> = {}
+  request.headers.forEach((value, key) => {
+    headers[key] = value
+  })
+
+  // Process payment - returns 402 if payment required
+  const result = await processPaymentMiddleware(
+    { price: '0.001', token: 'MNT', testnet: true },
+    headers
+  )
+
+  // Payment required - return 402 with payment details
+  if (result.paymentRequired) {
+    const response = NextResponse.json(result.paymentRequired.body, { status: 402 })
+    Object.entries(result.paymentRequired.headers).forEach(([key, value]) => {
+      response.headers.set(key, value)
+    })
+    return response
+  }
+
+  // Payment verified - return premium content
+  if (result.allowed) {
+    return NextResponse.json({
+      success: true,
+      message: 'Premium content unlocked!',
+      data: {
+        secret: 'This is premium data that required payment.',
+        timestamp: new Date().toISOString(),
+      },
+    })
+  }
+
+  // Error handling
+  if (result.error) {
+    return NextResponse.json({ error: result.error.message }, { status: result.error.status })
+  }
+
+  return NextResponse.json({ error: 'Unexpected error' }, { status: 500 })
+}

package/templates/fullstack-hono/src/app/api/weather/route.ts

@@ -0,0 +1,103 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { processPaymentMiddleware, initializePlatform, clearCache } from 'x402-mantle-sdk/server'
+
+// Configuration - Set these in your .env file
+const appId = process.env.X402_APP_ID || ''
+const platformUrl = process.env.X402_PLATFORM_URL || 'https://mantle-x402.vercel.app'
+
+if (!process.env.X402_APP_ID) {
+  process.env.X402_APP_ID = appId
+}
+if (!process.env.X402_PLATFORM_URL) {
+  process.env.X402_PLATFORM_URL = platformUrl
+}
+
+let initialized = false
+let initError: Error | null = null
+
+const initPlatform = async () => {
+  try {
+    await initializePlatform()
+    initialized = true
+    initError = null
+  } catch (error) {
+    initError = error as Error
+    console.error('Platform initialization failed:', error)
+  }
+}
+
+export async function GET(request: NextRequest) {
+  try {
+    // Initialize platform on first request
+    if (!initialized && !initError) {
+      await initPlatform()
+    } else if (initError) {
+      try { clearCache() } catch {}
+      initError = null
+      await initPlatform()
+    }
+
+    if (initError) {
+      return NextResponse.json(
+        { error: 'Platform initialization failed', details: (initError as Error).message },
+        { status: 500 }
+      )
+    }
+
+    // Payment options - cheaper for weather
+    const paymentOptions = {
+      price: '0.0005',
+      token: 'MNT',
+      testnet: true,
+    }
+
+    // Convert headers
+    const headers: Record<string, string> = {}
+    request.headers.forEach((value, key) => {
+      headers[key] = value
+    })
+
+    // Process payment middleware
+    const result = await processPaymentMiddleware(paymentOptions, headers)
+
+    // Payment required - return 402
+    if (result.paymentRequired) {
+      const response = NextResponse.json(result.paymentRequired.body, { status: 402 })
+      Object.entries(result.paymentRequired.headers).forEach(([key, value]) => {
+        response.headers.set(key, value)
+      })
+      return response
+    }
+
+    // Error
+    if (result.error) {
+      return NextResponse.json(
+        { error: result.error.message },
+        { status: result.error.status }
+      )
+    }
+
+    // Payment verified - return weather data
+    if (result.allowed) {
+      return NextResponse.json({
+        success: true,
+        data: {
+          location: 'New York',
+          temperature: 72,
+          unit: 'F',
+          condition: 'Sunny',
+          humidity: 45,
+          forecast: ['Sunny', 'Partly Cloudy', 'Rain'],
+        },
+      })
+    }
+
+    return NextResponse.json({ error: 'Unexpected error' }, { status: 500 })
+  } catch (error) {
+    console.error('Error in weather route:', error)
+    return NextResponse.json(
+      { error: 'Internal server error', message: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    )
+  }
+}

package/templates/fullstack-hono/src/app/globals.css

@@ -0,0 +1,82 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  /* Light blue background with dark blue text palette */
+  --background: oklch(0.95 0.05 240); /* Light blue background */
+  --foreground: oklch(0.25 0.12 240); /* Dark blue (navy) text */
+  --card: oklch(0.92 0.04 240); /* Slightly darker light blue */
+  --card-foreground: oklch(0.25 0.12 240); /* Dark blue */
+  --popover: oklch(0.92 0.04 240);
+  --popover-foreground: oklch(0.25 0.12 240);
+  --primary: oklch(0.35 0.15 240); /* Medium dark blue */
+  --primary-foreground: oklch(0.95 0.05 240); /* Light blue */
+  --secondary: oklch(0.88 0.04 240); /* Light blue gray */
+  --secondary-foreground: oklch(0.25 0.12 240); /* Dark blue */
+  --muted: oklch(0.85 0.03 240);
+  --muted-foreground: oklch(0.4 0.1 240);
+  --accent: oklch(0.3 0.13 240); /* Dark blue accent */
+  --accent-foreground: oklch(0.95 0.05 240); /* Light blue */
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.95 0.05 240);
+  --border: oklch(0.8 0.05 240); /* Light blue border */
+  --input: oklch(0.8 0.05 240);
+  --ring: oklch(0.35 0.15 240); /* Dark blue ring */
+  --radius: 0.75rem;
+}
+
+@theme inline {
+  --font-sans: "Geist", "Geist Fallback", system-ui, sans-serif;
+  --font-mono: "Geist Mono", "Geist Mono Fallback", monospace;
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    cursor: default;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  main {
+    /* Light blue textured background */
+    background-color: oklch(0.95 0.05 240);
+    background-image:
+      url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.4' fill='%23e0f2fe'/%3E%3C/svg%3E");
+    background-size: 200px 200px;
+    background-repeat: repeat;
+  }
+
+  button,
+  a {
+    cursor: pointer;
+    transform: translateZ(0);
+    backface-visibility: hidden;
+  }
+}

package/templates/fullstack-hono/src/app/layout.tsx

@@ -0,0 +1,42 @@
+import type React from "react"
+import type { Metadata } from "next"
+import { Geist, Geist_Mono } from "next/font/google"
+import "./globals.css"
+
+const geist = Geist({ subsets: ["latin"], variable: "--font-geist" })
+const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono" })
+
+export const metadata: Metadata = {
+  title: "x402 Demo - HTTP 402 Payments on Mantle",
+  description:
+    "Experience HTTP 402 payments in action. A demo app built with x402-mantle-sdk for pay-per-request APIs on Mantle Network.",
+  keywords: [
+    "x402",
+    "HTTP 402",
+    "Mantle",
+    "Mantle Network",
+    "API monetization",
+    "blockchain payments",
+    "web3 payments",
+    "MNT",
+  ],
+  icons: {
+    icon: "/X402.png",
+    shortcut: "/X402.png",
+    apple: "/X402.png",
+  },
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${geist.variable} ${geistMono.variable} font-sans antialiased`}>
+        {children}
+      </body>
+    </html>
+  )
+}