@payai/x402-next-starter 0.1.1

package/template/app/page.tsx

@@ -0,0 +1,51 @@
+import Link from 'next/link';
+import WordmarkCondensed from './assets/x402_wordmark_light.svg';
+
+export default function Home() {
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 text-gray-900 flex flex-col">
+      <div className="flex-grow">
+        {/* Hero Section */}
+        <section className="max-w-6xl mx-auto px-4 py-20 lg:py-28">
+          <div className="text-center">
+            <div className="w-64 mb-6 mx-auto">
+              <WordmarkCondensed className="mx-auto" />
+            </div>
+            <p className="text-xl text-gray-600 mb-8 font-mono">
+              Fullstack demo powered by Next.js
+            </p>
+            <div className="flex flex-wrap gap-4 justify-center">
+              <Link
+                href="/protected"
+                className="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-mono transition-colors text-white"
+              >
+                Live demo
+              </Link>
+            </div>
+          </div>
+        </section>
+      </div>
+      <footer className="py-8 text-center text-sm text-gray-500">
+        By using this site, you agree to be bound by the{' '}
+        <a
+          href="https://www.coinbase.com/legal/developer-platform/terms-of-service"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-blue-500"
+        >
+          CDP Terms of Service
+        </a>{' '}
+        and{' '}
+        <a
+          href="https://www.coinbase.com/legal/privacy"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-blue-500"
+        >
+          Global Privacy Policy
+        </a>
+        .
+      </footer>
+    </div>
+  );
+}

package/template/app/protected/page.tsx

@@ -0,0 +1,16 @@
+export default function ProtectedPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <div className="max-w-2xl mx-auto p-8">
+        <h1 className="text-4xl font-bold mb-4">Protected Content</h1>
+        <p className="text-lg">
+          Your payment was successful! Enjoy this banger song.
+        </p>
+        <iframe width="100%" height="300" scrolling="no" frameBorder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/2044190296&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
+        <div style={{ fontSize: '10px', color: '#cccccc', lineBreak: 'anywhere', wordBreak: 'normal', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', fontFamily: 'Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif', fontWeight: '100' }}>
+          <a href="https://soundcloud.com/dan-kim-675678711" title="danXkim" target="_blank" style={{ color: '#cccccc', textDecoration: 'none' }}>danXkim</a> · <a href="https://soundcloud.com/dan-kim-675678711/x402" title="x402 (DJ Reppel Remix)" target="_blank" style={{ color: '#cccccc', textDecoration: 'none' }}>x402 (DJ Reppel Remix)</a>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/eslint.config.js

@@ -0,0 +1,73 @@
+import js from "@eslint/js";
+import ts from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+import prettier from "eslint-plugin-prettier";
+import jsdoc from "eslint-plugin-jsdoc";
+import importPlugin from "eslint-plugin-import";
+
+export default [
+  {
+    ignores: ["dist/**", "node_modules/**", ".next/**"],
+  },
+  {
+    files: ["**/*.ts"],
+    languageOptions: {
+      parser: tsParser,
+      sourceType: "module",
+      ecmaVersion: 2020,
+      globals: {
+        process: "readonly",
+        __dirname: "readonly",
+        module: "readonly",
+        require: "readonly",
+        Buffer: "readonly",
+        console: "readonly",
+        exports: "readonly",
+        setTimeout: "readonly",
+        clearTimeout: "readonly",
+        setInterval: "readonly",
+        clearInterval: "readonly",
+      },
+    },
+    plugins: {
+      "@typescript-eslint": ts,
+      prettier: prettier,
+      jsdoc: jsdoc,
+      import: importPlugin,
+    },
+    rules: {
+      ...ts.configs.recommended.rules,
+      "import/first": "error",
+      "prettier/prettier": "error",
+      "@typescript-eslint/member-ordering": "error",
+      "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_$" }],
+      "jsdoc/tag-lines": ["error", "any", { startLines: 1 }],
+      "jsdoc/check-alignment": "error",
+      "jsdoc/no-undefined-types": "off",
+      "jsdoc/check-param-names": "error",
+      "jsdoc/check-tag-names": "error",
+      "jsdoc/check-types": "error",
+      "jsdoc/implements-on-classes": "error",
+      "jsdoc/require-description": "error",
+      "jsdoc/require-jsdoc": [
+        "error",
+        {
+          require: {
+            FunctionDeclaration: true,
+            MethodDefinition: true,
+            ClassDeclaration: true,
+            ArrowFunctionExpression: false,
+            FunctionExpression: false,
+          },
+        },
+      ],
+      "jsdoc/require-param": "error",
+      "jsdoc/require-param-description": "error",
+      "jsdoc/require-param-type": "off",
+      "jsdoc/require-returns": "error",
+      "jsdoc/require-returns-description": "error",
+      "jsdoc/require-returns-type": "off",
+      "jsdoc/require-hyphen-before-param-description": ["error", "always"],
+    },
+  },
+];

package/template/middleware.ts

@@ -0,0 +1,31 @@
+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*"],
+};

package/template/next.config.ts

@@ -0,0 +1,17 @@
+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;
+  },
+};
+
+export default nextConfig;