@voyage_ai/v402-web-ts 0.2.1 → 1.0.0

package/dist/react/index.d.mts

@@ -1,11 +1,6 @@
 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
  */
@@ -16,6 +11,23 @@ declare enum NetworkType {
     UNKNOWN = "unknown"
 }
 
+/**
+ * Wallet Discovery
+ *
+ * Discovers installed wallets using:
+ * - EIP-6963 for EVM wallets
+ * - Direct detection for Solana wallets
+ */
+
+interface WalletInfo {
+    id: string;
+    name: string;
+    icon: string;
+    networkType: NetworkType;
+    provider: any;
+    installed: boolean;
+}
+
 /**
  * useWallet Hook (External Store)
  *
@@ -28,10 +40,11 @@ interface UseWalletReturn {
     networkType: NetworkType | null;
     isConnecting: boolean;
     error: string | null;
-    connect: (networkType: NetworkType) => Promise<void>;
+    connect: (networkType: NetworkType, forceSelect?: boolean) => Promise<void>;
+    connectWithWallet: (wallet: WalletInfo) => Promise<void>;
     switchNetwork: (networkType: NetworkType) => Promise<void>;
     ensureNetwork: (networkType: NetworkType) => Promise<void>;
-    disconnect: () => void;
+    disconnect: () => Promise<void>;
     clearError: () => void;
 }
 /**
@@ -209,6 +222,43 @@ interface UsePaymentInfoReturn {
  */
 declare function usePaymentInfo(merchantId: string, endpoint?: string, additionalParams?: Record<string, any>): UsePaymentInfoReturn;
 
+type ToastType = 'success' | 'error' | 'info';
+interface ToastProps {
+    message: string;
+    type: ToastType;
+    onClose: () => void;
+}
+/**
+ * Toast 通知组件
+ * 使用 Portal 渲染到 document.body
+ */
+declare const Toast: React.FC<ToastProps>;
+
+/**
+ * Toast 管理 Hook
+ * 提供显示 toast 通知的能力
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { showToast, ToastContainer } = useToast();
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => showToast('Success!', 'success')}>
+ *         Show Toast
+ *       </button>
+ *       <ToastContainer />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare const useToast: () => {
+    showToast: (message: string, type: ToastType) => void;
+    ToastContainer: () => React.JSX.Element;
+};
+
 /**
  * WalletConnect Component
  *
@@ -220,6 +270,8 @@ interface WalletConnectProps {
     className?: string;
     onConnect?: (address: string, networkType: NetworkType) => void;
     onDisconnect?: () => void;
+    /** 是否显示切换钱包按钮，默认为 true */
+    showSwitchWallet?: boolean;
 }
 /**
  * Pre-built wallet connection component
@@ -238,13 +290,54 @@ interface WalletConnectProps {
  * }
  * ```
  */
-declare function WalletConnect({ supportedNetworks, className, onConnect, onDisconnect, }: WalletConnectProps): React.JSX.Element;
+declare function WalletConnect({ supportedNetworks, className, onConnect, onDisconnect, showSwitchWallet, }: WalletConnectProps): React.JSX.Element;
 
-interface HeaderInfo {
+/**
+ * WalletSelectModal Component
+ *
+ * Modal for selecting a wallet to connect
+ * Uses Portal to render outside parent container (avoids clipping)
+ */
+
+interface WalletSelectModalProps {
+    isOpen: boolean;
+    networkType: NetworkType;
+    onSelect: (wallet: WalletInfo) => void;
+    onClose: () => void;
+}
+declare function WalletSelectModal({ isOpen, networkType, onSelect, onClose, }: WalletSelectModalProps): React.JSX.Element | null;
+
+interface HeaderInfo$1 {
     title?: string;
     subtitle?: string;
     tooltipText?: string;
 }
+interface V402CheckoutProps$1 {
+    checkoutId: string;
+    headerInfo?: HeaderInfo$1;
+    isModal?: boolean;
+    onPaymentComplete?: (response: any) => void;
+    additionalParams?: Record<string, any>;
+    expectedNetwork?: NetworkType;
+}
+declare function V402Checkout({ checkoutId, headerInfo, isModal, onPaymentComplete, additionalParams, expectedNetwork, }: V402CheckoutProps$1): React.JSX.Element;
+
+/**
+ * Checkout 组件通用类型定义
+ */
+interface HeaderInfo {
+    /** 商品/服务标题，显示在屏幕顶部 */
+    title?: string;
+    /** 品牌名称，传空字符串则不显示品牌区域 */
+    brandName?: string;
+    /** 发票标题，默认为 "V402 PAYMENT" */
+    receiptTitle?: string;
+    /** 悬浮在三个小点上显示的提示文本 */
+    tooltipText?: string;
+}
+/**
+ * V402Checkout 组件 Props (V1)
+ */
 interface V402CheckoutProps {
     checkoutId: string;
     headerInfo?: HeaderInfo;
@@ -253,6 +346,42 @@ interface V402CheckoutProps {
     additionalParams?: Record<string, any>;
     expectedNetwork?: NetworkType;
 }
-declare function V402Checkout({ checkoutId, headerInfo, isModal, onPaymentComplete, additionalParams, expectedNetwork, }: V402CheckoutProps): React.JSX.Element;
+/**
+ * V402CheckoutV2 组件 Props
+ * 简化版本，更直观的配置
+ */
+interface V402CheckoutV2Props {
+    /** Checkout ID */
+    checkoutId: string;
+    /** 头部信息配置 */
+    headerInfo?: HeaderInfo;
+    /** 主题颜色，默认为绿色 #84cc16 */
+    primaryColor?: string;
+    /** 是否作为 Modal 使用 */
+    isModal?: boolean;
+    /** 支付完成回调 */
+    onPaymentComplete?: (response: any) => void;
+    /** 额外参数，会透传给 checkout 配置的回调 */
+    additionalParams?: Record<string, any>;
+    /** 期望的网络类型 */
+    expectedNetwork?: NetworkType;
+}
+
+/**
+ * V402 Checkout V2 组件
+ * 全新设计的支付终端风格界面
+ */
+declare function V402CheckoutV2({ checkoutId, headerInfo, primaryColor, isModal, onPaymentComplete, additionalParams, expectedNetwork, }: V402CheckoutV2Props): React.JSX.Element;
+
+/**
+ * CSS 动画定义
+ * 用于 checkout 组件的各种动画效果
+ */
+declare const checkoutAnimations = "\n    @keyframes spin {\n        from { transform: rotate(0deg); }\n        to { transform: rotate(360deg); }\n    }\n    \n    @keyframes receiptShake {\n        0%, 100% { transform: rotate(-0.3deg); }\n        50% { transform: rotate(0.3deg); }\n    }\n    \n    @keyframes slideInRight {\n        from {\n            opacity: 0;\n            transform: translateX(100px);\n        }\n        to {\n            opacity: 1;\n            transform: translateX(0);\n        }\n    }\n    \n    @keyframes pulse {\n        0%, 100% { opacity: 1; }\n        50% { opacity: 0.4; }\n    }\n";
+/**
+ * 动画样式组件
+ * 用于注入 CSS 动画到页面
+ */
+declare const AnimationStyles: () => React.JSX.Element;
 
-export { type UsePageNetworkOptions, type UsePaymentInfoReturn, type UsePaymentReturn, type UseWalletReturn, V402Checkout, type V402CheckoutProps, WalletConnect, type WalletConnectProps, usePageNetwork, usePayment, usePaymentInfo, useWallet };
+export { AnimationStyles, Toast, type ToastProps, type ToastType, type UsePageNetworkOptions, type UsePaymentInfoReturn, type UsePaymentReturn, type UseWalletReturn, V402Checkout, type V402CheckoutProps, V402CheckoutV2, type V402CheckoutV2Props, WalletConnect, type WalletConnectProps, WalletSelectModal, type WalletSelectModalProps, checkoutAnimations, usePageNetwork, usePayment, usePaymentInfo, useToast, useWallet };

package/dist/react/index.d.ts

@@ -1,11 +1,6 @@
 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
  */
@@ -16,6 +11,23 @@ declare enum NetworkType {
     UNKNOWN = "unknown"
 }
 
+/**
+ * Wallet Discovery
+ *
+ * Discovers installed wallets using:
+ * - EIP-6963 for EVM wallets
+ * - Direct detection for Solana wallets
+ */
+
+interface WalletInfo {
+    id: string;
+    name: string;
+    icon: string;
+    networkType: NetworkType;
+    provider: any;
+    installed: boolean;
+}
+
 /**
  * useWallet Hook (External Store)
  *
@@ -28,10 +40,11 @@ interface UseWalletReturn {
     networkType: NetworkType | null;
     isConnecting: boolean;
     error: string | null;
-    connect: (networkType: NetworkType) => Promise<void>;
+    connect: (networkType: NetworkType, forceSelect?: boolean) => Promise<void>;
+    connectWithWallet: (wallet: WalletInfo) => Promise<void>;
     switchNetwork: (networkType: NetworkType) => Promise<void>;
     ensureNetwork: (networkType: NetworkType) => Promise<void>;
-    disconnect: () => void;
+    disconnect: () => Promise<void>;
     clearError: () => void;
 }
 /**
@@ -209,6 +222,43 @@ interface UsePaymentInfoReturn {
  */
 declare function usePaymentInfo(merchantId: string, endpoint?: string, additionalParams?: Record<string, any>): UsePaymentInfoReturn;
 
+type ToastType = 'success' | 'error' | 'info';
+interface ToastProps {
+    message: string;
+    type: ToastType;
+    onClose: () => void;
+}
+/**
+ * Toast 通知组件
+ * 使用 Portal 渲染到 document.body
+ */
+declare const Toast: React.FC<ToastProps>;
+
+/**
+ * Toast 管理 Hook
+ * 提供显示 toast 通知的能力
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { showToast, ToastContainer } = useToast();
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => showToast('Success!', 'success')}>
+ *         Show Toast
+ *       </button>
+ *       <ToastContainer />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare const useToast: () => {
+    showToast: (message: string, type: ToastType) => void;
+    ToastContainer: () => React.JSX.Element;
+};
+
 /**
  * WalletConnect Component
  *
@@ -220,6 +270,8 @@ interface WalletConnectProps {
     className?: string;
     onConnect?: (address: string, networkType: NetworkType) => void;
     onDisconnect?: () => void;
+    /** 是否显示切换钱包按钮，默认为 true */
+    showSwitchWallet?: boolean;
 }
 /**
  * Pre-built wallet connection component
@@ -238,13 +290,54 @@ interface WalletConnectProps {
  * }
  * ```
  */
-declare function WalletConnect({ supportedNetworks, className, onConnect, onDisconnect, }: WalletConnectProps): React.JSX.Element;
+declare function WalletConnect({ supportedNetworks, className, onConnect, onDisconnect, showSwitchWallet, }: WalletConnectProps): React.JSX.Element;
 
-interface HeaderInfo {
+/**
+ * WalletSelectModal Component
+ *
+ * Modal for selecting a wallet to connect
+ * Uses Portal to render outside parent container (avoids clipping)
+ */
+
+interface WalletSelectModalProps {
+    isOpen: boolean;
+    networkType: NetworkType;
+    onSelect: (wallet: WalletInfo) => void;
+    onClose: () => void;
+}
+declare function WalletSelectModal({ isOpen, networkType, onSelect, onClose, }: WalletSelectModalProps): React.JSX.Element | null;
+
+interface HeaderInfo$1 {
     title?: string;
     subtitle?: string;
     tooltipText?: string;
 }
+interface V402CheckoutProps$1 {
+    checkoutId: string;
+    headerInfo?: HeaderInfo$1;
+    isModal?: boolean;
+    onPaymentComplete?: (response: any) => void;
+    additionalParams?: Record<string, any>;
+    expectedNetwork?: NetworkType;
+}
+declare function V402Checkout({ checkoutId, headerInfo, isModal, onPaymentComplete, additionalParams, expectedNetwork, }: V402CheckoutProps$1): React.JSX.Element;
+
+/**
+ * Checkout 组件通用类型定义
+ */
+interface HeaderInfo {
+    /** 商品/服务标题，显示在屏幕顶部 */
+    title?: string;
+    /** 品牌名称，传空字符串则不显示品牌区域 */
+    brandName?: string;
+    /** 发票标题，默认为 "V402 PAYMENT" */
+    receiptTitle?: string;
+    /** 悬浮在三个小点上显示的提示文本 */
+    tooltipText?: string;
+}
+/**
+ * V402Checkout 组件 Props (V1)
+ */
 interface V402CheckoutProps {
     checkoutId: string;
     headerInfo?: HeaderInfo;
@@ -253,6 +346,42 @@ interface V402CheckoutProps {
     additionalParams?: Record<string, any>;
     expectedNetwork?: NetworkType;
 }
-declare function V402Checkout({ checkoutId, headerInfo, isModal, onPaymentComplete, additionalParams, expectedNetwork, }: V402CheckoutProps): React.JSX.Element;
+/**
+ * V402CheckoutV2 组件 Props
+ * 简化版本，更直观的配置
+ */
+interface V402CheckoutV2Props {
+    /** Checkout ID */
+    checkoutId: string;
+    /** 头部信息配置 */
+    headerInfo?: HeaderInfo;
+    /** 主题颜色，默认为绿色 #84cc16 */
+    primaryColor?: string;
+    /** 是否作为 Modal 使用 */
+    isModal?: boolean;
+    /** 支付完成回调 */
+    onPaymentComplete?: (response: any) => void;
+    /** 额外参数，会透传给 checkout 配置的回调 */
+    additionalParams?: Record<string, any>;
+    /** 期望的网络类型 */
+    expectedNetwork?: NetworkType;
+}
+
+/**
+ * V402 Checkout V2 组件
+ * 全新设计的支付终端风格界面
+ */
+declare function V402CheckoutV2({ checkoutId, headerInfo, primaryColor, isModal, onPaymentComplete, additionalParams, expectedNetwork, }: V402CheckoutV2Props): React.JSX.Element;
+
+/**
+ * CSS 动画定义
+ * 用于 checkout 组件的各种动画效果
+ */
+declare const checkoutAnimations = "\n    @keyframes spin {\n        from { transform: rotate(0deg); }\n        to { transform: rotate(360deg); }\n    }\n    \n    @keyframes receiptShake {\n        0%, 100% { transform: rotate(-0.3deg); }\n        50% { transform: rotate(0.3deg); }\n    }\n    \n    @keyframes slideInRight {\n        from {\n            opacity: 0;\n            transform: translateX(100px);\n        }\n        to {\n            opacity: 1;\n            transform: translateX(0);\n        }\n    }\n    \n    @keyframes pulse {\n        0%, 100% { opacity: 1; }\n        50% { opacity: 0.4; }\n    }\n";
+/**
+ * 动画样式组件
+ * 用于注入 CSS 动画到页面
+ */
+declare const AnimationStyles: () => React.JSX.Element;
 
-export { type UsePageNetworkOptions, type UsePaymentInfoReturn, type UsePaymentReturn, type UseWalletReturn, V402Checkout, type V402CheckoutProps, WalletConnect, type WalletConnectProps, usePageNetwork, usePayment, usePaymentInfo, useWallet };
+export { AnimationStyles, Toast, type ToastProps, type ToastType, type UsePageNetworkOptions, type UsePaymentInfoReturn, type UsePaymentReturn, type UseWalletReturn, V402Checkout, type V402CheckoutProps, V402CheckoutV2, type V402CheckoutV2Props, WalletConnect, type WalletConnectProps, WalletSelectModal, type WalletSelectModalProps, checkoutAnimations, usePageNetwork, usePayment, usePaymentInfo, useToast, useWallet };