@voyage_ai/v402-web-ts 0.1.1 → 0.1.3

package/dist/react/hooks/usePaymentInfo.ts

@@ -1,94 +0,0 @@
-/**
- * usePaymentInfo Hook
- *
- * React hook for fetching payment information from endpoint
- */
-
-import {useEffect, useState} from 'react';
-import type {PaymentRequirements} from 'x402/types';
-import {NetworkType} from '../../types';
-import {getSupportedNetworkTypes, parsePaymentRequired} from '../../utils';
-import {PROD_BACK_URL} from "../../types/common";
-
-export interface UsePaymentInfoReturn {
-    // State
-    paymentInfo: PaymentRequirements[] | null;
-    supportedNetworks: NetworkType[];
-    isLoading: boolean;
-    error: string | null;
-
-    // Actions
-    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>
- *   );
- * }
- * ```
- */
-export function usePaymentInfo(merchantId: string, endpoint: string = PROD_BACK_URL): UsePaymentInfoReturn {
-    const [paymentInfo, setPaymentInfo] = useState<PaymentRequirements[] | null>(null);
-    const [supportedNetworks, setSupportedNetworks] = useState<NetworkType[]>([]);
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-
-    const fetchPaymentInfo = async () => {
-        setIsLoading(true);
-        setError(null);
-
-        try {
-            endpoint = `${endpoint}/${merchantId}`
-            const response = await fetch(endpoint, {method: 'POST'});
-
-            if (response.status === 402) {
-                const body = await response.json();
-                const payment = parsePaymentRequired(body);
-
-                if (payment) {
-                    setPaymentInfo(payment);
-
-                    const networks = getSupportedNetworkTypes(payment);
-                    setSupportedNetworks(networks);
-                }
-            } else {
-                // No payment required
-                setPaymentInfo(null);
-                setSupportedNetworks([]);
-            }
-        } catch (err: any) {
-            setError(err.message || 'Failed to fetch payment info');
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    useEffect(() => {
-        fetchPaymentInfo();
-    }, [endpoint]);
-
-    return {
-        paymentInfo,
-        supportedNetworks,
-        isLoading,
-        error,
-        refetch: fetchPaymentInfo,
-    };
-}
-

package/dist/react/hooks/useWallet.ts

@@ -1,174 +0,0 @@
-/**
- * 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,
-  onChainChanged,
-  onWalletDisconnect,
-} 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 unsubscribeAccountChange = 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]);
-          }
-        }
-      }
-    });
-
-    // Listen for network/chain changes (EVM only)
-    const unsubscribeChainChange = onChainChanged(() => {
-      const connectedType = getConnectedNetworkType();
-      if (connectedType === NetworkType.EVM) {
-        console.log('⚠️ Network changed detected - disconnecting wallet');
-        disconnectWalletUtil();
-        setAddress(null);
-        setNetworkType(null);
-        setError('Network changed. Please reconnect your wallet.');
-      }
-    });
-
-    // Listen for wallet disconnect (Solana only)
-    const unsubscribeWalletDisconnect = onWalletDisconnect(() => {
-      const connectedType = getConnectedNetworkType();
-      if (connectedType === NetworkType.SOLANA || connectedType === NetworkType.SVM) {
-        console.log('⚠️ Solana wallet disconnected');
-        disconnectWalletUtil();
-        setAddress(null);
-        setNetworkType(null);
-      }
-    });
-
-    return () => {
-      unsubscribeAccountChange();
-      unsubscribeChainChange();
-      unsubscribeWalletDisconnect();
-    };
-  }, []); // 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

@@ -1,61 +0,0 @@
-/**
- * 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.ts

@@ -1,42 +0,0 @@
-/**
- * x402 Payment SDK - React Package
- * 
- * Pre-built React hooks and components for easy integration
- * 
- * ## Quick Start
- * 
- * ```tsx
- * import { WalletConnect, PaymentButton, useWallet, usePayment } from '@x402/sdk/react';
- * 
- * // No Provider needed! Just use the hooks directly
- * function App() {
- *   const { address } = useWallet();
- *   
- *   return (
- *     <div>
- *       <WalletConnect />
- *       {address && <PaymentButton endpoint="/api/protected" />}
- *     </div>
- *   );
- * }
- * ```
- */
-
-// Hooks (No Provider needed!)
-export { useWallet } from './hooks/useWalletStore';
-export type { UseWalletReturn } from './hooks/useWalletStore';
-
-// Hooks
-export { usePayment } from './hooks/usePayment';
-export type { UsePaymentReturn } from './hooks/usePayment';
-
-export { usePaymentInfo } from './hooks/usePaymentInfo';
-export type { UsePaymentInfoReturn } from './hooks/usePaymentInfo';
-
-// Components
-export { WalletConnect } from './components/WalletConnect';
-export type { WalletConnectProps } from './components/WalletConnect';
-
-export { PaymentButton } from './components/PaymentButton';
-export type { PaymentButtonProps } from './components/PaymentButton';
-

package/dist/react/store/walletStore.ts

@@ -1,181 +0,0 @@
-/**
- * Wallet Store (External Store)
- *
- * Lightweight state management without Context Provider
- * Uses singleton pattern + event emitter for reactivity
- */
-
-import {NetworkType} from '../../types';
-import {
-    connectWallet as connectWalletUtil,
-    disconnectWallet as disconnectWalletUtil,
-    getConnectedNetworkType,
-    getCurrentWallet,
-    isWalletManuallyDisconnected,
-    onAccountsChanged,
-    onChainChanged,
-    onWalletDisconnect,
-} from '../../utils';
-
-type Listener = () => void;
-
-interface WalletState {
-  address: string | null;
-  networkType: NetworkType | null;
-  isConnecting: boolean;
-  error: string | null;
-}
-
-class WalletStore {
-  private state: WalletState = {
-    address: null,
-    networkType: null,
-    isConnecting: false,
-    error: null,
-  };
-
-  private listeners = new Set<Listener>();
-  private initialized = false;
-
-  // Initialize store (call once)
-  init() {
-    if (this.initialized) return;
-    this.initialized = true;
-
-    // Auto-reconnect on init
-    this.autoReconnect();
-
-    // Listen for account changes (EVM only)
-    onAccountsChanged((accounts) => {
-      const connectedType = getConnectedNetworkType();
-      if (connectedType === NetworkType.EVM) {
-        if (accounts.length === 0) {
-          this.setState({address: null});
-          console.log('🔌 Wallet disconnected');
-        } else {
-          if (!isWalletManuallyDisconnected()) {
-            this.setState({address: accounts[0]});
-            console.log('🔄 Account changed:', accounts[0]);
-          }
-        }
-      }
-    });
-
-    // Listen for network/chain changes (EVM only)
-    onChainChanged(() => {
-      const connectedType = getConnectedNetworkType();
-      if (connectedType === NetworkType.EVM) {
-        console.log('⚠️ Network changed detected - disconnecting wallet');
-        disconnectWalletUtil();
-        this.setState({
-          address: null,
-          networkType: null,
-          error: 'Network changed. Please reconnect your wallet.',
-        });
-      }
-    });
-
-    // Listen for wallet disconnect (Solana only)
-    onWalletDisconnect(() => {
-      const connectedType = getConnectedNetworkType();
-      if (connectedType === NetworkType.SOLANA || connectedType === NetworkType.SVM) {
-        console.log('⚠️ Solana wallet disconnected');
-        disconnectWalletUtil();
-        this.setState({
-          address: null,
-          networkType: null,
-        });
-      }
-    });
-  }
-
-  private async autoReconnect() {
-    if (!isWalletManuallyDisconnected()) {
-      const connectedType = getConnectedNetworkType();
-      if (connectedType) {
-        const currentAddress = await getCurrentWallet(connectedType);
-        if (currentAddress) {
-          this.setState({
-            address: currentAddress,
-            networkType: connectedType,
-          });
-          console.log('🔄 Auto-reconnected wallet:', currentAddress);
-        }
-      }
-    }
-  }
-
-  // Get current state
-  getState(): WalletState {
-    return this.state;
-  }
-
-  // Update state and notify listeners
-  private setState(partial: Partial<WalletState>) {
-    this.state = {...this.state, ...partial};
-    this.notifyListeners();
-  }
-
-  // Subscribe to state changes
-  subscribe(listener: Listener): () => void {
-    this.listeners.add(listener);
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
-
-  // Notify all listeners
-  private notifyListeners() {
-    this.listeners.forEach(listener => listener());
-  }
-
-  // Connect wallet
-  async connect(type: NetworkType): Promise<void> {
-    this.setState({isConnecting: true, error: null});
-
-    try {
-      const walletAddress = await connectWalletUtil(type);
-
-      console.log('✅ Wallet connected:', walletAddress, 'Network:', type);
-
-      this.setState({
-        address: walletAddress,
-        networkType: type,
-        isConnecting: false,
-      });
-
-      console.log('📝 Store state updated');
-    } catch (err: any) {
-      this.setState({
-        error: err.message || 'Failed to connect wallet',
-        isConnecting: false,
-      });
-      throw err;
-    }
-  }
-
-  // Disconnect wallet
-  disconnect(): void {
-    disconnectWalletUtil();
-    this.setState({
-      address: null,
-      networkType: null,
-      error: null,
-    });
-    console.log('🔌 Wallet disconnected from store');
-  }
-
-  // Clear error
-  clearError(): void {
-    this.setState({error: null});
-  }
-}
-
-// Singleton instance
-export const walletStore = new WalletStore();
-
-// Initialize on import (browser only)
-if (typeof window !== 'undefined') {
-  walletStore.init();
-}
-