@t402/vue 2.3.0 → 2.4.0

package/README.md

@@ -0,0 +1,131 @@
+# @t402/vue
+
+Vue components and composables for the t402 Payment Protocol. Build payment-aware UIs with pre-built components and reactive composables.
+
+## Installation
+
+```bash
+npm install @t402/vue
+```
+
+## Quick Start
+
+```vue
+<script setup lang="ts">
+import { PaymentButton, usePaymentRequired } from '@t402/vue'
+
+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>
+</template>
+```
+
+## Components
+
+### PaymentButton
+
+Renders a payment action button with loading and status states.
+
+```vue
+<PaymentButton :requirements="requirements" :status="status" @pay="handlePay" />
+```
+
+### PaymentDetails
+
+Displays payment requirements (amount, network, recipient).
+
+```vue
+<PaymentDetails :requirements="requirements" />
+```
+
+### PaymentStatusDisplay
+
+Shows the current payment status with appropriate UI feedback.
+
+```vue
+<PaymentStatusDisplay :status="status" />
+```
+
+### AddressDisplay
+
+Renders a blockchain address with truncation and copy functionality.
+
+```vue
+<AddressDisplay address="0x1234...5678" />
+```
+
+## Composables
+
+### usePaymentRequired
+
+Detects 402 responses and extracts payment requirements.
+
+```typescript
+const {
+  paymentRequired, // Ref<boolean>
+  requirements, // Ref<PaymentRequirements[]>
+  pay, // () => Promise<void>
+  status, // Ref<PaymentStatus>
+} = usePaymentRequired(url, options)
+```
+
+### usePaymentStatus
+
+Tracks the lifecycle of a payment (idle, pending, confirming, complete, error).
+
+```typescript
+const { status, error, reset } = usePaymentStatus()
+```
+
+### useAsyncPayment
+
+Manages async payment flows with automatic retry and status tracking.
+
+```typescript
+const { execute, status, error } = useAsyncPayment(paymentFn)
+```
+
+## Utilities
+
+```typescript
+import {
+  isEvmNetwork,
+  isSvmNetwork,
+  isTonNetwork,
+  getNetworkDisplayName,
+  truncateAddress,
+  formatTokenAmount,
+  choosePaymentRequirement,
+} from '@t402/vue'
+
+// Network detection
+isEvmNetwork('eip155:8453') // true
+
+// Display helpers
+getNetworkDisplayName('eip155:8453') // "Base"
+truncateAddress('0x1234567890abcdef') // "0x1234...cdef"
+formatTokenAmount(1500000n, 6) // "1.50"
+```
+
+## Peer Dependencies
+
+- `vue` ^3.3.0
+
+## Development
+
+```bash
+pnpm build    # Build the package
+pnpm test     # Run unit tests
+```
+
+## Related Packages
+
+- `@t402/core` - Core protocol types
+- `@t402/react` - React components & hooks
+- `@t402/paywall` - Universal paywall UI
+- `@t402/fetch` - Fetch wrapper with automatic payment

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