@b3dotfun/sdk 0.1.70-alpha.2 → 0.1.70-alpha.21

package/dist/cjs/anyspend/react/components/AnySpendDeposit.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AnySpendDeposit = AnySpendDeposit;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const anyspend_1 = require("../../../anyspend");
 const react_1 = require("../../../global-account/react");
 const cn_1 = require("../../../shared/utils/cn");
+const number_1 = require("../../../shared/utils/number");
 const react_2 = require("@web3icons/react");
 const lucide_react_1 = require("lucide-react");
 const react_3 = require("react");
@@ -22,8 +24,19 @@ const DEFAULT_SUPPORTED_CHAINS = [
     { id: 137, name: "Polygon" },
     { id: 56, name: "BNB Chain" },
 ];
-// Minimum pool size to filter out low liquidity tokens
-const DEFAULT_MIN_POOL_SIZE = 1000000;
+/**
+ * Self-described fallback metadata for the default funding token(s), keyed by
+ * `${chainId}:${lowercased address}`. Used when `useTokenData` misses (returns
+ * null) so the destination token's decimals/symbol are correct WITHOUT depending
+ * on the network — critical in pure-transfer mode where there's no server-side
+ * correction and the wrong decimals would make `useWatchTransfer` show a wrong amount.
+ */
+const KNOWN_FUNDING_TOKENS = {
+    [`${anyspend_1.USDC_BASE.chainId}:${anyspend_1.USDC_BASE.address.toLowerCase()}`]: anyspend_1.USDC_BASE,
+};
+function getKnownFundingToken(chainId, address) {
+    return KNOWN_FUNDING_TOKENS[`${chainId}:${address.toLowerCase()}`];
+}
 function formatUsd(value) {
     return new Intl.NumberFormat("en-US", {
         style: "currency",
@@ -97,7 +110,7 @@ function ChainIcon({ chainId, className }) {
  *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
  * />
  */
-function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, showFiatOption = true, supportedChains = DEFAULT_SUPPORTED_CHAINS, minPoolSize = DEFAULT_MIN_POOL_SIZE, topChainsCount = 3, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit = false, classes, allowDirectTransfer = false, destinationTokenAmount, callbackMetadata, senderAddress, slots, content, theme, }) {
+function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, lockDestinationToken = true, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, showFiatOption = true, supportedChains = DEFAULT_SUPPORTED_CHAINS, topChainsCount = 3, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit = false, classes, allowDirectTransfer = false, pureTransferOnly = false, destinationTokenAmount, callbackMetadata, senderAddress, slots, content, theme, }) {
     // Extract deposit-specific classes for convenience
     const depositClasses = classes?.deposit;
     const { connectedEOAWallet } = (0, react_1.useAccountWallet)();
@@ -114,25 +127,35 @@ function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentT
         }
     }, [showFiatOption, paymentType]);
     // Fetch destination token data
-    const { data: destinationTokenData } = (0, react_1.useTokenData)(destinationTokenChainId, destinationTokenAddress);
-    // Construct full destination token object
-    const destinationToken = (0, react_3.useMemo)(() => ({
-        address: destinationTokenAddress,
-        chainId: destinationTokenChainId,
-        symbol: destinationTokenData?.symbol ?? "",
-        name: destinationTokenData?.name ?? "",
-        decimals: destinationTokenData?.decimals ?? 18,
-        metadata: { logoURI: destinationTokenData?.logoURI },
-    }), [destinationTokenAddress, destinationTokenChainId, destinationTokenData]);
+    const { data: destinationTokenData, isLoading: isDestinationTokenLoading } = (0, react_1.useTokenData)(destinationTokenChainId, destinationTokenAddress);
+    // Construct full destination token object. When `useTokenData` misses (it returns
+    // null on an API miss, not an error), fall back to a known-token entry so the
+    // decimals/symbol invariant holds regardless of the fetch — e.g. Base USDC is 6
+    // decimals, never the generic 18 fallback.
+    const destinationToken = (0, react_3.useMemo)(() => {
+        const known = getKnownFundingToken(destinationTokenChainId, destinationTokenAddress);
+        return {
+            address: destinationTokenAddress,
+            chainId: destinationTokenChainId,
+            symbol: destinationTokenData?.symbol ?? known?.symbol ?? "",
+            name: destinationTokenData?.name ?? known?.name ?? "",
+            decimals: destinationTokenData?.decimals ?? known?.decimals ?? 18,
+            metadata: { logoURI: destinationTokenData?.logoURI ?? known?.metadata?.logoURI },
+        };
+    }, [destinationTokenAddress, destinationTokenChainId, destinationTokenData]);
     // Fetch balances for EOA wallet (use senderAddress as fallback for pre-filled balance display)
     const effectiveBalanceAddress = senderAddress || eoaAddress;
-    const { data: balanceData, isLoading: isBalanceLoading } = (0, react_1.useSimBalance)(shouldShowChainSelection ? effectiveBalanceAddress : undefined, supportedChains.map(c => c.id));
-    // Group balances by chain and calculate total USD value per chain
+    const { data: balances, isLoading: isBalanceLoading, isError: isBalanceError, } = (0, react_1.usePortfolioBalance)(shouldShowChainSelection ? effectiveBalanceAddress : undefined, supportedChains.map(c => c.id));
+    // Group balances by chain and calculate total USD value per chain.
+    //
+    // There is deliberately no liquidity threshold here. The balance provider reports no pool size,
+    // so a `pool_size > n` test is false for every row and quietly reduces to "native only",
+    // erasing every ERC-20 the user holds from the chain summary. Spam filtering belongs to the
+    // token-filter service, which has the data to do it.
     const chainBalances = (0, react_3.useMemo)(() => {
-        if (!balanceData?.balances)
+        if (!balances)
             return {};
-        const filteredBalances = balanceData.balances.filter(token => token.address === "native" || (token.pool_size && token.pool_size > minPoolSize));
-        return filteredBalances.reduce((acc, token) => {
+        return balances.reduce((acc, token) => {
             const chainId = token.chain_id;
             if (!acc[chainId]) {
                 acc[chainId] = {
@@ -146,7 +169,7 @@ function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentT
             acc[chainId].tokenCount += 1;
             return acc;
         }, {});
-    }, [balanceData, minPoolSize]);
+    }, [balances]);
     // Sort chains by USD value (highest first)
     const sortedChains = (0, react_3.useMemo)(() => {
         return supportedChains
@@ -165,6 +188,9 @@ function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentT
     const totalBalance = (0, react_3.useMemo)(() => {
         return Object.values(chainBalances).reduce((sum, chain) => sum + chain.totalUsdValue, 0);
     }, [chainBalances]);
+    const handleQRDepositSuccess = (0, react_3.useCallback)((txHash) => {
+        onSuccess?.(txHash ?? "");
+    }, [onSuccess]);
     if (!recipientAddress)
         return null;
     const tokenSymbol = destinationToken.symbol || "TOKEN";
@@ -198,23 +224,50 @@ function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentT
     if (step === "select-chain") {
         return ((0, jsx_runtime_1.jsxs)("div", { className: depositClasses?.chainSelection ||
                 (0, cn_1.cn)("anyspend-deposit anyspend-deposit-chain-selection font-inter bg-as-surface-primary relative mx-auto w-full max-w-[460px]", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: [onClose && ((0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: depositClasses?.closeButton ||
-                        "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), !isBalanceLoading && totalBalance > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: depositClasses?.balanceContainer || "anyspend-deposit-balance border-theme-border-secondary border-b p-5", children: [(0, jsx_runtime_1.jsx)("p", { className: depositClasses?.balanceLabel || "anyspend-deposit-balance-label text-as-secondary text-sm", children: "Your Balance" }), (0, jsx_runtime_1.jsxs)("p", { className: depositClasses?.balanceValue || "anyspend-deposit-balance-value text-as-primary text-3xl font-semibold", children: [formatDecimal(totalBalance), " ", (0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: "USD" })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: depositClasses?.optionsContainer || "anyspend-deposit-options flex flex-col gap-2 p-6", children: [isBalanceLoading && ((0, jsx_runtime_1.jsx)("div", { className: depositClasses?.chainsSkeleton || "anyspend-deposit-chains-skeleton flex flex-col gap-2", children: [1, 2].map((_, i) => ((0, jsx_runtime_1.jsxs)("div", { className: depositClasses?.skeletonItem ||
-                                    "border-border-primary flex items-center justify-between rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-6 w-6 rounded-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-4 w-32" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-3 w-20" })] })] }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-5 w-5" })] }, i))) })), topChainsWithBalance.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: depositClasses?.chainsContainer || "anyspend-deposit-chains flex flex-col gap-2", children: topChainsWithBalance.map(chain => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleSelectChain(chain.id), className: depositClasses?.chainButton ||
+                        "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), !isBalanceLoading && !isBalanceError && totalBalance > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: depositClasses?.balanceContainer || "anyspend-deposit-balance border-theme-border-secondary border-b p-5", children: [(0, jsx_runtime_1.jsx)("p", { className: depositClasses?.balanceLabel || "anyspend-deposit-balance-label text-as-secondary text-sm", children: "Your Balance" }), (0, jsx_runtime_1.jsxs)("p", { className: depositClasses?.balanceValue || "anyspend-deposit-balance-value text-as-primary text-3xl font-semibold", children: [formatDecimal(totalBalance), " ", (0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: "USD" })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: depositClasses?.optionsContainer || "anyspend-deposit-options flex flex-col gap-2 p-6", children: [isBalanceLoading && ((0, jsx_runtime_1.jsx)("div", { className: depositClasses?.chainsSkeleton || "anyspend-deposit-chains-skeleton flex flex-col gap-2", children: [1, 2].map((_, i) => ((0, jsx_runtime_1.jsxs)("div", { className: depositClasses?.skeletonItem ||
+                                    "border-border-primary flex items-center justify-between rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-6 w-6 rounded-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-4 w-32" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-3 w-20" })] })] }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-5 w-5" })] }, i))) })), isBalanceError && !isBalanceLoading && ((0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/50 px-1 py-2 text-sm", children: "We couldn't read your balances just now. You can still pick a chain below." })), !isBalanceError && topChainsWithBalance.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: depositClasses?.chainsContainer || "anyspend-deposit-chains flex flex-col gap-2", children: topChainsWithBalance.map(chain => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleSelectChain(chain.id), className: depositClasses?.chainButton ||
                                     "anyspend-deposit-chain-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all", children: [(0, jsx_runtime_1.jsx)("div", { className: depositClasses?.chainContent || "anyspend-deposit-chain-content", children: (0, jsx_runtime_1.jsxs)("div", { className: depositClasses?.chainInfo || "anyspend-deposit-chain-info", children: [(0, jsx_runtime_1.jsxs)("span", { className: depositClasses?.chainName ||
-                                                        "anyspend-deposit-chain-name text-as-primary flex items-center gap-1.5 font-medium", children: ["Deposit from ", chain.name, (0, jsx_runtime_1.jsx)(ChainIcon, { chainId: chain.id, className: depositClasses?.chainIcon || "h-5 w-5" })] }), (0, jsx_runtime_1.jsxs)("p", { className: depositClasses?.chainBalance || "anyspend-deposit-chain-balance text-as-secondary text-xs", children: [formatUsd(chain.balance), " available"] })] }) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: depositClasses?.chainChevron || "anyspend-deposit-chain-chevron text-as-secondary h-5 w-5" })] }, chain.id))) })), (0, jsx_runtime_1.jsxs)("div", { className: depositClasses?.generalOptions || "anyspend-deposit-general-options flex flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectCrypto, className: depositClasses?.cryptoButton ||
+                                                        "anyspend-deposit-chain-name text-as-primary flex items-center gap-1.5 font-medium", children: ["Deposit from ", chain.name, (0, jsx_runtime_1.jsx)(ChainIcon, { chainId: chain.id, className: depositClasses?.chainIcon || "h-5 w-5" })] }), (0, jsx_runtime_1.jsx)("p", { className: depositClasses?.chainBalance || "anyspend-deposit-chain-balance text-as-secondary text-xs", children: `${formatUsd(chain.balance)} available` })] }) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: depositClasses?.chainChevron || "anyspend-deposit-chain-chevron text-as-secondary h-5 w-5" })] }, chain.id))) })), (0, jsx_runtime_1.jsxs)("div", { className: depositClasses?.generalOptions || "anyspend-deposit-general-options flex flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectCrypto, className: depositClasses?.cryptoButton ||
                                         "anyspend-deposit-option-button anyspend-deposit-crypto-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all", children: [(0, jsx_runtime_1.jsx)("div", { className: depositClasses?.optionContent || "anyspend-deposit-option-content", children: (0, jsx_runtime_1.jsxs)("div", { className: depositClasses?.optionInfo || "anyspend-deposit-option-info", children: [(0, jsx_runtime_1.jsx)("span", { className: depositClasses?.optionTitle || "anyspend-deposit-option-title text-as-primary font-medium", children: "Deposit Crypto" }), (0, jsx_runtime_1.jsx)("p", { className: depositClasses?.optionDescription ||
                                                             "anyspend-deposit-option-description text-as-secondary text-xs", children: "Swap from any token on any chain" })] }) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: depositClasses?.optionChevron || "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] }), (0, jsx_runtime_1.jsxs)("div", { className: depositClasses?.divider || "anyspend-deposit-divider flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: depositClasses?.dividerLine || "bg-as-stroke h-px flex-1" }), (0, jsx_runtime_1.jsx)("span", { className: depositClasses?.dividerText || "anyspend-deposit-divider-text text-as-secondary text-sm", children: "More options" }), (0, jsx_runtime_1.jsx)("div", { className: depositClasses?.dividerLine || "bg-as-stroke h-px flex-1" })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectQrDeposit, className: depositClasses?.qrButton ||
                                         "anyspend-deposit-option-button anyspend-deposit-qr-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all", children: [(0, jsx_runtime_1.jsxs)("div", { className: depositClasses?.optionContent || "anyspend-deposit-option-content flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(QrCodeIcon_1.QrCodeIcon, { className: depositClasses?.optionIcon || "anyspend-deposit-option-icon h-10 w-10" }), (0, jsx_runtime_1.jsxs)("div", { className: depositClasses?.optionInfo || "anyspend-deposit-option-info", children: [(0, jsx_runtime_1.jsx)("span", { className: depositClasses?.optionTitle || "anyspend-deposit-option-title text-as-primary font-medium", children: "Deposit with QR Code" }), (0, jsx_runtime_1.jsx)("p", { className: depositClasses?.optionDescription ||
-                                                                "anyspend-deposit-option-description text-as-secondary text-xs", children: "Send tokens directly to deposit address" })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: depositClasses?.optionChevron || "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] }), showFiatOption && ((0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectFiat, className: depositClasses?.fiatButton ||
+                                                                "anyspend-deposit-option-description text-as-secondary text-xs", children: pureTransferOnly
+                                                                ? "Send tokens directly to deposit address"
+                                                                : "Send any token — we'll convert it for you" })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: depositClasses?.optionChevron || "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] }), showFiatOption && ((0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectFiat, className: depositClasses?.fiatButton ||
                                         "anyspend-deposit-option-button anyspend-deposit-fiat-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left transition-all", children: [(0, jsx_runtime_1.jsxs)("div", { className: depositClasses?.optionContent || "anyspend-deposit-option-content flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(CreditCardIcon_1.CreditCardIcon, { className: depositClasses?.optionIcon || "anyspend-deposit-option-icon h-10 w-10" }), (0, jsx_runtime_1.jsxs)("div", { className: depositClasses?.optionInfo || "anyspend-deposit-option-info", children: [(0, jsx_runtime_1.jsx)("span", { className: depositClasses?.optionTitle || "anyspend-deposit-option-title text-as-primary font-medium", children: "Fund with Fiat" }), (0, jsx_runtime_1.jsx)("p", { className: depositClasses?.optionDescription ||
                                                                 "anyspend-deposit-option-description text-as-secondary text-xs", children: "Pay with card or bank transfer" })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: depositClasses?.optionChevron || "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] }))] }), (0, jsx_runtime_1.jsx)(WarningText_1.ChainWarningText, { chainId: destinationTokenChainId, classes: classes?.chainWarningText || { root: "mt-2" } })] })] }));
     }
     // QR Deposit view
     if (step === "qr-deposit") {
-        return ((0, jsx_runtime_1.jsx)(QRDeposit_1.QRDeposit, { mode: mode, recipientAddress: recipientAddress, destinationToken: destinationToken, destinationChainId: destinationTokenChainId, depositContractConfig: depositContractConfig, onBack: handleBack, onClose: onClose ?? handleBack, classes: classes?.qrDeposit }));
+        // In pure-transfer mode QRDeposit captures `destinationToken` as its initial
+        // SOURCE token via useState, so it must be fully resolved (correct symbol +
+        // decimals) before QRDeposit mounts. Known funding tokens (e.g. Base USDC) are
+        // already fully resolved via the self-described fallback, so only show a spinner
+        // for unknown tokens whose metadata still has to load over the network.
+        const hasKnownDestination = !!getKnownFundingToken(destinationTokenChainId, destinationTokenAddress);
+        // NOTE: all current Fund Wallet callers derive `destinationTokenAddress` from
+        // `getDefaultDepositDestination`, which always returns Base USDC — exactly a
+        // `KNOWN_FUNDING_TOKENS` key — so `hasKnownDestination` is always true and this
+        // branch never fires for them. The guard is defensive for FUTURE callers that pass
+        // an unknown token together with `pureTransferOnly=true`.
+        // Only surface the fixed destination amount on the QR path when its decimals are trustworthy
+        // (a known funding token or a resolved API lookup) — otherwise `destinationToken.decimals`
+        // is the generic 18 fallback and formatting a 6-decimal token's wei against it would be off by
+        // 10^12. When unresolved we still show the destination token/chain, just without an amount.
+        const destinationDecimalsResolved = hasKnownDestination || !!destinationTokenData;
+        const destinationAmountDisplay = destinationTokenAmount &&
+            /^\d+$/.test(destinationTokenAmount) &&
+            BigInt(destinationTokenAmount) > 0n &&
+            destinationDecimalsResolved
+            ? (0, number_1.formatTokenAmount)(BigInt(destinationTokenAmount), destinationToken.decimals, 6, false)
+            : undefined;
+        if (pureTransferOnly && !hasKnownDestination && !destinationTokenData && isDestinationTokenLoading) {
+            return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-deposit anyspend-deposit-qr-loading font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-qr-loading-content flex flex-col items-center justify-center gap-4 py-12", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-8 w-8 rounded-full" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-4 w-40" })] }) }));
+        }
+        return ((0, jsx_runtime_1.jsx)(QRDeposit_1.QRDeposit, { mode: mode, recipientAddress: recipientAddress, destinationToken: destinationToken, destinationChainId: destinationTokenChainId, destinationAmountDisplay: destinationAmountDisplay, pureTransferOnly: pureTransferOnly, depositContractConfig: depositContractConfig, onBack: handleBack, onClose: onClose ?? handleBack, onSuccess: handleQRDepositSuccess, classes: classes?.qrDeposit }));
     }
     // Deposit view
     return ((0, jsx_runtime_1.jsxs)("div", { className: depositClasses?.form || "anyspend-deposit anyspend-deposit-form relative", children: [shouldShowChainSelection && ((0, jsx_runtime_1.jsxs)("button", { onClick: handleBack, className: depositClasses?.backButton ||
                     "anyspend-deposit-back-button text-as-secondary hover:text-as-primary absolute left-4 top-4 z-10 flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("svg", { className: depositClasses?.backIcon || "anyspend-deposit-back-icon h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }), (0, jsx_runtime_1.jsx)("span", { className: depositClasses?.backText || "anyspend-deposit-back-text text-sm", children: "Back" })] })), onClose && ((0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: depositClasses?.closeButton ||
-                    "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), (0, jsx_runtime_1.jsx)("div", { className: depositClasses?.formContent || (0, cn_1.cn)("anyspend-deposit-form-content", shouldShowChainSelection && "pt-8"), children: isCustomDeposit ? ((0, jsx_runtime_1.jsx)(AnySpendCustomExactIn_1.AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: selectedChainId, destinationToken: destinationToken, destinationChainId: destinationTokenChainId, orderType: effectiveOrderType, minDestinationAmount: minDestinationAmount, header: header ?? defaultHeader, onSuccess: onSuccess, onOpenCustomModal: onOpenCustomModal, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa, customExactInConfig: depositContractConfig, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel, classes: classes?.customExactIn, allowDirectTransfer: allowDirectTransfer, destinationTokenAmount: destinationTokenAmount, callbackMetadata: callbackMetadata, senderAddress: senderAddress, showFiatOption: showFiatOption, slots: slots, content: content, theme: theme }, selectedChainId)) : ((0, jsx_runtime_1.jsx)(AnySpend_1.AnySpend, { loadOrder: loadOrder, mode: mode, defaultActiveTab: paymentType, recipientAddress: recipientAddress, sourceChainId: selectedChainId, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, onSuccess: txHash => onSuccess?.(txHash ?? ""), onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, hideHeader: true, hideBottomNavigation: true, disableUrlParamManagement: true, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel, classes: classes?.anySpend, allowDirectTransfer: allowDirectTransfer, destinationTokenAmount: destinationTokenAmount, callbackMetadata: callbackMetadata, senderAddress: senderAddress, showFiatOption: showFiatOption, slots: slots, content: content, theme: theme }, selectedChainId)) }), (0, jsx_runtime_1.jsx)(WarningText_1.ChainWarningText, { chainId: destinationTokenChainId, classes: classes?.chainWarningText || { root: "px-4 pb-4" } })] }));
+                    "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), (0, jsx_runtime_1.jsx)("div", { className: depositClasses?.formContent || (0, cn_1.cn)("anyspend-deposit-form-content", shouldShowChainSelection && "pt-8"), children: isCustomDeposit ? ((0, jsx_runtime_1.jsx)(AnySpendCustomExactIn_1.AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: selectedChainId, destinationToken: destinationToken, destinationChainId: destinationTokenChainId, orderType: effectiveOrderType, minDestinationAmount: minDestinationAmount, header: header ?? defaultHeader, onSuccess: onSuccess, onOpenCustomModal: onOpenCustomModal, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa, customExactInConfig: depositContractConfig, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel, classes: classes?.customExactIn, allowDirectTransfer: allowDirectTransfer, destinationTokenAmount: destinationTokenAmount, callbackMetadata: callbackMetadata, senderAddress: senderAddress, showFiatOption: showFiatOption, slots: slots, content: content, theme: theme }, selectedChainId)) : ((0, jsx_runtime_1.jsx)(AnySpend_1.AnySpend, { loadOrder: loadOrder, mode: mode, defaultActiveTab: paymentType, recipientAddress: recipientAddress, sourceChainId: selectedChainId, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, lockDestinationToken: lockDestinationToken, onSuccess: txHash => onSuccess?.(txHash ?? ""), onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, hideHeader: true, hideBottomNavigation: true, disableUrlParamManagement: true, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel, classes: classes?.anySpend, allowDirectTransfer: allowDirectTransfer, destinationTokenAmount: destinationTokenAmount, callbackMetadata: callbackMetadata, senderAddress: senderAddress, showFiatOption: showFiatOption, slots: slots, content: content, theme: theme }, selectedChainId)) }), (0, jsx_runtime_1.jsx)(WarningText_1.ChainWarningText, { chainId: destinationTokenChainId, classes: classes?.chainWarningText || { root: "px-4 pb-4" } })] }));
 }

package/dist/cjs/anyspend/react/components/AnySpendStakeB3.js

@@ -40,11 +40,25 @@ function AnySpendStakeB3({ loadOrder, mode = "modal", recipientAddress, stakeAmo
     // Wagmi hooks for direct staking
     const { address } = (0, wagmi_1.useAccount)();
     const { switchChainAndExecute, isSwitchingOrExecuting } = (0, react_1.useUnifiedChainSwitchAndExecute)();
-    // Fetch B3 token balance
-    const { data: simBalance, isLoading: isBalanceLoading } = (0, react_1.useSimBalance)(address, [chains_1.base.id]);
-    const b3RawBalanceStr = simBalance?.balances.find(b => (0, anyspend_1.eqci)(b.address, anyspend_1.B3_TOKEN.address))?.amount || "0";
+    // Fetch B3 token balance. `isBalanceUnknown` must gate every use of `b3RawBalance`: a failed read
+    // yields the same 0 as an empty wallet, and acting on it pushes a holder into the swap flow to
+    // buy a token they already have.
+    const { data: balances, isLoading: isBalanceLoading, isError: isBalanceError, refetch: refetchBalance, } = (0, react_1.usePortfolioBalance)(address, [chains_1.base.id]);
+    // Guarded on `address`: with no wallet connected the query never runs, and a query that was
+    // never asked is not a query that failed. Without this the screen tells a visitor their
+    // balance is unavailable and refuses to continue, when they simply have not connected yet.
+    const isBalanceUnknown = Boolean(address) && (isBalanceError || (!isBalanceLoading && balances === undefined));
+    const b3RawBalanceStr = balances?.find(b => (0, anyspend_1.eqci)(b.address, anyspend_1.B3_TOKEN.address))?.amount || "0";
     const b3RawBalance = BigInt(b3RawBalanceStr);
     const b3Balance = (0, number_1.formatTokenAmount)(b3RawBalance, anyspend_1.B3_TOKEN.decimals);
+    /**
+     * Whether the wallet demonstrably holds enough B3 to stake `amountRaw` directly.
+     *
+     * False while the balance is unknown — but callers must not read that as a shortfall. An unknown
+     * balance is neither enough nor short, and the two need different UI: a shortfall offers the swap
+     * flow, an unknown offers a retry. Check `isBalanceUnknown` first.
+     */
+    const hasEnoughB3 = (amountRaw) => !isBalanceUnknown && BigInt(amountRaw || "0") <= b3RawBalance;
     // State for direct staking flow
     const [isStaking, setIsStaking] = (0, react_3.useState)(false);
     const [stakingTxHash, setStakingTxHash] = (0, react_3.useState)("");
@@ -212,9 +226,11 @@ function AnySpendStakeB3({ loadOrder, mode = "modal", recipientAddress, stakeAmo
             react_1.toast.error("Please enter a valid amount to stake");
             return;
         }
-        // Check if user has sufficient B3 balance for direct staking
-        const hasEnoughBalance = b3RawBalance && BigInt(userStakeAmount) <= b3RawBalance;
-        if (hasEnoughBalance) {
+        if (isBalanceUnknown) {
+            react_1.toast.error("Can't read your B3 balance right now. Please try again.");
+            return;
+        }
+        if (hasEnoughB3(userStakeAmount)) {
             // User has enough B3, proceed with direct staking
             handleDirectStaking();
         }
@@ -238,16 +254,19 @@ function AnySpendStakeB3({ loadOrder, mode = "modal", recipientAddress, stakeAmo
                                     opacity: hasMounted ? 1 : 0,
                                     y: hasMounted ? 0 : 20,
                                     filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)("h2", { className: "font-sf-rounded font-neue-montreal-medium mb-1 text-center text-2xl font-semibold", children: (() => {
-                                        const hasEnoughBalance = b3RawBalance && BigInt(debouncedUserStakeAmount || "0") <= b3RawBalance;
-                                        return hasEnoughBalance || !debouncedAmount ? "Stake B3" : "Swap & Stake B3";
-                                    })() }) })] }), (0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: false, animate: {
+                                }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)("h2", { className: "font-sf-rounded font-neue-montreal-medium mb-1 text-center text-2xl font-semibold", children: isBalanceUnknown || !debouncedAmount || hasEnoughB3(debouncedUserStakeAmount)
+                                        ? "Stake B3"
+                                        : "Swap & Stake B3" }) })] }), (0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: false, animate: {
                             opacity: hasMounted ? 1 : 0,
                             y: hasMounted ? 0 : 20,
                             filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/70 text-sm font-medium", children: "I want to stake" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary/50 flex items-center gap-1 text-sm", children: ["Available: ", isBalanceLoading ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-3 w-3 animate-spin" }) : `${b3Balance} B3`] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Input, { onFocus: onFocusStakeAmountInput, type: "text", placeholder: "0.00", value: displayAmount, onChange: e => validateAndSetAmount(e.target.value), className: `h-14 px-4 text-lg ${!isAmountValid && displayAmount ? "border-as-red" : "border-b3-react-border"}` }), (0, jsx_runtime_1.jsx)("div", { className: "font-pack absolute right-4 top-1/2 -translate-y-1/2 text-lg font-medium text-blue-500/70", children: "B3" })] }), !isAmountValid && displayAmount && (0, jsx_runtime_1.jsx)("p", { className: "text-as-red mt-2 text-sm", children: validationError }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (() => {
-                                    const hasEnoughBalance = b3RawBalance && BigInt(debouncedUserStakeAmount || "0") <= b3RawBalance;
-                                    if (!hasEnoughBalance || !debouncedAmount) {
+                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/70 text-sm font-medium", children: "I want to stake" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary/50 flex items-center gap-1 text-sm", children: ["Available:", " ", isBalanceLoading ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-3 w-3 animate-spin" })) : isBalanceUnknown ? ("unavailable") : (`${b3Balance} B3`)] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Input, { onFocus: onFocusStakeAmountInput, type: "text", placeholder: "0.00", value: displayAmount, onChange: e => validateAndSetAmount(e.target.value), className: `h-14 px-4 text-lg ${!isAmountValid && displayAmount ? "border-as-red" : "border-b3-react-border"}` }), (0, jsx_runtime_1.jsx)("div", { className: "font-pack absolute right-4 top-1/2 -translate-y-1/2 text-lg font-medium text-blue-500/70", children: "B3" })] }), !isAmountValid && displayAmount && (0, jsx_runtime_1.jsx)("p", { className: "text-as-red mt-2 text-sm", children: validationError }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (() => {
+                                    // An unreadable balance is not a shortfall, so it must not open the swap upsell —
+                                    // that would sell a swap to someone who may already hold the tokens.
+                                    if (isBalanceUnknown) {
+                                        return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-brand/10 flex flex-col items-center gap-2 rounded-lg p-4 pb-5", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/70 text-sm font-medium", children: "We couldn't read your B3 balance just now." }), (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", onClick: () => refetchBalance(), className: "text-as-primary text-sm", children: "Try again" })] }));
+                                    }
+                                    if (!hasEnoughB3(debouncedUserStakeAmount) || !debouncedAmount) {
                                         return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-brand/10 flex flex-col items-center gap-2 rounded-lg p-4 pb-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary text-sm font-semibold", children: "Swap & stake from any token" }), (0, jsx_runtime_1.jsxs)(react_1.TextLoop, { children: [(0, jsx_runtime_1.jsx)(EthIcon_1.EthIcon, { className: "h-8 w-8" }), (0, jsx_runtime_1.jsx)(SolIcon_1.SolIcon, { className: "h-8 w-8" }), (0, jsx_runtime_1.jsx)(USDCIcon_1.UsdcIcon, { className: "h-8 w-8" })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { className: "text-as-primary h-4 w-4" }), (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3-coin-3d.png", className: "h-7 w-7", alt: "B3 Token" })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/50 text-sm font-medium", children: debouncedAmount
                                                         ? `No problem, we'll help you swap to ${debouncedAmount} B3!`
                                                         : "Not enough B3? We'll help you swap from other coins." })] }));

package/dist/cjs/anyspend/react/components/AnySpendStakeB3ExactIn.js

@@ -40,11 +40,25 @@ function AnySpendStakeB3ExactIn({ loadOrder, mode = "modal", sourceTokenAddress,
     // Wagmi hooks for direct staking
     const { address } = (0, wagmi_1.useAccount)();
     const { switchChainAndExecute, isSwitchingOrExecuting } = (0, react_1.useUnifiedChainSwitchAndExecute)();
-    // Fetch B3 token balance
-    const { data: simBalance, isLoading: isBalanceLoading } = (0, react_1.useSimBalance)(address, [chains_1.base.id]);
-    const b3RawBalanceStr = simBalance?.balances.find(b => (0, anyspend_1.eqci)(b.address, anyspend_1.B3_TOKEN.address))?.amount || "0";
+    // Fetch B3 token balance. `isBalanceUnknown` must gate every use of `b3RawBalance`: a failed read
+    // yields the same 0 as an empty wallet, and acting on it pushes a holder into the swap flow to
+    // buy a token they already have.
+    const { data: balances, isLoading: isBalanceLoading, isError: isBalanceError, refetch: refetchBalance, } = (0, react_1.usePortfolioBalance)(address, [chains_1.base.id]);
+    // Guarded on `address`: with no wallet connected the query never runs, and a query that was
+    // never asked is not a query that failed. Without this the screen tells a visitor their
+    // balance is unavailable and refuses to continue, when they simply have not connected yet.
+    const isBalanceUnknown = Boolean(address) && (isBalanceError || (!isBalanceLoading && balances === undefined));
+    const b3RawBalanceStr = balances?.find(b => (0, anyspend_1.eqci)(b.address, anyspend_1.B3_TOKEN.address))?.amount || "0";
     const b3RawBalance = BigInt(b3RawBalanceStr);
     const b3Balance = (0, number_1.formatTokenAmount)(b3RawBalance, anyspend_1.B3_TOKEN.decimals);
+    /**
+     * Whether the wallet demonstrably holds enough B3 to stake `amountRaw` directly.
+     *
+     * False while the balance is unknown — but callers must not read that as a shortfall. An unknown
+     * balance is neither enough nor short, and the two need different UI: a shortfall offers the swap
+     * flow, an unknown offers a retry. Check `isBalanceUnknown` first.
+     */
+    const hasEnoughB3 = (amountRaw) => !isBalanceUnknown && BigInt(amountRaw || "0") <= b3RawBalance;
     // State for direct staking flow
     const [isStaking, setIsStaking] = (0, react_3.useState)(false);
     const [stakingTxHash, setStakingTxHash] = (0, react_3.useState)("");
@@ -215,8 +229,11 @@ function AnySpendStakeB3ExactIn({ loadOrder, mode = "modal", sourceTokenAddress,
             return;
         }
         // Check if user has sufficient B3 balance for direct staking
-        const hasEnoughBalance = b3RawBalance && BigInt(userStakeAmount) <= b3RawBalance;
-        if (hasEnoughBalance) {
+        if (isBalanceUnknown) {
+            react_1.toast.error("Can't read your B3 balance right now. Please try again.");
+            return;
+        }
+        if (hasEnoughB3(userStakeAmount)) {
             // User has enough B3, proceed with direct staking
             handleDirectStaking();
         }
@@ -249,15 +266,20 @@ function AnySpendStakeB3ExactIn({ loadOrder, mode = "modal", sourceTokenAddress,
                                     y: hasMounted ? 0 : 20,
                                     filter: hasMounted ? "blur(0px)" : "blur(10px)",
                                 }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)("h2", { className: "font-sf-rounded font-neue-montreal-medium mb-1 text-center text-2xl font-semibold", children: (() => {
-                                        const hasEnoughBalance = b3RawBalance && BigInt(debouncedUserStakeAmount || "0") <= b3RawBalance;
-                                        return hasEnoughBalance || !debouncedAmount ? "Stake B3" : "Swap & Stake B3";
+                                        return isBalanceUnknown || !debouncedAmount || hasEnoughB3(debouncedUserStakeAmount)
+                                            ? "Stake B3"
+                                            : "Swap & Stake B3";
                                     })() }) })] }), (0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: false, animate: {
                             opacity: hasMounted ? 1 : 0,
                             y: hasMounted ? 0 : 20,
                             filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/70 text-sm font-medium", children: "I want to stake" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary/50 flex items-center gap-1 text-sm", children: ["Available: ", isBalanceLoading ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-3 w-3 animate-spin" }) : `${b3Balance} B3`] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Input, { onFocus: onFocusStakeAmountInput, type: "text", placeholder: "0.00", value: displayAmount, onChange: e => validateAndSetAmount(e.target.value), className: `h-14 px-4 text-lg ${!isAmountValid && displayAmount ? "border-as-red" : "border-b3-react-border"}` }), (0, jsx_runtime_1.jsx)("div", { className: "font-pack absolute right-4 top-1/2 -translate-y-1/2 text-lg font-medium text-blue-500/70", children: "B3" })] }), !isAmountValid && displayAmount && (0, jsx_runtime_1.jsx)("p", { className: "text-as-red mt-2 text-sm", children: validationError }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (() => {
-                                    const hasEnoughBalance = b3RawBalance && BigInt(debouncedUserStakeAmount || "0") <= b3RawBalance;
-                                    if (!hasEnoughBalance || !debouncedAmount) {
+                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/70 text-sm font-medium", children: "I want to stake" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary/50 flex items-center gap-1 text-sm", children: ["Available:", " ", isBalanceLoading ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-3 w-3 animate-spin" })) : isBalanceUnknown ? ("unavailable") : (`${b3Balance} B3`)] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Input, { onFocus: onFocusStakeAmountInput, type: "text", placeholder: "0.00", value: displayAmount, onChange: e => validateAndSetAmount(e.target.value), className: `h-14 px-4 text-lg ${!isAmountValid && displayAmount ? "border-as-red" : "border-b3-react-border"}` }), (0, jsx_runtime_1.jsx)("div", { className: "font-pack absolute right-4 top-1/2 -translate-y-1/2 text-lg font-medium text-blue-500/70", children: "B3" })] }), !isAmountValid && displayAmount && (0, jsx_runtime_1.jsx)("p", { className: "text-as-red mt-2 text-sm", children: validationError }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (() => {
+                                    // An unreadable balance is not a shortfall, so it must not open the swap upsell —
+                                    // that would sell a swap to someone who may already hold the tokens.
+                                    if (isBalanceUnknown) {
+                                        return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-brand/10 flex flex-col items-center gap-2 rounded-lg p-4 pb-5", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/70 text-sm font-medium", children: "We couldn't read your B3 balance just now." }), (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", onClick: () => refetchBalance(), className: "text-as-primary text-sm", children: "Try again" })] }));
+                                    }
+                                    if (!hasEnoughB3(debouncedUserStakeAmount) || !debouncedAmount) {
                                         return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-brand/10 flex flex-col items-center gap-2 rounded-lg p-4 pb-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary text-sm font-semibold", children: "Swap & stake from any token" }), (0, jsx_runtime_1.jsxs)(react_1.TextLoop, { children: [(0, jsx_runtime_1.jsx)(EthIcon_1.EthIcon, { className: "h-8 w-8" }), (0, jsx_runtime_1.jsx)(SolIcon_1.SolIcon, { className: "h-8 w-8" }), (0, jsx_runtime_1.jsx)(USDCIcon_1.UsdcIcon, { className: "h-8 w-8" })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { className: "text-as-primary h-4 w-4" }), (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3-coin-3d.png", className: "h-7 w-7", alt: "B3 Token" })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/50 text-sm font-medium", children: debouncedAmount
                                                         ? `No problem, we'll help you swap to ${debouncedAmount} B3!`
                                                         : "Not enough B3? We'll help you swap from other coins." })] }));

package/dist/cjs/anyspend/react/components/QRDeposit.d.ts

@@ -14,6 +14,22 @@ export interface QRDepositProps {
     destinationToken: components["schemas"]["Token"];
     /** The destination chain ID */
     destinationChainId: number;
+    /**
+     * Human-formatted destination amount (e.g. "9.365547"), shown as an APPROXIMATE
+     * target in swap mode only. The QR deposit path accepts an arbitrary sent amount,
+     * so this is never a guaranteed receive figure — the UI frames it as "any amount
+     * works". Omitted when no fixed amount is set or the destination decimals are
+     * unresolved (to avoid a mis-scaled number). Ignored in pure-transfer mode.
+     */
+    destinationAmountDisplay?: string;
+    /**
+     * When true, the deposit is a PURE TRANSFER: the destination token/chain mirror
+     * the user's currently selected source token/chain, so the exact token the user
+     * sends lands in their wallet on the same chain — no swap/bridge order is created.
+     * The `destinationToken`/`destinationChainId` props are then used only as the
+     * initial source selection (they must be fully resolved before mount). Defaults to false.
+     */
+    pureTransferOnly?: boolean;
     /** Creator address (optional) */
     creatorAddress?: string;
     /** Contract config for custom execution after deposit */
@@ -24,8 +40,11 @@ export interface QRDepositProps {
     onClose?: () => void;
     /** Callback when order is created successfully */
     onOrderCreated?: (orderId: string) => void;
-    /** Callback when deposit is completed */
-    onSuccess?: (txHash?: string) => void;
+    /**
+     * Callback when deposit is completed. The argument carries the deposited amount string
+     * (e.g. "200.00") on the pure-transfer path, or the order tx hash otherwise.
+     */
+    onSuccess?: (amountOrTxHash?: string) => void;
     /** Custom classes for styling */
     classes?: QRDepositClasses;
 }
@@ -43,4 +62,4 @@ export interface QRDepositProps {
  *   onSuccess={(txHash) => console.log("Deposit complete:", txHash)}
  * />
  */
-export declare function QRDeposit({ mode, recipientAddress, sourceToken: sourceTokenProp, sourceChainId: sourceChainIdProp, destinationToken, destinationChainId, creatorAddress, depositContractConfig, onBack, onClose, onOrderCreated, onSuccess, classes, }: QRDepositProps): import("react/jsx-runtime").JSX.Element;
+export declare function QRDeposit({ mode, recipientAddress, sourceToken: sourceTokenProp, sourceChainId: sourceChainIdProp, destinationToken, destinationChainId, destinationAmountDisplay, pureTransferOnly, creatorAddress, depositContractConfig, onBack, onClose, onOrderCreated, onSuccess, classes, }: QRDepositProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/anyspend/react/components/QRDeposit.js

@@ -42,28 +42,35 @@ const DEFAULT_ETH_ON_BASE = {
  *   onSuccess={(txHash) => console.log("Deposit complete:", txHash)}
  * />
  */
-function QRDeposit({ mode = "modal", recipientAddress, sourceToken: sourceTokenProp, sourceChainId: sourceChainIdProp, destinationToken, destinationChainId, creatorAddress, depositContractConfig, onBack, onClose, onOrderCreated, onSuccess, classes, }) {
+function QRDeposit({ mode = "modal", recipientAddress, sourceToken: sourceTokenProp, sourceChainId: sourceChainIdProp, destinationToken, destinationChainId, destinationAmountDisplay, pureTransferOnly = false, creatorAddress, depositContractConfig, onBack, onClose, onOrderCreated, onSuccess, classes, }) {
     const [copied, setCopied] = (0, react_2.useState)(false);
     const [orderId, setOrderId] = (0, react_2.useState)();
     const [globalAddress, setGlobalAddress] = (0, react_2.useState)();
     const orderCreatedRef = (0, react_2.useRef)(false);
     const [transferResult, setTransferResult] = (0, react_2.useState)(null);
-    // Source token/chain as state (can be changed by user)
-    const [sourceChainId, setSourceChainId] = (0, react_2.useState)(sourceChainIdProp ?? 8453);
-    const [sourceToken, setSourceToken] = (0, react_2.useState)(sourceTokenProp ?? DEFAULT_ETH_ON_BASE);
+    // Source token/chain as state (can be changed by user).
+    // In pure-transfer mode the initial source is the passed destination (caller sets
+    // it to the desired default funding token), so the deposit mirrors the user's selection.
+    const [sourceChainId, setSourceChainId] = (0, react_2.useState)(sourceChainIdProp ?? (pureTransferOnly ? destinationChainId : 8453));
+    const [sourceToken, setSourceToken] = (0, react_2.useState)(sourceTokenProp ?? (pureTransferOnly ? destinationToken : DEFAULT_ETH_ON_BASE));
+    // In pure-transfer mode the effective destination mirrors the selected source,
+    // forcing isPureTransfer = true (no swap/bridge order is created).
+    const effectiveDestinationToken = pureTransferOnly ? sourceToken : destinationToken;
+    const effectiveDestinationChainId = pureTransferOnly ? sourceChainId : destinationChainId;
     // Check if this is a pure transfer (same chain and token)
-    const isPureTransfer = (0, anyspend_1.isSameChainAndToken)(sourceChainId, sourceToken.address, destinationChainId, destinationToken.address);
+    const isPureTransfer = (0, anyspend_1.isSameChainAndToken)(sourceChainId, sourceToken.address, effectiveDestinationChainId, effectiveDestinationToken.address);
+    const handleTransferDetected = (0, react_2.useCallback)((result) => {
+        setTransferResult(result);
+        onSuccess?.(result.formattedAmount);
+    }, [onSuccess]);
     // Watch for pure transfers (same chain and token)
-    const { isWatching: isWatchingTransfer } = (0, useWatchTransfer_1.useWatchTransfer)({
+    const { isWatching: isWatchingTransfer, reset: resetWatchTransfer } = (0, useWatchTransfer_1.useWatchTransfer)({
         address: recipientAddress,
         chainId: sourceChainId,
         tokenAddress: sourceToken.address,
         tokenDecimals: sourceToken.decimals,
         enabled: isPureTransfer && !transferResult,
-        onTransferDetected: result => {
-            setTransferResult(result);
-            onSuccess?.();
-        },
+        onTransferDetected: handleTransferDetected,
     });
     // Handle token selection from TokenSelector
     const handleTokenSelect = (newToken) => {
@@ -80,6 +87,8 @@ function QRDeposit({ mode = "modal", recipientAddress, sourceToken: sourceTokenP
         setGlobalAddress(undefined);
         orderCreatedRef.current = false;
         setTransferResult(null);
+        // Reset the balance watcher baseline so the new token isn't compared against the old token's balance
+        resetWatchTransfer();
         // Update token and chain
         setSourceChainId(newToken.chainId);
         setSourceToken(token);
@@ -110,18 +119,18 @@ function QRDeposit({ mode = "modal", recipientAddress, sourceToken: sourceTokenP
         createOrder({
             recipientAddress,
             srcChain: sourceChainId,
-            dstChain: destinationChainId,
+            dstChain: effectiveDestinationChainId,
             srcToken: sourceToken,
-            dstToken: destinationToken,
+            dstToken: effectiveDestinationToken,
             creatorAddress,
             contractConfig: depositContractConfig,
         });
     }, [
         recipientAddress,
         sourceChainId,
-        destinationChainId,
+        effectiveDestinationChainId,
         sourceToken,
-        destinationToken,
+        effectiveDestinationToken,
         creatorAddress,
         depositContractConfig,
         createOrder,
@@ -165,8 +174,8 @@ function QRDeposit({ mode = "modal", recipientAddress, sourceToken: sourceTokenP
     }
     return ((0, jsx_runtime_1.jsx)("div", { className: classes?.container ||
             (0, cn_1.cn)("anyspend-container anyspend-qr-deposit font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: (0, jsx_runtime_1.jsxs)("div", { className: classes?.content || "anyspend-qr-deposit-content flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.header || "anyspend-qr-header flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("button", { onClick: handleBack, className: classes?.backButton || "anyspend-qr-back-button text-as-secondary hover:text-as-primary", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), (0, jsx_runtime_1.jsx)("h2", { className: classes?.title || "anyspend-qr-title text-as-primary text-base font-semibold", children: "Deposit" }), onClose ? ((0, jsx_runtime_1.jsx)("button", { onClick: handleClose, className: classes?.closeButton || "anyspend-qr-close-button text-as-secondary hover:text-as-primary", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "w-5" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: classes?.tokenSelectorContainer || "anyspend-qr-token-selector flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)("label", { className: classes?.tokenSelectorLabel || "anyspend-qr-token-label text-as-secondary text-sm", children: "Send" }), (0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { chainIdsFilter: (0, anyspend_1.getAvailableChainIds)("from"), context: "from", fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: (0, anyspend_1.getAvailableChainIds)("from"), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, setToken: handleTokenSelect, supportedWalletVMs: ["evm"], token: undefined, trigger: (0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "outline", role: "combobox", className: classes?.tokenSelectorTrigger ||
-                                    "anyspend-qr-token-trigger border-as-stroke bg-as-surface-secondary flex h-auto w-full items-center justify-between gap-2 rounded-xl border px-3 py-2.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [sourceToken.metadata?.logoURI ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[sourceChainId]?.logoUrl, tokenUrl: sourceToken.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: sourceToken.symbol }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/70 text-xs", children: anyspend_1.ALL_CHAINS[sourceChainId]?.name ?? "Unknown" })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes?.qrContent || "anyspend-qr-content border-as-stroke flex items-start gap-4 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.qrCodeContainer || "anyspend-qr-code-container flex flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: classes?.qrCode || "anyspend-qr-code rounded-lg bg-white p-2", children: (0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: qrValue, size: 120, level: "M", marginSize: 0 }) }), (0, jsx_runtime_1.jsxs)("span", { className: classes?.qrScanHint || "anyspend-qr-scan-hint text-as-secondary text-xs", children: ["SCAN WITH ", (0, jsx_runtime_1.jsx)("span", { className: "inline-block", children: "\uD83E\uDD8A" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes?.addressContainer || "anyspend-qr-address-container flex flex-1 flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: classes?.addressLabel || "anyspend-qr-address-label text-as-secondary text-sm", children: "Deposit address:" }), (0, jsx_runtime_1.jsxs)("div", { className: classes?.addressRow || "anyspend-qr-address-row flex items-start gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: classes?.address || "anyspend-qr-address text-as-primary break-all font-mono text-sm leading-relaxed", children: displayAddress }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCopyAddress, className: classes?.addressCopyIcon ||
-                                                "anyspend-qr-copy-icon text-as-secondary hover:text-as-primary mt-0.5 shrink-0", children: copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-4 w-4" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "h-4 w-4" }) })] })] })] }), (0, jsx_runtime_1.jsx)(WarningText_1.ChainWarningText, { chainId: destinationChainId }), (0, jsx_runtime_1.jsxs)(WarningText_1.WarningText, { children: ["Only send ", sourceToken.symbol, " on ", anyspend_1.ALL_CHAINS[sourceChainId]?.name ?? "the specified chain", ". Other tokens will not be converted."] }), isPureTransfer && isWatchingTransfer && ((0, jsx_runtime_1.jsxs)("div", { className: classes?.watchingIndicator ||
+                                    "anyspend-qr-token-trigger border-as-stroke bg-as-surface-secondary flex h-auto w-full items-center justify-between gap-2 rounded-xl border px-3 py-2.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [sourceToken.metadata?.logoURI ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[sourceChainId]?.logoUrl, tokenUrl: sourceToken.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: sourceToken.symbol }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/70 text-xs", children: anyspend_1.ALL_CHAINS[sourceChainId]?.name ?? "Unknown" })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) })] }), !isPureTransfer && ((0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-receive flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)("label", { className: "anyspend-qr-receive-label text-as-secondary text-sm", children: "Receive" }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-receive-row border-as-stroke bg-as-surface-secondary flex w-full items-center gap-2 rounded-xl border px-3 py-2.5", children: [effectiveDestinationToken.metadata?.logoURI ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[effectiveDestinationChainId]?.logoUrl, tokenUrl: effectiveDestinationToken.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: effectiveDestinationToken.symbol || "Token" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/70 text-xs", children: anyspend_1.ALL_CHAINS[effectiveDestinationChainId]?.name ?? "Unknown" })] })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: classes?.qrContent || "anyspend-qr-content border-as-stroke flex items-start gap-4 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.qrCodeContainer || "anyspend-qr-code-container flex flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: classes?.qrCode || "anyspend-qr-code rounded-lg bg-white p-2", children: (0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: qrValue, size: 120, level: "M", marginSize: 0 }) }), (0, jsx_runtime_1.jsxs)("span", { className: classes?.qrScanHint || "anyspend-qr-scan-hint text-as-secondary text-xs", children: ["SCAN WITH ", (0, jsx_runtime_1.jsx)("span", { className: "inline-block", children: "\uD83E\uDD8A" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes?.addressContainer || "anyspend-qr-address-container flex flex-1 flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: classes?.addressLabel || "anyspend-qr-address-label text-as-secondary text-sm", children: "Deposit address:" }), (0, jsx_runtime_1.jsxs)("div", { className: classes?.addressRow || "anyspend-qr-address-row flex items-start gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: classes?.address || "anyspend-qr-address text-as-primary break-all font-mono text-sm leading-relaxed", children: displayAddress }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCopyAddress, className: classes?.addressCopyIcon ||
+                                                "anyspend-qr-copy-icon text-as-secondary hover:text-as-primary mt-0.5 shrink-0", children: copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-4 w-4" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "h-4 w-4" }) })] })] })] }), (0, jsx_runtime_1.jsx)(WarningText_1.ChainWarningText, { chainId: effectiveDestinationChainId }), isPureTransfer ? ((0, jsx_runtime_1.jsxs)(WarningText_1.WarningText, { children: ["Only send ", sourceToken.symbol, " on ", anyspend_1.ALL_CHAINS[sourceChainId]?.name ?? "the specified chain", ". Other tokens will not be converted."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(WarningText_1.WarningText, { children: ["Only send ", sourceToken.symbol, " on ", anyspend_1.ALL_CHAINS[sourceChainId]?.name ?? "the specified chain", " to this address \u2014 it will be converted to ", effectiveDestinationToken.symbol || "the destination token", " on", " ", anyspend_1.ALL_CHAINS[effectiveDestinationChainId]?.name ?? "the destination chain", "."] }), destinationAmountDisplay && ((0, jsx_runtime_1.jsxs)("p", { className: "anyspend-qr-amount-hint text-as-secondary text-xs", children: ["Target \u2248 ", destinationAmountDisplay, " ", effectiveDestinationToken.symbol || "tokens", ". Any amount of", " ", sourceToken.symbol || "tokens", " works \u2014 you'll receive whatever your deposit converts to."] }))] })), isPureTransfer && isWatchingTransfer && ((0, jsx_runtime_1.jsxs)("div", { className: classes?.watchingIndicator ||
                         "anyspend-qr-watching flex items-center justify-center gap-2 rounded-lg bg-blue-500/10 p-3", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin text-blue-500" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-blue-500", children: "Watching for incoming transfer..." })] })), (0, jsx_runtime_1.jsx)("button", { onClick: handleCopyAddress, className: classes?.copyButton ||
                         "anyspend-qr-copy-button flex w-full items-center justify-center gap-2 rounded-xl bg-blue-500 py-3.5 font-medium text-white transition-all hover:bg-blue-600", children: "Copy deposit address" })] }) }));
 }