@t402/vue 2.3.0 → 2.4.0

package/dist/esm/index.d.ts

@@ -483,6 +483,306 @@ interface UseAsyncPaymentReturn<T> {
  */
 declare function useAsyncPayment<T>(options: UseAsyncPaymentOptions<T>): UseAsyncPaymentReturn<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 GaslessPaymentReturn {
+    /** Execute a gasless payment */
+    pay: (params: {
+        to: string;
+        amount: bigint;
+        token?: string;
+    }) => Promise<void>;
+    /** Current payment status */
+    status: Ref<PaymentStatus>;
+    /** UserOperation hash after submission */
+    userOpHash: Ref<string | null>;
+    /** Transaction hash after confirmation */
+    txHash: Ref<string | null>;
+    /** Whether gas was sponsored */
+    sponsored: Ref<boolean | null>;
+    /** Error message if 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 state */
+    reset: () => void;
+}
+/**
+ * Composable 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
+ * ```vue
+ * <script setup>
+ * import { useGaslessPayment } from "@t402/vue";
+ *
+ * const { pay, isLoading, isSuccess, txHash, sponsored, error } = useGaslessPayment({
+ *   payFn: (params) => gaslessClient.pay(params),
+ *   onSuccess: (receipt) => console.log("Confirmed:", receipt.txHash),
+ *   autoWait: true,
+ * });
+ * </script>
+ *
+ * <template>
+ *   <button @click="pay({ to: '0x...', amount: 1000000n })" :disabled="isLoading">
+ *     {{ isLoading ? "Processing..." : "Pay Gasless" }}
+ *   </button>
+ * </template>
+ * ```
+ */
+declare function useGaslessPayment(options: GaslessPaymentOptions): GaslessPaymentReturn;
+
+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 BridgePaymentReturn {
+    /** 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: Ref<BridgeStatus>;
+    /** Source chain transaction hash */
+    txHash: Ref<string | null>;
+    /** LayerZero message GUID */
+    messageGuid: Ref<string | null>;
+    /** Destination chain transaction hash */
+    dstTxHash: Ref<string | null>;
+    /** Error message if failed */
+    error: Ref<string | null>;
+    /** Whether bridge is in progress */
+    isLoading: ComputedRef<boolean>;
+    /** Whether bridge succeeded */
+    isSuccess: ComputedRef<boolean>;
+    /** Whether bridge failed */
+    isError: ComputedRef<boolean>;
+    /** Reset state */
+    reset: () => void;
+}
+/**
+ * Composable for cross-chain USDT0 bridging via WDK.
+ *
+ * @param options - Configuration including bridge functions and callbacks.
+ * @returns State and methods for managing bridge operations.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useBridgePayment } from "@t402/vue";
+ *
+ * const { autoBridge, isLoading, isSuccess, txHash, error } = useBridgePayment({
+ *   bridgeFn: (params) => bridgeClient.bridge(params),
+ *   autoBridgeFn: (params) => bridgeClient.autoBridge(params),
+ *   onSuccess: (result) => console.log("Bridged:", result),
+ * });
+ * </script>
+ *
+ * <template>
+ *   <button
+ *     @click="autoBridge({ toChain: 'arbitrum', amount: 100_000000n, recipient: '0x...' })"
+ *     :disabled="isLoading"
+ *   >
+ *     {{ isLoading ? "Bridging..." : "Bridge USDT0" }}
+ *   </button>
+ * </template>
+ * ```
+ */
+declare function useBridgePayment(options: BridgePaymentOptions): BridgePaymentReturn;
+
+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 MultiSigPaymentReturn {
+    /** 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: Ref<MultiSigStatus>;
+    /** Active request ID */
+    requestId: Ref<string | null>;
+    /** UserOperation hash */
+    userOpHash: Ref<string | null>;
+    /** Transaction hash after confirmation */
+    txHash: Ref<string | null>;
+    /** Required signature threshold */
+    threshold: Ref<number>;
+    /** Number of collected signatures */
+    collectedCount: Ref<number>;
+    /** Whether enough signatures are collected */
+    isReady: Ref<boolean>;
+    /** Error message if failed */
+    error: Ref<string | null>;
+    /** Whether operation is in progress */
+    isLoading: ComputedRef<boolean>;
+    /** Whether operation succeeded */
+    isSuccess: ComputedRef<boolean>;
+    /** Whether operation failed */
+    isError: ComputedRef<boolean>;
+    /** Reset state */
+    reset: () => void;
+}
+/**
+ * Composable 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
+ * ```vue
+ * <script setup>
+ * import { useMultiSigPayment } from "@t402/vue";
+ *
+ * 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,
+ *   });
+ * </script>
+ *
+ * <template>
+ *   <div>
+ *     <button v-if="status === 'idle'" @click="initiate({ to: '0x...', amount: 1000000n })">
+ *       Initiate Payment
+ *     </button>
+ *     <p v-if="status === 'collecting'">Collecting: {{ collectedCount }}/{{ threshold }}</p>
+ *     <button v-if="isReady" @click="submit">Submit Transaction</button>
+ *     <p v-if="error">Error: {{ error }}</p>
+ *   </div>
+ * </template>
+ * ```
+ */
+declare function useMultiSigPayment(options: MultiSigPaymentOptions): MultiSigPaymentReturn;
+
 /** EVM Chain IDs (CAIP-2 format: eip155:chainId) */
 declare const EVM_CHAIN_IDS: {
     readonly ETHEREUM_MAINNET: "1";
@@ -597,4 +897,4 @@ declare function formatTokenAmount(amount: string, decimals?: number, maxDecimal
  */
 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 };
+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, useBridgePayment, useGaslessPayment, useMultiSigPayment, usePaymentRequired, usePaymentStatus };

package/dist/esm/index.js

@@ -292,17 +292,17 @@ function getNetworkDisplayName(network) {
     return EVM_CHAIN_NAMES[chainId] ?? `Chain ${chainId}`;
   }
   if (network.startsWith("solana:")) {
-    const ref6 = network.split(":")[1];
-    return ref6 === SOLANA_NETWORK_REFS.DEVNET ? "Solana Devnet" : "Solana";
+    const ref9 = network.split(":")[1];
+    return ref9 === SOLANA_NETWORK_REFS.DEVNET ? "Solana Devnet" : "Solana";
   }
   if (network.startsWith("ton:")) {
-    const ref6 = network.split(":")[1];
-    return ref6 === TON_NETWORK_REFS.TESTNET ? "TON Testnet" : "TON";
+    const ref9 = network.split(":")[1];
+    return ref9 === TON_NETWORK_REFS.TESTNET ? "TON Testnet" : "TON";
   }
   if (network.startsWith("tron:")) {
-    const ref6 = network.split(":")[1];
-    if (ref6 === TRON_NETWORK_REFS.NILE) return "TRON Nile";
-    if (ref6 === TRON_NETWORK_REFS.SHASTA) return "TRON Shasta";
+    const ref9 = network.split(":")[1];
+    if (ref9 === TRON_NETWORK_REFS.NILE) return "TRON Nile";
+    if (ref9 === TRON_NETWORK_REFS.SHASTA) return "TRON Shasta";
     return "TRON";
   }
   return network;
@@ -314,16 +314,16 @@ function isTestnetNetwork(network) {
     return TESTNET_CHAIN_IDS.has(chainId);
   }
   if (network.startsWith("solana:")) {
-    const ref6 = network.split(":")[1];
-    return ref6 === SOLANA_NETWORK_REFS.DEVNET;
+    const ref9 = network.split(":")[1];
+    return ref9 === SOLANA_NETWORK_REFS.DEVNET;
   }
   if (network.startsWith("ton:")) {
-    const ref6 = network.split(":")[1];
-    return ref6 === TON_NETWORK_REFS.TESTNET;
+    const ref9 = network.split(":")[1];
+    return ref9 === TON_NETWORK_REFS.TESTNET;
   }
   if (network.startsWith("tron:")) {
-    const ref6 = network.split(":")[1];
-    return ref6 === TRON_NETWORK_REFS.NILE || ref6 === TRON_NETWORK_REFS.SHASTA;
+    const ref9 = network.split(":")[1];
+    return ref9 === TRON_NETWORK_REFS.NILE || ref9 === TRON_NETWORK_REFS.SHASTA;
   }
   return false;
 }
@@ -714,7 +714,230 @@ function useAsyncPayment(options) {
     reset
   };
 }
+function useGaslessPayment(options) {
+  const { payFn, onSuccess, onError, autoWait = true } = options;
+  const status = ref("idle");
+  const userOpHash = ref(null);
+  const txHash = ref(null);
+  const sponsored = ref(null);
+  const error = ref(null);
+  const isLoading = computed(() => status.value === "loading");
+  const isSuccess = computed(() => status.value === "success");
+  const isError = computed(() => status.value === "error");
+  const pay = async (params) => {
+    status.value = "loading";
+    error.value = null;
+    userOpHash.value = null;
+    txHash.value = null;
+    sponsored.value = null;
+    try {
+      const result = await payFn(params);
+      userOpHash.value = result.userOpHash;
+      sponsored.value = result.sponsored;
+      if (autoWait) {
+        const receipt = await result.wait();
+        txHash.value = receipt.txHash;
+        status.value = "success";
+        onSuccess?.(receipt);
+      } else {
+        status.value = "success";
+        onSuccess?.({ txHash: result.userOpHash, success: true });
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Gasless payment failed";
+      error.value = errorMessage;
+      status.value = "error";
+      onError?.(err instanceof Error ? err : new Error(errorMessage));
+    }
+  };
+  const reset = () => {
+    status.value = "idle";
+    userOpHash.value = null;
+    txHash.value = null;
+    sponsored.value = null;
+    error.value = null;
+  };
+  return {
+    pay,
+    status,
+    userOpHash,
+    txHash,
+    sponsored,
+    error,
+    isLoading,
+    isSuccess,
+    isError,
+    reset
+  };
+}
+function useBridgePayment(options) {
+  const { bridgeFn, autoBridgeFn, onSuccess, onError, autoWaitForDelivery = false } = options;
+  const status = ref("idle");
+  const txHash = ref(null);
+  const messageGuid = ref(null);
+  const dstTxHash = ref(null);
+  const error = ref(null);
+  const isLoading = computed(
+    () => status.value === "bridging" || status.value === "quoting" || status.value === "waiting"
+  );
+  const isSuccess = computed(() => status.value === "success");
+  const isError = computed(() => status.value === "error");
+  const executeBridge = async (bridgeCall) => {
+    status.value = "bridging";
+    error.value = null;
+    txHash.value = null;
+    messageGuid.value = null;
+    dstTxHash.value = null;
+    try {
+      const result = await bridgeCall();
+      txHash.value = result.txHash;
+      messageGuid.value = result.messageGuid;
+      if (autoWaitForDelivery) {
+        status.value = "waiting";
+        const delivery = await result.waitForDelivery();
+        if (delivery.dstTxHash) dstTxHash.value = delivery.dstTxHash;
+        status.value = "success";
+        onSuccess?.({
+          txHash: result.txHash,
+          dstTxHash: delivery.dstTxHash,
+          fromChain: result.fromChain,
+          toChain: result.toChain
+        });
+      } else {
+        status.value = "success";
+        onSuccess?.({
+          txHash: result.txHash,
+          fromChain: result.fromChain,
+          toChain: result.toChain
+        });
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Bridge operation failed";
+      error.value = errorMessage;
+      status.value = "error";
+      onError?.(err instanceof Error ? err : new Error(errorMessage));
+    }
+  };
+  const bridge = async (params) => {
+    await executeBridge(() => bridgeFn(params));
+  };
+  const autoBridge = async (params) => {
+    const fn = autoBridgeFn ?? (() => {
+      throw new Error("autoBridgeFn not provided");
+    });
+    await executeBridge(() => fn(params));
+  };
+  const reset = () => {
+    status.value = "idle";
+    txHash.value = null;
+    messageGuid.value = null;
+    dstTxHash.value = null;
+    error.value = null;
+  };
+  return {
+    bridge,
+    autoBridge,
+    status,
+    txHash,
+    messageGuid,
+    dstTxHash,
+    error,
+    isLoading,
+    isSuccess,
+    isError,
+    reset
+  };
+}
+function useMultiSigPayment(options) {
+  const { initiateFn, submitFn, onSuccess, onError, autoWait = true } = options;
+  const status = ref("idle");
+  const requestId = ref(null);
+  const userOpHash = ref(null);
+  const txHash = ref(null);
+  const threshold = ref(0);
+  const collectedCount = ref(0);
+  const isReady = ref(false);
+  const error = ref(null);
+  const isLoading = computed(() => status.value === "initiating" || status.value === "submitting");
+  const isSuccess = computed(() => status.value === "success");
+  const isError = computed(() => status.value === "error");
+  const initiate = async (params) => {
+    status.value = "initiating";
+    error.value = null;
+    requestId.value = null;
+    userOpHash.value = null;
+    txHash.value = null;
+    try {
+      const result = await initiateFn(params);
+      requestId.value = result.requestId;
+      userOpHash.value = result.userOpHash;
+      threshold.value = result.threshold;
+      collectedCount.value = result.collectedCount;
+      isReady.value = result.isReady;
+      status.value = "collecting";
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to initiate multi-sig payment";
+      error.value = errorMessage;
+      status.value = "error";
+      onError?.(err instanceof Error ? err : new Error(errorMessage));
+    }
+  };
+  const submit = async () => {
+    if (!requestId.value) {
+      const err = new Error("No active request to submit");
+      error.value = err.message;
+      status.value = "error";
+      onError?.(err);
+      return;
+    }
+    status.value = "submitting";
+    error.value = null;
+    try {
+      const result = await submitFn(requestId.value);
+      if (autoWait) {
+        const receipt = await result.wait();
+        txHash.value = receipt.txHash;
+        status.value = "success";
+        onSuccess?.(receipt);
+      } else {
+        status.value = "success";
+        onSuccess?.({ txHash: result.userOpHash, success: true });
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to submit multi-sig transaction";
+      error.value = errorMessage;
+      status.value = "error";
+      onError?.(err instanceof Error ? err : new Error(errorMessage));
+    }
+  };
+  const reset = () => {
+    status.value = "idle";
+    requestId.value = null;
+    userOpHash.value = null;
+    txHash.value = null;
+    threshold.value = 0;
+    collectedCount.value = 0;
+    isReady.value = false;
+    error.value = null;
+  };
+  return {
+    initiate,
+    submit,
+    status,
+    requestId,
+    userOpHash,
+    txHash,
+    threshold,
+    collectedCount,
+    isReady,
+    error,
+    isLoading,
+    isSuccess,
+    isError,
+    reset
+  };
+}
 
-export { AddressDisplay, EVM_CHAIN_IDS, PaymentButton, PaymentDetails, PaymentStatusDisplay, SOLANA_NETWORK_REFS, Spinner, TON_NETWORK_REFS, TRON_NETWORK_REFS, choosePaymentRequirement, formatTokenAmount, getAssetDisplayName, getNetworkDisplayName, getPreferredNetworks, isEvmNetwork, isSvmNetwork, isTestnetNetwork, isTonNetwork, isTronNetwork, normalizePaymentRequirements, spinnerStyles, truncateAddress, useAsyncPayment, usePaymentRequired, usePaymentStatus };
+export { AddressDisplay, EVM_CHAIN_IDS, PaymentButton, PaymentDetails, PaymentStatusDisplay, SOLANA_NETWORK_REFS, Spinner, TON_NETWORK_REFS, TRON_NETWORK_REFS, choosePaymentRequirement, formatTokenAmount, getAssetDisplayName, getNetworkDisplayName, getPreferredNetworks, isEvmNetwork, isSvmNetwork, isTestnetNetwork, isTonNetwork, isTronNetwork, normalizePaymentRequirements, spinnerStyles, truncateAddress, useAsyncPayment, useBridgePayment, useGaslessPayment, useMultiSigPayment, usePaymentRequired, usePaymentStatus };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map