@voyage_ai/v402-web-ts 0.1.2 → 0.1.4

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,38 +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';

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();
-}
-

package/dist/react/styles/inline-styles.ts

@@ -1,238 +0,0 @@
-/**
- * Inline styles for x402 React Components
- *
- * Modern, minimal, and flat design without gradients or fancy borders.
- * All styles are defined as JavaScript objects to ensure they're always bundled
- * with the components. This eliminates the need for users to import CSS files.
- */
-
-import {CSSProperties} from 'react';
-
-// 检测是否支持暗色模式
-export const isDarkMode = (): boolean => {
-  if (typeof window === 'undefined') return false;
-  return window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
-};
-
-// 现代简约配色 - 扁平化设计
-const colors = {
-  // Light mode
-  light: {
-    background: '#fafafa',
-    cardBg: '#ffffff',
-    text: '#0a0a0a',
-    textSecondary: '#737373',
-    primary: '#000000',
-    primaryHover: '#262626',
-    danger: '#ef4444',
-    dangerHover: '#dc2626',
-    success: '#10b981',
-    successHover: '#059669',
-    disabled: '#e5e5e5',
-    disabledText: '#a3a3a3',
-    errorBg: '#fef2f2',
-    errorText: '#dc2626',
-  },
-  // Dark mode
-  dark: {
-    background: '#0a0a0a',
-    cardBg: '#171717',
-    text: '#fafafa',
-    textSecondary: '#a3a3a3',
-    primary: '#ffffff',
-    primaryHover: '#e5e5e5',
-    danger: '#f87171',
-    dangerHover: '#ef4444',
-    success: '#34d399',
-    successHover: '#10b981',
-    disabled: '#262626',
-    disabledText: '#525252',
-    errorBg: '#1c1917',
-    errorText: '#f87171',
-  },
-};
-
-// 获取当前主题颜色
-export const getColors = () => {
-  return isDarkMode() ? colors.dark : colors.light;
-};
-
-// 容器样式
-export const containerStyle: CSSProperties = {
-  width: '100%',
-  maxWidth: '420px',
-  margin: '0 auto',
-};
-
-// 钱包区块样式 - 极简无边框
-export const getSectionStyle = (): CSSProperties => {
-  const c = getColors();
-  return {
-    padding: '1.5rem',
-    background: c.cardBg,
-    borderRadius: '12px',
-  };
-};
-
-// 标题样式 - 简洁
-export const getTitleStyle = (): CSSProperties => {
-  const c = getColors();
-  return {
-    margin: '0 0 1.25rem 0',
-    fontSize: '1.125rem',
-    fontWeight: 600,
-    color: c.text,
-    letterSpacing: '-0.01em',
-  };
-};
-
-// 按钮容器样式
-export const buttonsContainerStyle: CSSProperties = {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '0.75rem',
-};
-
-// 钱包选项样式
-export const walletOptionStyle: CSSProperties = {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '0.5rem',
-};
-
-// 基础按钮样式 - 扁平化
-const baseButtonStyle: CSSProperties = {
-  padding: '0.875rem 1.25rem',
-  fontSize: '0.9375rem',
-  fontWeight: 500,
-  border: 'none',
-  borderRadius: '8px',
-  cursor: 'pointer',
-  transition: 'background-color 0.15s ease, opacity 0.15s ease',
-  outline: 'none',
-  letterSpacing: '-0.01em',
-};
-
-// 连接按钮样式 - 纯黑/纯白
-export const getConnectButtonStyle = (isDisabled: boolean, isHovered: boolean): CSSProperties => {
-  const c = getColors();
-  const darkMode = isDarkMode();
-  
-  if (isDisabled) {
-    return {
-      ...baseButtonStyle,
-      background: c.disabled,
-      color: c.disabledText,
-      cursor: 'not-allowed',
-      border: darkMode ? '1px solid #404040' : '1px solid #d4d4d4',
-    };
-  }
-  
-  return {
-    ...baseButtonStyle,
-    background: isHovered ? c.primaryHover : c.primary,
-    color: darkMode ? '#000000' : '#ffffff',
-    cursor: 'pointer',
-  };
-};
-
-// 断开连接按钮样式
-export const getDisconnectButtonStyle = (isHovered: boolean): CSSProperties => {
-  const c = getColors();
-  return {
-    ...baseButtonStyle,
-    background: isHovered ? c.dangerHover : c.danger,
-    color: '#ffffff',
-  };
-};
-
-// 支付按钮样式
-export const getPayButtonStyle = (isDisabled: boolean, isHovered: boolean): CSSProperties => {
-  const c = getColors();
-  return {
-    ...baseButtonStyle,
-    background: isDisabled ? c.disabled : (isHovered ? c.successHover : c.success),
-    color: '#ffffff',
-    width: '100%',
-    cursor: isDisabled ? 'not-allowed' : 'pointer',
-    opacity: isDisabled ? 0.5 : 1,
-  };
-};
-
-// 安装链接样式 - 简洁
-export const getInstallLinkStyle = (isHovered: boolean): CSSProperties => {
-  const c = getColors();
-  return {
-    display: 'inline-block',
-    padding: '0.5rem',
-    fontSize: '0.8125rem',
-    color: c.textSecondary,
-    textDecoration: isHovered ? 'underline' : 'none',
-    textAlign: 'center',
-    fontWeight: 500,
-  };
-};
-
-// 钱包地址容器样式
-export const walletAddressStyle: CSSProperties = {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '0.5rem',
-  marginBottom: '1rem',
-};
-
-// 钱包标签样式
-export const getLabelStyle = (): CSSProperties => {
-  const c = getColors();
-  return {
-    fontSize: '0.8125rem',
-    color: c.textSecondary,
-    fontWeight: 500,
-    textTransform: 'uppercase',
-    letterSpacing: '0.05em',
-  };
-};
-
-// 地址样式
-export const getAddressStyle = (): CSSProperties => {
-  const c = getColors();
-  return {
-    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
-    fontSize: '0.9375rem',
-    fontWeight: 500,
-    color: c.text,
-    letterSpacing: '-0.01em',
-  };
-};
-
-// 钱包操作区域样式
-export const walletActionsStyle: CSSProperties = {
-  margin: '1rem 0',
-};
-
-// 提示文字样式
-export const getHintStyle = (): CSSProperties => {
-  const c = getColors();
-  return {
-    marginTop: '1rem',
-    fontSize: '0.8125rem',
-    color: c.textSecondary,
-    textAlign: 'center',
-    lineHeight: '1.5',
-  };
-};
-
-// 错误信息样式 - 扁平化
-export const getErrorStyle = (): CSSProperties => {
-  const c = getColors();
-  return {
-    marginTop: '1rem',
-    padding: '0.75rem 1rem',
-    background: c.errorBg,
-    color: c.errorText,
-    borderRadius: '8px',
-    fontSize: '0.8125rem',
-    fontWeight: 500,
-  };
-};
-