@t402/vue 2.0.0

package/dist/esm/index.js

@@ -0,0 +1,720 @@
+import { defineComponent, h, ref, computed } from 'vue';
+
+// src/components/Spinner.ts
+var sizeConfig = {
+  sm: { width: "16px", height: "16px", borderWidth: "2px" },
+  md: { width: "24px", height: "24px", borderWidth: "3px" },
+  lg: { width: "32px", height: "32px", borderWidth: "4px" }
+};
+var Spinner = defineComponent({
+  name: "T402Spinner",
+  props: {
+    size: {
+      type: String,
+      default: "md"
+    }
+  },
+  setup(props) {
+    return () => {
+      const config = sizeConfig[props.size];
+      return h("span", {
+        role: "status",
+        "aria-label": "Loading",
+        style: {
+          width: config.width,
+          height: config.height,
+          borderWidth: config.borderWidth,
+          borderStyle: "solid",
+          borderColor: "#e5e7eb",
+          borderTopColor: "#3b82f6",
+          borderRadius: "50%",
+          animation: "t402-spin 0.8s linear infinite",
+          display: "inline-block"
+        }
+      });
+    };
+  }
+});
+var spinnerStyles = `
+@keyframes t402-spin {
+  to { transform: rotate(360deg); }
+}
+`;
+var baseStyles = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "8px",
+  fontWeight: "600",
+  borderRadius: "8px",
+  cursor: "pointer",
+  transition: "all 0.15s ease",
+  border: "none",
+  fontFamily: "inherit"
+};
+var variantStyles = {
+  primary: {
+    backgroundColor: "#2563eb",
+    color: "#ffffff"
+  },
+  secondary: {
+    backgroundColor: "#6b7280",
+    color: "#ffffff"
+  },
+  outline: {
+    backgroundColor: "transparent",
+    color: "#2563eb",
+    border: "2px solid #2563eb"
+  }
+};
+var sizeStyles = {
+  sm: {
+    padding: "8px 16px",
+    fontSize: "14px"
+  },
+  md: {
+    padding: "12px 24px",
+    fontSize: "16px"
+  },
+  lg: {
+    padding: "16px 32px",
+    fontSize: "18px"
+  }
+};
+var PaymentButton = defineComponent({
+  name: "T402PaymentButton",
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    variant: {
+      type: String,
+      default: "primary"
+    },
+    size: {
+      type: String,
+      default: "md"
+    }
+  },
+  emits: ["click"],
+  setup(props, { emit, slots }) {
+    const isHovered = ref(false);
+    const isDisabled = computed(() => props.disabled || props.loading);
+    const buttonStyle = computed(() => ({
+      ...baseStyles,
+      ...variantStyles[props.variant],
+      ...sizeStyles[props.size],
+      ...isDisabled.value ? { opacity: "0.6", cursor: "not-allowed" } : {},
+      ...isHovered.value && !isDisabled.value ? { filter: "brightness(1.1)", transform: "translateY(-1px)" } : {}
+    }));
+    const handleClick = () => {
+      if (!isDisabled.value) {
+        emit("click");
+      }
+    };
+    return () => h(
+      "button",
+      {
+        type: "button",
+        disabled: isDisabled.value,
+        style: buttonStyle.value,
+        onClick: handleClick,
+        onMouseenter: () => isHovered.value = true,
+        onMouseleave: () => isHovered.value = false
+      },
+      [
+        props.loading ? h(Spinner, { size: "sm" }) : null,
+        slots.default ? slots.default() : "Pay Now"
+      ]
+    );
+  }
+});
+var statusStyles = {
+  idle: {
+    backgroundColor: "#f3f4f6",
+    color: "#374151",
+    borderColor: "#d1d5db"
+  },
+  loading: {
+    backgroundColor: "#eff6ff",
+    color: "#1d4ed8",
+    borderColor: "#93c5fd"
+  },
+  success: {
+    backgroundColor: "#f0fdf4",
+    color: "#166534",
+    borderColor: "#86efac"
+  },
+  error: {
+    backgroundColor: "#fef2f2",
+    color: "#dc2626",
+    borderColor: "#fca5a5"
+  }
+};
+var baseStyles2 = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  padding: "12px 16px",
+  borderRadius: "8px",
+  borderWidth: "1px",
+  borderStyle: "solid",
+  fontSize: "14px",
+  fontWeight: "500"
+};
+var icons = {
+  idle: "\u25CB",
+  loading: "",
+  success: "\u2713",
+  error: "\u2715"
+};
+var defaultMessages = {
+  idle: "Ready to pay",
+  loading: "Processing...",
+  success: "Payment successful",
+  error: "Payment failed"
+};
+var PaymentStatusDisplay = defineComponent({
+  name: "T402PaymentStatusDisplay",
+  props: {
+    status: {
+      type: String,
+      required: true
+    },
+    message: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const combinedStyle = computed(() => ({
+      ...baseStyles2,
+      ...statusStyles[props.status]
+    }));
+    const displayMessage = computed(() => props.message || defaultMessages[props.status]);
+    return () => h(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        style: combinedStyle.value
+      },
+      [
+        props.status === "loading" ? h(Spinner, { size: "sm" }) : h("span", { style: { fontSize: "16px" } }, icons[props.status]),
+        h("span", displayMessage.value)
+      ]
+    );
+  }
+});
+
+// src/utils/index.ts
+var EVM_CHAIN_IDS = {
+  ETHEREUM_MAINNET: "1",
+  BASE_MAINNET: "8453",
+  BASE_SEPOLIA: "84532",
+  ARBITRUM_MAINNET: "42161",
+  ARBITRUM_SEPOLIA: "421614"
+};
+var SOLANA_NETWORK_REFS = {
+  MAINNET: "5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp",
+  DEVNET: "EtWTRABZaYq6iMfeYKouRu166VU2xqa1"
+};
+var TON_NETWORK_REFS = {
+  MAINNET: "-239",
+  TESTNET: "-3"
+};
+var TRON_NETWORK_REFS = {
+  MAINNET: "mainnet",
+  NILE: "nile",
+  SHASTA: "shasta"
+};
+function normalizePaymentRequirements(paymentRequirements) {
+  if (Array.isArray(paymentRequirements)) {
+    return paymentRequirements;
+  }
+  return [paymentRequirements];
+}
+function getPreferredNetworks(testnet) {
+  if (testnet) {
+    return [
+      `eip155:${EVM_CHAIN_IDS.BASE_SEPOLIA}`,
+      `eip155:${EVM_CHAIN_IDS.ARBITRUM_SEPOLIA}`,
+      `solana:${SOLANA_NETWORK_REFS.DEVNET}`
+    ];
+  }
+  return [
+    `eip155:${EVM_CHAIN_IDS.BASE_MAINNET}`,
+    `eip155:${EVM_CHAIN_IDS.ARBITRUM_MAINNET}`,
+    `solana:${SOLANA_NETWORK_REFS.MAINNET}`
+  ];
+}
+function choosePaymentRequirement(paymentRequirements, testnet) {
+  const normalized = normalizePaymentRequirements(paymentRequirements);
+  const preferredNetworks = getPreferredNetworks(testnet);
+  for (const preferredNetwork of preferredNetworks) {
+    const match = normalized.find((req) => req.network === preferredNetwork);
+    if (match) {
+      return match;
+    }
+  }
+  return normalized[0];
+}
+function isEvmNetwork(network) {
+  return network.startsWith("eip155:");
+}
+function isSvmNetwork(network) {
+  return network.startsWith("solana:");
+}
+function isTonNetwork(network) {
+  return network.startsWith("ton:");
+}
+function isTronNetwork(network) {
+  return network.startsWith("tron:");
+}
+var EVM_CHAIN_NAMES = {
+  "1": "Ethereum",
+  "10": "Optimism",
+  "137": "Polygon",
+  "8453": "Base",
+  "42161": "Arbitrum One",
+  "84532": "Base Sepolia",
+  "421614": "Arbitrum Sepolia",
+  "11155111": "Sepolia"
+};
+function getNetworkDisplayName(network) {
+  if (network.startsWith("eip155:")) {
+    const chainId = network.split(":")[1];
+    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";
+  }
+  if (network.startsWith("ton:")) {
+    const ref6 = network.split(":")[1];
+    return ref6 === 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";
+    return "TRON";
+  }
+  return network;
+}
+var TESTNET_CHAIN_IDS = /* @__PURE__ */ new Set(["84532", "421614", "11155111", "80001", "97"]);
+function isTestnetNetwork(network) {
+  if (network.startsWith("eip155:")) {
+    const chainId = network.split(":")[1];
+    return TESTNET_CHAIN_IDS.has(chainId);
+  }
+  if (network.startsWith("solana:")) {
+    const ref6 = network.split(":")[1];
+    return ref6 === SOLANA_NETWORK_REFS.DEVNET;
+  }
+  if (network.startsWith("ton:")) {
+    const ref6 = network.split(":")[1];
+    return ref6 === TON_NETWORK_REFS.TESTNET;
+  }
+  if (network.startsWith("tron:")) {
+    const ref6 = network.split(":")[1];
+    return ref6 === TRON_NETWORK_REFS.NILE || ref6 === TRON_NETWORK_REFS.SHASTA;
+  }
+  return false;
+}
+function truncateAddress(address, startChars = 6, endChars = 4) {
+  if (address.length <= startChars + endChars + 3) {
+    return address;
+  }
+  return `${address.slice(0, startChars)}...${address.slice(-endChars)}`;
+}
+function formatTokenAmount(amount, decimals = 6, maxDecimals = 2) {
+  const value = BigInt(amount);
+  const divisor = BigInt(10 ** decimals);
+  const integerPart = value / divisor;
+  const fractionalPart = value % divisor;
+  if (fractionalPart === 0n) {
+    return integerPart.toString();
+  }
+  const fractionalStr = fractionalPart.toString().padStart(decimals, "0");
+  const trimmed = fractionalStr.slice(0, maxDecimals).replace(/0+$/, "");
+  if (trimmed === "") {
+    return integerPart.toString();
+  }
+  return `${integerPart}.${trimmed}`;
+}
+function getAssetDisplayName(asset) {
+  const assetLower = asset.toLowerCase();
+  switch (assetLower) {
+    case "usdt":
+      return "USDT";
+    case "usdt0":
+      return "USDT0";
+    case "usdc":
+      return "USDC";
+    default:
+      return asset.toUpperCase();
+  }
+}
+
+// src/components/PaymentDetails.ts
+var containerStyles = {
+  backgroundColor: "#f9fafb",
+  borderRadius: "12px",
+  padding: "16px",
+  borderWidth: "1px",
+  borderStyle: "solid",
+  borderColor: "#e5e7eb"
+};
+var rowStyles = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  padding: "8px 0",
+  borderBottomWidth: "1px",
+  borderBottomStyle: "solid",
+  borderBottomColor: "#e5e7eb"
+};
+var lastRowStyles = {
+  ...rowStyles,
+  borderBottomWidth: "0"
+};
+var labelStyles = {
+  color: "#6b7280",
+  fontSize: "14px"
+};
+var valueStyles = {
+  color: "#111827",
+  fontSize: "14px",
+  fontWeight: "500"
+};
+var amountStyles = {
+  color: "#111827",
+  fontSize: "20px",
+  fontWeight: "700"
+};
+var PaymentDetails = defineComponent({
+  name: "T402PaymentDetails",
+  props: {
+    requirement: {
+      type: Object,
+      required: true
+    },
+    showNetwork: {
+      type: Boolean,
+      default: true
+    },
+    showAsset: {
+      type: Boolean,
+      default: true
+    },
+    showRecipient: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const formattedAmount = computed(() => formatTokenAmount(props.requirement.amount));
+    const assetName = computed(() => getAssetDisplayName(props.requirement.asset));
+    const networkName = computed(() => getNetworkDisplayName(props.requirement.network));
+    const truncatedAddress = computed(() => truncateAddress(props.requirement.payTo));
+    return () => {
+      const rows = [];
+      rows.push(
+        h("div", { style: rowStyles }, [
+          h("span", { style: labelStyles }, "Amount"),
+          h("span", { style: amountStyles }, `${formattedAmount.value} ${assetName.value}`)
+        ])
+      );
+      if (props.showNetwork) {
+        rows.push(
+          h("div", { style: rowStyles }, [
+            h("span", { style: labelStyles }, "Network"),
+            h("span", { style: valueStyles }, networkName.value)
+          ])
+        );
+      }
+      if (props.showAsset) {
+        rows.push(
+          h("div", { style: rowStyles }, [
+            h("span", { style: labelStyles }, "Asset"),
+            h("span", { style: valueStyles }, assetName.value)
+          ])
+        );
+      }
+      if (props.showRecipient) {
+        rows.push(
+          h("div", { style: lastRowStyles }, [
+            h("span", { style: labelStyles }, "Recipient"),
+            h(
+              "span",
+              {
+                style: { ...valueStyles, fontFamily: "monospace" },
+                title: props.requirement.payTo
+              },
+              truncatedAddress.value
+            )
+          ])
+        );
+      }
+      return h("div", { style: containerStyles }, rows);
+    };
+  }
+});
+var containerStyles2 = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "8px",
+  fontFamily: "monospace",
+  fontSize: "14px"
+};
+var addressStyles = {
+  color: "#374151"
+};
+var buttonStyles = {
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  padding: "4px",
+  borderRadius: "4px",
+  color: "#6b7280",
+  transition: "all 0.15s ease",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+var copiedButtonStyles = {
+  ...buttonStyles,
+  color: "#22c55e"
+};
+var AddressDisplay = defineComponent({
+  name: "T402AddressDisplay",
+  props: {
+    address: {
+      type: String,
+      required: true
+    },
+    startChars: {
+      type: Number,
+      default: 6
+    },
+    endChars: {
+      type: Number,
+      default: 4
+    },
+    copyable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const copied = ref(false);
+    const displayAddress = computed(
+      () => truncateAddress(props.address, props.startChars, props.endChars)
+    );
+    const handleCopy = async () => {
+      try {
+        await navigator.clipboard.writeText(props.address);
+        copied.value = true;
+        setTimeout(() => copied.value = false, 2e3);
+      } catch {
+        const textArea = document.createElement("textarea");
+        textArea.value = props.address;
+        document.body.appendChild(textArea);
+        textArea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textArea);
+        copied.value = true;
+        setTimeout(() => copied.value = false, 2e3);
+      }
+    };
+    const copyIcon = () => h(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2"
+      },
+      [
+        h("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+        h("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+      ]
+    );
+    const checkIcon = () => h(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2"
+      },
+      [h("polyline", { points: "20 6 9 17 4 12" })]
+    );
+    return () => h("span", { style: containerStyles2, title: props.address }, [
+      h("span", { style: addressStyles }, displayAddress.value),
+      props.copyable ? h(
+        "button",
+        {
+          type: "button",
+          onClick: handleCopy,
+          style: copied.value ? copiedButtonStyles : buttonStyles,
+          "aria-label": copied.value ? "Copied" : "Copy address"
+        },
+        [copied.value ? checkIcon() : copyIcon()]
+      ) : null
+    ]);
+  }
+});
+function usePaymentRequired(options = {}) {
+  const { onSuccess, onError } = options;
+  const paymentRequired = ref(null);
+  const status = ref("idle");
+  const error = ref(null);
+  const fetchResource = async (url, fetchOptions) => {
+    status.value = "loading";
+    error.value = null;
+    paymentRequired.value = null;
+    try {
+      const response = await fetch(url, fetchOptions);
+      if (response.status === 402) {
+        const data = await response.json();
+        paymentRequired.value = data;
+        status.value = "idle";
+        return null;
+      }
+      if (response.ok) {
+        status.value = "success";
+        onSuccess?.(response);
+        return response;
+      }
+      throw new Error(`Request failed with status ${response.status}`);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Unknown error";
+      error.value = errorMessage;
+      status.value = "error";
+      onError?.(err instanceof Error ? err : new Error(errorMessage));
+      return null;
+    }
+  };
+  const reset = () => {
+    paymentRequired.value = null;
+    status.value = "idle";
+    error.value = null;
+  };
+  return {
+    paymentRequired,
+    status,
+    error,
+    fetchResource,
+    reset
+  };
+}
+function usePaymentStatus() {
+  const status = ref("idle");
+  const message = ref(null);
+  const scheduleMessageClear = (timeout) => {
+    if (timeout && timeout > 0) {
+      setTimeout(() => {
+        message.value = null;
+      }, timeout);
+    }
+  };
+  const setStatus = (newStatus, messageText) => {
+    status.value = newStatus;
+    if (messageText) {
+      const type = newStatus === "error" ? "error" : newStatus === "success" ? "success" : "info";
+      message.value = { text: messageText, type };
+    }
+  };
+  const setSuccess = (text, timeout) => {
+    status.value = "success";
+    message.value = { text, type: "success", timeout };
+    scheduleMessageClear(timeout);
+  };
+  const setError = (text) => {
+    status.value = "error";
+    message.value = { text, type: "error" };
+  };
+  const setInfo = (text, timeout) => {
+    message.value = { text, type: "info", timeout };
+    scheduleMessageClear(timeout);
+  };
+  const setWarning = (text, timeout) => {
+    message.value = { text, type: "warning", timeout };
+    scheduleMessageClear(timeout);
+  };
+  const clearMessage = () => {
+    message.value = null;
+  };
+  const reset = () => {
+    status.value = "idle";
+    message.value = null;
+  };
+  return {
+    status,
+    message,
+    setStatus,
+    setSuccess,
+    setError,
+    setInfo,
+    setWarning,
+    clearMessage,
+    reset
+  };
+}
+function useAsyncPayment(options) {
+  const { paymentFn, onSuccess, onError, onStart } = options;
+  const status = ref("idle");
+  const result = 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 execute = async () => {
+    status.value = "loading";
+    error.value = null;
+    onStart?.();
+    try {
+      const paymentResult = await paymentFn();
+      result.value = paymentResult;
+      status.value = "success";
+      onSuccess?.(paymentResult);
+      return paymentResult;
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Payment failed";
+      error.value = errorMessage;
+      status.value = "error";
+      onError?.(err instanceof Error ? err : new Error(errorMessage));
+      return null;
+    }
+  };
+  const reset = () => {
+    status.value = "idle";
+    result.value = null;
+    error.value = null;
+  };
+  return {
+    execute,
+    status,
+    result,
+    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 };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map