@t402/vue 2.3.1 → 2.5.0

package/README.md

@@ -12,18 +12,16 @@ npm install @t402/vue
 
 ```vue
 <script setup lang="ts">
-import { PaymentButton, usePaymentRequired } from "@t402/vue";
+import { PaymentButton, usePaymentRequired } from '@t402/vue'
 
-const { paymentRequired, requirements, pay, status } = usePaymentRequired("/api/data");
+const { paymentRequired, requirements, pay, status } = usePaymentRequired('/api/data')
 </script>
 
 <template>
   <div v-if="paymentRequired">
     <PaymentButton :requirements="requirements" :status="status" @pay="pay" />
   </div>
-  <div v-else>
-    Premium content loaded!
-  </div>
+  <div v-else>Premium content loaded!</div>
 </template>
 ```
 
@@ -34,11 +32,7 @@ const { paymentRequired, requirements, pay, status } = usePaymentRequired("/api/
 Renders a payment action button with loading and status states.
 
 ```vue
-<PaymentButton
-  :requirements="requirements"
-  :status="status"
-  @pay="handlePay"
-/>
+<PaymentButton :requirements="requirements" :status="status" @pay="handlePay" />
 ```
 
 ### PaymentDetails
@@ -73,11 +67,11 @@ Detects 402 responses and extracts payment requirements.
 
 ```typescript
 const {
-  paymentRequired,  // Ref<boolean>
-  requirements,     // Ref<PaymentRequirements[]>
-  pay,             // () => Promise<void>
-  status,          // Ref<PaymentStatus>
-} = usePaymentRequired(url, options);
+  paymentRequired, // Ref<boolean>
+  requirements, // Ref<PaymentRequirements[]>
+  pay, // () => Promise<void>
+  status, // Ref<PaymentStatus>
+} = usePaymentRequired(url, options)
 ```
 
 ### usePaymentStatus
@@ -85,7 +79,7 @@ const {
 Tracks the lifecycle of a payment (idle, pending, confirming, complete, error).
 
 ```typescript
-const { status, error, reset } = usePaymentStatus();
+const { status, error, reset } = usePaymentStatus()
 ```
 
 ### useAsyncPayment
@@ -93,7 +87,7 @@ const { status, error, reset } = usePaymentStatus();
 Manages async payment flows with automatic retry and status tracking.
 
 ```typescript
-const { execute, status, error } = useAsyncPayment(paymentFn);
+const { execute, status, error } = useAsyncPayment(paymentFn)
 ```
 
 ## Utilities
@@ -107,15 +101,15 @@ import {
   truncateAddress,
   formatTokenAmount,
   choosePaymentRequirement,
-} from "@t402/vue";
+} from '@t402/vue'
 
 // Network detection
-isEvmNetwork("eip155:8453"); // true
+isEvmNetwork('eip155:8453') // true
 
 // Display helpers
-getNetworkDisplayName("eip155:8453"); // "Base"
-truncateAddress("0x1234567890abcdef"); // "0x1234...cdef"
-formatTokenAmount(1500000n, 6); // "1.50"
+getNetworkDisplayName('eip155:8453') // "Base"
+truncateAddress('0x1234567890abcdef') // "0x1234...cdef"
+formatTokenAmount(1500000n, 6) // "1.50"
 ```
 
 ## Peer Dependencies

package/dist/cjs/index.cjs

@@ -294,17 +294,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;
@@ -316,16 +316,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;
 }
@@ -716,6 +716,229 @@ function useAsyncPayment(options) {
     reset
   };
 }
+function useGaslessPayment(options) {
+  const { payFn, onSuccess, onError, autoWait = true } = options;
+  const status = vue.ref("idle");
+  const userOpHash = vue.ref(null);
+  const txHash = vue.ref(null);
+  const sponsored = vue.ref(null);
+  const error = vue.ref(null);
+  const isLoading = vue.computed(() => status.value === "loading");
+  const isSuccess = vue.computed(() => status.value === "success");
+  const isError = vue.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 = vue.ref("idle");
+  const txHash = vue.ref(null);
+  const messageGuid = vue.ref(null);
+  const dstTxHash = vue.ref(null);
+  const error = vue.ref(null);
+  const isLoading = vue.computed(
+    () => status.value === "bridging" || status.value === "quoting" || status.value === "waiting"
+  );
+  const isSuccess = vue.computed(() => status.value === "success");
+  const isError = vue.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 = vue.ref("idle");
+  const requestId = vue.ref(null);
+  const userOpHash = vue.ref(null);
+  const txHash = vue.ref(null);
+  const threshold = vue.ref(0);
+  const collectedCount = vue.ref(0);
+  const isReady = vue.ref(false);
+  const error = vue.ref(null);
+  const isLoading = vue.computed(() => status.value === "initiating" || status.value === "submitting");
+  const isSuccess = vue.computed(() => status.value === "success");
+  const isError = vue.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
+  };
+}
 
 exports.AddressDisplay = AddressDisplay;
 exports.EVM_CHAIN_IDS = EVM_CHAIN_IDS;
@@ -740,6 +963,9 @@ exports.normalizePaymentRequirements = normalizePaymentRequirements;
 exports.spinnerStyles = spinnerStyles;
 exports.truncateAddress = truncateAddress;
 exports.useAsyncPayment = useAsyncPayment;
+exports.useBridgePayment = useBridgePayment;
+exports.useGaslessPayment = useGaslessPayment;
+exports.useMultiSigPayment = useMultiSigPayment;
 exports.usePaymentRequired = usePaymentRequired;
 exports.usePaymentStatus = usePaymentStatus;
 //# sourceMappingURL=index.cjs.map