@voyage_ai/v402-web-ts 0.1.0

package/dist/react/hooks/useWallet.ts

@@ -0,0 +1,147 @@
+/**
+ * useWallet Hook
+ *
+ * React hook for wallet connection management
+ */
+
+import {useCallback, useEffect, useState} from 'react';
+import {NetworkType} from '../../types';
+import {
+    connectWallet as connectWalletUtil,
+    disconnectWallet as disconnectWalletUtil,
+    getConnectedNetworkType,
+    getCurrentWallet,
+    isWalletManuallyDisconnected,
+    onAccountsChanged,
+} from '../../utils';
+
+export interface UseWalletReturn {
+  // State
+  address: string | null;
+  networkType: NetworkType | null;
+  isConnecting: boolean;
+  error: string | null;
+
+  // Actions
+  connect: (networkType: NetworkType) => Promise<void>;
+  disconnect: () => void;
+  clearError: () => void;
+}
+
+/**
+ * Hook for managing wallet connection
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { address, connect, disconnect, isConnecting } = useWallet();
+ *
+ *   return (
+ *     <div>
+ *       {address ? (
+ *         <button onClick={disconnect}>Disconnect {address}</button>
+ *       ) : (
+ *         <button onClick={() => connect(NetworkType.SOLANA)}>
+ *           Connect Wallet
+ *         </button>
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useWallet(): UseWalletReturn {
+  const [address, setAddress] = useState<string | null>(null);
+  const [networkType, setNetworkType] = useState<NetworkType | null>(null);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Initialize wallet on mount
+  useEffect(() => {
+    const initWallet = async () => {
+      if (!isWalletManuallyDisconnected()) {
+        const connectedType = getConnectedNetworkType();
+        if (connectedType) {
+          const currentAddress = await getCurrentWallet(connectedType);
+          if (currentAddress) {
+            setAddress(currentAddress);
+            setNetworkType(connectedType);
+            console.log('🔄 Auto-reconnected wallet:', currentAddress);
+          }
+        }
+      }
+    };
+
+    initWallet();
+
+    // Listen for account changes (EVM only)
+    const unsubscribe = onAccountsChanged((accounts) => {
+      const connectedType = getConnectedNetworkType();
+      if (connectedType === NetworkType.EVM) {
+        if (accounts.length === 0) {
+          setAddress(null);
+          console.log('🔌 Wallet disconnected');
+        } else {
+          if (!isWalletManuallyDisconnected()) {
+            setAddress(accounts[0]);
+            console.log('🔄 Account changed:', accounts[0]);
+          }
+        }
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, []); // Only run on mount
+
+  // Connect wallet
+  const connect = useCallback(async (type: NetworkType) => {
+    setIsConnecting(true);
+    setError(null);
+
+    try {
+      const walletAddress = await connectWalletUtil(type);
+
+      console.log('✅ Wallet connected:', walletAddress, 'Network:', type);
+
+      // Update state - this should trigger re-render
+      setAddress(walletAddress);
+      setNetworkType(type);
+
+      // Force a small delay to ensure state updates
+      await new Promise(resolve => setTimeout(resolve, 0));
+
+      console.log('📝 State updated in hook');
+    } catch (err: any) {
+      setError(err.message || 'Failed to connect wallet');
+      throw err;
+    } finally {
+      setIsConnecting(false);
+    }
+  }, []);
+
+  // Disconnect wallet
+  const disconnect = useCallback(() => {
+    disconnectWalletUtil();
+    setAddress(null);
+    setNetworkType(null);
+    setError(null);
+  }, []);
+
+  // Clear error
+  const clearError = useCallback(() => {
+    setError(null);
+  }, []);
+
+  return {
+    address,
+    networkType,
+    isConnecting,
+    error,
+    connect,
+    disconnect,
+    clearError,
+  };
+}
+

package/dist/react/hooks/useWalletStore.ts

@@ -0,0 +1,61 @@
+/**
+ * useWallet Hook (External Store)
+ *
+ * Uses useSyncExternalStore for optimal performance
+ * No Provider needed!
+ */
+
+import {useSyncExternalStore} from 'react';
+import {walletStore} from '../store/walletStore';
+import {NetworkType} from '../../types';
+
+export interface UseWalletReturn {
+    // State
+    address: string | null;
+    networkType: NetworkType | null;
+    isConnecting: boolean;
+    error: string | null;
+
+    // Actions
+    connect: (networkType: NetworkType) => Promise<void>;
+    disconnect: () => void;
+    clearError: () => void;
+}
+
+/**
+ * Hook for wallet connection
+ * No Provider needed - uses external store
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { address, connect, disconnect } = useWallet();
+ *
+ *   return (
+ *     <div>
+ *       {address ? (
+ *         <button onClick={disconnect}>Disconnect</button>
+ *       ) : (
+ *         <button onClick={() => connect(NetworkType.SOLANA)}>Connect</button>
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useWallet(): UseWalletReturn {
+    // Use React 18's useSyncExternalStore for optimal performance
+    const state = useSyncExternalStore(
+        (listener) => walletStore.subscribe(listener),
+        () => walletStore.getState(),
+        () => walletStore.getState() // Server snapshot
+    );
+
+    return {
+        ...state,
+        connect: (type: NetworkType) => walletStore.connect(type),
+        disconnect: () => walletStore.disconnect(),
+        clearError: () => walletStore.clearError(),
+    };
+}
+

package/dist/react/index.d.mts

@@ -0,0 +1,248 @@
+import { PaymentRequirements } from 'x402/types';
+import React from 'react';
+
+/**
+ * Common types for x402 SDK
+ * Framework-agnostic types that work across different wallet implementations
+ */
+
+/**
+ * Network type enum - for wallet detection
+ */
+declare enum NetworkType {
+    EVM = "evm",
+    SOLANA = "solana",
+    SVM = "svm",// Alias for Solana
+    UNKNOWN = "unknown"
+}
+
+/**
+ * useWallet Hook (External Store)
+ *
+ * Uses useSyncExternalStore for optimal performance
+ * No Provider needed!
+ */
+
+interface UseWalletReturn {
+    address: string | null;
+    networkType: NetworkType | null;
+    isConnecting: boolean;
+    error: string | null;
+    connect: (networkType: NetworkType) => Promise<void>;
+    disconnect: () => void;
+    clearError: () => void;
+}
+/**
+ * Hook for wallet connection
+ * No Provider needed - uses external store
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { address, connect, disconnect } = useWallet();
+ *
+ *   return (
+ *     <div>
+ *       {address ? (
+ *         <button onClick={disconnect}>Disconnect</button>
+ *       ) : (
+ *         <button onClick={() => connect(NetworkType.SOLANA)}>Connect</button>
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useWallet(): UseWalletReturn;
+
+/**
+ * usePayment Hook
+ *
+ * React hook for payment state management
+ * Provides state only - you control the payment flow
+ */
+interface UsePaymentReturn {
+    isProcessing: boolean;
+    result: any;
+    error: string | null;
+    setIsProcessing: (value: boolean) => void;
+    setResult: (value: any) => void;
+    setError: (value: string | null) => void;
+    clearResult: () => void;
+    clearError: () => void;
+    reset: () => void;
+}
+/**
+ * Hook for managing payment state
+ *
+ * This hook only manages state - you control the payment logic.
+ * Use SDK's handleSvmPayment/handleEvmPayment directly for full control.
+ *
+ * @example
+ * ```tsx
+ * import { usePayment, useWallet } from '../react';
+ * import { handleSvmPayment } from '@/app/sdk';
+ *
+ * function PaymentButton() {
+ *   const { networkType } = useWallet();
+ *   const { isProcessing, setIsProcessing, result, setResult, error, setError } = usePayment();
+ *
+ *   const handlePay = async () => {
+ *     if (!networkType) return;
+ *
+ *     setIsProcessing(true);
+ *     setError(null);
+ *
+ *     try {
+ *       const response = await handleSvmPayment('/api/endpoint', {
+ *         wallet: window.solana,
+ *         network: 'solana-devnet',
+ *       });
+ *
+ *       const data = await response.json();
+ *       setResult(data);
+ *
+ *       // Your custom logic here
+ *       console.log('Payment success!');
+ *     } catch (err: any) {
+ *       setError(err.message);
+ *     } finally {
+ *       setIsProcessing(false);
+ *     }
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handlePay} disabled={isProcessing}>
+ *         {isProcessing ? 'Processing...' : 'Pay'}
+ *       </button>
+ *       {error && <p>Error: {error}</p>}
+ *       {result && <pre>{JSON.stringify(result, null, 2)}</pre>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function usePayment(): UsePaymentReturn;
+
+/**
+ * usePaymentInfo Hook
+ *
+ * React hook for fetching payment information from endpoint
+ */
+
+interface UsePaymentInfoReturn {
+    paymentInfo: PaymentRequirements[] | null;
+    supportedNetworks: NetworkType[];
+    isLoading: boolean;
+    error: string | null;
+    refetch: () => Promise<void>;
+}
+/**
+ * Hook for fetching payment information
+ *
+ * @param endpoint - API endpoint to fetch payment info from
+ * @param merchantId - @see our website to apply
+ *
+ * @example
+ * ```tsx
+ * function PaymentInfo() {
+ *   const { paymentInfo, supportedNetworks, isLoading } = usePaymentInfo('/api/protected');
+ *
+ *   if (isLoading) return <p>Loading...</p>;
+ *
+ *   return (
+ *     <div>
+ *       <p>Supported networks:</p>
+ *       {supportedNetworks.map(net => <span key={net}>{net}</span>)}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function usePaymentInfo(merchantId: string, endpoint?: string): UsePaymentInfoReturn;
+
+/**
+ * WalletConnect Component
+ *
+ * Pre-built wallet connection UI component
+ */
+
+interface WalletConnectProps {
+    supportedNetworks?: NetworkType[];
+    className?: string;
+    onConnect?: (address: string, networkType: NetworkType) => void;
+    onDisconnect?: () => void;
+}
+/**
+ * Pre-built wallet connection component
+ *
+ * @example
+ * ```tsx
+ * import { WalletConnect } from '../react';
+ *
+ * function App() {
+ *   return (
+ *     <WalletConnect
+ *       supportedNetworks={[NetworkType.SOLANA, NetworkType.EVM]}
+ *       onConnect={(address, network) => console.log('Connected:', address)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function WalletConnect({ supportedNetworks, className, onConnect, onDisconnect, }: WalletConnectProps): React.JSX.Element;
+
+/**
+ * PaymentButton Component
+ *
+ * Pre-built payment button component
+ * Note: This is a simple wrapper. For complex payment flows,
+ * use the SDK directly with usePayment hook for full control.
+ */
+
+interface PaymentButtonProps {
+    endpoint: string;
+    className?: string;
+    disabled?: boolean;
+    onSuccess?: (result: any) => void;
+    onError?: (error: string) => void;
+    onStart?: () => void;
+    onFinish?: () => void;
+    children?: React.ReactNode;
+}
+/**
+ * Simple pre-built payment button
+ *
+ * For complex payment flows, use the SDK directly:
+ *
+ * @example
+ * ```tsx
+ * import { useWallet, usePayment } from '../react';
+ * import { handleSvmPayment } from '@/app/sdk';
+ *
+ * function CustomPayment() {
+ *   const { networkType } = useWallet();
+ *   const { isProcessing, setIsProcessing, setResult, setError } = usePayment();
+ *
+ *   const handlePay = async () => {
+ *     setIsProcessing(true);
+ *     try {
+ *       // Your custom logic before payment
+ *       const response = await handleSvmPayment(...);
+ *       const data = await response.json();
+ *
+ *       // Your custom logic after payment
+ *       setResult(data);
+ *     } catch (err) {
+ *       setError(err.message);
+ *     } finally {
+ *       setIsProcessing(false);
+ *     }
+ *   };
+ * }
+ * ```
+ */
+declare function PaymentButton({ endpoint, className, disabled, onSuccess, onError, onStart, onFinish, children, }: PaymentButtonProps): React.JSX.Element;
+
+export { PaymentButton, type PaymentButtonProps, type UsePaymentInfoReturn, type UsePaymentReturn, type UseWalletReturn, WalletConnect, type WalletConnectProps, usePayment, usePaymentInfo, useWallet };

package/dist/react/index.d.ts

@@ -0,0 +1,248 @@
+import { PaymentRequirements } from 'x402/types';
+import React from 'react';
+
+/**
+ * Common types for x402 SDK
+ * Framework-agnostic types that work across different wallet implementations
+ */
+
+/**
+ * Network type enum - for wallet detection
+ */
+declare enum NetworkType {
+    EVM = "evm",
+    SOLANA = "solana",
+    SVM = "svm",// Alias for Solana
+    UNKNOWN = "unknown"
+}
+
+/**
+ * useWallet Hook (External Store)
+ *
+ * Uses useSyncExternalStore for optimal performance
+ * No Provider needed!
+ */
+
+interface UseWalletReturn {
+    address: string | null;
+    networkType: NetworkType | null;
+    isConnecting: boolean;
+    error: string | null;
+    connect: (networkType: NetworkType) => Promise<void>;
+    disconnect: () => void;
+    clearError: () => void;
+}
+/**
+ * Hook for wallet connection
+ * No Provider needed - uses external store
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { address, connect, disconnect } = useWallet();
+ *
+ *   return (
+ *     <div>
+ *       {address ? (
+ *         <button onClick={disconnect}>Disconnect</button>
+ *       ) : (
+ *         <button onClick={() => connect(NetworkType.SOLANA)}>Connect</button>
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useWallet(): UseWalletReturn;
+
+/**
+ * usePayment Hook
+ *
+ * React hook for payment state management
+ * Provides state only - you control the payment flow
+ */
+interface UsePaymentReturn {
+    isProcessing: boolean;
+    result: any;
+    error: string | null;
+    setIsProcessing: (value: boolean) => void;
+    setResult: (value: any) => void;
+    setError: (value: string | null) => void;
+    clearResult: () => void;
+    clearError: () => void;
+    reset: () => void;
+}
+/**
+ * Hook for managing payment state
+ *
+ * This hook only manages state - you control the payment logic.
+ * Use SDK's handleSvmPayment/handleEvmPayment directly for full control.
+ *
+ * @example
+ * ```tsx
+ * import { usePayment, useWallet } from '../react';
+ * import { handleSvmPayment } from '@/app/sdk';
+ *
+ * function PaymentButton() {
+ *   const { networkType } = useWallet();
+ *   const { isProcessing, setIsProcessing, result, setResult, error, setError } = usePayment();
+ *
+ *   const handlePay = async () => {
+ *     if (!networkType) return;
+ *
+ *     setIsProcessing(true);
+ *     setError(null);
+ *
+ *     try {
+ *       const response = await handleSvmPayment('/api/endpoint', {
+ *         wallet: window.solana,
+ *         network: 'solana-devnet',
+ *       });
+ *
+ *       const data = await response.json();
+ *       setResult(data);
+ *
+ *       // Your custom logic here
+ *       console.log('Payment success!');
+ *     } catch (err: any) {
+ *       setError(err.message);
+ *     } finally {
+ *       setIsProcessing(false);
+ *     }
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handlePay} disabled={isProcessing}>
+ *         {isProcessing ? 'Processing...' : 'Pay'}
+ *       </button>
+ *       {error && <p>Error: {error}</p>}
+ *       {result && <pre>{JSON.stringify(result, null, 2)}</pre>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function usePayment(): UsePaymentReturn;
+
+/**
+ * usePaymentInfo Hook
+ *
+ * React hook for fetching payment information from endpoint
+ */
+
+interface UsePaymentInfoReturn {
+    paymentInfo: PaymentRequirements[] | null;
+    supportedNetworks: NetworkType[];
+    isLoading: boolean;
+    error: string | null;
+    refetch: () => Promise<void>;
+}
+/**
+ * Hook for fetching payment information
+ *
+ * @param endpoint - API endpoint to fetch payment info from
+ * @param merchantId - @see our website to apply
+ *
+ * @example
+ * ```tsx
+ * function PaymentInfo() {
+ *   const { paymentInfo, supportedNetworks, isLoading } = usePaymentInfo('/api/protected');
+ *
+ *   if (isLoading) return <p>Loading...</p>;
+ *
+ *   return (
+ *     <div>
+ *       <p>Supported networks:</p>
+ *       {supportedNetworks.map(net => <span key={net}>{net}</span>)}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function usePaymentInfo(merchantId: string, endpoint?: string): UsePaymentInfoReturn;
+
+/**
+ * WalletConnect Component
+ *
+ * Pre-built wallet connection UI component
+ */
+
+interface WalletConnectProps {
+    supportedNetworks?: NetworkType[];
+    className?: string;
+    onConnect?: (address: string, networkType: NetworkType) => void;
+    onDisconnect?: () => void;
+}
+/**
+ * Pre-built wallet connection component
+ *
+ * @example
+ * ```tsx
+ * import { WalletConnect } from '../react';
+ *
+ * function App() {
+ *   return (
+ *     <WalletConnect
+ *       supportedNetworks={[NetworkType.SOLANA, NetworkType.EVM]}
+ *       onConnect={(address, network) => console.log('Connected:', address)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function WalletConnect({ supportedNetworks, className, onConnect, onDisconnect, }: WalletConnectProps): React.JSX.Element;
+
+/**
+ * PaymentButton Component
+ *
+ * Pre-built payment button component
+ * Note: This is a simple wrapper. For complex payment flows,
+ * use the SDK directly with usePayment hook for full control.
+ */
+
+interface PaymentButtonProps {
+    endpoint: string;
+    className?: string;
+    disabled?: boolean;
+    onSuccess?: (result: any) => void;
+    onError?: (error: string) => void;
+    onStart?: () => void;
+    onFinish?: () => void;
+    children?: React.ReactNode;
+}
+/**
+ * Simple pre-built payment button
+ *
+ * For complex payment flows, use the SDK directly:
+ *
+ * @example
+ * ```tsx
+ * import { useWallet, usePayment } from '../react';
+ * import { handleSvmPayment } from '@/app/sdk';
+ *
+ * function CustomPayment() {
+ *   const { networkType } = useWallet();
+ *   const { isProcessing, setIsProcessing, setResult, setError } = usePayment();
+ *
+ *   const handlePay = async () => {
+ *     setIsProcessing(true);
+ *     try {
+ *       // Your custom logic before payment
+ *       const response = await handleSvmPayment(...);
+ *       const data = await response.json();
+ *
+ *       // Your custom logic after payment
+ *       setResult(data);
+ *     } catch (err) {
+ *       setError(err.message);
+ *     } finally {
+ *       setIsProcessing(false);
+ *     }
+ *   };
+ * }
+ * ```
+ */
+declare function PaymentButton({ endpoint, className, disabled, onSuccess, onError, onStart, onFinish, children, }: PaymentButtonProps): React.JSX.Element;
+
+export { PaymentButton, type PaymentButtonProps, type UsePaymentInfoReturn, type UsePaymentReturn, type UseWalletReturn, WalletConnect, type WalletConnectProps, usePayment, usePaymentInfo, useWallet };