@t402/react 2.3.1 → 2.4.0

package/dist/cjs/index.d.cts

@@ -431,6 +431,310 @@ interface UseAsyncPaymentResult<T> {
  */
 declare function useAsyncPayment<T>(options: UseAsyncPaymentOptions<T>): UseAsyncPaymentResult<T>;
 
+interface GaslessPaymentOptions {
+    /** Gasless payment function */
+    payFn: (params: {
+        to: string;
+        amount: bigint;
+        token?: string;
+    }) => Promise<{
+        userOpHash: string;
+        sender: string;
+        sponsored: boolean;
+        wait: () => Promise<{
+            txHash: string;
+            success: boolean;
+        }>;
+    }>;
+    /** Callback on successful payment confirmation */
+    onSuccess?: (receipt: {
+        txHash: string;
+        success: boolean;
+    }) => void;
+    /** Callback on payment error */
+    onError?: (error: Error) => void;
+    /** Whether to automatically wait for receipt after submission */
+    autoWait?: boolean;
+}
+interface GaslessPaymentResult {
+    /** Execute a gasless payment */
+    pay: (params: {
+        to: string;
+        amount: bigint;
+        token?: string;
+    }) => Promise<void>;
+    /** Current payment status */
+    status: PaymentStatus$1;
+    /** UserOperation hash after submission */
+    userOpHash: string | null;
+    /** Transaction hash after confirmation */
+    txHash: string | null;
+    /** Whether gas was sponsored */
+    sponsored: boolean | null;
+    /** Error message if failed */
+    error: string | null;
+    /** Whether payment is in progress */
+    isLoading: boolean;
+    /** Whether payment succeeded */
+    isSuccess: boolean;
+    /** Whether payment failed */
+    isError: boolean;
+    /** Reset state */
+    reset: () => void;
+}
+/**
+ * Hook for gasless ERC-4337 payments via WDK.
+ *
+ * @param options - Configuration including the gasless payment function and callbacks.
+ * @returns State and methods for managing gasless payments.
+ *
+ * @example
+ * ```tsx
+ * import { useGaslessPayment } from "@t402/react";
+ *
+ * function GaslessPayButton({ client }) {
+ *   const { pay, isLoading, isSuccess, txHash, sponsored, error } = useGaslessPayment({
+ *     payFn: (params) => client.pay(params),
+ *     onSuccess: (receipt) => console.log("Confirmed:", receipt.txHash),
+ *     autoWait: true,
+ *   });
+ *
+ *   return (
+ *     <button onClick={() => pay({ to: "0x...", amount: 1000000n })} disabled={isLoading}>
+ *       {isLoading ? "Processing..." : "Pay Gasless"}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare function useGaslessPayment(options: GaslessPaymentOptions): GaslessPaymentResult;
+
+type BridgeStatus = 'idle' | 'quoting' | 'bridging' | 'waiting' | 'success' | 'error';
+interface BridgePaymentOptions {
+    /** Bridge function */
+    bridgeFn: (params: {
+        fromChain: string;
+        toChain: string;
+        amount: bigint;
+        recipient: string;
+        slippageTolerance?: number;
+    }) => Promise<{
+        txHash: string;
+        messageGuid: string;
+        fromChain: string;
+        toChain: string;
+        amountSent: bigint;
+        waitForDelivery: (options?: {
+            timeout?: number;
+        }) => Promise<{
+            success: boolean;
+            status: string;
+            dstTxHash?: string;
+        }>;
+    }>;
+    /** Optional auto-bridge function for automatic source chain selection */
+    autoBridgeFn?: (params: {
+        toChain: string;
+        amount: bigint;
+        recipient: string;
+        preferredSourceChain?: string;
+        slippageTolerance?: number;
+    }) => Promise<{
+        txHash: string;
+        messageGuid: string;
+        fromChain: string;
+        toChain: string;
+        amountSent: bigint;
+        waitForDelivery: (options?: {
+            timeout?: number;
+        }) => Promise<{
+            success: boolean;
+            status: string;
+            dstTxHash?: string;
+        }>;
+    }>;
+    /** Callback on successful delivery */
+    onSuccess?: (result: {
+        txHash: string;
+        dstTxHash?: string;
+        fromChain: string;
+        toChain: string;
+    }) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+    /** Whether to automatically wait for delivery (default: false) */
+    autoWaitForDelivery?: boolean;
+}
+interface BridgePaymentResult {
+    /** Execute a bridge from a specific chain */
+    bridge: (params: {
+        fromChain: string;
+        toChain: string;
+        amount: bigint;
+        recipient: string;
+        slippageTolerance?: number;
+    }) => Promise<void>;
+    /** Execute an auto-bridge with automatic source chain selection */
+    autoBridge: (params: {
+        toChain: string;
+        amount: bigint;
+        recipient: string;
+        preferredSourceChain?: string;
+        slippageTolerance?: number;
+    }) => Promise<void>;
+    /** Current status */
+    status: BridgeStatus;
+    /** Source chain transaction hash */
+    txHash: string | null;
+    /** LayerZero message GUID */
+    messageGuid: string | null;
+    /** Destination chain transaction hash */
+    dstTxHash: string | null;
+    /** Error message if failed */
+    error: string | null;
+    /** Whether bridge is in progress */
+    isLoading: boolean;
+    /** Whether bridge succeeded */
+    isSuccess: boolean;
+    /** Whether bridge failed */
+    isError: boolean;
+    /** Reset state */
+    reset: () => void;
+}
+/**
+ * Hook for cross-chain USDT0 bridging via WDK.
+ *
+ * @param options - Configuration including bridge functions and callbacks.
+ * @returns State and methods for managing bridge operations.
+ *
+ * @example
+ * ```tsx
+ * import { useBridgePayment } from "@t402/react";
+ *
+ * function BridgeButton({ bridgeClient }) {
+ *   const { autoBridge, isLoading, isSuccess, txHash, error } = useBridgePayment({
+ *     bridgeFn: (params) => bridgeClient.bridge(params),
+ *     autoBridgeFn: (params) => bridgeClient.autoBridge(params),
+ *     onSuccess: (result) => console.log("Bridged:", result),
+ *   });
+ *
+ *   return (
+ *     <button
+ *       onClick={() => autoBridge({ toChain: "arbitrum", amount: 100_000000n, recipient: "0x..." })}
+ *       disabled={isLoading}
+ *     >
+ *       {isLoading ? "Bridging..." : "Bridge USDT0"}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare function useBridgePayment(options: BridgePaymentOptions): BridgePaymentResult;
+
+type MultiSigStatus = 'idle' | 'initiating' | 'collecting' | 'submitting' | 'success' | 'error';
+interface MultiSigPaymentOptions {
+    /** Initiate a multi-sig payment requiring threshold signatures */
+    initiateFn: (params: {
+        to: string;
+        amount: bigint;
+        token?: string;
+    }) => Promise<{
+        requestId: string;
+        userOpHash: string;
+        threshold: number;
+        collectedCount: number;
+        isReady: boolean;
+    }>;
+    /** Submit the transaction after collecting enough signatures */
+    submitFn: (requestId: string) => Promise<{
+        userOpHash: string;
+        wait: () => Promise<{
+            txHash: string;
+            success: boolean;
+        }>;
+    }>;
+    /** Callback on successful submission and confirmation */
+    onSuccess?: (receipt: {
+        txHash: string;
+        success: boolean;
+    }) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+    /** Whether to automatically wait for receipt after submission */
+    autoWait?: boolean;
+}
+interface MultiSigPaymentResult {
+    /** Initiate a multi-sig payment */
+    initiate: (params: {
+        to: string;
+        amount: bigint;
+        token?: string;
+    }) => Promise<void>;
+    /** Submit the transaction (when enough signatures are collected) */
+    submit: () => Promise<void>;
+    /** Current status */
+    status: MultiSigStatus;
+    /** Active request ID */
+    requestId: string | null;
+    /** UserOperation hash */
+    userOpHash: string | null;
+    /** Transaction hash after confirmation */
+    txHash: string | null;
+    /** Required signature threshold */
+    threshold: number;
+    /** Number of collected signatures */
+    collectedCount: number;
+    /** Whether enough signatures are collected */
+    isReady: boolean;
+    /** Error message if failed */
+    error: string | null;
+    /** Whether operation is in progress */
+    isLoading: boolean;
+    /** Whether operation succeeded */
+    isSuccess: boolean;
+    /** Whether operation failed */
+    isError: boolean;
+    /** Reset state */
+    reset: () => void;
+}
+/**
+ * Hook for multi-sig Safe payments via WDK.
+ *
+ * @param options - Configuration including initiate/submit functions and callbacks.
+ * @returns State and methods for managing multi-sig payment lifecycle.
+ *
+ * @example
+ * ```tsx
+ * import { useMultiSigPayment } from "@t402/react";
+ *
+ * function MultiSigPayButton({ multiSigClient }) {
+ *   const { initiate, submit, status, isReady, threshold, collectedCount, error } =
+ *     useMultiSigPayment({
+ *       initiateFn: (params) => multiSigClient.initiatePayment(params),
+ *       submitFn: (requestId) => multiSigClient.submitRequest(requestId),
+ *       onSuccess: (receipt) => console.log("Confirmed:", receipt.txHash),
+ *       autoWait: true,
+ *     });
+ *
+ *   return (
+ *     <div>
+ *       {status === "idle" && (
+ *         <button onClick={() => initiate({ to: "0x...", amount: 1000000n })}>
+ *           Initiate Payment
+ *         </button>
+ *       )}
+ *       {status === "collecting" && (
+ *         <p>Collecting signatures: {collectedCount}/{threshold}</p>
+ *       )}
+ *       {isReady && <button onClick={submit}>Submit Transaction</button>}
+ *       {error && <p>Error: {error}</p>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useMultiSigPayment(options: MultiSigPaymentOptions): MultiSigPaymentResult;
+
 declare const PaymentContext: react.Context<PaymentContextValue | null>;
 /**
  * Payment context provider for t402 payment state management.
@@ -590,4 +894,4 @@ declare function formatTokenAmount(amount: string, decimals?: number, maxDecimal
  */
 declare function getAssetDisplayName(asset: string): string;
 
-export { AddressDisplay, type AddressDisplayProps, EVM_CHAIN_IDS, type PaymentActions, PaymentButton, type PaymentButtonProps, PaymentContext, type PaymentContextValue, PaymentDetails, type PaymentDetailsProps, PaymentProvider, type PaymentProviderProps, type PaymentState, type PaymentStatus$1 as PaymentStatus, PaymentStatus as PaymentStatusDisplay, type PaymentStatusProps, SOLANA_NETWORK_REFS, Spinner, type SpinnerProps, TON_NETWORK_REFS, TRON_NETWORK_REFS, choosePaymentRequirement, formatTokenAmount, getAssetDisplayName, getNetworkDisplayName, getPreferredNetworks, isEvmNetwork, isSvmNetwork, isTestnetNetwork, isTonNetwork, isTronNetwork, normalizePaymentRequirements, truncateAddress, useAsyncPayment, usePaymentContext, usePaymentRequired, usePaymentStatus };
+export { AddressDisplay, type AddressDisplayProps, EVM_CHAIN_IDS, type PaymentActions, PaymentButton, type PaymentButtonProps, PaymentContext, type PaymentContextValue, PaymentDetails, type PaymentDetailsProps, PaymentProvider, type PaymentProviderProps, type PaymentState, type PaymentStatus$1 as PaymentStatus, PaymentStatus as PaymentStatusDisplay, type PaymentStatusProps, SOLANA_NETWORK_REFS, Spinner, type SpinnerProps, TON_NETWORK_REFS, TRON_NETWORK_REFS, choosePaymentRequirement, formatTokenAmount, getAssetDisplayName, getNetworkDisplayName, getPreferredNetworks, isEvmNetwork, isSvmNetwork, isTestnetNetwork, isTonNetwork, isTronNetwork, normalizePaymentRequirements, truncateAddress, useAsyncPayment, useBridgePayment, useGaslessPayment, useMultiSigPayment, usePaymentContext, usePaymentRequired, usePaymentStatus };

package/dist/esm/index.d.ts

@@ -431,6 +431,310 @@ interface UseAsyncPaymentResult<T> {
  */
 declare function useAsyncPayment<T>(options: UseAsyncPaymentOptions<T>): UseAsyncPaymentResult<T>;
 
+interface GaslessPaymentOptions {
+    /** Gasless payment function */
+    payFn: (params: {
+        to: string;
+        amount: bigint;
+        token?: string;
+    }) => Promise<{
+        userOpHash: string;
+        sender: string;
+        sponsored: boolean;
+        wait: () => Promise<{
+            txHash: string;
+            success: boolean;
+        }>;
+    }>;
+    /** Callback on successful payment confirmation */
+    onSuccess?: (receipt: {
+        txHash: string;
+        success: boolean;
+    }) => void;
+    /** Callback on payment error */
+    onError?: (error: Error) => void;
+    /** Whether to automatically wait for receipt after submission */
+    autoWait?: boolean;
+}
+interface GaslessPaymentResult {
+    /** Execute a gasless payment */
+    pay: (params: {
+        to: string;
+        amount: bigint;
+        token?: string;
+    }) => Promise<void>;
+    /** Current payment status */
+    status: PaymentStatus$1;
+    /** UserOperation hash after submission */
+    userOpHash: string | null;
+    /** Transaction hash after confirmation */
+    txHash: string | null;
+    /** Whether gas was sponsored */
+    sponsored: boolean | null;
+    /** Error message if failed */
+    error: string | null;
+    /** Whether payment is in progress */
+    isLoading: boolean;
+    /** Whether payment succeeded */
+    isSuccess: boolean;
+    /** Whether payment failed */
+    isError: boolean;
+    /** Reset state */
+    reset: () => void;
+}
+/**
+ * Hook for gasless ERC-4337 payments via WDK.
+ *
+ * @param options - Configuration including the gasless payment function and callbacks.
+ * @returns State and methods for managing gasless payments.
+ *
+ * @example
+ * ```tsx
+ * import { useGaslessPayment } from "@t402/react";
+ *
+ * function GaslessPayButton({ client }) {
+ *   const { pay, isLoading, isSuccess, txHash, sponsored, error } = useGaslessPayment({
+ *     payFn: (params) => client.pay(params),
+ *     onSuccess: (receipt) => console.log("Confirmed:", receipt.txHash),
+ *     autoWait: true,
+ *   });
+ *
+ *   return (
+ *     <button onClick={() => pay({ to: "0x...", amount: 1000000n })} disabled={isLoading}>
+ *       {isLoading ? "Processing..." : "Pay Gasless"}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare function useGaslessPayment(options: GaslessPaymentOptions): GaslessPaymentResult;
+
+type BridgeStatus = 'idle' | 'quoting' | 'bridging' | 'waiting' | 'success' | 'error';
+interface BridgePaymentOptions {
+    /** Bridge function */
+    bridgeFn: (params: {
+        fromChain: string;
+        toChain: string;
+        amount: bigint;
+        recipient: string;
+        slippageTolerance?: number;
+    }) => Promise<{
+        txHash: string;
+        messageGuid: string;
+        fromChain: string;
+        toChain: string;
+        amountSent: bigint;
+        waitForDelivery: (options?: {
+            timeout?: number;
+        }) => Promise<{
+            success: boolean;
+            status: string;
+            dstTxHash?: string;
+        }>;
+    }>;
+    /** Optional auto-bridge function for automatic source chain selection */
+    autoBridgeFn?: (params: {
+        toChain: string;
+        amount: bigint;
+        recipient: string;
+        preferredSourceChain?: string;
+        slippageTolerance?: number;
+    }) => Promise<{
+        txHash: string;
+        messageGuid: string;
+        fromChain: string;
+        toChain: string;
+        amountSent: bigint;
+        waitForDelivery: (options?: {
+            timeout?: number;
+        }) => Promise<{
+            success: boolean;
+            status: string;
+            dstTxHash?: string;
+        }>;
+    }>;
+    /** Callback on successful delivery */
+    onSuccess?: (result: {
+        txHash: string;
+        dstTxHash?: string;
+        fromChain: string;
+        toChain: string;
+    }) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+    /** Whether to automatically wait for delivery (default: false) */
+    autoWaitForDelivery?: boolean;
+}
+interface BridgePaymentResult {
+    /** Execute a bridge from a specific chain */
+    bridge: (params: {
+        fromChain: string;
+        toChain: string;
+        amount: bigint;
+        recipient: string;
+        slippageTolerance?: number;
+    }) => Promise<void>;
+    /** Execute an auto-bridge with automatic source chain selection */
+    autoBridge: (params: {
+        toChain: string;
+        amount: bigint;
+        recipient: string;
+        preferredSourceChain?: string;
+        slippageTolerance?: number;
+    }) => Promise<void>;
+    /** Current status */
+    status: BridgeStatus;
+    /** Source chain transaction hash */
+    txHash: string | null;
+    /** LayerZero message GUID */
+    messageGuid: string | null;
+    /** Destination chain transaction hash */
+    dstTxHash: string | null;
+    /** Error message if failed */
+    error: string | null;
+    /** Whether bridge is in progress */
+    isLoading: boolean;
+    /** Whether bridge succeeded */
+    isSuccess: boolean;
+    /** Whether bridge failed */
+    isError: boolean;
+    /** Reset state */
+    reset: () => void;
+}
+/**
+ * Hook for cross-chain USDT0 bridging via WDK.
+ *
+ * @param options - Configuration including bridge functions and callbacks.
+ * @returns State and methods for managing bridge operations.
+ *
+ * @example
+ * ```tsx
+ * import { useBridgePayment } from "@t402/react";
+ *
+ * function BridgeButton({ bridgeClient }) {
+ *   const { autoBridge, isLoading, isSuccess, txHash, error } = useBridgePayment({
+ *     bridgeFn: (params) => bridgeClient.bridge(params),
+ *     autoBridgeFn: (params) => bridgeClient.autoBridge(params),
+ *     onSuccess: (result) => console.log("Bridged:", result),
+ *   });
+ *
+ *   return (
+ *     <button
+ *       onClick={() => autoBridge({ toChain: "arbitrum", amount: 100_000000n, recipient: "0x..." })}
+ *       disabled={isLoading}
+ *     >
+ *       {isLoading ? "Bridging..." : "Bridge USDT0"}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare function useBridgePayment(options: BridgePaymentOptions): BridgePaymentResult;
+
+type MultiSigStatus = 'idle' | 'initiating' | 'collecting' | 'submitting' | 'success' | 'error';
+interface MultiSigPaymentOptions {
+    /** Initiate a multi-sig payment requiring threshold signatures */
+    initiateFn: (params: {
+        to: string;
+        amount: bigint;
+        token?: string;
+    }) => Promise<{
+        requestId: string;
+        userOpHash: string;
+        threshold: number;
+        collectedCount: number;
+        isReady: boolean;
+    }>;
+    /** Submit the transaction after collecting enough signatures */
+    submitFn: (requestId: string) => Promise<{
+        userOpHash: string;
+        wait: () => Promise<{
+            txHash: string;
+            success: boolean;
+        }>;
+    }>;
+    /** Callback on successful submission and confirmation */
+    onSuccess?: (receipt: {
+        txHash: string;
+        success: boolean;
+    }) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+    /** Whether to automatically wait for receipt after submission */
+    autoWait?: boolean;
+}
+interface MultiSigPaymentResult {
+    /** Initiate a multi-sig payment */
+    initiate: (params: {
+        to: string;
+        amount: bigint;
+        token?: string;
+    }) => Promise<void>;
+    /** Submit the transaction (when enough signatures are collected) */
+    submit: () => Promise<void>;
+    /** Current status */
+    status: MultiSigStatus;
+    /** Active request ID */
+    requestId: string | null;
+    /** UserOperation hash */
+    userOpHash: string | null;
+    /** Transaction hash after confirmation */
+    txHash: string | null;
+    /** Required signature threshold */
+    threshold: number;
+    /** Number of collected signatures */
+    collectedCount: number;
+    /** Whether enough signatures are collected */
+    isReady: boolean;
+    /** Error message if failed */
+    error: string | null;
+    /** Whether operation is in progress */
+    isLoading: boolean;
+    /** Whether operation succeeded */
+    isSuccess: boolean;
+    /** Whether operation failed */
+    isError: boolean;
+    /** Reset state */
+    reset: () => void;
+}
+/**
+ * Hook for multi-sig Safe payments via WDK.
+ *
+ * @param options - Configuration including initiate/submit functions and callbacks.
+ * @returns State and methods for managing multi-sig payment lifecycle.
+ *
+ * @example
+ * ```tsx
+ * import { useMultiSigPayment } from "@t402/react";
+ *
+ * function MultiSigPayButton({ multiSigClient }) {
+ *   const { initiate, submit, status, isReady, threshold, collectedCount, error } =
+ *     useMultiSigPayment({
+ *       initiateFn: (params) => multiSigClient.initiatePayment(params),
+ *       submitFn: (requestId) => multiSigClient.submitRequest(requestId),
+ *       onSuccess: (receipt) => console.log("Confirmed:", receipt.txHash),
+ *       autoWait: true,
+ *     });
+ *
+ *   return (
+ *     <div>
+ *       {status === "idle" && (
+ *         <button onClick={() => initiate({ to: "0x...", amount: 1000000n })}>
+ *           Initiate Payment
+ *         </button>
+ *       )}
+ *       {status === "collecting" && (
+ *         <p>Collecting signatures: {collectedCount}/{threshold}</p>
+ *       )}
+ *       {isReady && <button onClick={submit}>Submit Transaction</button>}
+ *       {error && <p>Error: {error}</p>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useMultiSigPayment(options: MultiSigPaymentOptions): MultiSigPaymentResult;
+
 declare const PaymentContext: react.Context<PaymentContextValue | null>;
 /**
  * Payment context provider for t402 payment state management.
@@ -590,4 +894,4 @@ declare function formatTokenAmount(amount: string, decimals?: number, maxDecimal
  */
 declare function getAssetDisplayName(asset: string): string;
 
-export { AddressDisplay, type AddressDisplayProps, EVM_CHAIN_IDS, type PaymentActions, PaymentButton, type PaymentButtonProps, PaymentContext, type PaymentContextValue, PaymentDetails, type PaymentDetailsProps, PaymentProvider, type PaymentProviderProps, type PaymentState, type PaymentStatus$1 as PaymentStatus, PaymentStatus as PaymentStatusDisplay, type PaymentStatusProps, SOLANA_NETWORK_REFS, Spinner, type SpinnerProps, TON_NETWORK_REFS, TRON_NETWORK_REFS, choosePaymentRequirement, formatTokenAmount, getAssetDisplayName, getNetworkDisplayName, getPreferredNetworks, isEvmNetwork, isSvmNetwork, isTestnetNetwork, isTonNetwork, isTronNetwork, normalizePaymentRequirements, truncateAddress, useAsyncPayment, usePaymentContext, usePaymentRequired, usePaymentStatus };
+export { AddressDisplay, type AddressDisplayProps, EVM_CHAIN_IDS, type PaymentActions, PaymentButton, type PaymentButtonProps, PaymentContext, type PaymentContextValue, PaymentDetails, type PaymentDetailsProps, PaymentProvider, type PaymentProviderProps, type PaymentState, type PaymentStatus$1 as PaymentStatus, PaymentStatus as PaymentStatusDisplay, type PaymentStatusProps, SOLANA_NETWORK_REFS, Spinner, type SpinnerProps, TON_NETWORK_REFS, TRON_NETWORK_REFS, choosePaymentRequirement, formatTokenAmount, getAssetDisplayName, getNetworkDisplayName, getPreferredNetworks, isEvmNetwork, isSvmNetwork, isTestnetNetwork, isTonNetwork, isTronNetwork, normalizePaymentRequirements, truncateAddress, useAsyncPayment, useBridgePayment, useGaslessPayment, useMultiSigPayment, usePaymentContext, usePaymentRequired, usePaymentStatus };