@b3dotfun/sdk 0.0.87 → 0.0.88

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

@@ -0,0 +1,190 @@
+"use strict";
+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 react_2 = require("@web3icons/react");
+const lucide_react_1 = require("lucide-react");
+const react_3 = require("react");
+const AnySpend_1 = require("./AnySpend");
+const AnySpendCustomExactIn_1 = require("./AnySpendCustomExactIn");
+const WarningText_1 = require("./common/WarningText");
+const CreditCardIcon_1 = require("./icons/CreditCardIcon");
+const QrCodeIcon_1 = require("./icons/QrCodeIcon");
+const QRDeposit_1 = require("./QRDeposit");
+// Default supported chains
+const DEFAULT_SUPPORTED_CHAINS = [
+    { id: 8453, name: "Base" },
+    { id: 1, name: "Ethereum" },
+    { id: 42161, name: "Arbitrum" },
+    { id: 10, name: "Optimism" },
+    { id: 137, name: "Polygon" },
+    { id: 56, name: "BNB Chain" },
+];
+// Minimum pool size to filter out low liquidity tokens
+const DEFAULT_MIN_POOL_SIZE = 1000000;
+function formatUsd(value) {
+    return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+        minimumFractionDigits: 0,
+        maximumFractionDigits: value >= 100 ? 0 : 2,
+    }).format(value);
+}
+function formatDecimal(value) {
+    return new Intl.NumberFormat("en-US", {
+        style: "decimal",
+        minimumFractionDigits: 0,
+        maximumFractionDigits: value >= 100 ? 0 : 2,
+    }).format(value);
+}
+// Chain icon component
+function ChainIcon({ chainId, className }) {
+    const iconProps = {
+        variant: "branded",
+        className: (0, cn_1.cn)("anyspend-deposit-chain-icon", className),
+    };
+    switch (chainId) {
+        case 1:
+            return (0, jsx_runtime_1.jsx)(react_2.NetworkEthereum, { ...iconProps });
+        case 8453:
+            return (0, jsx_runtime_1.jsx)(react_2.NetworkBase, { ...iconProps });
+        case 137:
+            return (0, jsx_runtime_1.jsx)(react_2.NetworkPolygonPos, { ...iconProps });
+        case 42161:
+            return (0, jsx_runtime_1.jsx)(react_2.NetworkArbitrumOne, { ...iconProps });
+        case 10:
+            return (0, jsx_runtime_1.jsx)(react_2.NetworkOptimism, { ...iconProps });
+        case 56:
+            return (0, jsx_runtime_1.jsx)(react_2.NetworkBinanceSmartChain, { ...iconProps });
+        default:
+            return null;
+    }
+}
+/**
+ * A flexible deposit component that wraps AnySpendCustomExactIn with optional chain selection.
+ *
+ * @example
+ * // Simple deposit with chain selection
+ * <AnySpendDeposit
+ *   recipientAddress={userAddress}
+ *   destinationToken={myToken}
+ *   destinationChainId={base.id}
+ *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
+ * />
+ *
+ * @example
+ * // Skip chain selection by providing sourceTokenChainId
+ * <AnySpendDeposit
+ *   recipientAddress={userAddress}
+ *   destinationToken={myToken}
+ *   destinationChainId={base.id}
+ *   sourceTokenChainId={base.id}
+ *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
+ * />
+ *
+ * @example
+ * // Deposit with custom contract
+ * <AnySpendDeposit
+ *   recipientAddress={userAddress}
+ *   destinationToken={myToken}
+ *   destinationChainId={base.id}
+ *   depositContractConfig={{
+ *     contractAddress: "0x...",
+ *     functionName: "depositFor",
+ *   }}
+ *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
+ * />
+ */
+function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationToken, destinationChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains = DEFAULT_SUPPORTED_CHAINS, minPoolSize = DEFAULT_MIN_POOL_SIZE, topChainsCount = 3, onClose, }) {
+    const { connectedEOAWallet } = (0, react_1.useAccountWallet)();
+    const eoaAddress = connectedEOAWallet?.getAccount()?.address;
+    // Determine if we should show chain selection
+    const shouldShowChainSelection = showChainSelection ?? (!initialSourceChainId && !initialPaymentType);
+    const [step, setStep] = (0, react_3.useState)(shouldShowChainSelection ? "select-chain" : "deposit");
+    const [selectedChainId, setSelectedChainId] = (0, react_3.useState)(initialSourceChainId);
+    const [paymentType, setPaymentType] = (0, react_3.useState)(initialPaymentType ?? "crypto");
+    // Fetch balances for EOA wallet
+    const { data: balanceData, isLoading: isBalanceLoading } = (0, react_1.useSimBalance)(shouldShowChainSelection ? eoaAddress : undefined, supportedChains.map(c => c.id));
+    // Group balances by chain and calculate total USD value per chain
+    const chainBalances = (0, react_3.useMemo)(() => {
+        if (!balanceData?.balances)
+            return {};
+        const filteredBalances = balanceData.balances.filter(token => token.address === "native" || (token.pool_size && token.pool_size > minPoolSize));
+        return filteredBalances.reduce((acc, token) => {
+            const chainId = token.chain_id;
+            if (!acc[chainId]) {
+                acc[chainId] = {
+                    chainId,
+                    chainName: token.chain,
+                    totalUsdValue: 0,
+                    tokenCount: 0,
+                };
+            }
+            acc[chainId].totalUsdValue += token.value_usd || 0;
+            acc[chainId].tokenCount += 1;
+            return acc;
+        }, {});
+    }, [balanceData, minPoolSize]);
+    // Sort chains by USD value (highest first)
+    const sortedChains = (0, react_3.useMemo)(() => {
+        return supportedChains
+            .map(chain => ({
+            ...chain,
+            balance: chainBalances[chain.id]?.totalUsdValue || 0,
+            tokenCount: chainBalances[chain.id]?.tokenCount || 0,
+        }))
+            .sort((a, b) => b.balance - a.balance);
+    }, [supportedChains, chainBalances]);
+    // Get top chains with balance
+    const topChainsWithBalance = (0, react_3.useMemo)(() => {
+        return sortedChains.filter(chain => chain.balance > 0).slice(0, topChainsCount);
+    }, [sortedChains, topChainsCount]);
+    // Calculate total balance across all chains
+    const totalBalance = (0, react_3.useMemo)(() => {
+        return Object.values(chainBalances).reduce((sum, chain) => sum + chain.totalUsdValue, 0);
+    }, [chainBalances]);
+    if (!recipientAddress)
+        return null;
+    const tokenSymbol = destinationToken.symbol ?? "TOKEN";
+    // Determine order type based on config
+    const effectiveOrderType = orderType ?? (depositContractConfig ? "custom_exact_in" : "swap");
+    // Default header if not provided
+    const defaultHeader = () => ((0, jsx_runtime_1.jsx)("div", { className: "anyspend-deposit-header mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h1", { className: "anyspend-deposit-title text-as-primary text-xl font-bold", children: paymentType === "crypto" ? `Deposit ${tokenSymbol}` : "Fund with Fiat" }) }) }));
+    const handleSelectChain = (chainId) => {
+        setSelectedChainId(chainId);
+        setPaymentType("crypto");
+        setStep("deposit");
+    };
+    const handleSelectCrypto = () => {
+        setPaymentType("crypto");
+        setSelectedChainId(undefined);
+        setStep("deposit");
+    };
+    const handleSelectFiat = () => {
+        setPaymentType("fiat");
+        setSelectedChainId(undefined);
+        setStep("deposit");
+    };
+    const handleBack = () => {
+        setStep("select-chain");
+        setSelectedChainId(undefined);
+    };
+    const handleSelectQrDeposit = () => {
+        setStep("qr-deposit");
+    };
+    // Chain selection view
+    if (step === "select-chain") {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (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: "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.jsxs)("div", { className: "anyspend-deposit-balance-header border-secondary border-b p-5", children: [!isBalanceLoading && totalBalance > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-balance", children: [(0, jsx_runtime_1.jsx)("p", { className: "anyspend-deposit-balance-label text-as-secondary text-sm", children: "Your Balance" }), (0, jsx_runtime_1.jsxs)("p", { className: "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" })] })] })), isBalanceLoading && ((0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-balance-skeleton", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "mb-2 h-4 w-24" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-8 w-32" })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-options flex flex-col gap-2 p-6", children: [isBalanceLoading && ((0, jsx_runtime_1.jsx)("div", { className: "anyspend-deposit-chains-skeleton flex flex-col gap-2", children: [...Array(topChainsCount)].map((_, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "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: "anyspend-deposit-chains flex flex-col gap-2", children: topChainsWithBalance.map(chain => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleSelectChain(chain.id), className: "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: "anyspend-deposit-chain-content", children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-chain-info", children: [(0, jsx_runtime_1.jsxs)("span", { className: "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: "h-5 w-5" })] }), (0, jsx_runtime_1.jsxs)("p", { className: "anyspend-deposit-chain-balance text-as-secondary text-xs", children: [formatUsd(chain.balance), " available"] })] }) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "anyspend-deposit-chain-chevron text-as-secondary h-5 w-5" })] }, chain.id))) })), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-general-options flex flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectCrypto, className: "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: "anyspend-deposit-option-content", children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-info", children: [(0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-option-title text-as-primary font-medium", children: "Deposit Crypto" }), (0, jsx_runtime_1.jsx)("p", { className: "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: "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-divider flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-stroke h-px flex-1" }), (0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-divider-text text-as-secondary text-sm", children: "More options" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-as-stroke h-px flex-1" })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectQrDeposit, className: "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: "anyspend-deposit-option-content flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(QrCodeIcon_1.QrCodeIcon, { className: "anyspend-deposit-option-icon h-10 w-10" }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-info", children: [(0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-option-title text-as-primary font-medium", children: "Deposit with QR Code" }), (0, jsx_runtime_1.jsx)("p", { className: "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: "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectFiat, className: "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: "anyspend-deposit-option-content flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(CreditCardIcon_1.CreditCardIcon, { className: "anyspend-deposit-option-icon h-10 w-10" }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-info", children: [(0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-option-title text-as-primary font-medium", children: "Fund with Fiat" }), (0, jsx_runtime_1.jsx)("p", { className: "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: "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] })] }), (0, jsx_runtime_1.jsx)(WarningText_1.ChainWarningText, { chainId: destinationChainId, className: "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: destinationChainId, depositContractConfig: depositContractConfig, onBack: handleBack, onClose: onClose ?? handleBack }));
+    }
+    // Check if destination is Hyperliquid
+    const isHyperliquidDeposit = destinationChainId === anyspend_1.HYPERLIQUID_CHAIN_ID;
+    // Deposit view
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit anyspend-deposit-form relative", children: [shouldShowChainSelection && ((0, jsx_runtime_1.jsxs)("button", { onClick: handleBack, className: "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: "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: "anyspend-deposit-back-text text-sm", children: "Back" })] })), onClose && ((0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "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: (0, cn_1.cn)("anyspend-deposit-form-content", shouldShowChainSelection && "pt-8"), children: isHyperliquidDeposit ? ((0, jsx_runtime_1.jsx)(AnySpend_1.AnySpend, { loadOrder: loadOrder, mode: mode, defaultActiveTab: paymentType, recipientAddress: recipientAddress, sourceChainId: selectedChainId, destinationTokenAddress: destinationToken.address, destinationTokenChainId: destinationChainId, onSuccess: txHash => onSuccess?.(txHash ?? ""), onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, hideHeader: true, hideBottomNavigation: true, disableUrlParamManagement: true })) : ((0, jsx_runtime_1.jsx)(AnySpendCustomExactIn_1.AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: selectedChainId, destinationToken: destinationToken, destinationChainId: destinationChainId, orderType: effectiveOrderType, minDestinationAmount: minDestinationAmount, header: header ?? defaultHeader, onSuccess: onSuccess, onOpenCustomModal: onOpenCustomModal, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa, customExactInConfig: depositContractConfig })) }), (0, jsx_runtime_1.jsx)(WarningText_1.ChainWarningText, { chainId: destinationChainId, className: "px-4 pb-4" })] }));
+}

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

@@ -0,0 +1,43 @@
+import { components } from "../../../anyspend/types/api";
+import { DepositContractConfig } from "./AnySpendDeposit";
+export interface QRDepositProps {
+    /** Display mode */
+    mode?: "modal" | "page";
+    /** The recipient address (user's wallet) */
+    recipientAddress: string;
+    /** The source token to deposit (defaults to ETH on Base) */
+    sourceToken?: components["schemas"]["Token"];
+    /** The source chain ID (defaults to Base) */
+    sourceChainId?: number;
+    /** The destination token to receive */
+    destinationToken: components["schemas"]["Token"];
+    /** The destination chain ID */
+    destinationChainId: number;
+    /** Creator address (optional) */
+    creatorAddress?: string;
+    /** Contract config for custom execution after deposit */
+    depositContractConfig?: DepositContractConfig;
+    /** Callback when back button is clicked */
+    onBack?: () => void;
+    /** Callback when close button is clicked */
+    onClose?: () => void;
+    /** Callback when order is created successfully */
+    onOrderCreated?: (orderId: string) => void;
+    /** Callback when deposit is completed */
+    onSuccess?: (txHash?: string) => void;
+}
+/**
+ * A component for displaying QR code deposit functionality.
+ * Creates a deposit_first order on mount and shows a QR code that can be scanned to deposit tokens.
+ * Users can change the source token/chain using the TokenSelector.
+ *
+ * @example
+ * <QRDeposit
+ *   recipientAddress={userAddress}
+ *   destinationToken={usdcArbitrumToken}
+ *   destinationChainId={42161}
+ *   onBack={() => setStep("select-chain")}
+ *   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, }: QRDepositProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QRDeposit = QRDeposit;
+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 relay_kit_ui_1 = require("@relayprotocol/relay-kit-ui");
+const lucide_react_1 = require("lucide-react");
+const qrcode_react_1 = require("qrcode.react");
+const react_2 = require("react");
+const useAnyspendOrderAndTransactions_1 = require("../hooks/useAnyspendOrderAndTransactions");
+const useCreateDepositFirstOrder_1 = require("../hooks/useCreateDepositFirstOrder");
+const ChainTokenIcon_1 = require("./common/ChainTokenIcon");
+const OrderDetails_1 = require("./common/OrderDetails");
+const WarningText_1 = require("./common/WarningText");
+// Default source token: ETH on Base
+const DEFAULT_ETH_ON_BASE = {
+    chainId: 8453,
+    address: "0x0000000000000000000000000000000000000000",
+    symbol: "ETH",
+    name: "Ethereum",
+    decimals: 18,
+    metadata: {
+        logoURI: "https://assets.relay.link/icons/1/light.png",
+    },
+};
+/**
+ * A component for displaying QR code deposit functionality.
+ * Creates a deposit_first order on mount and shows a QR code that can be scanned to deposit tokens.
+ * Users can change the source token/chain using the TokenSelector.
+ *
+ * @example
+ * <QRDeposit
+ *   recipientAddress={userAddress}
+ *   destinationToken={usdcArbitrumToken}
+ *   destinationChainId={42161}
+ *   onBack={() => setStep("select-chain")}
+ *   onSuccess={(txHash) => console.log("Deposit complete:", txHash)}
+ * />
+ */
+function QRDeposit({ mode = "modal", recipientAddress, sourceToken: sourceTokenProp, sourceChainId: sourceChainIdProp, destinationToken, destinationChainId, creatorAddress, depositContractConfig, onBack, onClose, onOrderCreated, onSuccess, }) {
+    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 onSuccessCalled = (0, react_2.useRef)(false);
+    // 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);
+    // Handle token selection from TokenSelector
+    const handleTokenSelect = (newToken) => {
+        const token = {
+            address: newToken.address,
+            chainId: newToken.chainId,
+            decimals: newToken.decimals,
+            metadata: { logoURI: newToken.logoURI },
+            name: newToken.name,
+            symbol: newToken.symbol,
+        };
+        // Reset order state when token changes
+        setOrderId(undefined);
+        setGlobalAddress(undefined);
+        orderCreatedRef.current = false;
+        // Update token and chain
+        setSourceChainId(newToken.chainId);
+        setSourceToken(token);
+    };
+    // Create order hook
+    const { createOrder, isCreatingOrder } = (0, useCreateDepositFirstOrder_1.useCreateDepositFirstOrder)({
+        onSuccess: data => {
+            const newOrderId = data.data.id;
+            const newGlobalAddress = data.data.globalAddress;
+            setOrderId(newOrderId);
+            setGlobalAddress(newGlobalAddress);
+            onOrderCreated?.(newOrderId);
+        },
+        onError: error => {
+            console.error("Failed to create deposit order:", error);
+            react_1.toast.error("Failed to create deposit order: " + error.message);
+        },
+    });
+    // Fetch order status
+    const { orderAndTransactions: oat } = (0, useAnyspendOrderAndTransactions_1.useAnyspendOrderAndTransactions)(orderId);
+    // Create order on mount
+    (0, react_2.useEffect)(() => {
+        if (orderCreatedRef.current)
+            return;
+        orderCreatedRef.current = true;
+        createOrder({
+            recipientAddress,
+            srcChain: sourceChainId,
+            dstChain: destinationChainId,
+            srcToken: sourceToken,
+            dstToken: destinationToken,
+            creatorAddress,
+            contractConfig: depositContractConfig,
+        });
+    }, [
+        recipientAddress,
+        sourceChainId,
+        destinationChainId,
+        sourceToken,
+        destinationToken,
+        creatorAddress,
+        depositContractConfig,
+        createOrder,
+    ]);
+    // Call onSuccess when order is executed
+    (0, react_2.useEffect)(() => {
+        if (oat?.data?.order.status === "executed" && !onSuccessCalled.current) {
+            const txHash = oat?.data?.executeTx?.txHash;
+            onSuccess?.(txHash);
+            onSuccessCalled.current = true;
+        }
+    }, [oat?.data?.order.status, oat?.data?.executeTx?.txHash, onSuccess]);
+    // Reset onSuccess flag when orderId changes
+    (0, react_2.useEffect)(() => {
+        onSuccessCalled.current = false;
+    }, [orderId]);
+    const displayAddress = globalAddress || recipientAddress;
+    const handleCopyAddress = async () => {
+        if (displayAddress) {
+            await navigator.clipboard.writeText(displayAddress);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+    };
+    const handleBack = () => {
+        setCopied(false);
+        onBack?.();
+    };
+    const handleClose = () => {
+        setCopied(false);
+        onClose?.();
+    };
+    // Show order details if order has deposits or is being processed
+    if (oat?.data && oat.data.depositTxs && oat.data.depositTxs.length > 0) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-container anyspend-qr-order-details 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.jsx)("div", { className: "anyspend-qr-order-details-content relative flex flex-col gap-4", children: (0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, onBack: handleBack }) }) }));
+    }
+    // Show loading state while creating order (but not if we already have an orderId)
+    if (isCreatingOrder && !orderId) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-container anyspend-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-qr-loading-content flex flex-col items-center justify-center gap-4 py-12", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "anyspend-qr-loading-spinner text-as-brand h-8 w-8 animate-spin" }), (0, jsx_runtime_1.jsx)("p", { className: "anyspend-qr-loading-text text-as-secondary text-sm", children: "Creating deposit order..." })] }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: (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: "anyspend-qr-deposit-content flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-header flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("button", { onClick: handleBack, className: "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: "anyspend-qr-title text-as-primary text-base font-semibold", children: "Deposit" }), onClose ? ((0, jsx_runtime_1.jsx)("button", { onClick: handleClose, className: "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: "anyspend-qr-token-selector flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)("label", { className: "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: "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: "anyspend-qr-content border-as-stroke flex items-start gap-4 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-code-container flex flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-qr-code rounded-lg bg-white p-2", children: (0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: displayAddress, size: 120, level: "M", marginSize: 0 }) }), (0, jsx_runtime_1.jsxs)("span", { className: "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: "anyspend-qr-address-container flex flex-1 flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "anyspend-qr-address-label text-as-secondary text-sm", children: "Deposit address:" }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-address-row flex items-start gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "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: "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."] }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCopyAddress, className: "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" })] }) }));
+}

package/dist/cjs/anyspend/react/components/common/OrderDetails.js

@@ -37,6 +37,7 @@ function getOrderSuccessText({ order, tournament, formattedActualDstAmount, form
     let actionText = "";
     switch (order.type) {
         case "swap":
+        case "deposit_first":
             actionText = `sent ${formattedActualDstAmount || "--"} ${dstToken.symbol}`;
             return `Successfully ${actionText} to ${recipient}`;
         case "mint_nft":
@@ -158,6 +159,7 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
     const { data: walletClient } = (0, wagmi_1.useWalletClient)();
     const [txHash, setTxHash] = (0, react_5.useState)();
     const [showQRCode, setShowQRCode] = (0, react_5.useState)(false);
+    const [orderDetailsOpen, setOrderDetailsOpen] = (0, react_5.useState)(true);
     const { isLoading: txLoading, isSuccess: txSuccess } = (0, wagmi_1.useWaitForTransactionReceipt)({ hash: txHash });
     const { switchChainAndExecuteWithEOA, switchChainAndExecute, isSwitchingOrExecuting } = (0, react_1.useUnifiedChainSwitchAndExecute)();
     // Track if auto-payment was attempted to avoid re-triggering
@@ -326,7 +328,8 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
     const expectedDstAmount = order.type === "mint_nft" ||
         order.type === "join_tournament" ||
         order.type === "fund_tournament" ||
-        order.type === "custom"
+        order.type === "custom" ||
+        order.type === "deposit_first"
         ? "0"
         : order.payload.expectedDstAmount.toString();
     const formattedExpectedDstAmount = (0, number_1.formatTokenAmount)(BigInt(expectedDstAmount), dstToken.decimals);
@@ -335,7 +338,7 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
         ? (0, number_1.formatTokenAmount)(BigInt(actualDstAmount), dstToken.decimals)
         : undefined;
     if (refundTxs.length > 0) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), (0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "refund-details", className: "order-details-refund-item", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), (0, jsx_runtime_1.jsx)(Accordion_1.AccordionContent, { className: "accordion-content pl-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_4.motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), (0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points, isOpen: orderDetailsOpen, onOpenChange: setOrderDetailsOpen }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "refund-details", className: "order-details-refund-item", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), (0, jsx_runtime_1.jsx)(Accordion_1.AccordionContent, { className: "accordion-content pl-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_4.motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
                                             ? depositTxs.map(dTx => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                     ? `Received payment`
                                                     : `Received ${(0, number_1.formatTokenAmount)(BigInt(dTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTx, isProcessing: false }, dTx.txHash)))
@@ -344,13 +347,13 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
                                             : null] }) })] }) }), order.errorDetails && ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: (0, anyspend_1.getErrorDisplay)(order.errorDetails) }) })), (0, jsx_runtime_1.jsx)("button", { className: "order-close-button order-details-close-btn bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }));
     }
     if (executeTx) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), (0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "execute-details", className: "order-details-execute-item", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), (0, jsx_runtime_1.jsx)(Accordion_1.AccordionContent, { className: "accordion-content pl-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_4.motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), (0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points, isOpen: orderDetailsOpen, onOpenChange: setOrderDetailsOpen }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "execute-details", className: "order-details-execute-item", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), (0, jsx_runtime_1.jsx)(Accordion_1.AccordionContent, { className: "accordion-content pl-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_4.motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
                                             ? depositTxs.map(dTxs => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                     ? `Received payment`
                                                     : `Received ${(0, number_1.formatTokenAmount)(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: false }, dTxs.txHash)))
                                             : null, relayTxs
-                                            ? relayTxs.map(relayTx => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: "Processed Transaction", chainId: relayTx.chain, tx: relayTx, delay: 0.5, isProcessing: false }, relayTx.txHash)))
-                                            : null, (0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.type === "swap"
+                                            ? relayTxs.map(relayTx => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: "Processed Swap", chainId: relayTx.chain, tx: relayTx, delay: 0.5, isProcessing: false }, relayTx.txHash)))
+                                            : null, (0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.type === "swap" || order.type === "deposit_first"
                                                 ? "Processed Swap"
                                                 : order.type === "mint_nft"
                                                     ? "Minted NFT"
@@ -369,12 +372,14 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
                                 }), (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && ((0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4", children: "Continue to Tournament" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && ((0, jsx_runtime_1.jsx)("button", { className: "order-close-button order-details-close-btn bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
     }
     if (relayTxs.length > 0 && relayTxs.every(tx => tx.status === "success")) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), (0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "more-details", className: "order-details-more-item", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { className: "accordion-trigger", children: "More Details" }), (0, jsx_runtime_1.jsx)(Accordion_1.AccordionContent, { className: "accordion-content pl-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_4.motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), (0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points, isOpen: orderDetailsOpen, onOpenChange: setOrderDetailsOpen }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "more-details", className: "order-details-more-item", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { className: "accordion-trigger", children: "More Details" }), (0, jsx_runtime_1.jsx)(Accordion_1.AccordionContent, { className: "accordion-content pl-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_4.motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
                                             ? depositTxs.map(dTxs => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                     ? `Received payment`
                                                     : `Received ${(0, number_1.formatTokenAmount)(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: false }, dTxs.txHash)))
-                                            : null, relayTxs.map(relayTx => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: "Processed Transaction", chainId: relayTx.chain, isProcessing: false, tx: relayTx, delay: 0.5 }))), order.status === "executing" && ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.type === "swap" || order.type === "x402_swap"
-                                                ? "Processing Swap"
+                                            : null, relayTxs.map(relayTx => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: relayTx.chain === order.srcChain
+                                                ? `Process swap on ${(0, anyspend_1.getChainName)(relayTx.chain)}`
+                                                : `Received on ${(0, anyspend_1.getChainName)(relayTx.chain)}`, chainId: relayTx.chain, isProcessing: false, tx: relayTx, delay: 0.5 }, relayTx.txHash))), order.status === "executing" && ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.type === "swap" || order.type === "x402_swap" || order.type === "deposit_first"
+                                                ? "Processing swap"
                                                 : order.type === "mint_nft"
                                                     ? "Minting NFT"
                                                     : order.type === "join_tournament"
@@ -390,10 +395,10 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
     // This boolean indicates that user finish payment, and waiting for the deposit to be confirmed. We get this from query params (waitingForDeposit=true)
     const waitingForDeposit = new URLSearchParams(window.location.search).get("waitingForDeposit") === "true";
     if (depositTxs?.length || waitingForDeposit) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), (0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "deposit-details", className: "order-details-deposit-item", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), (0, jsx_runtime_1.jsx)(Accordion_1.AccordionContent, { className: "accordion-content pl-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_4.motion.div, { className: "from-as-brand/50 absolute left-[2px] top-0 z-10 w-[3px] bg-gradient-to-b from-20% via-purple-500/50 via-80% to-transparent", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1, ease: "easeInOut" } }) }), (depositTxs || []).map((dTxs, index) => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), (0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points, isOpen: orderDetailsOpen, onOpenChange: setOrderDetailsOpen }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "deposit-details", className: "order-details-deposit-item", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), (0, jsx_runtime_1.jsx)(Accordion_1.AccordionContent, { className: "accordion-content pl-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_4.motion.div, { className: "from-as-brand/50 absolute left-[2px] top-0 z-10 w-[3px] bg-gradient-to-b from-20% via-purple-500/50 via-80% to-transparent", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1, ease: "easeInOut" } }) }), (depositTxs || []).map((dTxs, index) => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                 ? `Received payment`
-                                                : `Received ${(0, number_1.formatTokenAmount)(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: index < (depositTxs || []).length - 1 ? false : !depositEnoughAmount }, dTxs.txHash))), statusDisplay === "failure" ? ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: statusText, chainId: order.srcChain, tx: null, isProcessing: false, delay: 0.5 })) : depositEnoughAmount ? ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.type === "swap"
-                                                ? "Processing Swap"
+                                                : `Received ${(0, number_1.formatTokenAmount)(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: index < (depositTxs || []).length - 1 ? false : !depositEnoughAmount }, dTxs.txHash))), statusDisplay === "failure" ? ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: statusText, chainId: order.srcChain, tx: null, isProcessing: false, delay: 0.5 })) : depositEnoughAmount ? ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.type === "swap" || order.type === "deposit_first"
+                                                ? "Processing swap"
                                                 : order.type === "mint_nft"
                                                     ? "Minting NFT"
                                                     : order.type === "join_tournament"
@@ -417,7 +422,7 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
                                                         ? (0, centerTruncate_1.default)(phantomWalletAddress, 6)
                                                         : (0, centerTruncate_1.default)(account?.address || "", 6)] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: colorMode === "dark" ? "#ffffff" : "#000000", className: "flex w-5/6 items-center gap-2 sm:px-0", onClick: () => setShowQRCode(true), children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4 text-lg md:text-sm", children: "Pay from a different wallet" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_3.WalletMetamask, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletPhantom, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletTrust, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletWalletConnect, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)("span", { className: "label-style text-as-primary/30 text-xs", children: "& more" })] })] })] }) })) : (
                         // Default case - existing QR code flow
-                        (0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0, filter: "blur(10px)" }, animate: { opacity: 1, filter: "blur(0px)" }, transition: { duration: 0.5, ease: "easeInOut" }, className: "flex w-full items-center justify-evenly gap-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-details-qr-container mt-8 flex flex-col items-center rounded-lg bg-white p-6 pb-3", children: [(0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: (0, anyspend_1.getPaymentUrl)(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === anyspend_1.ZERO_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "order-details-qr-code max-w-[200px]" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-qr-wallets mt-3 flex items-center justify-center gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "label-style text-as-brand/70 text-sm", children: "Scan with" }), (0, jsx_runtime_1.jsxs)(react_1.TextLoop, { interval: 3, children: [(0, jsx_runtime_1.jsx)(react_3.WalletMetamask, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletPhantom, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletTrust, { className: "h-5 w-5", variant: "branded" })] })] })] }) }))] })) })), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-time-remaining flex w-full items-center justify-center gap-1 text-sm", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30 order-details-time-label", children: "Time remaining:" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary order-details-time-value", children: depositEnoughAmount ? ("Received") : order.status === "expired" ? ("Expired") : ((0, jsx_runtime_1.jsx)(react_timeago_1.default, { date: new Date(order.expiredAt), live: true })) })] }), statusDisplay !== "processing" && ((0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points })), (0, jsx_runtime_1.jsxs)("button", { className: "text-b3-primary-blue hover:text-b3-primary-blue/50 order-details-cancel-btn flex w-full items-center justify-center gap-2 underline", onClick: handleBack, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "ml-2 h-4 w-4" }), " Cancel and start over"] })] }));
+                        (0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0, filter: "blur(10px)" }, animate: { opacity: 1, filter: "blur(0px)" }, transition: { duration: 0.5, ease: "easeInOut" }, className: "flex w-full items-center justify-evenly gap-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-details-qr-container mt-8 flex flex-col items-center rounded-lg bg-white p-6 pb-3", children: [(0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: (0, anyspend_1.getPaymentUrl)(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === anyspend_1.ZERO_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "order-details-qr-code max-w-[200px]" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-qr-wallets mt-3 flex items-center justify-center gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "label-style text-as-brand/70 text-sm", children: "Scan with" }), (0, jsx_runtime_1.jsxs)(react_1.TextLoop, { interval: 3, children: [(0, jsx_runtime_1.jsx)(react_3.WalletMetamask, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletPhantom, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletTrust, { className: "h-5 w-5", variant: "branded" })] })] })] }) }))] })) })), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-time-remaining flex w-full items-center justify-center gap-1 text-sm", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30 order-details-time-label", children: "Time remaining:" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary order-details-time-value", children: depositEnoughAmount ? ("Received") : order.status === "expired" ? ("Expired") : ((0, jsx_runtime_1.jsx)(react_timeago_1.default, { date: new Date(order.expiredAt), live: true })) })] }), statusDisplay !== "processing" && ((0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points, isOpen: orderDetailsOpen, onOpenChange: setOrderDetailsOpen })), (0, jsx_runtime_1.jsxs)("button", { className: "text-b3-primary-blue hover:text-b3-primary-blue/50 order-details-cancel-btn flex w-full items-center justify-center gap-2 underline", onClick: handleBack, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "ml-2 h-4 w-4" }), " Cancel and start over"] })] }));
 });
 function TransactionDetails({ title, chainId, tx, isProcessing, delay, }) {
     return ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-transaction-item relative flex w-full flex-1 items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-details-transaction-content flex grow items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_4.motion.div, { className: "bg-as-surface-secondary relative h-10 w-10 rounded-full", children: isProcessing ? ((0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeInOut", delay }, className: "border-as-border-secondary absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border-2 shadow-lg backdrop-blur-sm", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }) })) : ((0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeOut", delay }, className: "bg-as-success-secondary absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border border-white/30 shadow-lg backdrop-blur-sm", children: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckIcon, { className: "text-as-content-icon-success h-4 w-4" }) })) }), (0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay }, className: "shrink-0 text-base", children: isProcessing ? ((0, jsx_runtime_1.jsx)(react_1.TextShimmer, { duration: 1, children: title })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-as-primary", children: title })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-1", children: tx ? ((0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay: (delay || 0) + 0.3 }, className: "flex items-center gap-3", children: (0, jsx_runtime_1.jsx)("a", { href: (0, anyspend_1.getExplorerTxUrl)(chainId, tx.txHash), target: "_blank", children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30 font-mono text-xs", children: (0, centerTruncate_1.default)(tx?.txHash, 6) }) }) })) : null })] }));

package/dist/cjs/anyspend/react/components/common/OrderDetailsCollapsible.d.ts

@@ -14,6 +14,8 @@ interface OrderDetailsCollapsibleProps {
     showTotal?: boolean;
     totalAmount?: string;
     points?: number;
+    isOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
 }
 export declare const OrderDetailsCollapsible: import("react").NamedExoticComponent<OrderDetailsCollapsibleProps>;
 export {};