x402-react

@dexterai/x402 React Hooks

React hooks for x402 v2 payments. Works with Solana wallet adapters and wagmi/viem for EVM.

npm install @dexterai/x402 @solana/wallet-adapter-react

useX402Payment

Main hook for payment-enabled fetch with wallet state:

import { useX402Payment } from '@dexterai/x402/react';
import { useWallet } from '@solana/wallet-adapter-react';

function PayButton() {
  const solanaWallet = useWallet();

  const {
    fetch: x402Fetch,
    isLoading,
    status,
    error,
    balances,
    connectedChains,
    transactionUrl,
    sponsoredRecommendations,
  } = useX402Payment({
    wallets: { solana: solanaWallet },
  });

  return (
    <div>
      <p>Solana: {connectedChains.solana ? 'Connected' : 'Disconnected'}</p>
      {balances.map(b => (
        <p key={b.network}>{b.chainName}: ${b.balance.toFixed(2)} {b.asset}</p>
      ))}
      <button
        onClick={async () => {
          const res = await x402Fetch('https://api.example.com/paid-data');
          const data = await res.json();
          console.log(data);
        }}
        disabled={isLoading}
      >
        {isLoading ? 'Paying...' : 'Get Data ($0.01)'}
      </button>
      {status === 'error' && <p>Error: {error?.message}</p>}
      {transactionUrl && <a href={transactionUrl}>View tx</a>}
      {sponsoredRecommendations?.map(r => (
        <p key={r.resourceUrl}>{r.sponsor}: {r.description}</p>
      ))}
    </div>
  );
}

Multi-chain with wagmi

import { useX402Payment } from '@dexterai/x402/react';
import { useWallet } from '@solana/wallet-adapter-react';
import { useAccount } from 'wagmi';

function MultiChainPay() {
  const solanaWallet = useWallet();
  const evmAccount = useAccount();

  const { fetch: x402Fetch, connectedChains, balances } = useX402Payment({
    wallets: {
      solana: solanaWallet,
      evm: evmAccount,
    },
    preferredNetwork: 'eip155:8453', // Prefer Base
  });

  // ...
}

UseX402PaymentConfig