@payai/x402-next-starter 0.1.5 → 1.0.0

package/template/next.config.ts

@@ -1,17 +1,5 @@
 import type { NextConfig } from "next";
 
-const nextConfig: NextConfig = {
-  env: {
-    RESOURCE_WALLET_ADDRESS: process.env.RESOURCE_WALLET_ADDRESS,
-    NEXT_PUBLIC_FACILITATOR_URL: process.env.NEXT_PUBLIC_FACILITATOR_URL,
-  },
-  webpack(config) {
-    config.module.rules.push({
-      test: /\.svg$/,
-      use: ["@svgr/webpack"],
-    });
-    return config;
-  },
-};
+const nextConfig: NextConfig = {};
 
 export default nextConfig;

package/template/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "next-example",
+  "name": "@x402/next-example",
   "version": "0.1.0",
   "private": true,
   "type": "module",
@@ -14,29 +14,31 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
-    "next": "^15.2.4",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "viem": "^2.21.26",
-    "x402-next": "^0.6.5",
-    "@coinbase/x402": "^0.6.5"
+    "@x402/core": "^2.3.0",
+    "@x402/evm": "^2.3.0",
+    "@x402/svm": "^2.3.0",
+    "@x402/next": "^2.3.0",
+    "@x402/paywall": "^2.3.0",
+    "@x402/extensions": "^2.3.0",
+    "next": "^16.0.10",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
   },
   "devDependencies": {
-    "@svgr/webpack": "^8.1.0",
-    "@types/node": "^20",
+    "@eslint/js": "^9.24.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@types/node": "^22.13.4",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@eslint/js": "^9.24.0",
-    "eslint": "^9.24.0",
-    "eslint-plugin-jsdoc": "^50.6.9",
-    "eslint-plugin-prettier": "^5.2.6",
     "@typescript-eslint/eslint-plugin": "^8.29.1",
     "@typescript-eslint/parser": "^8.29.1",
+    "eslint": "^9.24.0",
+    "eslint-config-next": "16.0.6",
     "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsdoc": "^50.6.9",
+    "eslint-plugin-prettier": "^5.2.6",
     "prettier": "3.5.2",
-    "eslint-config-next": "15.1.7",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5"
   }
 }

package/template/postcss.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    "@tailwindcss/postcss": {},
   },
 };
 

package/template/proxy.ts

@@ -0,0 +1,78 @@
+import { paymentProxy } from "@x402/next";
+import { x402ResourceServer, HTTPFacilitatorClient } from "@x402/core/server";
+import { registerExactEvmScheme } from "@x402/evm/exact/server";
+import { registerExactSvmScheme } from "@x402/svm/exact/server";
+import { createPaywall } from "@x402/paywall";
+import { evmPaywall } from "@x402/paywall/evm";
+import { svmPaywall } from "@x402/paywall/svm";
+import { declareDiscoveryExtension } from "@x402/extensions/bazaar";
+
+const facilitatorUrl = process.env.FACILITATOR_URL;
+export const evmAddress = process.env.EVM_ADDRESS as `0x${string}`;
+export const svmAddress = process.env.SVM_ADDRESS;
+
+if (!facilitatorUrl) {
+  console.error("❌ FACILITATOR_URL environment variable is required");
+  process.exit(1);
+}
+
+if (!evmAddress || !svmAddress) {
+  console.error("❌ EVM_ADDRESS and SVM_ADDRESS environment variables are required");
+  process.exit(1);
+}
+
+// Create HTTP facilitator client
+const facilitatorClient = new HTTPFacilitatorClient({ url: facilitatorUrl });
+
+// Create x402 resource server
+export const server = new x402ResourceServer(facilitatorClient);
+
+// Register schemes
+registerExactEvmScheme(server);
+registerExactSvmScheme(server);
+
+// Build paywall
+export const paywall = createPaywall()
+  .withNetwork(evmPaywall)
+  .withNetwork(svmPaywall)
+  .withConfig({
+    appName: process.env.APP_NAME || "Next x402 Demo",
+    appLogo: process.env.APP_LOGO || "/x402-icon-blue.png",
+    testnet: true,
+  })
+  .build();
+
+// Build proxy
+export const proxy = paymentProxy(
+  {
+    "/protected": {
+      accepts: [
+        {
+          scheme: "exact",
+          price: "$0.001",
+          network: "eip155:84532", // base-sepolia
+          payTo: evmAddress,
+        },
+        {
+          scheme: "exact",
+          price: "$0.001",
+          network: "solana:EtWTRABZaYq6iMfeYKouRu166VU2xqa1", // solana devnet
+          payTo: svmAddress,
+        },
+      ],
+      description: "Premium music: x402 Remix",
+      mimeType: "text/html",
+      extensions: {
+        ...declareDiscoveryExtension({}),
+      },
+    },
+  },
+  server,
+  undefined, // paywallConfig (using custom paywall instead)
+  paywall, // custom paywall provider
+);
+
+// Configure which paths the proxy should run on
+export const config = {
+  matcher: ["/protected/:path*"],
+};

package/template/public/site.webmanifest

@@ -1,21 +1,19 @@
 {
-  "name": "x402.org",
-  "short_name": "x402",
+  "name": "x402 Next.js Demo",
+  "short_name": "x402 Demo",
   "icons": [
     {
-      "src": "/web-app-manifest-192x192.png",
+      "src": "/x402-icon-black.png",
       "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "maskable"
+      "type": "image/png"
     },
     {
-      "src": "/web-app-manifest-512x512.png",
+      "src": "/x402-icon-black.png",
       "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "maskable"
+      "type": "image/png"
     }
   ],
-  "theme_color": "#ffffff",
+  "theme_color": "#000000",
   "background_color": "#ffffff",
   "display": "standalone"
 }

package/template/tsconfig.json

@@ -11,7 +11,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -22,6 +22,13 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["types/video.d.ts", "next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "types/**/*.ts",
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }

package/template/turbo.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://turborepo.org/schema.json",
+  "extends": ["//"],
+  "tasks": {
+    "build": {
+      "outputs": [".next/**", "!.next/cache/**"]
+    }
+  }
+}

package/template/app/assets/x402_wordmark_dark.svg

@@ -1,4 +0,0 @@
-<svg width="156" height="48" viewBox="0 0 156 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.224 47L12.96 29.656L0.8 12.952H7.648L16.48 25.816H16.672L25.504 12.952H32.16L20 29.464L32.8 47H25.952L16.48 33.304H16.288L6.88 47H0.224Z" fill="#464B55"/>
-<path d="M40.2015 35.864V31L60.0415 1.944H67.4015V30.872H74.5695V35.864H67.4015V47H61.4495V35.864H40.2015ZM46.2175 30.616V30.872H61.5775V8.536H61.2575L46.2175 30.616ZM98.355 0.983997C108.531 0.983997 114.739 7.768 114.739 18.776V29.976C114.739 41.24 108.467 47.896 98.355 47.896C88.307 47.896 81.971 41.24 81.971 29.976V18.776C81.971 7.768 88.243 0.983997 98.355 0.983997ZM98.355 42.584C104.883 42.584 108.723 37.784 108.723 29.976V18.84C108.723 11.16 104.883 6.296 98.355 6.296C91.827 6.296 87.987 11.16 87.987 18.84V29.976C87.987 37.784 91.827 42.584 98.355 42.584ZM123.485 47V41.688C123.485 36.056 126.493 32.216 133.213 28.376L142.621 23C147.741 20.056 148.829 17.176 148.829 14.296V13.528C148.829 9.304 145.885 5.912 139.869 5.912C134.045 5.912 130.333 9.368 130.269 15.384H124.381C124.509 6.232 130.973 0.983997 139.869 0.983997C149.085 0.983997 154.909 6.36 154.909 13.72C154.909 18.712 152.797 23.256 145.821 27.288L135.837 33.048C131.357 35.736 129.437 37.976 129.437 41.496V41.88H155.805V47H123.485Z" fill="white"/>
-</svg>

package/template/app/assets/x402_wordmark_light.svg

@@ -1 +0,0 @@
-<svg fill="none" height="48" viewBox="0 0 156 48" width="156" xmlns="http://www.w3.org/2000/svg"><path d="m.224 47 12.736-17.344-12.16-16.704h6.848l8.832 12.864h.192l8.832-12.864h6.656l-12.16 16.512 12.8 17.536h-6.848l-9.472-13.696h-.192l-9.408 13.696z" fill="#bfc4cf"/><path d="m40.2015 35.864v-4.864l19.84-29.056h7.36v28.928h7.168v4.992h-7.168v11.136h-5.952v-11.136zm6.016-5.248v.256h15.36v-22.336h-.32zm52.1375-29.632003c10.176 0 16.384 6.784003 16.384 17.792003v11.2c0 11.264-6.272 17.92-16.384 17.92-10.048 0-16.384-6.656-16.384-17.92v-11.2c0-11.008 6.272-17.792003 16.384-17.792003zm0 41.600003c6.528 0 10.368-4.8 10.368-12.608v-11.136c0-7.68-3.84-12.544-10.368-12.544s-10.368 4.864-10.368 12.544v11.136c0 7.808 3.84 12.608 10.368 12.608zm25.13 4.416v-5.312c0-5.632 3.008-9.472 9.728-13.312l9.408-5.376c5.12-2.944 6.208-5.824 6.208-8.704v-.768c0-4.224-2.944-7.616-8.96-7.616-5.824 0-9.536 3.456-9.6 9.472h-5.888c.128-9.152 6.592-14.400003 15.488-14.400003 9.216 0 15.04 5.376003 15.04 12.736003 0 4.992-2.112 9.536-9.088 13.568l-9.984 5.76c-4.48 2.688-6.4 4.928-6.4 8.448v.384h26.368v5.12z" fill="#000"/></svg>

package/template/middleware.ts

@@ -1,31 +0,0 @@
-import { Address } from "viem";
-import { paymentMiddleware, Network, Resource } from "x402-next";
-
-const facilitatorUrl = process.env.NEXT_PUBLIC_FACILITATOR_URL as Resource;
-const payTo = process.env.RESOURCE_WALLET_ADDRESS as Address;
-const network = process.env.NETWORK as Network;
-
-export const middleware = paymentMiddleware(
-  payTo,
-  {
-    "/protected": {
-      price: "$0.01",
-      network,
-      config: {
-        description: "Access to protected content",
-      },
-    },
-  },
-  {
-    url: facilitatorUrl,
-  },
-  {
-    appName: "Next x402 Demo",
-    appLogo: "/x402-icon-blue.png",
-  },
-);
-
-// Configure which paths the middleware should run on
-export const config = {
-  matcher: ["/protected/:path*"],
-};