@t402/vue 2.0.0

package/dist/esm/index.d.ts

@@ -0,0 +1,600 @@
+import * as vue from 'vue';
+import { PropType, Ref, ComputedRef } from 'vue';
+import { PaymentRequired, PaymentRequirements } from '@t402/core/types';
+export { PaymentRequired, PaymentRequirements } from '@t402/core/types';
+
+/**
+ * A simple loading spinner component.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <Spinner size="md" />
+ * </template>
+ * ```
+ */
+declare const Spinner: vue.DefineComponent<vue.ExtractPropTypes<{
+    size: {
+        type: PropType<"sm" | "md" | "lg">;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    size: {
+        type: PropType<"sm" | "md" | "lg">;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    size: "sm" | "md" | "lg";
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const spinnerStyles = "\n@keyframes t402-spin {\n  to { transform: rotate(360deg); }\n}\n";
+
+/**
+ * A payment button component with loading state support.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <PaymentButton
+ *     @click="handlePayment"
+ *     :loading="isProcessing"
+ *     variant="primary"
+ *     size="lg"
+ *   >
+ *     Pay $10.00
+ *   </PaymentButton>
+ * </template>
+ * ```
+ */
+declare const PaymentButton: vue.DefineComponent<vue.ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    variant: {
+        type: PropType<"primary" | "secondary" | "outline">;
+        default: string;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg">;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "click"[], "click", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    variant: {
+        type: PropType<"primary" | "secondary" | "outline">;
+        default: string;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg">;
+        default: string;
+    };
+}>> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    disabled: boolean;
+    loading: boolean;
+    variant: "primary" | "secondary" | "outline";
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Payment status states
+ */
+type PaymentStatus = "idle" | "loading" | "success" | "error";
+/**
+ * Payment state for composables
+ */
+interface PaymentState {
+    /** Current payment status */
+    status: Ref<PaymentStatus>;
+    /** Error message if status is 'error' */
+    error: Ref<string | null>;
+    /** The payment required response from server */
+    paymentRequired: Ref<PaymentRequired | null>;
+    /** Currently selected payment requirement */
+    selectedRequirement: Ref<PaymentRequirements | null>;
+    /** Whether we're in testnet mode */
+    isTestnet: ComputedRef<boolean>;
+}
+/**
+ * Props for PaymentButton component
+ */
+interface PaymentButtonProps {
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Whether the button is in loading state */
+    loading?: boolean;
+    /** Button variant */
+    variant?: "primary" | "secondary" | "outline";
+    /** Button size */
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * Props for PaymentStatusDisplay component
+ */
+interface PaymentStatusDisplayProps {
+    /** Current status */
+    status: PaymentStatus;
+    /** Message to display */
+    message?: string;
+}
+/**
+ * Props for PaymentDetails component
+ */
+interface PaymentDetailsProps {
+    /** Payment requirements to display */
+    requirement: PaymentRequirements;
+    /** Whether to show the network name */
+    showNetwork?: boolean;
+    /** Whether to show the asset */
+    showAsset?: boolean;
+    /** Whether to show the recipient address */
+    showRecipient?: boolean;
+}
+/**
+ * Props for Spinner component
+ */
+interface SpinnerProps {
+    /** Spinner size */
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * Props for AddressDisplay component
+ */
+interface AddressDisplayProps {
+    /** The address to display */
+    address: string;
+    /** Number of characters to show at start */
+    startChars?: number;
+    /** Number of characters to show at end */
+    endChars?: number;
+    /** Whether to show copy button */
+    copyable?: boolean;
+}
+
+/**
+ * A component to display payment status with appropriate styling.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <PaymentStatusDisplay
+ *     :status="status"
+ *     message="Processing payment..."
+ *   />
+ * </template>
+ * ```
+ */
+declare const PaymentStatusDisplay: vue.DefineComponent<vue.ExtractPropTypes<{
+    status: {
+        type: PropType<PaymentStatus>;
+        required: true;
+    };
+    message: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    status: {
+        type: PropType<PaymentStatus>;
+        required: true;
+    };
+    message: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    message: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * A component to display payment requirement details.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <PaymentDetails
+ *     :requirement="requirement"
+ *     show-network
+ *     show-asset
+ *     show-recipient
+ *   />
+ * </template>
+ * ```
+ */
+declare const PaymentDetails: vue.DefineComponent<vue.ExtractPropTypes<{
+    requirement: {
+        type: PropType<PaymentRequirements>;
+        required: true;
+    };
+    showNetwork: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showAsset: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showRecipient: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    requirement: {
+        type: PropType<PaymentRequirements>;
+        required: true;
+    };
+    showNetwork: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showAsset: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showRecipient: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    showNetwork: boolean;
+    showAsset: boolean;
+    showRecipient: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * A component to display blockchain addresses with optional copy functionality.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <AddressDisplay
+ *     address="0x1234567890abcdef1234567890abcdef12345678"
+ *     copyable
+ *     :start-chars="6"
+ *     :end-chars="4"
+ *   />
+ * </template>
+ * ```
+ */
+declare const AddressDisplay: vue.DefineComponent<vue.ExtractPropTypes<{
+    address: {
+        type: StringConstructor;
+        required: true;
+    };
+    startChars: {
+        type: NumberConstructor;
+        default: number;
+    };
+    endChars: {
+        type: NumberConstructor;
+        default: number;
+    };
+    copyable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    address: {
+        type: StringConstructor;
+        required: true;
+    };
+    startChars: {
+        type: NumberConstructor;
+        default: number;
+    };
+    endChars: {
+        type: NumberConstructor;
+        default: number;
+    };
+    copyable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    startChars: number;
+    endChars: number;
+    copyable: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+interface UsePaymentRequiredOptions {
+    /** Callback when payment is successful */
+    onSuccess?: (response: Response) => void;
+    /** Callback when payment fails */
+    onError?: (error: Error) => void;
+}
+interface UsePaymentRequiredReturn {
+    /** The payment required data from a 402 response */
+    paymentRequired: Ref<PaymentRequired | null>;
+    /** Current status of the fetch operation */
+    status: Ref<PaymentStatus>;
+    /** Error message if status is 'error' */
+    error: Ref<string | null>;
+    /** Fetch a resource and capture 402 response */
+    fetchResource: (url: string, options?: RequestInit) => Promise<Response | null>;
+    /** Reset the state */
+    reset: () => void;
+}
+/**
+ * Composable to fetch a resource and capture 402 Payment Required responses.
+ *
+ * @param options - Configuration options.
+ * @returns State and methods for handling 402 responses.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { usePaymentRequired } from "@t402/vue";
+ *
+ * const { paymentRequired, status, fetchResource } = usePaymentRequired({
+ *   onSuccess: (response) => console.log("Access granted!"),
+ * });
+ *
+ * const handleFetch = async () => {
+ *   const response = await fetchResource("/api/protected");
+ *   if (response?.ok) {
+ *     const data = await response.json();
+ *     // Handle successful response
+ *   }
+ * };
+ * </script>
+ * ```
+ */
+declare function usePaymentRequired(options?: UsePaymentRequiredOptions): UsePaymentRequiredReturn;
+
+interface StatusMessage {
+    /** Message text */
+    text: string;
+    /** Message type */
+    type: "info" | "success" | "error" | "warning";
+    /** Optional auto-dismiss timeout in ms */
+    timeout?: number;
+}
+interface UsePaymentStatusReturn {
+    /** Current payment status */
+    status: Ref<PaymentStatus>;
+    /** Current status message */
+    message: Ref<StatusMessage | null>;
+    /** Set the status */
+    setStatus: (status: PaymentStatus, message?: string) => void;
+    /** Set a success message */
+    setSuccess: (message: string, timeout?: number) => void;
+    /** Set an error message */
+    setError: (message: string) => void;
+    /** Set an info message */
+    setInfo: (message: string, timeout?: number) => void;
+    /** Set a warning message */
+    setWarning: (message: string, timeout?: number) => void;
+    /** Clear the current message */
+    clearMessage: () => void;
+    /** Reset to idle state */
+    reset: () => void;
+}
+/**
+ * Composable for managing payment status and status messages.
+ *
+ * @returns State and methods for status management.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { usePaymentStatus } from "@t402/vue";
+ *
+ * const {
+ *   status,
+ *   message,
+ *   setStatus,
+ *   setSuccess,
+ *   setError,
+ * } = usePaymentStatus();
+ *
+ * const handlePayment = async () => {
+ *   setStatus("loading", "Processing payment...");
+ *   try {
+ *     await processPayment();
+ *     setSuccess("Payment successful!", 3000);
+ *   } catch (err) {
+ *     setError("Payment failed. Please try again.");
+ *   }
+ * };
+ * </script>
+ * ```
+ */
+declare function usePaymentStatus(): UsePaymentStatusReturn;
+
+interface UseAsyncPaymentOptions<T> {
+    /** The async payment function to execute */
+    paymentFn: () => Promise<T>;
+    /** Callback on successful payment */
+    onSuccess?: (result: T) => void;
+    /** Callback on payment error */
+    onError?: (error: Error) => void;
+    /** Callback when payment starts */
+    onStart?: () => void;
+}
+interface UseAsyncPaymentReturn<T> {
+    /** Execute the payment */
+    execute: () => Promise<T | null>;
+    /** Current payment status */
+    status: Ref<PaymentStatus>;
+    /** Result of successful payment */
+    result: Ref<T | null>;
+    /** Error message if payment failed */
+    error: Ref<string | null>;
+    /** Whether payment is in progress */
+    isLoading: ComputedRef<boolean>;
+    /** Whether payment succeeded */
+    isSuccess: ComputedRef<boolean>;
+    /** Whether payment failed */
+    isError: ComputedRef<boolean>;
+    /** Reset the state */
+    reset: () => void;
+}
+/**
+ * Composable for managing async payment operations with loading states.
+ *
+ * @param options - Configuration including the payment function and callbacks.
+ * @returns State and methods for managing the async payment.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useAsyncPayment } from "@t402/vue";
+ *
+ * const { execute, isLoading, isSuccess, error } = useAsyncPayment({
+ *   paymentFn: async () => {
+ *     const response = await fetch("/api/protected", {
+ *       headers: { "X-Payment": paymentPayload },
+ *     });
+ *     return response.json();
+ *   },
+ *   onSuccess: (data) => console.log("Payment succeeded:", data),
+ *   onError: (err) => console.error("Payment failed:", err),
+ * });
+ * </script>
+ *
+ * <template>
+ *   <button @click="execute" :disabled="isLoading">
+ *     {{ isLoading ? "Processing..." : "Pay Now" }}
+ *   </button>
+ * </template>
+ * ```
+ */
+declare function useAsyncPayment<T>(options: UseAsyncPaymentOptions<T>): UseAsyncPaymentReturn<T>;
+
+/** EVM Chain IDs (CAIP-2 format: eip155:chainId) */
+declare const EVM_CHAIN_IDS: {
+    readonly ETHEREUM_MAINNET: "1";
+    readonly BASE_MAINNET: "8453";
+    readonly BASE_SEPOLIA: "84532";
+    readonly ARBITRUM_MAINNET: "42161";
+    readonly ARBITRUM_SEPOLIA: "421614";
+};
+/** Solana Network References (CAIP-2 format: solana:genesisHash) */
+declare const SOLANA_NETWORK_REFS: {
+    readonly MAINNET: "5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp";
+    readonly DEVNET: "EtWTRABZaYq6iMfeYKouRu166VU2xqa1";
+};
+/** TON Network References (CAIP-2 format: ton:workchain) */
+declare const TON_NETWORK_REFS: {
+    readonly MAINNET: "-239";
+    readonly TESTNET: "-3";
+};
+/** TRON Network References */
+declare const TRON_NETWORK_REFS: {
+    readonly MAINNET: "mainnet";
+    readonly NILE: "nile";
+    readonly SHASTA: "shasta";
+};
+/**
+ * Normalizes payment requirements into an array.
+ *
+ * @param paymentRequirements - A single requirement or array of requirements.
+ * @returns An array of payment requirements.
+ */
+declare function normalizePaymentRequirements(paymentRequirements: PaymentRequirements | PaymentRequirements[]): PaymentRequirements[];
+/**
+ * Returns preferred networks for payment selection.
+ *
+ * @param testnet - Whether to prefer testnet networks.
+ * @returns Ordered list of preferred networks (CAIP-2 format).
+ */
+declare function getPreferredNetworks(testnet: boolean): string[];
+/**
+ * Selects the most appropriate payment requirement.
+ *
+ * @param paymentRequirements - Available payment requirements.
+ * @param testnet - Whether to prefer testnet networks.
+ * @returns The selected payment requirement.
+ */
+declare function choosePaymentRequirement(paymentRequirements: PaymentRequirements | PaymentRequirements[], testnet: boolean): PaymentRequirements;
+/**
+ * Determines if the network is EVM-based.
+ *
+ * @param network - The network identifier (CAIP-2 format).
+ * @returns True if the network is EVM-based.
+ */
+declare function isEvmNetwork(network: string): boolean;
+/**
+ * Determines if the network is Solana-based.
+ *
+ * @param network - The network identifier (CAIP-2 format).
+ * @returns True if the network is Solana-based.
+ */
+declare function isSvmNetwork(network: string): boolean;
+/**
+ * Determines if the network is TON-based.
+ *
+ * @param network - The network identifier (CAIP-2 format).
+ * @returns True if the network is TON-based.
+ */
+declare function isTonNetwork(network: string): boolean;
+/**
+ * Determines if the network is TRON-based.
+ *
+ * @param network - The network identifier (CAIP-2 format).
+ * @returns True if the network is TRON-based.
+ */
+declare function isTronNetwork(network: string): boolean;
+/**
+ * Gets a human-readable display name for a network.
+ *
+ * @param network - The network identifier (CAIP-2 format).
+ * @returns A display name suitable for UI use.
+ */
+declare function getNetworkDisplayName(network: string): string;
+/**
+ * Determines if the network is a testnet.
+ *
+ * @param network - The network identifier (CAIP-2 format).
+ * @returns True if the network is a testnet.
+ */
+declare function isTestnetNetwork(network: string): boolean;
+/**
+ * Truncates an address for display.
+ *
+ * @param address - The full address.
+ * @param startChars - Number of characters to show at start (default: 6).
+ * @param endChars - Number of characters to show at end (default: 4).
+ * @returns The truncated address.
+ */
+declare function truncateAddress(address: string, startChars?: number, endChars?: number): string;
+/**
+ * Formats a token amount for display.
+ *
+ * @param amount - The amount as a string (in smallest unit).
+ * @param decimals - The token decimals (default: 6 for USDT).
+ * @param maxDecimals - Maximum decimal places to show (default: 2).
+ * @returns The formatted amount.
+ */
+declare function formatTokenAmount(amount: string, decimals?: number, maxDecimals?: number): string;
+/**
+ * Gets the asset display name.
+ *
+ * @param asset - The asset identifier (e.g., "usdt", "usdt0").
+ * @returns A display name suitable for UI use.
+ */
+declare function getAssetDisplayName(asset: string): string;
+
+export { AddressDisplay, type AddressDisplayProps, EVM_CHAIN_IDS, PaymentButton, type PaymentButtonProps, PaymentDetails, type PaymentDetailsProps, type PaymentState, type PaymentStatus, PaymentStatusDisplay, type PaymentStatusDisplayProps, SOLANA_NETWORK_REFS, Spinner, type SpinnerProps, TON_NETWORK_REFS, TRON_NETWORK_REFS, choosePaymentRequirement, formatTokenAmount, getAssetDisplayName, getNetworkDisplayName, getPreferredNetworks, isEvmNetwork, isSvmNetwork, isTestnetNetwork, isTonNetwork, isTronNetwork, normalizePaymentRequirements, spinnerStyles, truncateAddress, useAsyncPayment, usePaymentRequired, usePaymentStatus };