import { WagmiProvider, createConfig, http } from "wagmi"
import { RainbowKitProvider } from "@rainbow-me/rainbowkit"
import { QueryClientProvider, QueryClient } from "@tanstack/react-query"
import { mainnet, base } from "wagmi/chains"
import { TrailsProvider } from "0xtrails"
import { wagmiAdapter } from "@0xtrails/adapter-wagmi"

const config = createConfig({
  chains: [mainnet, base],
  transports: {
    [mainnet.id]: http(),
    [base.id]: http(),
    [baseSepolia.id]: http(),
  },
})

const queryClient = new QueryClient()

const adapters = [wagmiAdapter({ wagmiConfig: config })]

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <TrailsProvider config={{ trailsApiKey: "YOUR_TRAILS_API_KEY", adapters }}>
          <RainbowKitProvider>
            {children}
          </RainbowKitProvider>
        </TrailsProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

import axios from "axios"
import type { WalletClient } from "viem"
import { withPaymentInterceptor } from "x402-axios"

const baseApiClient = axios.create({
  baseURL: "http://localhost:3001",
  headers: { "Content-Type": "application/json" },
})

let apiClient = baseApiClient

// Update API client when wallet connects
export function updateApiClient(walletClient: WalletClient | null) {
  if (walletClient && walletClient.account) {
    // Attach x402 payment interceptor to axios
    apiClient = withPaymentInterceptor(baseApiClient, walletClient as any)
    console.log("💳 API client ready for payments")
  } else {
    apiClient = baseApiClient
  }
}

// API endpoints
export const api = {
  // Protected endpoint - requires x402 payment
  purchaseOneTimeAccess: async () => {
    const response = await apiClient.post("/api/pay/onetime")
    return response.data
  },
}

import { Pay } from "0xtrails/widget"
import type { TrailsWidgetRef } from "0xtrails/widget"
import { useState, useCallback, useRef } from "react"
import { useWalletClient, useSwitchChain } from "wagmi"
import { base } from "wagmi/chains"
import { api, updateApiClient } from "../services/api"

export default function PayWidget() {
  const widgetRef = useRef<TrailsWidgetRef | null>(null)
  const [loading, setLoading] = useState(false)
  const [result, setResult] = useState<string>("")
  const { data: walletClient } = useWalletClient()
  const { switchChainAsync } = useSwitchChain()

  // Handle Trails payment completion
  const handleTrailsComplete = useCallback(
    async (data: { sessionId: string }) => {
      console.log("✅ Trails payment complete:", data.sessionId)
      
      // Close Trails modal
      widgetRef.current?.closeModal?.()
      
      // Switch to payment network (Base)
      try {
        await switchChainAsync?.({ chainId: base.id })
      } catch (err) {
        console.error("Network switch failed:", err)
      }

      if (!walletClient) {
        setResult("❌ Wallet not connected")
        return
      }

      try {
        setLoading(true)
        setResult("🔄 Authorizing API access via x402...")
        
        // Update API client with wallet for x402 signing
        updateApiClient(walletClient)
        
        // Make payment-protected API request
        // x402-axios will automatically:
        // 1. Prompt user to sign EIP-712 message
        // 2. Add payment signature to request headers
        // 3. Facilitator verifies and transfers tokens
        const response = await api.purchaseOneTimeAccess()
        
        setResult(`✅ API access granted! Session: ${response.sessionId}`)
      } catch (error: any) {
        console.error("x402 payment error:", error)
        setResult(`❌ Payment failed: ${error.message}`)
      } finally {
        setLoading(false)
      }
    },
    [walletClient, switchChainAsync]
  )

  return (
    <div className="space-y-4">
      <Pay
        ref={widgetRef}
        apiKey="YOUR_API_KEY"
        theme="auto"
        to={{
          recipient: "0xYourAddress",
          currency: "USDC",
          chain: "base",
          amount: "0.1",
        }}
        buttonText="Pay & Get Access"
        onPaymentSuccess={handleTrailsComplete}
        customCss={`
          --trails-border-radius-button: 9999px;
          --trails-primary: #4285F4;
          --trails-primary-hover: #357AE8;
        `}
      />
      
      {loading && <p>Processing...</p>}
      {result && <p>{result}</p>}
    </div>
  )
}

# Your wallet address to receive x402 payments
ADDRESS=0xYourWalletAddress

# Network for x402 payments
NETWORK=base

# x402 Facilitator URL
FACILITATOR_URL=https://facilitator.payai.network

# Server Port
PORT=3001

import { Hono } from "hono"
import { serve } from "@hono/node-server"
import { cors } from "hono/cors"
import { paymentMiddleware, Network, Resource } from "x402-hono"
import { v4 as uuidv4 } from "uuid"
import { config } from "dotenv"

config()

const facilitatorUrl = process.env.FACILITATOR_URL as Resource
const payTo = process.env.ADDRESS as `0x${string}`
const network = process.env.NETWORK as Network || "base"
const port = parseInt(process.env.PORT || "3001")

const app = new Hono()

// Enable CORS for frontend
app.use("/*", cors({
  origin: ["http://localhost:5173"],
  credentials: true,
}))

// In-memory session storage (use Redis/DB in production)
const sessions = new Map<string, any>()

// Configure x402 payment middleware
app.use(
  paymentMiddleware(
    payTo, // Your wallet address
    {
      // Define paid endpoints and prices
      "/api/pay/onetime": {
        price: "$0.10",
        network,
      },
      "/api/pay/session": {
        price: "$1.00",
        network,
      },
    },
    {
      url: facilitatorUrl, // x402 facilitator
    }
  )
)

// Protected endpoint - requires x402 payment ($0.10)
app.post("/api/pay/onetime", async (c) => {
  // This code only runs if payment succeeds!
  const sessionId = uuidv4()
  const now = new Date()
  
  const session = {
    id: sessionId,
    createdAt: now,
    expiresAt: new Date(now.getTime() + 5 * 60 * 1000), // 5 min
    type: "onetime",
  }
  
  sessions.set(sessionId, session)
  
  // Return protected data/service
  return c.json({
    success: true,
    sessionId,
    message: "Payment verified! Access granted.",
    data: {
      // Your protected API response here
      exampleData: "This is only visible after payment",
    },
  })
})

// Free endpoint - health check
app.get("/api/health", (c) => {
  return c.json({
    status: "ok",
    network,
    payTo,
  })
})

serve({ fetch: app.fetch, port })
console.log(`🚀 x402 Server running on port ${port}`)