import { useMantleX402 } from '@puga-labs/x402-mantle-sdk/react';

function MyComponent() {
  // facilitatorUrl auto-detected from backend 402 response
  const { postWithPayment } = useMantleX402();

  const handleClick = async () => {
    try {
      const result = await postWithPayment('/api/endpoint', {
        // Your request body
        prompt: 'Hello'
      });

      console.log('Response:', result.response);
      console.log('Transaction hash:', result.txHash);
    } catch (error) {
      if (error.code === 4001) {
        console.log('User rejected the transaction');
      } else {
        console.error('Error:', error.message);
      }
    }
  };

  return <button onClick={handleClick}>Make Paid Request</button>;
}

const { postWithPayment } = useMantleX402({
  resourceUrl: 'https://your-api.com',  // Optional, defaults to window.location.origin
});

import { useEthersWallet } from '@puga-labs/x402-mantle-sdk/react';

function WalletButton() {
  const {
    address,      // User's wallet address (undefined if not connected)
    isConnected,  // Boolean connection status
    chainId,      // Current chain ID (5000 for Mantle)
    provider,     // ethers.BrowserProvider instance
    connect,      // Function to connect wallet
    disconnect,   // Function to disconnect (clears state)
    error         // Error object if connection failed
  } = useEthersWallet({
    autoConnect: false  // Set true to auto-connect on mount
  });

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  if (isConnected) {
    return (
      <div>
        <p>Connected: {address}</p>
        <p>Chain: {chainId}</p>
        <button onClick={disconnect}>Disconnect</button>
      </div>
    );
  }

  return <button onClick={connect}>Connect Wallet</button>;
}

import { useMantleX402, useEthersWallet } from '@puga-labs/x402-mantle-sdk/react';

function PaymentApp() {
  const wallet = useEthersWallet();
  const { postWithPayment } = useMantleX402();

  const handlePayment = async () => {
    if (!wallet.isConnected) {
      await wallet.connect();
    }

    // Check network
    if (wallet.chainId !== 5000) {
      alert('Please switch to Mantle network');
      return;
    }

    const { response, txHash } = await postWithPayment('/api/generate', {
      prompt: 'Hello'
    });

    console.log('Done!', response, txHash);
  };

  return (
    <div>
      {wallet.isConnected ? (
        <p>Wallet: {wallet.address}</p>
      ) : (
        <button onClick={wallet.connect}>Connect</button>
      )}
      <button onClick={handlePayment} disabled={!wallet.isConnected}>
        Pay $0.01
      </button>
    </div>
  );
}

import { createMantleClient } from '@puga-labs/x402-mantle-sdk/client';

// You need to manage wallet connection yourself
let userAddress: string | undefined;

// Listen for account changes
window.ethereum?.on('accountsChanged', (accounts: string[]) => {
  userAddress = accounts[0];
});

// Create client (facilitatorUrl auto-detected from backend)
const client = createMantleClient({
  resourceUrl: 'https://your-api.com',
  getProvider: () => window.ethereum,
  getAccount: () => userAddress
});

// Make paid request
async function makeRequest() {
  try {
    const { response, txHash } = await client.postWithPayment('/api/generate', {
      prompt: 'Hello world'
    });
    console.log('Response:', response);
    console.log('TxHash:', txHash);
  } catch (error) {
    console.error('Failed:', error);
  }
}

import { createPaymentClient } from '@puga-labs/x402-mantle-sdk/client';

// Low-level client (facilitatorUrl auto-detected from backend)
const paymentClient = createPaymentClient({
  resourceUrl: 'https://your-api.com',
  provider: window.ethereum,
  userAddress: '0x...'  // Optional, will be fetched if not provided
});

// callWithPayment returns more details
const result = await paymentClient.callWithPayment('/api/endpoint', {
  data: 'payload'
});

console.log('Response:', result.response);
console.log('TxHash:', result.txHash);
console.log('Payment Header:', result.paymentHeader);
console.log('Requirements:', result.paymentRequirements);

interface CallWithPaymentResult<T> {
  response: T;                              // Your API response
  txHash?: string;                          // Blockchain transaction hash
  paymentHeader?: string;                   // Base64-encoded payment proof
  paymentRequirements?: PaymentRequirements; // Payment requirements used
}

try {
  const { response, txHash } = await postWithPayment('/api/generate', data);
} catch (error) {
  if (error.code === 4001) {
    // User rejected the transaction
    console.log('User cancelled');
  } else if (error.code === -32603) {
    // Internal error (insufficient funds, etc.)
    console.log('Transaction failed:', error.message);
  } else {
    // Network or facilitator error
    console.log('Error:', error.message);
  }
}