coinley-pay 0.26.0 → 0.28.0

package/dist/{CoinleyPayment-tHjB69By.js → CoinleyPayment-Bql8B8cV.js}

@@ -5,7 +5,7 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback, useMemo } from "react";
 import { useConnect, useAccount, useSwitchChain, useSendTransaction, useWaitForTransactionReceipt, WagmiProvider, useDisconnect } from "wagmi";
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
-import { s as sdkAnalytics, c as clarityAnalytics, d as dist, a as Buffer2, B as Buffer$1, g as getCurrencyInfo, p as prefetchRates, i as isSupportedCurrency, b as convertToUSD, f as formatCurrency } from "./index-MRszoy4w.js";
+import { s as sdkAnalytics, c as clarityAnalytics, d as dist, a as Buffer2, B as Buffer$1, g as getCurrencyInfo, p as prefetchRates, i as isSupportedCurrency, b as convertToUSD, f as formatCurrency } from "./index-B6XL-PMy.js";
 import { createConfig, fallback, http, getAccount as getAccount$1, getWalletClient, simulateContract, writeContract, readContract, waitForTransactionReceipt, estimateFeesPerGas as estimateFeesPerGas$1 } from "@wagmi/core";
 import { injected, metaMask, coinbaseWallet, walletConnect } from "@wagmi/connectors";
 import { defineChain as defineChain$1, erc20Abi, http as http$1, createPublicClient, fallback as fallback$1 } from "viem";
@@ -2896,6 +2896,7 @@ const usePaymentFlow = (apiUrl, apiKey, apiSecret) => {
         __coinleySelectionSnapshot: (attemptMeta == null ? void 0 : attemptMeta.selectionSnapshot) ?? null
       };
       setPaymentData(enrichedPayment);
+      setPaymentType("deposit");
       sdkAnalytics.trackPaymentCreated(
         (_g = response.payment) == null ? void 0 : _g.id,
         config.amount,
@@ -20453,7 +20454,7 @@ const PaymentStatus = ({
     const networkName = (selectedNetwork == null ? void 0 : selectedNetwork.name) || (selectedNetwork == null ? void 0 : selectedNetwork.displayName) || (selectedNetwork == null ? void 0 : selectedNetwork.shortName) || "Network";
     const explorerUrl = getExplorerUrl(transactionHash, selectedNetwork);
     const explorerName = getExplorerName(selectedNetwork);
-    return /* @__PURE__ */ jsxs("div", { className: "relative flex h-full min-h-0 w-full flex-col justify-between px-3 pb-0 pt-12", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-[500px] w-full flex-col px-3 pb-0 pt-12", children: [
       onClose && /* @__PURE__ */ jsx(
         "button",
         {
@@ -20478,7 +20479,7 @@ const PaymentStatus = ({
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+      /* @__PURE__ */ jsxs("div", { className: "w-full flex-1", children: [
         /* @__PURE__ */ jsx("p", { className: "mb-1 text-xs font-medium text-[#4B5563]", children: "Transaction ID" }),
         /* @__PURE__ */ jsxs(
           "button",
@@ -21120,7 +21121,7 @@ const WalletSelector = ({
         try {
           setAppKitError(null);
           setWalletConnectAddress(solanaAccountState.address);
-          const { createWalletConnectAdapter } = await import("./appKitSolana-D38g1-Lm.js");
+          const { createWalletConnectAdapter } = await import("./appKitSolana-BWdEszCH.js");
           const adapter = createWalletConnectAdapter(solanaAccountState.address);
           await solanaWallet.connectWalletConnect(adapter, solanaAccountState.address);
           console.log("✅ WalletConnect synced with SDK");
@@ -21225,7 +21226,7 @@ const WalletSelector = ({
     setAppKitLoading(true);
     setAppKitError(null);
     try {
-      const { initializeAppKitEVM, openAppKitModal } = await import("./appKitEVM-Bu9jo5n-.js");
+      const { initializeAppKitEVM, openAppKitModal } = await import("./appKitEVM-BcM7Ftoe.js");
       await initializeAppKitEVM(wagmiConfig);
       await openAppKitModal();
     } catch (error) {
@@ -21245,7 +21246,7 @@ const WalletSelector = ({
     setAppKitError(null);
     try {
       console.log("📦 Loading AppKit Solana module...");
-      const { initializeAppKitSolana } = await import("./appKitSolana-D38g1-Lm.js");
+      const { initializeAppKitSolana } = await import("./appKitSolana-BWdEszCH.js");
       console.log("✅ Module loaded, initializing...");
       const modal = await initializeAppKitSolana(solanaWallet);
       console.log("✅ AppKit Solana initialized successfully");
@@ -23282,6 +23283,11 @@ const CoinleyPaymentInternal = ({
   const [verifyingPayment, setVerifyingPayment] = useState(false);
   const [manualCheckStatus, setManualCheckStatus] = useState(null);
   const [processingStatusMessage, setProcessingStatusMessage] = useState("");
+  const [underpaymentInfo, setUnderpaymentInfo] = useState(null);
+  const [underpaymentChoice, setUnderpaymentChoice] = useState(null);
+  const [underpaymentView, setUnderpaymentView] = useState("choice");
+  const [refundAddress, setRefundAddress] = useState("");
+  const [refundRequestSubmitted, setRefundRequestSubmitted] = useState(false);
   const manualCheckTimeout = useRef(null);
   const [copiedField, setCopiedField] = useState(null);
   const [expirationTime, setExpirationTime] = useState(null);
@@ -23421,6 +23427,62 @@ const CoinleyPaymentInternal = ({
   const hasCommittedTransaction = Boolean(
     currentTransactionHash || (solanaTransaction == null ? void 0 : solanaTransaction.txSignature) || (paymentData == null ? void 0 : paymentData.transactionHash)
   );
+  const normalizeUnderpaymentInfo = useCallback((payment = {}) => {
+    const raw = payment.underpayment || payment.underpaymentDetails || payment.shortPayment || payment.partialPayment || null;
+    const statusText = String(payment.status || payment.depositStatus || (raw == null ? void 0 : raw.status) || "").toLowerCase();
+    const paymentStateText = String(payment.paymentState || (raw == null ? void 0 : raw.paymentState) || "").toLowerCase();
+    const hasUnderpaymentStatus = ["underpaid", "underpayment", "partial", "partial_payment", "short_paid", "shortfall"].includes(statusText) || ["underpaid", "partial", "short_paid", "shortfall"].includes(paymentStateText);
+    const explicitUnderpayment = payment.isUnderpaid || payment.underpaid || (raw == null ? void 0 : raw.isUnderpaid) || (raw == null ? void 0 : raw.underpaid);
+    if (!raw && !hasUnderpaymentStatus && !explicitUnderpayment) {
+      return null;
+    }
+    const expected = Number(
+      (raw == null ? void 0 : raw.expectedAmount) ?? payment.expectedAmount ?? payment.amount ?? payment.totalAmount ?? paymentAmount ?? 0
+    );
+    const received = Number(
+      (raw == null ? void 0 : raw.receivedAmount) ?? (raw == null ? void 0 : raw.amountReceived) ?? payment.receivedAmount ?? payment.amountReceived ?? payment.depositAmount ?? payment.balance ?? 0
+    );
+    const shortfall = Number(
+      (raw == null ? void 0 : raw.shortfallAmount) ?? (raw == null ? void 0 : raw.remainingAmount) ?? (raw == null ? void 0 : raw.amountRemaining) ?? (raw == null ? void 0 : raw.offsetAmount) ?? payment.shortfallAmount ?? payment.remainingAmount ?? payment.amountRemaining ?? payment.offsetAmount ?? Math.max(expected - received, 0)
+    );
+    if (!shortfall || shortfall <= 0) {
+      return null;
+    }
+    return {
+      expectedAmount: expected,
+      receivedAmount: received,
+      shortfallAmount: shortfall,
+      tokenSymbol: (raw == null ? void 0 : raw.tokenSymbol) || (raw == null ? void 0 : raw.currency) || payment.currency || (selectedToken == null ? void 0 : selectedToken.symbol) || "Token",
+      refundNetworkLabel: (raw == null ? void 0 : raw.refundNetworkLabel) || (raw == null ? void 0 : raw.refundNetwork) || payment.refundNetworkLabel || (selectedNetwork == null ? void 0 : selectedNetwork.displayName) || (selectedNetwork == null ? void 0 : selectedNetwork.name) || (selectedNetwork == null ? void 0 : selectedNetwork.shortName) || "selected network",
+      paymentState: payment.paymentState || (raw == null ? void 0 : raw.paymentState) || statusText || "underpaid"
+    };
+  }, [paymentAmount, selectedNetwork, selectedToken]);
+  const activateUnderpaymentFlow = useCallback((payment) => {
+    const normalized = normalizeUnderpaymentInfo(payment);
+    if (!normalized) return false;
+    setUnderpaymentInfo(normalized);
+    setUnderpaymentChoice(null);
+    setUnderpaymentView("choice");
+    setManualCheckStatus(null);
+    setRefundRequestSubmitted(false);
+    return true;
+  }, [normalizeUnderpaymentInfo]);
+  const activateUnderpaymentFromDepositBalance = useCallback((balanceResult) => {
+    const received = Number((balanceResult == null ? void 0 : balanceResult.balance) ?? (balanceResult == null ? void 0 : balanceResult.balanceFormatted) ?? 0);
+    const expected = Number((balanceResult == null ? void 0 : balanceResult.expectedAmount) ?? paymentAmount ?? 0);
+    if (!received || !expected || received <= 0 || received >= expected) {
+      return false;
+    }
+    return activateUnderpaymentFlow({
+      status: "underpaid",
+      paymentState: "underpaid",
+      amount: expected,
+      amountReceived: received,
+      amountRemaining: Math.max(expected - received, 0),
+      currency: (balanceResult == null ? void 0 : balanceResult.token) || (selectedToken == null ? void 0 : selectedToken.symbol),
+      refundNetworkLabel: (selectedNetwork == null ? void 0 : selectedNetwork.displayName) || (selectedNetwork == null ? void 0 : selectedNetwork.name) || (selectedNetwork == null ? void 0 : selectedNetwork.shortName)
+    });
+  }, [activateUnderpaymentFlow, paymentAmount, selectedNetwork, selectedToken]);
   const selectedNetworkIsSolana = (selectedNetwork == null ? void 0 : selectedNetwork.chainType) === "solana" || (selectedNetwork == null ? void 0 : selectedNetwork.shortName) === "solana";
   const sourceNeedsMerchantBridge = Boolean(
     selectedNetwork && !selectedNetworkIsSolana && !isMerchantReceiveNetwork(selectedNetwork)
@@ -23873,6 +23935,11 @@ const CoinleyPaymentInternal = ({
       try {
         const statusResult = await paymentFlow.api.getDepositStatus(paymentData.id);
         if (statusResult.success && statusResult.payment) {
+          if (activateUnderpaymentFlow(statusResult.payment)) {
+            clearInterval(pollInterval);
+            setCurrentStep(PAYMENT_STEPS.CONFIRM);
+            return;
+          }
           const status = statusResult.payment.status;
           const txHash = statusResult.payment.depositTxHash || statusResult.payment.sweepTxHash || statusResult.payment.transactionHash;
           if ((status === "completed" || status === "swept") && txHash) {
@@ -23929,9 +23996,9 @@ const CoinleyPaymentInternal = ({
       }
     }, 5e3);
     return () => clearInterval(pollInterval);
-  }, [currentStep, paymentData == null ? void 0 : paymentData.id, paymentData == null ? void 0 : paymentData.depositAddress, selectedNetwork, selectedToken, onSuccess]);
+  }, [currentStep, paymentData == null ? void 0 : paymentData.id, paymentData == null ? void 0 : paymentData.depositAddress, selectedNetwork, selectedToken, onSuccess, activateUnderpaymentFlow]);
   useEffect(() => {
-    const shouldPoll = (paymentData == null ? void 0 : paymentData.id) && (activeTab === PAYMENT_TABS.QR || activeTab === PAYMENT_TABS.TRANSFER) && currentStep === PAYMENT_STEPS.CONFIRM && !verifyingPayment && paymentType !== PAYMENT_TYPES.DEPOSIT;
+    const shouldPoll = (paymentData == null ? void 0 : paymentData.id) && (activeTab === PAYMENT_TABS.QR || activeTab === PAYMENT_TABS.TRANSFER) && currentStep === PAYMENT_STEPS.CONFIRM && !verifyingPayment && paymentType !== PAYMENT_TYPES.DEPOSIT && !(paymentData == null ? void 0 : paymentData.isDepositPayment) && !(paymentData == null ? void 0 : paymentData.depositAddress);
     if (!shouldPoll) {
       return;
     }
@@ -24011,7 +24078,7 @@ const CoinleyPaymentInternal = ({
       console.log("🛑 Stopping auto-detection polling");
       clearInterval(pollInterval);
     };
-  }, [paymentData == null ? void 0 : paymentData.id, activeTab, currentStep, verifyingPayment, paymentType, selectedNetwork, selectedToken, onSuccess, paymentFlow.api]);
+  }, [paymentData == null ? void 0 : paymentData.id, paymentData == null ? void 0 : paymentData.isDepositPayment, paymentData == null ? void 0 : paymentData.depositAddress, activeTab, currentStep, verifyingPayment, paymentType, selectedNetwork, selectedToken, onSuccess, paymentFlow.api]);
   const resetAllTransactionState = async () => {
     var _a2;
     invalidateCurrentAttempt("reset-all-transaction-state");
@@ -25457,6 +25524,10 @@ const CoinleyPaymentInternal = ({
       try {
         const statusResult = await paymentFlow.api.getDepositStatus(paymentData.id);
         if (statusResult.success && statusResult.payment) {
+          if (activateUnderpaymentFlow(statusResult.payment)) {
+            clearInterval(pollInterval);
+            return;
+          }
           const status = statusResult.payment.status;
           const txHash = statusResult.payment.depositTxHash || statusResult.payment.sweepTxHash || statusResult.payment.transactionHash;
           if ((status === "completed" || status === "swept") && txHash) {
@@ -25492,7 +25563,7 @@ const CoinleyPaymentInternal = ({
       console.log("🛑 Stopping deposit auto-detection polling");
       clearInterval(pollInterval);
     };
-  }, [paymentData == null ? void 0 : paymentData.id, paymentData == null ? void 0 : paymentData.depositAddress, paymentType, currentStep, verifyingPayment, expirationTime == null ? void 0 : expirationTime.expired, selectedNetwork, selectedToken, onSuccess, paymentFlow.api]);
+  }, [paymentData == null ? void 0 : paymentData.id, paymentData == null ? void 0 : paymentData.depositAddress, paymentType, currentStep, verifyingPayment, expirationTime == null ? void 0 : expirationTime.expired, selectedNetwork, selectedToken, onSuccess, paymentFlow.api, activateUnderpaymentFlow]);
   useEffect(() => {
     return () => {
       if (manualCheckTimeout.current) {
@@ -25500,12 +25571,44 @@ const CoinleyPaymentInternal = ({
       }
     };
   }, []);
+  useEffect(() => {
+    setUnderpaymentInfo(null);
+    setUnderpaymentChoice(null);
+    setUnderpaymentView("choice");
+    setRefundAddress("");
+    setRefundRequestSubmitted(false);
+  }, [paymentData == null ? void 0 : paymentData.id]);
+  const handleRefundRequestSubmit = useCallback(() => {
+    const trimmedAddress = refundAddress.trim();
+    if (!trimmedAddress) return;
+    setRefundRequestSubmitted(true);
+    setManualCheckStatus(null);
+    const refundPayload = {
+      paymentId: paymentData == null ? void 0 : paymentData.id,
+      refundAddress: trimmedAddress,
+      amountReceived: underpaymentInfo == null ? void 0 : underpaymentInfo.receivedAmount,
+      amountRemaining: underpaymentInfo == null ? void 0 : underpaymentInfo.shortfallAmount,
+      network: selectedNetwork == null ? void 0 : selectedNetwork.shortName,
+      currency: selectedToken == null ? void 0 : selectedToken.symbol
+    };
+    if (typeof (config == null ? void 0 : config.onRefundRequest) === "function") {
+      config.onRefundRequest(refundPayload);
+    }
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new CustomEvent("coinley:refund-requested", {
+        detail: refundPayload
+      }));
+    }
+  }, [config, refundAddress, paymentData == null ? void 0 : paymentData.id, selectedNetwork == null ? void 0 : selectedNetwork.shortName, selectedToken == null ? void 0 : selectedToken.symbol, underpaymentInfo]);
   const handleDepositManualCheck = useCallback(async () => {
     if (manualCheckStatus === "checking" || !(paymentData == null ? void 0 : paymentData.id)) return;
     setManualCheckStatus("checking");
     try {
       const statusResult = await paymentFlow.api.getDepositStatus(paymentData.id);
       if (statusResult.success && statusResult.payment) {
+        if (activateUnderpaymentFlow(statusResult.payment)) {
+          return;
+        }
         const status = statusResult.payment.status;
         const txHash = statusResult.payment.depositTxHash || statusResult.payment.sweepTxHash || statusResult.payment.transactionHash;
         if ((status === "completed" || status === "swept") && txHash) {
@@ -25531,6 +25634,12 @@ const CoinleyPaymentInternal = ({
           return;
         }
       }
+      if (paymentData == null ? void 0 : paymentData.depositAddress) {
+        const balanceResult = await paymentFlow.api.getDepositBalance(paymentData.id);
+        if ((balanceResult == null ? void 0 : balanceResult.success) && activateUnderpaymentFromDepositBalance(balanceResult)) {
+          return;
+        }
+      }
       setManualCheckStatus("not_found");
       manualCheckTimeout.current = setTimeout(() => {
         setManualCheckStatus(null);
@@ -25542,7 +25651,7 @@ const CoinleyPaymentInternal = ({
         setManualCheckStatus(null);
       }, 1e4);
     }
-  }, [manualCheckStatus, paymentData == null ? void 0 : paymentData.id, paymentFlow.api, config == null ? void 0 : config.amount, selectedNetwork, selectedToken, onSuccess]);
+  }, [manualCheckStatus, paymentData == null ? void 0 : paymentData.id, paymentData == null ? void 0 : paymentData.depositAddress, paymentFlow.api, config == null ? void 0 : config.amount, selectedNetwork, selectedToken, onSuccess, activateUnderpaymentFlow, activateUnderpaymentFromDepositBalance]);
   if (!isOpen) return null;
   if (currentStep === PAYMENT_STEPS.PROCESSING) {
     return /* @__PURE__ */ jsxs("div", { id: SDK_ROOT_ID, className: `${SDK_ROOT_CLASS} fixed inset-0 z-50`, style: { fontFamily: FONT_FAMILY }, children: [
@@ -25588,7 +25697,7 @@ const CoinleyPaymentInternal = ({
   if (currentStep === PAYMENT_STEPS.SUCCESS) {
     return /* @__PURE__ */ jsxs("div", { id: SDK_ROOT_ID, className: `${SDK_ROOT_CLASS} fixed inset-0 z-50`, style: { fontFamily: FONT_FAMILY }, children: [
       /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50" }),
-      /* @__PURE__ */ jsx("div", { className: isMobile ? "fixed inset-0 flex items-end" : "fixed inset-0 flex items-center justify-center p-4", style: { zIndex: 51 }, children: /* @__PURE__ */ jsx("div", { className: isMobile ? "relative flex w-full max-h-[92vh] flex-col overflow-y-auto rounded-t-[28px] bg-white px-4 pb-5 pt-5 animate-slide-up-sheet" : "relative flex h-[553px] w-[450px] max-w-[calc(100vw-32px)] flex-col overflow-hidden rounded-[28px] bg-white px-4 pb-5 pt-5", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: isMobile ? "fixed inset-0 flex items-end" : "fixed inset-0 flex items-center justify-center p-4", style: { zIndex: 51 }, children: /* @__PURE__ */ jsx("div", { className: isMobile ? "relative flex w-full max-h-[92vh] flex-col overflow-y-auto rounded-t-[28px] bg-white px-4 pb-5 pt-5 animate-slide-up-sheet" : "relative flex max-h-[calc(100vh-32px)] min-h-0 w-[450px] max-w-[calc(100vw-32px)] flex-col overflow-y-auto rounded-[28px] bg-white px-4 pb-5 pt-5", children: /* @__PURE__ */ jsx(
         PaymentStatus,
         {
           status: "success",
@@ -25605,6 +25714,8 @@ const CoinleyPaymentInternal = ({
     ] });
   }
   const paymentAmountLabel = isConverting ? "..." : `$${formatAmount(paymentAmount || (config == null ? void 0 : config.amount) || 0)}`;
+  const underpaymentOffsetAmountLabel = underpaymentInfo ? `$${formatAmount(underpaymentInfo.shortfallAmount || 0)}` : paymentAmountLabel;
+  const summaryPaymentAmountLabel = underpaymentInfo && (underpaymentView === "offset" || underpaymentView === "refund") ? underpaymentOffsetAmountLabel : paymentAmountLabel;
   const getTokenDisplaySymbol = (token) => (token == null ? void 0 : token.symbol) || (token == null ? void 0 : token.tokenSymbol) || (token == null ? void 0 : token.currency) || (token == null ? void 0 : token.ticker) || (token == null ? void 0 : token.name) || "Token";
   const getLogoFallbackUrl = (label = "?", background = "7042D2") => {
     const safeLabel = String(label || "?").slice(0, 2).toUpperCase();
@@ -25639,7 +25750,7 @@ const CoinleyPaymentInternal = ({
       /* @__PURE__ */ jsx("div", { className: "flex-1 pt-[13px] border-t border-dashed border-[#DFE1E7]" }),
       /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
         /* @__PURE__ */ jsx("p", { className: "text-[11px] leading-none text-[#9EA0A8] mb-1", children: "To Pay:" }),
-        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-[#1F2430]", children: paymentAmountLabel })
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-[#1F2430]", children: summaryPaymentAmountLabel })
       ] })
     ] }),
     merchantCurrency !== "USD" && currencyInfo && exchangeRate && !isConverting && /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-[#9EA0A8] mt-2", children: [
@@ -25665,6 +25776,141 @@ const CoinleyPaymentInternal = ({
       method.tab
     )) })
   ] });
+  const renderUnderpaymentWarning = (title = "Amount received is less than expected", description = null) => /* @__PURE__ */ jsxs("div", { className: "mb-5 rounded-lg border border-[#F5E5B8] bg-[#FFF9E8] px-3 py-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: `flex items-start gap-2 text-[#B54708] ${title && description ? "mb-1" : ""}`, children: [
+      /* @__PURE__ */ jsx("svg", { className: "mt-0.5 h-4 w-4 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v4m0 4h.01M12 3a9 9 0 110 18 9 9 0 010-18z" }) }),
+      title ? /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: title }) : /* @__PURE__ */ jsx("p", { className: "text-xs leading-5 text-[#B54708]", children: description })
+    ] }),
+    title && description && /* @__PURE__ */ jsx("p", { className: "pl-6 text-xs leading-5 text-[#B54708]", children: description })
+  ] });
+  const renderUnderpaymentOptionCard = ({ choice, icon, title, description }) => {
+    const selected = underpaymentChoice === choice;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          setUnderpaymentChoice(choice);
+          setRefundRequestSubmitted(false);
+        },
+        className: `relative flex min-h-[118px] flex-1 flex-col items-start rounded-xl border p-3 text-left transition-colors ${selected ? "border-[#8B5CF6] bg-[#F4EEFF]" : "border-[#ECEEF2] bg-white hover:border-[#D7C5FF]"}`,
+        children: [
+          selected && /* @__PURE__ */ jsx("span", { className: "absolute right-[-7px] top-[-9px] flex h-5 w-5 items-center justify-center rounded-full border border-[#8B5CF6] bg-white text-[#7042D2]", children: /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M5 13l4 4L19 7" }) }) }),
+          /* @__PURE__ */ jsx("div", { className: "mb-3 flex h-6 w-6 items-center justify-center text-[#111827]", children: icon }),
+          /* @__PURE__ */ jsx("p", { className: "mb-1 text-sm font-semibold text-[#111827]", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs leading-4 text-[#A3A5AC]", children: description })
+        ]
+      }
+    );
+  };
+  const renderUnderpaymentChoicePanel = () => /* @__PURE__ */ jsxs("div", { className: "pt-1", children: [
+    renderUnderpaymentWarning(
+      "Amount received is less than expected",
+      `We received $${formatAmount(underpaymentInfo.receivedAmount || 0)} but expected $${formatAmount(underpaymentInfo.expectedAmount || paymentAmount || 0)}. Your transaction is on hold, please choose how to proceed.`
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mb-5 flex gap-2", children: [
+      renderUnderpaymentOptionCard({
+        choice: "offset",
+        title: "Send offset",
+        description: underpaymentChoice === "offset" ? "Top up the shortfall and complete this transfer with extended time" : "Top up the shortfall with extended time",
+        icon: /* @__PURE__ */ jsx("svg", { className: "h-6 w-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.8, d: "M4 4v6h6M20 20v-6h-6M5.5 15.5A7 7 0 0017.7 18M18.5 8.5A7 7 0 006.3 6" }) })
+      }),
+      renderUnderpaymentOptionCard({
+        choice: "refund",
+        title: "Cancel & refund",
+        description: "Cancel my transaction so i get refunded",
+        icon: /* @__PURE__ */ jsxs("svg", { className: "h-6 w-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", strokeWidth: 1.8 }),
+          /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.8, d: "M9 9l6 6m0-6l-6 6" })
+        ] })
+      })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled: !underpaymentChoice,
+        onClick: () => {
+          setRefundRequestSubmitted(false);
+          if (underpaymentChoice === "offset") {
+            modalOpenedAtRef.current = Date.now();
+            setTimeRemaining(paymentTimeoutMs);
+          }
+          setUnderpaymentView(underpaymentChoice === "refund" ? "refund" : "offset");
+        },
+        className: `h-11 w-full rounded-xl px-4 text-sm font-semibold text-white transition-colors ${underpaymentChoice ? "bg-[#7042D2] hover:bg-[#5b34b1]" : "cursor-not-allowed bg-[#B59AE9]"}`,
+        children: "Continue"
+      }
+    )
+  ] });
+  const renderUnderpaymentOffsetPanel = () => /* @__PURE__ */ jsxs("div", { className: "pt-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-5 flex items-start gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-[92px] w-[92px] flex-shrink-0 bg-white", children: depositQrCode ? /* @__PURE__ */ jsx("img", { src: depositQrCode, alt: "Deposit Address QR Code", className: "h-full w-full" }) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center rounded-lg bg-gray-100", children: /* @__PURE__ */ jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-[#E5E7EB] border-t-[#7042D2]" }) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 pt-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-medium text-[#1F2430]", children: "Same Wallet address" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-[58px] items-center gap-2 rounded-xl border border-[#EEF0F4] bg-[#FAFAFB] px-3 py-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 break-all text-sm leading-5 text-[#1F2430]", children: paymentData.depositAddress }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => copyToClipboard(paymentData.depositAddress, "depositAddress"),
+              className: `flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg transition-colors ${copiedField === "depositAddress" ? "bg-green-100 text-green-600" : "text-[#7042D2] hover:bg-purple-50"}`,
+              "aria-label": "Copy wallet address",
+              children: copiedField === "depositAddress" ? /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) : /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) })
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    renderUnderpaymentWarning(
+      null,
+      "Send only the offset amount to the same address. Make sure to add network fees on top of this amount."
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleDepositManualCheck,
+        disabled: manualCheckStatus === "checking",
+        className: `h-11 w-full rounded-xl px-4 text-sm font-semibold text-white transition-colors ${manualCheckStatus === "checking" ? "cursor-not-allowed bg-purple-400" : "bg-[#7042D2] hover:bg-[#5b34b1]"}`,
+        children: manualCheckStatus === "checking" ? "Checking for your payment..." : "I've sent the offset"
+      }
+    )
+  ] });
+  const renderUnderpaymentRefundPanel = () => /* @__PURE__ */ jsxs("div", { className: "pt-1", children: [
+    renderUnderpaymentWarning(
+      `Refund of $${formatAmount(underpaymentInfo.receivedAmount || 0)} ${underpaymentInfo.tokenSymbol}`,
+      `Provide a ${underpaymentInfo.tokenSymbol} wallet address on the same network (${underpaymentInfo.refundNetworkLabel}) to receive your refund. Network fees will be deducted.`
+    ),
+    /* @__PURE__ */ jsxs("label", { className: "mb-2 block text-xs font-medium text-[#111827]", children: [
+      "Your ",
+      underpaymentInfo.tokenSymbol,
+      " (",
+      underpaymentInfo.refundNetworkLabel,
+      ") receiving wallet address"
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        value: refundAddress,
+        onChange: (event) => setRefundAddress(event.target.value),
+        placeholder: "Paste your wallet address here",
+        className: "mb-5 h-11 w-full rounded-xl border border-[#E4E6EB] bg-white px-3 text-sm text-[#1F2430] outline-none transition-colors placeholder:text-[#8B8E98] focus:border-[#B49AF0]"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled: !refundAddress.trim(),
+        onClick: handleRefundRequestSubmit,
+        className: `h-11 w-full rounded-xl px-4 text-sm font-semibold text-white transition-colors ${refundAddress.trim() ? "bg-[#7042D2] hover:bg-[#5b34b1]" : "cursor-not-allowed bg-[#B59AE9]"}`,
+        children: refundRequestSubmitted ? "Refund request submitted" : "Submit refund request"
+      }
+    ),
+    refundRequestSubmitted && /* @__PURE__ */ jsx("p", { className: "mt-2 text-center text-xs leading-5 text-[#8B8E98]", children: "Keep this screen open while we continue checking the payment status." })
+  ] });
   const transferNetworks = networks.filter((network) => {
     const chainId = parseInt(network.chainId);
     const supportedChains = [8453, 56, 42161, 137, 10, 43114, 143, 59144, 534352, 130];
@@ -26564,20 +26810,13 @@ const CoinleyPaymentInternal = ({
       activeTab === PAYMENT_TABS.QR && /* @__PURE__ */ jsx(Fragment, { children: qrWalletChoiceConfirmed ? renderQrPaymentPanel() : renderQrWalletChoicePanel() }),
       activeTab === PAYMENT_TABS.TRANSFER && /* @__PURE__ */ jsxs(Fragment, { children: [
         (!selectedNetwork || !selectedToken || !(paymentData == null ? void 0 : paymentData.depositAddress)) && renderTransferSetupPanel(),
-        selectedNetwork && selectedToken && (paymentData == null ? void 0 : paymentData.depositAddress) && /* @__PURE__ */ jsxs("div", { className: "pt-1", children: [
-          expirationTime && !expirationTime.expired && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded-lg border border-[#F2E8C8] bg-[#FFF9E8] px-3 py-2 text-xs font-medium text-[#C56416]", children: [
-            "Address expires in ",
-            String(expirationTime.minutes).padStart(2, "0"),
-            ":",
-            String(expirationTime.seconds).padStart(2, "0")
-          ] }),
+        selectedNetwork && selectedToken && (paymentData == null ? void 0 : paymentData.depositAddress) && (underpaymentInfo ? /* @__PURE__ */ jsx(Fragment, { children: underpaymentView === "offset" ? renderUnderpaymentOffsetPanel() : underpaymentView === "refund" ? renderUnderpaymentRefundPanel() : renderUnderpaymentChoicePanel() }) : /* @__PURE__ */ jsxs("div", { className: "pt-1", children: [
           (expirationTime == null ? void 0 : expirationTime.expired) && /* @__PURE__ */ jsx("div", { className: "mb-4 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs font-medium text-red-600", children: "Timer exhausted - No transaction detected. Please generate a new address." }),
-          /* @__PURE__ */ jsx("p", { className: "mb-4 text-xs leading-5 text-[#9EA0A8]", children: "Simply scan the QR code which holds just the address, input the amount, and transfer the funds" }),
-          /* @__PURE__ */ jsxs("div", { className: "mb-5 flex items-center gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-5 flex items-start gap-3", children: [
             /* @__PURE__ */ jsx("div", { className: "h-[92px] w-[92px] flex-shrink-0 bg-white", children: depositQrCode ? /* @__PURE__ */ jsx("img", { src: depositQrCode, alt: "Deposit Address QR Code", className: "h-full w-full" }) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center rounded-lg bg-gray-100", children: /* @__PURE__ */ jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-[#E5E7EB] border-t-[#7042D2]" }) }) }),
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 pt-1", children: [
               /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-medium text-[#1F2430]", children: "Wallet address" }),
-              /* @__PURE__ */ jsxs("div", { className: "flex min-h-[60px] items-center gap-2 rounded-xl border border-[#EEF0F4] bg-[#FAFAFB] px-3 py-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex min-h-[58px] items-center gap-2 rounded-xl border border-[#EEF0F4] bg-[#FAFAFB] px-3 py-2", children: [
                 /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 break-all text-sm leading-5 text-[#1F2430]", children: paymentData.depositAddress }),
                 /* @__PURE__ */ jsx(
                   "button",
@@ -26591,6 +26830,13 @@ const CoinleyPaymentInternal = ({
               ] })
             ] })
           ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mb-3 rounded-lg border border-[#F5E5B8] bg-[#FFF9E8] px-3 py-2.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center gap-2 text-[#C55A11]", children: [
+              /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v4m0 4h.01M12 3a9 9 0 110 18 9 9 0 010-18z" }) }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold", children: "Important!" })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "pl-6 text-xs leading-5 text-[#C55A11]", children: "We must receive the exact amount shown. If your exchange charges a withdrawal fee, add it on top of this amount before sending." })
+          ] }),
           !(expirationTime == null ? void 0 : expirationTime.expired) && /* @__PURE__ */ jsx("div", { className: "mt-2", children: manualCheckStatus === "not_found" ? /* @__PURE__ */ jsxs("div", { className: "p-3 bg-amber-50 border border-amber-200 rounded-xl mb-3", children: [
             /* @__PURE__ */ jsx("p", { className: "text-sm text-amber-700", children: "We haven't received your payment yet. It may take a few moments for the transaction to appear on the blockchain. We'll keep checking automatically." }),
             /* @__PURE__ */ jsx(
@@ -26615,15 +26861,8 @@ const CoinleyPaymentInternal = ({
                 "Checking for your payment..."
               ] }) : "I've made this transfer"
             }
-          ) }),
-          paymentData && !verifyingPayment && !(expirationTime == null ? void 0 : expirationTime.expired) && manualCheckStatus !== "not_found" && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-center gap-2 text-xs text-[#A3A5AC]", children: [
-            /* @__PURE__ */ jsxs("span", { className: "relative flex h-2 w-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" }),
-              /* @__PURE__ */ jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-green-500" })
-            ] }),
-            "Checking automatically every few seconds..."
-          ] })
-        ] })
+          ) })
+        ] }))
       ] }),
       (error || transactionError) && /* @__PURE__ */ jsxs("div", { className: "mt-4 p-4 bg-red-50 border border-red-200 rounded-xl", children: [
         /* @__PURE__ */ jsx("p", { className: "text-red-800 text-sm", children: error || transactionError }),
@@ -26663,6 +26902,10 @@ const CoinleyPaymentInternal = ({
   const isWalletTokenSelectionView = activeTab === PAYMENT_TABS.WALLET && selectedNetwork && !selectedToken && !showWalletConfirm && !(showMobileWalletPicker && isMobile);
   const isQrPaymentActiveView = activeTab === PAYMENT_TABS.QR && qrWalletChoiceConfirmed;
   const handleTransferAddressBack = async () => {
+    if (underpaymentInfo && underpaymentView !== "choice") {
+      setUnderpaymentView("choice");
+      return;
+    }
     setPaymentData((prev) => {
       if (!prev) return prev;
       return {
@@ -26674,6 +26917,11 @@ const CoinleyPaymentInternal = ({
       };
     });
     setExpirationTime(null);
+    setUnderpaymentInfo(null);
+    setUnderpaymentChoice(null);
+    setUnderpaymentView("choice");
+    setRefundAddress("");
+    setRefundRequestSubmitted(false);
     await resetAllTransactionState();
     setActiveTab(PAYMENT_TABS.TRANSFER);
   };
@@ -26768,4 +27016,4 @@ export {
   isFeatureEnabled as i,
   logo as l
 };
-//# sourceMappingURL=CoinleyPayment-tHjB69By.js.map
+//# sourceMappingURL=CoinleyPayment-Bql8B8cV.js.map

package/dist/{appKitEVM-Bu9jo5n-.js → appKitEVM-BcM7Ftoe.js}

@@ -1,4 +1,4 @@
-import { i as isFeatureEnabled, F as FEATURES, c as chainTransports, W as WALLETCONNECT_PROJECT_ID, l as logo } from "./CoinleyPayment-tHjB69By.js";
+import { i as isFeatureEnabled, F as FEATURES, c as chainTransports, W as WALLETCONNECT_PROJECT_ID, l as logo } from "./CoinleyPayment-Bql8B8cV.js";
 let appKitInstance = null;
 let isInitializing = false;
 let initializationPromise = null;
@@ -112,4 +112,4 @@ export {
   initializeAppKitEVM,
   openAppKitModal
 };
-//# sourceMappingURL=appKitEVM-Bu9jo5n-.js.map
+//# sourceMappingURL=appKitEVM-BcM7Ftoe.js.map

package/dist/{appKitSolana-D38g1-Lm.js → appKitSolana-BWdEszCH.js}

@@ -1,4 +1,4 @@
-import { F as FEATURES, l as logo, W as WALLETCONNECT_PROJECT_ID } from "./CoinleyPayment-tHjB69By.js";
+import { F as FEATURES, l as logo, W as WALLETCONNECT_PROJECT_ID } from "./CoinleyPayment-Bql8B8cV.js";
 let appKitInstance = null;
 let isInitializing = false;
 let initializationPromise = null;
@@ -242,4 +242,4 @@ export {
   disconnectWalletConnect,
   initializeAppKitSolana
 };
-//# sourceMappingURL=appKitSolana-D38g1-Lm.js.map
+//# sourceMappingURL=appKitSolana-BWdEszCH.js.map