coinley-pay 0.33.0 → 0.35.0

package/dist/{CoinleyPayment-Cmw8jI0B.js → CoinleyPayment-D8aL6ChX.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-y1EdvKhM.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-QlVbEn4w.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";
@@ -2470,6 +2470,23 @@ class SimplePaymentAPI {
       timeout: 2e4
     });
   }
+  // ==================== CROSS-CHAIN (no-wallet Relay deposit address) ====================
+  // Distinct from the BRIDGE ROUTING API above: this is the no-wallet flow where the
+  // customer sends to a Relay-generated source-chain address that bridges to the
+  // merchant's settlement chain. Backend resolves the destination.
+  async getCrossChainSources() {
+    const result = await this.request("/api/payments/cross-chain/sources");
+    return (result == null ? void 0 : result.sources) || [];
+  }
+  async createCrossChainPayment(data) {
+    return await this.request("/api/payments/cross-chain/create", {
+      method: "POST",
+      body: JSON.stringify(data)
+    });
+  }
+  async getCrossChainStatus(paymentId) {
+    return await this.request(`/api/payments/cross-chain/status/${paymentId}`);
+  }
   /**
    * Check if a network supports deposit address payments
    * @param {number|string} chainId - Chain ID
@@ -21133,7 +21150,7 @@ const WalletSelector = ({
         try {
           setAppKitError(null);
           setWalletConnectAddress(solanaAccountState.address);
-          const { createWalletConnectAdapter } = await import("./appKitSolana-XFYOjQeJ.js");
+          const { createWalletConnectAdapter } = await import("./appKitSolana-C1LLrCaN.js");
           const adapter = createWalletConnectAdapter(solanaAccountState.address);
           await solanaWallet.connectWalletConnect(adapter, solanaAccountState.address);
           console.log("✅ WalletConnect synced with SDK");
@@ -21238,7 +21255,7 @@ const WalletSelector = ({
     setAppKitLoading(true);
     setAppKitError(null);
     try {
-      const { initializeAppKitEVM, openAppKitModal } = await import("./appKitEVM-BzFOTXTT.js");
+      const { initializeAppKitEVM, openAppKitModal } = await import("./appKitEVM-eozvDNUh.js");
       await initializeAppKitEVM(wagmiConfig);
       await openAppKitModal();
     } catch (error) {
@@ -21258,7 +21275,7 @@ const WalletSelector = ({
     setAppKitError(null);
     try {
       console.log("📦 Loading AppKit Solana module...");
-      const { initializeAppKitSolana } = await import("./appKitSolana-XFYOjQeJ.js");
+      const { initializeAppKitSolana } = await import("./appKitSolana-C1LLrCaN.js");
       console.log("✅ Module loaded, initializing...");
       const modal = await initializeAppKitSolana(solanaWallet);
       console.log("✅ AppKit Solana initialized successfully");
@@ -22840,7 +22857,7 @@ const normalizeWalletType = (walletType) => {
 };
 const getSupportedMobileWallets = () => Object.values(MOBILE_WALLET_CONFIG);
 const appendHostedPaymentContext = (params, paymentData, selectedToken = null, selectedNetwork = null) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   const paymentToken = selectedToken || (paymentData == null ? void 0 : paymentData.Token) || null;
   const paymentNetwork = selectedNetwork || (paymentData == null ? void 0 : paymentData.Network) || null;
   const paymentAmount = (paymentData == null ? void 0 : paymentData.totalAmount) || (paymentData == null ? void 0 : paymentData.amount) || (paymentData == null ? void 0 : paymentData.productAmount) || null;
@@ -22851,6 +22868,9 @@ const appendHostedPaymentContext = (params, paymentData, selectedToken = null, s
   const tokenSymbol = (paymentToken == null ? void 0 : paymentToken.symbol) || (paymentData == null ? void 0 : paymentData.currency) || (paymentData == null ? void 0 : paymentData.token) || ((_d = paymentData == null ? void 0 : paymentData.metadata) == null ? void 0 : _d.selectedToken) || null;
   const tokenContract = (paymentToken == null ? void 0 : paymentToken.contractAddress) || (paymentData == null ? void 0 : paymentData.tokenContract) || (paymentData == null ? void 0 : paymentData.tokenAddress) || null;
   const tokenDecimals = (paymentToken == null ? void 0 : paymentToken.decimals) || (paymentData == null ? void 0 : paymentData.tokenDecimals) || null;
+  const depositAddress = (paymentData == null ? void 0 : paymentData.depositAddress) || (paymentData == null ? void 0 : paymentData.deposit_address) || ((_e = paymentData == null ? void 0 : paymentData.paymentDetails) == null ? void 0 : _e.depositAddress) || null;
+  const isDepositPayment = (paymentData == null ? void 0 : paymentData.isDepositPayment) || (paymentData == null ? void 0 : paymentData.depositMethod) === "deposit_address" || (paymentData == null ? void 0 : paymentData.paymentMethod) === "deposit_address" || Boolean(depositAddress);
+  const bridgeContext = (paymentData == null ? void 0 : paymentData.mobileBridgeContext) || null;
   if (networkName) {
     params.set("network", networkName);
   }
@@ -22875,6 +22895,41 @@ const appendHostedPaymentContext = (params, paymentData, selectedToken = null, s
   if (amountInWei !== null && amountInWei !== void 0 && amountInWei !== "") {
     params.set("amountInWei", String(amountInWei));
   }
+  if (isDepositPayment) {
+    params.set("isDepositPayment", "true");
+    params.set("paymentMethod", "deposit_address");
+  }
+  if (depositAddress) {
+    params.set("depositAddress", depositAddress);
+  }
+  if (bridgeContext == null ? void 0 : bridgeContext.isBridgePayment) {
+    params.set("isBridgePayment", "true");
+    params.set("bridgeProvider", bridgeContext.provider || "lifi");
+    if (bridgeContext.originChainId !== null && bridgeContext.originChainId !== void 0) {
+      params.set("bridgeOriginChainId", String(bridgeContext.originChainId));
+    }
+    if (bridgeContext.originNetwork) {
+      params.set("bridgeOriginNetwork", bridgeContext.originNetwork);
+    }
+    if (bridgeContext.originToken) {
+      params.set("bridgeOriginToken", bridgeContext.originToken);
+    }
+    if (bridgeContext.originTokenSymbol) {
+      params.set("bridgeOriginTokenSymbol", bridgeContext.originTokenSymbol);
+    }
+    if (bridgeContext.originTokenDecimals !== null && bridgeContext.originTokenDecimals !== void 0) {
+      params.set("bridgeOriginTokenDecimals", String(bridgeContext.originTokenDecimals));
+    }
+    if (bridgeContext.destinationNetwork) {
+      params.set("bridgeDestinationNetwork", bridgeContext.destinationNetwork);
+    }
+    if (bridgeContext.destinationTokenSymbol) {
+      params.set("bridgeDestinationTokenSymbol", bridgeContext.destinationTokenSymbol);
+    }
+    if (bridgeContext.quoteId) {
+      params.set("bridgeQuoteId", bridgeContext.quoteId);
+    }
+  }
 };
 const getHostedPaymentUrl = (paymentData, preferredWallet = "metamask", selectedToken = null, selectedNetwork = null, apiUrl = null) => {
   const paymentId = (paymentData == null ? void 0 : paymentData.id) || (paymentData == null ? void 0 : paymentData.splitterPaymentId);
@@ -23116,6 +23171,28 @@ const PAYMENT_TABS = {
   QR: "qr",
   TRANSFER: "transfer"
 };
+const CC_CHAIN_NAMES = {
+  1: "Ethereum",
+  10: "Optimism",
+  56: "BNB Chain",
+  137: "Polygon",
+  8453: "Base",
+  42161: "Arbitrum",
+  43114: "Avalanche",
+  59144: "Linea",
+  534352: "Scroll",
+  130: "Unichain",
+  143: "Monad",
+  324: "zkSync Era",
+  100: "Gnosis",
+  25: "Cronos",
+  146: "Sonic",
+  480: "World Chain",
+  1135: "Lisk",
+  81457: "Blast"
+};
+const ccChainName = (id) => CC_CHAIN_NAMES[Number(id)] || `Chain ${id}`;
+const ccChainIcon = (id) => `https://assets.relay.link/icons/${Number(id)}/light.png`;
 const CoinleyPaymentInternal = ({
   publicKey: publicKey2,
   apiKey,
@@ -23259,6 +23336,16 @@ const CoinleyPaymentInternal = ({
     setSelectedToken(null);
   };
   const [activeTab, setActiveTab] = useState(PAYMENT_TABS.TRANSFER);
+  const [ccSources, setCcSources] = useState([]);
+  const [ccOriginChainId, setCcOriginChainId] = useState("");
+  const [ccOriginToken, setCcOriginToken] = useState(null);
+  const [ccResult, setCcResult] = useState(null);
+  const [ccQrCode, setCcQrCode] = useState("");
+  const [ccPhase, setCcPhase] = useState("idle");
+  const [ccError, setCcError] = useState(null);
+  const [ccGenerating, setCcGenerating] = useState(false);
+  const [ccManualCheckStatus, setCcManualCheckStatus] = useState("idle");
+  const ccSucceeded = useRef(false);
   const [networkSearch, setNetworkSearch] = useState("");
   const [walletNetworkSearch, setWalletNetworkSearch] = useState("");
   const [openCheckoutDropdown, setOpenCheckoutDropdown] = useState(null);
@@ -23294,6 +23381,8 @@ const CoinleyPaymentInternal = ({
   const STANDARD_PAYMENT_TIMEOUT_MS = 15 * 60 * 1e3;
   const BRIDGE_PAYMENT_TIMEOUT_MS = 15 * 60 * 1e3;
   const BRIDGE_DEPOSIT_EXPIRY_SECONDS = 15 * 60;
+  const MOBILE_BRIDGE_PLACEHOLDER_ADDRESS = "0x0000000000000000000000000000000000000001";
+  const DEPOSIT_SUPPORTED_CHAINS = [8453, 56, 42161, 137, 10, 43114, 143, 59144, 534352, 130];
   const [timeRemaining, setTimeRemaining] = useState(STANDARD_PAYMENT_TIMEOUT_MS);
   const modalOpenedAtRef = useRef(Date.now());
   const [mobileStep, setMobileStep] = useState("content");
@@ -23566,6 +23655,8 @@ const CoinleyPaymentInternal = ({
   );
   const isSwapOrBridgeFlow = requiresDepositRouting(selectedNetwork, selectedToken) || sourceNeedsMerchantBridge;
   const paymentTimeoutMs = isSwapOrBridgeFlow ? BRIDGE_PAYMENT_TIMEOUT_MS : STANDARD_PAYMENT_TIMEOUT_MS;
+  const mobileBridgeQuoteAddress = isMobile && showMobileWalletPicker && selectedMobileWallet ? MOBILE_BRIDGE_PLACEHOLDER_ADDRESS : null;
+  const effectiveQuoteAddress = address || mobileBridgeQuoteAddress;
   useEffect(() => {
     if (hasCommittedTransaction) return;
     modalOpenedAtRef.current = Date.now();
@@ -23573,7 +23664,7 @@ const CoinleyPaymentInternal = ({
   }, [hasCommittedTransaction, paymentTimeoutMs, selectedNetwork == null ? void 0 : selectedNetwork.chainId, selectedToken == null ? void 0 : selectedToken.id]);
   const activeAttemptRef = useRef(null);
   const [retryEpoch, setRetryEpoch] = useState(0);
-  const buildSelectionSnapshot = (networkArg = selectedNetwork, tokenArg = selectedToken, addressArg = address, solanaPubkeyArg = solanaWallet == null ? void 0 : solanaWallet.publicKey) => ({
+  const buildSelectionSnapshot = (networkArg = selectedNetwork, tokenArg = selectedToken, addressArg = effectiveQuoteAddress, solanaPubkeyArg = solanaWallet == null ? void 0 : solanaWallet.publicKey) => ({
     networkId: (networkArg == null ? void 0 : networkArg.id) ?? null,
     chainId: (networkArg == null ? void 0 : networkArg.chainId) ?? null,
     networkShortName: (networkArg == null ? void 0 : networkArg.shortName) ?? null,
@@ -24224,6 +24315,99 @@ const CoinleyPaymentInternal = ({
     setMobileWalletRedirecting(null);
     setPaymentData(null);
   };
+  const prepareMobileWalletPayment = async () => {
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
+    const amountToUse = paymentAmount || parseFloat(config.amount);
+    if (!amountToUse || amountToUse <= 0 || isNaN(amountToUse)) {
+      throw new Error("Invalid payment amount. Please refresh and try again.");
+    }
+    const currentSelectionSnapshot = buildSelectionSnapshot(selectedNetwork, selectedToken, effectiveQuoteAddress, solanaWallet == null ? void 0 : solanaWallet.publicKey);
+    let attempt = activeAttemptRef.current;
+    if (!attempt || !snapshotsMatch(attempt.snapshot, currentSelectionSnapshot)) {
+      attempt = createNewAttempt("mobile-wallet-handoff", {
+        snapshot: currentSelectionSnapshot
+      });
+    }
+    const attemptMeta = buildAttemptMeta(attempt);
+    const metadata = {
+      ...config.metadata,
+      originalCurrency: merchantCurrency,
+      originalAmount,
+      exchangeRate,
+      mobileWalletHandoff: true,
+      preferredWallet: selectedMobileWallet,
+      selectedNetwork: selectedNetwork.shortName,
+      selectedToken: selectedToken.symbol,
+      ...isSwapOrBridgeFlow ? {
+        bridgeProvider: ((_a2 = relayBridge.bridgeQuote) == null ? void 0 : _a2.provider) || "lifi",
+        bridgeOriginChainId: parseInt(selectedNetwork.chainId),
+        bridgeOriginToken: selectedToken.contractAddress || selectedToken.symbol,
+        bridgeOriginTokenSymbol: selectedToken.symbol,
+        bridgeOriginTokenDecimals: selectedToken.decimals || 18,
+        bridgeRequiresWalletExecution: true
+      } : {},
+      ...(selectedToken == null ? void 0 : selectedToken.isSwapToken) ? {
+        swapFrom: selectedToken.symbol,
+        swapProvider: ((_b = relayBridge.bridgeQuote) == null ? void 0 : _b.provider) || "lifi"
+      } : {}
+    };
+    if (isSwapOrBridgeFlow) {
+      if ((selectedToken == null ? void 0 : selectedToken.routeStatus) === "unsupported") {
+        throw new Error(UNSUPPORTED_ROUTE_MESSAGE);
+      }
+      const selectedChainId = parseInt(selectedNetwork == null ? void 0 : selectedNetwork.chainId);
+      const chainHasCreate2 = DEPOSIT_SUPPORTED_CHAINS.includes(selectedChainId);
+      const sourceIsMerchantDestination = isMerchantReceiveNetwork(selectedNetwork);
+      let effectiveNetwork;
+      let merchantStable;
+      if (selectedNetwork == null ? void 0 : selectedNetwork.isBridgeNetwork) {
+        effectiveNetwork = (_c = selectedNetwork.bridgeDestination) == null ? void 0 : _c.shortName;
+        merchantStable = paymentFlow.getMerchantStablecoin({ shortName: effectiveNetwork });
+      } else if (chainHasCreate2 && sourceIsMerchantDestination) {
+        effectiveNetwork = selectedNetwork.shortName;
+        merchantStable = paymentFlow.getMerchantStablecoin(selectedNetwork);
+      } else {
+        const quotedDest = ((_d = relayBridge.bridgeQuote) == null ? void 0 : _d.destChainId) ? merchantReceiveNetworks.find((network) => parseInt(network.chainId) === parseInt(relayBridge.bridgeQuote.destChainId)) : null;
+        const bestDest = quotedDest || getBestDestinationChain(merchantReceiveNetworks);
+        effectiveNetwork = (bestDest == null ? void 0 : bestDest.shortName) || "base";
+        merchantStable = paymentFlow.getMerchantStablecoin(bestDest || { shortName: "base" });
+      }
+      if (!effectiveNetwork) {
+        throw new Error("No bridge destination is available for this mobile payment. Please try another network.");
+      }
+      if (!merchantStable) merchantStable = { symbol: "USDC" };
+      const depositPayment = await createDepositPayment({
+        ...config,
+        amount: amountToUse,
+        currency: merchantStable.symbol || "USDC",
+        network: effectiveNetwork,
+        expiresIn: BRIDGE_DEPOSIT_EXPIRY_SECONDS,
+        __coinleyAttemptMeta: attemptMeta,
+        metadata: {
+          ...metadata,
+          bridgeTo: effectiveNetwork,
+          bridgeDestinationChainId: ((_e = relayBridge.bridgeQuote) == null ? void 0 : _e.destChainId) || null,
+          bridgeDestinationToken: ((_f = relayBridge.bridgeQuote) == null ? void 0 : _f.destTokenAddress) || null
+        }
+      });
+      return {
+        ...depositPayment,
+        mobileBridgeContext: {
+          isBridgePayment: true,
+          originChainId: parseInt(selectedNetwork.chainId),
+          originNetwork: selectedNetwork.shortName,
+          originToken: selectedToken.contractAddress || selectedToken.symbol,
+          originTokenSymbol: selectedToken.symbol,
+          originTokenDecimals: selectedToken.decimals || 18,
+          destinationNetwork: effectiveNetwork,
+          destinationTokenSymbol: merchantStable.symbol || "USDC",
+          provider: ((_g = relayBridge.bridgeQuote) == null ? void 0 : _g.provider) || "lifi",
+          quoteId: ((_h = relayBridge.bridgeQuote) == null ? void 0 : _h.id) || ((_i = relayBridge.bridgeQuote) == null ? void 0 : _i.quoteId) || null
+        }
+      };
+    }
+    return (paymentData == null ? void 0 : paymentData.id) ? paymentData : await createHostedPayment(selectedNetwork, selectedToken, "wallet_browser");
+  };
   const handleMobileWalletPay = async () => {
     const selectedWalletMeta = mobileWalletOptions.find((wallet) => wallet.id === selectedMobileWallet);
     if (!selectedMobileWallet || !selectedWalletMeta) {
@@ -24234,11 +24418,15 @@ const CoinleyPaymentInternal = ({
       setError("Select a network and token before opening your wallet app.");
       return;
     }
+    if (isConverting) {
+      setError("Please wait for currency conversion to complete");
+      return;
+    }
     setError("");
     setPreferredWallet(selectedMobileWallet);
     setMobileWalletRedirecting(selectedMobileWallet);
     try {
-      const activePayment = (paymentData == null ? void 0 : paymentData.id) ? paymentData : await createHostedPayment(selectedNetwork, selectedToken, "wallet_browser");
+      const activePayment = await prepareMobileWalletPayment();
       const opened = openPaymentPageInWallet(selectedMobileWallet, activePayment, selectedNetwork, selectedToken, apiUrl);
       if (!opened) {
         throw new Error(`Failed to open ${selectedWalletMeta.name}.`);
@@ -24504,7 +24692,7 @@ const CoinleyPaymentInternal = ({
       relayBridge.resetBridge();
       return;
     }
-    if (!selectedToken || !address && !(solanaWallet == null ? void 0 : solanaWallet.publicKey)) {
+    if (!selectedToken || !effectiveQuoteAddress && !(solanaWallet == null ? void 0 : solanaWallet.publicKey)) {
       relayBridge.resetBridge();
       return;
     }
@@ -24520,7 +24708,6 @@ const CoinleyPaymentInternal = ({
     }
     const attemptMeta = buildAttemptMeta(attempt);
     if (isSwap && !isBridge) {
-      const DEPOSIT_SUPPORTED_CHAINS = [8453, 56, 42161, 137, 10, 43114, 143, 59144, 534352, 130];
       const isSolanaSwap = (selectedNetwork == null ? void 0 : selectedNetwork.shortName) === "solana" || (selectedNetwork == null ? void 0 : selectedNetwork.chainType) === "solana";
       const originChainId = isSolanaSwap ? RELAY_SOLANA_CHAIN_ID : parseInt(selectedNetwork.chainId);
       const chainHasCreate2 = DEPOSIT_SUPPORTED_CHAINS.includes(originChainId);
@@ -24547,7 +24734,7 @@ const CoinleyPaymentInternal = ({
         if (originTokenAddress === "native") originTokenAddress = SOLANA_TOKEN_ADDRESSES.SOL;
       }
       const PLACEHOLDER_EVM_ADDRESS = "0x0000000000000000000000000000000000000001";
-      const quoteRecipient = isSolanaSwap && !chainHasCreate2 ? PLACEHOLDER_EVM_ADDRESS : isSolanaSwap ? (solanaWallet == null ? void 0 : solanaWallet.publicKey) || address : address;
+      const quoteRecipient = isSolanaSwap && !chainHasCreate2 ? PLACEHOLDER_EVM_ADDRESS : isSolanaSwap ? (solanaWallet == null ? void 0 : solanaWallet.publicKey) || effectiveQuoteAddress : effectiveQuoteAddress;
       const quoteUser = isSolanaSwap && !chainHasCreate2 ? solanaWallet == null ? void 0 : solanaWallet.publicKey : void 0;
       if (destinationCandidates) {
         getQuoteWithDestinationTrials({
@@ -24608,7 +24795,7 @@ const CoinleyPaymentInternal = ({
           getBridgeTokenAddress(destStableSymbol, destNetwork.bridgeTokens) || (merchantStable == null ? void 0 : merchantStable.contractAddress),
           destStableSymbol,
           amount.toString(),
-          address,
+          effectiveQuoteAddress,
           selectedNetwork.bridgeTokens,
           destNetwork.bridgeTokens,
           void 0,
@@ -24629,7 +24816,7 @@ const CoinleyPaymentInternal = ({
           selectedToken.symbol,
           selectedToken.symbol,
           amount.toString(),
-          address,
+          effectiveQuoteAddress,
           selectedNetwork.bridgeTokens,
           destNetwork.bridgeTokens,
           void 0,
@@ -24665,7 +24852,7 @@ const CoinleyPaymentInternal = ({
     selectedNetwork == null ? void 0 : selectedNetwork.id,
     selectedNetwork == null ? void 0 : selectedNetwork.shortName,
     selectedToken == null ? void 0 : selectedToken.id,
-    address,
+    effectiveQuoteAddress,
     solanaWallet == null ? void 0 : solanaWallet.publicKey,
     paymentAmount,
     retryEpoch,
@@ -24864,6 +25051,85 @@ const CoinleyPaymentInternal = ({
     sdkAnalytics.trackTokenSelected(token == null ? void 0 : token.symbol, selectedNetwork == null ? void 0 : selectedNetwork.name, config == null ? void 0 : config.merchantName);
     clarityAnalytics.trackTokenSelected(token == null ? void 0 : token.symbol, selectedNetwork == null ? void 0 : selectedNetwork.name, config == null ? void 0 : config.merchantName);
   };
+  useEffect(() => {
+    if (activeTab !== PAYMENT_TABS.TRANSFER || ccSources.length) return;
+    let cancelled = false;
+    paymentFlow.api.getCrossChainSources().then((s) => {
+      if (!cancelled) setCcSources(Array.isArray(s) ? s : []);
+    }).catch((e) => {
+      if (!cancelled) setCcError(e.message || "Failed to load chains");
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [activeTab, ccSources.length, paymentFlow.api]);
+  const ccOriginTokens = useMemo(() => {
+    const c = ccSources.find((s) => Number(s.chainId) === Number(ccOriginChainId));
+    return c ? c.tokens : [];
+  }, [ccSources, ccOriginChainId]);
+  const handleGenerateCrossChain = async () => {
+    if (!ccOriginChainId || !ccOriginToken) return;
+    setCcError(null);
+    setCcGenerating(true);
+    try {
+      const r = await paymentFlow.api.createCrossChainPayment({
+        amount: Number((config == null ? void 0 : config.amount) ?? paymentAmount),
+        originChainId: Number(ccOriginChainId),
+        originCurrency: ccOriginToken.address
+      });
+      const p = r.payment || r;
+      setCcResult(p);
+      setCcPhase("awaiting_deposit");
+      setCcManualCheckStatus("idle");
+      setCcQrCode(await QRCode.toDataURL(p.relayDepositAddress, { width: 220, margin: 1 }));
+    } catch (e) {
+      setCcError(e.message || "Could not generate payment address");
+    } finally {
+      setCcGenerating(false);
+    }
+  };
+  const handleCrossChainManualCheck = async () => {
+    if (!(ccResult == null ? void 0 : ccResult.id) || ccManualCheckStatus === "checking") return;
+    setCcManualCheckStatus("checking");
+    setCcError(null);
+    try {
+      const status = await paymentFlow.api.getCrossChainStatus(ccResult.id);
+      setCcPhase(status.phase);
+      if ((status.phase === "received" || status.phase === "settled") && !ccSucceeded.current) {
+        ccSucceeded.current = true;
+        onSuccess == null ? void 0 : onSuccess(status);
+      } else if (status.phase === "failed") {
+        setCcManualCheckStatus("failed");
+      } else {
+        setCcManualCheckStatus("not_found");
+      }
+    } catch (error2) {
+      setCcError(error2.message || "Could not check this payment yet. Please try again.");
+      setCcManualCheckStatus("idle");
+    }
+  };
+  useEffect(() => {
+    if (!(ccResult == null ? void 0 : ccResult.id)) return;
+    let cancelled = false;
+    const tick = async () => {
+      try {
+        const s = await paymentFlow.api.getCrossChainStatus(ccResult.id);
+        if (cancelled) return;
+        setCcPhase(s.phase);
+        if ((s.phase === "received" || s.phase === "settled") && !ccSucceeded.current) {
+          ccSucceeded.current = true;
+          onSuccess == null ? void 0 : onSuccess(s);
+        }
+      } catch {
+      }
+    };
+    tick();
+    const t = setInterval(tick, 8e3);
+    return () => {
+      cancelled = true;
+      clearInterval(t);
+    };
+  }, [ccResult == null ? void 0 : ccResult.id, paymentFlow.api, onSuccess]);
   const handleGenerateTransferAddress = async () => {
     if (isConverting) {
       setError("Please wait for currency conversion to complete");
@@ -25013,9 +25279,9 @@ const CoinleyPaymentInternal = ({
         if (selectedNetwork && !selectedNetwork.isBridgeNetwork && !(selectedToken == null ? void 0 : selectedToken.isSwapToken)) {
           console.log(`[Routing] Direct payment unsupported on ${selectedNetwork.shortName}; forcing deposit flow`);
         }
-        const DEPOSIT_SUPPORTED_CHAINS = [8453, 56, 42161, 137, 10, 43114, 143, 59144, 534352, 130];
+        const DEPOSIT_SUPPORTED_CHAINS2 = [8453, 56, 42161, 137, 10, 43114, 143, 59144, 534352, 130];
         const selectedChainId = parseInt(selectedNetwork == null ? void 0 : selectedNetwork.chainId);
-        const chainHasCreate2 = DEPOSIT_SUPPORTED_CHAINS.includes(selectedChainId);
+        const chainHasCreate2 = DEPOSIT_SUPPORTED_CHAINS2.includes(selectedChainId);
         const sourceIsMerchantDestination = isMerchantReceiveNetwork(selectedNetwork);
         let effectiveNetwork;
         let merchantStable;
@@ -25798,7 +26064,7 @@ const CoinleyPaymentInternal = ({
   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: [
       /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50", onClick: handleCancel }),
-      /* @__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__ */ jsxs("div", { className: isMobile ? "relative flex w-full max-h-[92vh] flex-col overflow-hidden rounded-t-[28px] bg-white px-4 pb-5 pt-7 shadow-2xl animate-slide-up-sheet" : "relative flex h-[500px] w-[430px] flex-col overflow-hidden rounded-[28px] bg-white px-4 pb-5 pt-7 shadow-2xl", children: [
+      /* @__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__ */ jsxs("div", { className: isMobile ? "coinley-mobile-sheet relative flex w-full max-h-[92dvh] flex-col overflow-hidden rounded-t-[24px] bg-white px-4 pb-5 pt-7 shadow-2xl animate-slide-up-sheet" : "relative flex h-[500px] w-[430px] flex-col overflow-hidden rounded-[28px] bg-white px-4 pb-5 pt-7 shadow-2xl", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -25839,7 +26105,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-hidden rounded-t-[28px] bg-white px-4 pb-5 pt-5 animate-slide-up-sheet" : "relative flex h-[640px] max-h-[calc(100vh-32px)] min-h-0 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 ? "coinley-mobile-sheet relative flex w-full max-h-[92dvh] flex-col overflow-hidden rounded-t-[24px] bg-white px-4 pb-5 pt-5 animate-slide-up-sheet" : "relative flex h-[640px] max-h-[calc(100vh-32px)] min-h-0 w-[450px] max-w-[calc(100vw-32px)] flex-col overflow-hidden rounded-[28px] bg-white px-4 pb-5 pt-5", children: /* @__PURE__ */ jsx(
         PaymentStatus,
         {
           status: "success",
@@ -25875,12 +26141,14 @@ const CoinleyPaymentInternal = ({
   };
   const getNetworkDisplayName = (network) => (network == null ? void 0 : network.name) || (network == null ? void 0 : network.displayName) || (network == null ? void 0 : network.shortName) || "Network";
   const getNetworkDisplayLogo = (network) => (network == null ? void 0 : network.logo) || (network == null ? void 0 : network.logoURI) || (network == null ? void 0 : network.icon) || getNetworkLogoUrl(network) || getFallbackNetworkLogoUrl(getNetworkDisplayName(network));
-  const isTransferSetupView = activeTab === PAYMENT_TABS.TRANSFER && (!selectedNetwork || !selectedToken || !(paymentData == null ? void 0 : paymentData.depositAddress));
+  const isCrossChainTransferSetupView = activeTab === PAYMENT_TABS.TRANSFER && !ccResult;
+  const isCrossChainTransferAddressView = activeTab === PAYMENT_TABS.TRANSFER && !!ccResult;
+  const isTransferSetupView = activeTab === PAYMENT_TABS.TRANSFER && !ccResult && (!selectedNetwork || !selectedToken || !(paymentData == null ? void 0 : paymentData.depositAddress));
   const isQrSetupView = activeTab === PAYMENT_TABS.QR && (!selectedNetwork || !selectedToken || !paymentData || (paymentData == null ? void 0 : paymentData.isDepositPayment));
   const isWalletExtensionSetupView = activeTab === PAYMENT_TABS.WALLET && !showWalletConfirm && !(showMobileWalletPicker && isMobile) && (!connectedWalletType || !selectedNetwork || !selectedToken);
   const isWalletExtensionReadyView = activeTab === PAYMENT_TABS.WALLET && connectedWalletType && selectedNetwork && selectedToken && !showWalletConfirm && !(showMobileWalletPicker && isMobile);
   const isWalletExtensionConfirmView = activeTab === PAYMENT_TABS.WALLET && showWalletConfirm;
-  const isCompactCheckoutSetupView = isTransferSetupView || isQrSetupView || isWalletExtensionSetupView;
+  const isCompactCheckoutSetupView = isCrossChainTransferSetupView || isTransferSetupView || isQrSetupView || isWalletExtensionSetupView;
   const isCompactCheckoutView = isCompactCheckoutSetupView || isWalletExtensionReadyView || isWalletExtensionConfirmView;
   const isTightWalletView = isWalletExtensionReadyView || isWalletExtensionConfirmView;
   const renderPaymentSummary = () => /* @__PURE__ */ jsxs("div", { className: isTightWalletView ? "mb-3" : isCompactCheckoutView ? "mb-6 mt-[-5px]" : "mb-8", children: [
@@ -25925,101 +26193,7 @@ const CoinleyPaymentInternal = ({
     ] }),
     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);
-          setRefundRequestStatus(null);
-          setRefundRequestMessage("");
-        },
-        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" })
-        ] })
-      })
-    ] })
-  ] });
-  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."
-    ),
-    manualCheckStatus === "not_found" && /* @__PURE__ */ jsx("div", { className: "mb-3 rounded-xl border border-amber-200 bg-amber-50 p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm leading-5 text-amber-700", children: "We have not detected the offset yet. It can take a few moments to appear on-chain, and we will keep checking automatically." }) })
-  ] });
-  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]"
-      }
-    ),
-    refundRequestMessage && /* @__PURE__ */ jsx("p", { className: `mt-2 text-center text-xs leading-5 ${refundRequestStatus === "error" ? "text-red-600" : "text-[#8B8E98]"}`, children: refundRequestMessage })
-  ] });
-  const transferNetworks = networks.filter((network) => {
+  networks.filter((network) => {
     const chainId = parseInt(network.chainId);
     const supportedChains = [8453, 56, 42161, 137, 10, 43114, 143, 59144, 534352, 130];
     return supportedChains.includes(chainId);
@@ -26123,41 +26297,6 @@ const CoinleyPaymentInternal = ({
       ] })
     ] });
   };
-  const renderTransferSetupPanel = () => /* @__PURE__ */ jsxs("div", { className: "pt-1", children: [
-    renderCheckoutSelect({
-      id: "transfer-network",
-      label: "Select a Network",
-      value: selectedNetwork == null ? void 0 : selectedNetwork.id,
-      placeholder: "Select a network",
-      options: transferNetworks,
-      getLabel: (network) => getNetworkDisplayName(network),
-      getIcon: (network) => getNetworkDisplayLogo(network),
-      compact: true,
-      elevated: true,
-      maxVisibleItems: 4,
-      onChange: (networkId) => {
-        const network = transferNetworks.find((item) => item.id === networkId);
-        if (network) handleNetworkSelect(network);
-      }
-    }),
-    renderCheckoutSelect({
-      id: "transfer-token",
-      label: "Pick a Token",
-      value: selectedToken == null ? void 0 : selectedToken.id,
-      placeholder: selectedNetwork ? "Select a token" : "Select a token",
-      disabled: !selectedNetwork || availableTokens.length === 0,
-      options: availableTokens,
-      getLabel: (token) => getTokenDisplaySymbol(token),
-      getIcon: (token) => getTokenDisplayLogo(token),
-      compact: true,
-      elevated: true,
-      maxVisibleItems: 2,
-      onChange: (tokenId) => {
-        const token = availableTokens.find((item) => item.id === tokenId);
-        if (token) handleTokenSelect(token);
-      }
-    })
-  ] });
   const renderWalletExtensionSetupPanel = () => /* @__PURE__ */ jsxs("div", { className: "pt-1", children: [
     !selectedNetwork && renderWalletNetworkPickerPanel(),
     selectedNetwork && !selectedToken && renderWalletTokenPickerPanel(),
@@ -26216,7 +26355,7 @@ const CoinleyPaymentInternal = ({
         className: "h-8 w-full rounded-lg border border-[#E5E7EB] bg-white px-3 text-xs text-[#1F2430] outline-none placeholder:text-[#A9ABB2] focus:border-[#B49AF0]"
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: visibleWalletNetworkOptions.length > 0 ? visibleWalletNetworkOptions.map((network) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2 min-[360px]:grid-cols-2", children: visibleWalletNetworkOptions.length > 0 ? visibleWalletNetworkOptions.map((network) => /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -26226,7 +26365,7 @@ const CoinleyPaymentInternal = ({
           setPaymentData(null);
           setWalletNetworkSearch("");
         },
-        className: "flex h-10 items-center gap-2 rounded-xl bg-[#FAFAFB] px-3 text-left text-sm text-[#1F2430] transition-colors hover:bg-purple-50",
+        className: "flex min-h-10 items-center gap-2 rounded-xl bg-[#FAFAFB] px-3 py-2 text-left text-sm text-[#1F2430] transition-colors hover:bg-purple-50",
         children: [
           /* @__PURE__ */ jsx(
             "img",
@@ -26300,7 +26439,7 @@ const CoinleyPaymentInternal = ({
         className: "mb-2 h-8 w-full rounded-lg border border-[#E5E7EB] bg-white px-3 text-xs text-[#1F2430] outline-none placeholder:text-[#A9ABB2] focus:border-[#B49AF0]"
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: visibleWalletTokens.length > 0 ? visibleWalletTokens.map((token) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2 min-[360px]:grid-cols-2", children: visibleWalletTokens.length > 0 ? visibleWalletTokens.map((token) => /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -26309,7 +26448,7 @@ const CoinleyPaymentInternal = ({
           setTokenSearch("");
           setPaymentData(null);
         },
-        className: "flex h-10 items-center gap-2 rounded-xl bg-[#FAFAFB] px-3 text-left text-sm text-[#1F2430] transition-colors hover:bg-purple-50",
+        className: "flex min-h-10 items-center gap-2 rounded-xl bg-[#FAFAFB] px-3 py-2 text-left text-sm text-[#1F2430] transition-colors hover:bg-purple-50",
         children: [
           /* @__PURE__ */ jsx(
             "img",
@@ -26398,13 +26537,13 @@ const CoinleyPaymentInternal = ({
       }
     }),
     /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-medium text-[#1F2430]", children: "Please select your wallet app" }),
-    /* @__PURE__ */ jsx("div", { className: "mb-3 grid grid-cols-3 gap-1.5", children: qrWalletOptions.map((wallet) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: "mb-3 grid grid-cols-1 gap-1.5 min-[360px]:grid-cols-3", children: qrWalletOptions.map((wallet) => /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
         onClick: () => handleQrWalletSelect(wallet.id),
         disabled: !selectedNetwork || !selectedToken || qrLoading || isConverting,
-        className: `relative flex h-[76px] flex-col items-start justify-between rounded-lg border bg-[#FAFAFB] px-3 py-3 text-left transition-colors ${preferredWallet === wallet.id ? "border-[#7042D2] bg-[#FBF8FF]" : "border-[#EEF0F4] hover:border-[#C9B8F6]"} disabled:cursor-not-allowed disabled:opacity-60`,
+        className: `relative flex min-h-[64px] flex-row items-center gap-2 rounded-lg border bg-[#FAFAFB] px-3 py-3 text-left transition-colors min-[360px]:h-[76px] min-[360px]:flex-col min-[360px]:items-start min-[360px]:justify-between ${preferredWallet === wallet.id ? "border-[#7042D2] bg-[#FBF8FF]" : "border-[#EEF0F4] hover:border-[#C9B8F6]"} disabled:cursor-not-allowed disabled:opacity-60`,
         children: [
           preferredWallet === wallet.id && qrWalletChoiceConfirmed && /* @__PURE__ */ jsx("span", { className: "absolute right-[-5px] top-[-6px] flex h-4 w-4 items-center justify-center rounded-full border border-[#7042D2] bg-white text-[#7042D2]", children: /* @__PURE__ */ jsx("svg", { className: "h-2.5 w-2.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) }) }),
           /* @__PURE__ */ jsx(
@@ -26418,7 +26557,7 @@ const CoinleyPaymentInternal = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-[#111827]", children: wallet.name })
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-sm font-medium text-[#111827]", children: wallet.name })
         ]
       },
       wallet.id
@@ -26430,7 +26569,7 @@ const CoinleyPaymentInternal = ({
     /* @__PURE__ */ jsx("p", { className: "text-xs leading-5 text-[#9EA0A8]", children: "Simply select a wallet app to generate the QR code then input the amount, and transfer your funds" })
   ] });
   const renderQrPaymentPanel = () => /* @__PURE__ */ jsxs("div", { className: "pt-1", children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-start gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-4 flex flex-col gap-3 min-[380px]:flex-row min-[380px]:items-start", children: [
       /* @__PURE__ */ jsx("div", { className: "h-[92px] w-[92px] flex-shrink-0 bg-white", children: qrCodeDataUrl ? /* @__PURE__ */ jsx("img", { src: qrCodeDataUrl, alt: "Payment 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__ */ jsx("p", { className: "mb-2 text-base font-semibold text-[#111827]", children: "Instructions" }),
@@ -26575,7 +26714,7 @@ const CoinleyPaymentInternal = ({
         renderFooterPrimaryButton({
           label: mobileWalletRedirecting === selectedMobileWallet ? `Opening ${walletName}...` : selectedMobileWallet ? `Open ${walletName}` : "Choose a Wallet",
           onClick: handleMobileWalletPay,
-          disabled: !selectedMobileWallet || !selectedNetwork || !selectedToken || mobileWalletRedirecting === selectedMobileWallet || loading || isSwapOrBridgeFlow && (relayBridge.bridgeStatus === "quoting" || (selectedToken == null ? void 0 : selectedToken.routeStatus) === "unsupported")
+          disabled: !selectedMobileWallet || !selectedNetwork || !selectedToken || mobileWalletRedirecting === selectedMobileWallet || loading || isConverting || isSwapOrBridgeFlow && (relayBridge.bridgeStatus === "quoting" || (selectedToken == null ? void 0 : selectedToken.routeStatus) === "unsupported")
         }),
         renderFooterPrimaryButton({ label: "Cancel", onClick: handleCancel, variant: "secondary" }),
         /* @__PURE__ */ jsx(
@@ -26592,6 +26731,20 @@ const CoinleyPaymentInternal = ({
         )
       ] });
     }
+    if (isCrossChainTransferSetupView) {
+      return renderFooterPrimaryButton({
+        label: ccGenerating ? "Generating Address..." : `Pay ${paymentAmountLabel}`,
+        onClick: handleGenerateCrossChain,
+        disabled: !ccOriginToken || ccGenerating || isConverting
+      });
+    }
+    if (isCrossChainTransferAddressView) {
+      return renderFooterPrimaryButton({
+        label: ccManualCheckStatus === "checking" ? "Checking for your payment..." : "I've made transfer",
+        onClick: handleCrossChainManualCheck,
+        disabled: ccManualCheckStatus === "checking" || ccPhase === "received" || ccPhase === "settled"
+      });
+    }
     if (activeTab === PAYMENT_TABS.TRANSFER && selectedNetwork && selectedToken && (paymentData == null ? void 0 : paymentData.depositAddress) && underpaymentInfo) {
       if (underpaymentView === "choice") {
         return renderFooterPrimaryButton({
@@ -26602,7 +26755,7 @@ const CoinleyPaymentInternal = ({
       }
       if (underpaymentView === "offset") {
         return renderFooterPrimaryButton({
-          label: manualCheckStatus === "checking" ? "Checking for your payment..." : "I've sent the offset",
+          label: manualCheckStatus === "checking" ? "Checking for your payment..." : "I've made transfer",
           onClick: handleDepositManualCheck,
           disabled: manualCheckStatus === "checking"
         });
@@ -26763,11 +26916,11 @@ const CoinleyPaymentInternal = ({
                 }
               ),
               /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: selectedNetwork.name })
-            ] }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: merchantFilteredNetworks.map((network) => /* @__PURE__ */ jsxs(
+            ] }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2 min-[380px]:grid-cols-2", children: merchantFilteredNetworks.map((network) => /* @__PURE__ */ jsxs(
               "button",
               {
                 onClick: () => handleNetworkSelect(network),
-                className: "flex items-center gap-3 p-3 rounded-xl border-2 border-gray-100 hover:border-[#7042D2] hover:bg-purple-50 transition-all text-left",
+                className: "flex min-w-0 items-center gap-3 rounded-xl border-2 border-gray-100 p-3 text-left transition-all hover:border-[#7042D2] hover:bg-purple-50",
                 children: [
                   /* @__PURE__ */ jsx(
                     "img",
@@ -26812,7 +26965,7 @@ const CoinleyPaymentInternal = ({
                   className: "w-full mb-3 px-3 py-2 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#7042D2] focus:border-transparent"
                 }
               ),
-              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: availableTokens.filter((t) => {
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2 min-[380px]:grid-cols-2", children: availableTokens.filter((t) => {
                 var _a3;
                 return !tokenSearch || t.symbol.toLowerCase().includes(tokenSearch.toLowerCase()) || ((_a3 = t.name) == null ? void 0 : _a3.toLowerCase().includes(tokenSearch.toLowerCase()));
               }).map((token) => /* @__PURE__ */ jsxs(
@@ -26822,7 +26975,7 @@ const CoinleyPaymentInternal = ({
                     handleTokenSelect(token);
                     setTokenSearch("");
                   },
-                  className: "flex items-center gap-3 p-3 rounded-xl border-2 border-gray-100 hover:border-[#7042D2] hover:bg-purple-50 transition-all text-left",
+                  className: "flex min-w-0 items-center gap-3 rounded-xl border-2 border-gray-100 p-3 text-left transition-all hover:border-[#7042D2] hover:bg-purple-50",
                   children: [
                     /* @__PURE__ */ jsx(
                       "img",
@@ -26956,36 +27109,73 @@ 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) && (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__ */ 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: [
+        !ccResult && /* @__PURE__ */ jsxs("div", { className: "pt-1", children: [
+          renderCheckoutSelect({
+            id: "cross-chain-network",
+            label: "Select a Network",
+            value: ccOriginChainId,
+            placeholder: "Select a network",
+            options: ccSources.map((s) => ({ id: String(s.chainId), chainId: s.chainId })),
+            getLabel: (o) => ccChainName(o.chainId),
+            getIcon: (o) => ccChainIcon(o.chainId),
+            compact: true,
+            elevated: true,
+            maxVisibleItems: 4,
+            onChange: (chainId) => {
+              setCcOriginChainId(chainId);
+              setCcOriginToken(null);
+            }
+          }),
+          renderCheckoutSelect({
+            id: "cross-chain-token",
+            label: "Pick a Token",
+            value: ccOriginToken == null ? void 0 : ccOriginToken.address,
+            placeholder: "Select a token",
+            disabled: !ccOriginChainId || ccOriginTokens.length === 0,
+            options: ccOriginTokens.map((t) => ({ id: t.address, ...t })),
+            getLabel: (o) => o.symbol,
+            compact: true,
+            elevated: true,
+            maxVisibleItems: 4,
+            onChange: (address2) => setCcOriginToken(ccOriginTokens.find((t) => t.address === address2) || null)
+          }),
+          ccError && /* @__PURE__ */ jsx("div", { className: "mb-3 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs font-medium text-red-600", children: ccError })
+        ] }),
+        ccResult && /* @__PURE__ */ jsxs("div", { className: "pt-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-5 flex items-center gap-4", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-[92px] w-[92px] flex-shrink-0 bg-white", children: ccQrCode ? /* @__PURE__ */ jsx("img", { src: ccQrCode, alt: "Payment 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__ */ jsx("p", { className: "mb-2 text-xs font-medium text-[#1F2430]", children: "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__ */ jsxs("div", { className: "flex min-h-[60px] 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: ccResult.relayDepositAddress }),
                 /* @__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"}`,
+                    onClick: () => copyToClipboard(ccResult.relayDepositAddress, "ccAddress"),
+                    className: `flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg transition-colors ${copiedField === "ccAddress" ? "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" }) })
+                    children: copiedField === "ccAddress" ? /* @__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" }) })
                   }
                 )
               ] })
             ] })
           ] }),
-          /* @__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!" })
+          renderUnderpaymentWarning(
+            "Important!",
+            "Use this wallet address for this transfer only. Send from the selected network and include enough native token for network fees."
+          ),
+          ccManualCheckStatus === "not_found" && /* @__PURE__ */ jsx("div", { className: "mb-3 rounded-xl border border-amber-200 bg-amber-50 p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm leading-5 text-amber-700", children: "We have not detected your transfer yet. It can take a few moments to appear on-chain, and we will keep checking automatically." }) }),
+          ccPhase === "failed" ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-center text-xs font-medium text-red-600", children: "Payment failed — please try again" }) : ccPhase === "received" || ccPhase === "settled" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 text-xs font-medium text-green-600", children: [
+            /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-green-500" }),
+            "Payment received"
+          ] }) : /* @__PURE__ */ jsxs("div", { className: "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" })
             ] }),
-            /* @__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." })
-          ] }),
-          manualCheckStatus === "not_found" && !(expirationTime == null ? void 0 : expirationTime.expired) && /* @__PURE__ */ jsx("div", { className: "mb-3 rounded-xl border border-amber-200 bg-amber-50 p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm leading-5 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." }) })
-        ] }))
+            "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 }),
@@ -27019,7 +27209,7 @@ const CoinleyPaymentInternal = ({
       )
     ] });
   };
-  const isTransferAddressGenerated = activeTab === PAYMENT_TABS.TRANSFER && selectedNetwork && selectedToken && (paymentData == null ? void 0 : paymentData.depositAddress);
+  const isTransferAddressGenerated = activeTab === PAYMENT_TABS.TRANSFER && (selectedNetwork && selectedToken && (paymentData == null ? void 0 : paymentData.depositAddress) || ccResult);
   const isWalletReadyForPayment = isWalletExtensionReadyView;
   const isWalletBackHeaderView = activeTab === PAYMENT_TABS.WALLET && showWalletConfirm;
   const isWalletTokenSelectionView = activeTab === PAYMENT_TABS.WALLET && selectedNetwork && !selectedToken && !showWalletConfirm && !(showMobileWalletPicker && isMobile);
@@ -27029,6 +27219,15 @@ const CoinleyPaymentInternal = ({
       setUnderpaymentView("choice");
       return;
     }
+    if (ccResult) {
+      setCcResult(null);
+      setCcQrCode("");
+      setCcPhase("idle");
+      setCcError(null);
+      setCcManualCheckStatus("idle");
+      ccSucceeded.current = false;
+      return;
+    }
     clearUnderpaymentRecovery(paymentData == null ? void 0 : paymentData.id);
     setPaymentData((prev) => {
       if (!prev) return prev;
@@ -27071,15 +27270,19 @@ const CoinleyPaymentInternal = ({
     "transfer-token",
     "qr-network",
     "qr-token",
-    "wallet-choice"
+    "wallet-choice",
+    "cross-chain-network",
+    "cross-chain-token"
   ].includes(openCheckoutDropdown);
   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", onClick: handleCancel }),
-    /* @__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__ */ jsxs("div", { className: isMobile ? "relative bg-white rounded-t-[28px] shadow-2xl w-full max-h-[96vh] overflow-hidden flex flex-col animate-slide-up-sheet" : `relative bg-white rounded-[28px] shadow-2xl w-[430px] ${isTransferAddressGenerated ? "h-[640px]" : "h-[600px]"} max-h-[calc(100vh-32px)] overflow-hidden flex flex-col`, children: [
-      /* @__PURE__ */ jsx("span", { className: `pointer-events-none absolute left-[-10px] ${isTransferAddressGenerated ? "top-[36%]" : "top-[44%]"} z-20 h-5 w-5 rounded-full bg-black/50` }),
-      /* @__PURE__ */ jsx("span", { className: `pointer-events-none absolute right-[-10px] ${isTransferAddressGenerated ? "top-[36%]" : "top-[44%]"} z-20 h-5 w-5 rounded-full bg-black/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__ */ jsxs("div", { className: isMobile ? "coinley-mobile-sheet relative bg-white rounded-t-[24px] shadow-2xl w-full max-h-[96dvh] overflow-hidden flex flex-col animate-slide-up-sheet" : `relative bg-white rounded-[28px] shadow-2xl w-[430px] ${isTransferAddressGenerated ? "h-[640px]" : "h-[600px]"} max-h-[calc(100vh-32px)] overflow-hidden flex flex-col`, children: [
+      !isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: `pointer-events-none absolute left-[-10px] ${isTransferAddressGenerated ? "top-[36%]" : "top-[44%]"} z-20 h-5 w-5 rounded-full bg-black/50` }),
+        /* @__PURE__ */ jsx("span", { className: `pointer-events-none absolute right-[-10px] ${isTransferAddressGenerated ? "top-[36%]" : "top-[44%]"} z-20 h-5 w-5 rounded-full bg-black/50` })
+      ] }),
       isMobile && /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-3 pb-1 flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "w-10 h-1 bg-gray-300 rounded-full" }) }),
-      /* @__PURE__ */ jsxs("div", { className: `flex min-h-0 flex-1 flex-col px-4 ${isTightWalletView ? "pb-2 pt-3" : "pb-4 pt-4"}`, children: [
+      /* @__PURE__ */ jsxs("div", { className: `flex min-h-0 flex-1 flex-col ${isMobile ? "px-3" : "px-4"} ${isTightWalletView ? "pb-2 pt-3" : "pb-4 pt-4"}`, children: [
         /* @__PURE__ */ jsxs("div", { className: `${isTightWalletView ? "mb-3" : "mb-5"} flex items-center justify-between`, children: [
           isTransferAddressGenerated || isWalletReadyForPayment || isQrPaymentActiveView || isWalletBackHeaderView || isWalletTokenSelectionView ? /* @__PURE__ */ jsx(
             "button",
@@ -27142,4 +27345,4 @@ export {
   isFeatureEnabled as i,
   logo as l
 };
-//# sourceMappingURL=CoinleyPayment-Cmw8jI0B.js.map
+//# sourceMappingURL=CoinleyPayment-D8aL6ChX.js.map