@b3dotfun/sdk 0.0.87-alpha.1 → 0.0.87

package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.js

@@ -28,7 +28,7 @@ var PanelView;
     PanelView[PanelView["FEE_DETAIL"] = 7] = "FEE_DETAIL";
 })(PanelView || (exports.PanelView = PanelView = {}));
 // This hook serves for order hype_duel and custom_exact_in
-function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, destinationTokenAddress, destinationTokenChainId, slippage = 0, disableUrlParamManagement = false, orderType = "hype_duel", }) {
+function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder, isDepositMode = false, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, destinationTokenAddress, destinationTokenChainId, slippage = 0, disableUrlParamManagement = false, orderType = "hype_duel", }) {
     const searchParams = (0, react_2.useSearchParamsSSR)();
     const router = (0, react_2.useRouter)();
     // Panel and order state
@@ -135,40 +135,16 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
     // For fiat payments, always use USDC decimals (6) regardless of selectedSrcToken
     const effectiveDecimals = paymentType === "fiat" ? anyspend_1.USDC_BASE.decimals : selectedSrcToken.decimals;
     const activeInputAmountInWei = (0, viem_1.parseUnits)(srcAmount.replace(/,/g, ""), effectiveDecimals).toString();
-    // Build quote request based on order type
-    const quoteRequest = (() => {
-        const baseParams = {
-            srcChain: paymentType === "fiat" ? chains_1.base.id : selectedSrcChainId,
-            dstChain: selectedDstChainId ?? chains_1.base.id,
-            srcTokenAddress: paymentType === "fiat" ? anyspend_1.USDC_BASE.address : selectedSrcToken.address,
-            dstTokenAddress: selectedDstToken.address,
-            recipientAddress: effectiveRecipientAddress,
-            onrampVendor: paymentType === "fiat" ? getOnrampVendor(selectedFiatPaymentMethod) : undefined,
-        };
-        if (orderType === "swap") {
-            return {
-                ...baseParams,
-                type: "swap",
-                tradeType: "EXACT_INPUT",
-                amount: activeInputAmountInWei,
-            };
-        }
-        else if (orderType === "hype_duel") {
-            return {
-                ...baseParams,
-                type: "hype_duel",
-                amount: activeInputAmountInWei,
-            };
-        }
-        else {
-            return {
-                ...baseParams,
-                type: "custom_exact_in",
-                amount: activeInputAmountInWei,
-            };
-        }
-    })();
-    const { anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError } = (0, react_1.useAnyspendQuote)(quoteRequest);
+    const { anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError } = (0, react_1.useAnyspendQuote)({
+        srcChain: paymentType === "fiat" ? chains_1.base.id : selectedSrcChainId,
+        dstChain: isDepositMode ? chains_1.base.id : selectedDstChainId, // For deposits, always Base; for swaps, use selected destination
+        srcTokenAddress: paymentType === "fiat" ? anyspend_1.USDC_BASE.address : selectedSrcToken.address,
+        dstTokenAddress: selectedDstToken.address,
+        type: orderType,
+        amount: activeInputAmountInWei,
+        recipientAddress: effectiveRecipientAddress,
+        onrampVendor: paymentType === "fiat" ? getOnrampVendor(selectedFiatPaymentMethod) : undefined,
+    });
     // Get geo options for fiat
     const { geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support } = (0, react_1.useGeoOnrampOptions)(paymentType === "fiat" ? (0, number_1.formatUnits)(activeInputAmountInWei, anyspend_1.USDC_BASE.decimals) : "0");
     // Update destination amount when quote changes

package/dist/cjs/anyspend/utils/format.js

@@ -1,25 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getErrorDisplay = exports.getStatusDisplay = void 0;
-const number_1 = require("../../shared/utils/number");
 const getStatusDisplay = (order) => {
-    const srcToken = order.metadata?.srcToken;
-    const dstToken = order.metadata?.dstToken;
-    const formattedSrcAmount = srcToken ? (0, number_1.formatTokenAmount)(BigInt(order.srcAmount), srcToken.decimals) : undefined;
-    const actualDstAmount = order.settlement?.actualDstAmount;
-    const formattedActualDstAmount = actualDstAmount && dstToken ? (0, number_1.formatTokenAmount)(BigInt(actualDstAmount), dstToken.decimals) : undefined;
     switch (order.status) {
-        case "scanning_deposit_transaction": {
-            const depositText = formattedSrcAmount && srcToken
-                ? `Awaiting ${formattedSrcAmount} ${srcToken.symbol}`
-                : order.onrampMetadata
-                    ? "Awaiting Payment"
-                    : "Awaiting Deposit";
+        case "scanning_deposit_transaction":
             return {
-                text: depositText,
+                text: order.onrampMetadata ? "Awaiting Payment" : "Awaiting Deposit",
                 status: "processing",
             };
-        }
         case "waiting_stripe_payment":
             return {
                 text: "Awaiting Payment",
@@ -42,16 +30,15 @@ const getStatusDisplay = (order) => {
                 description: "It will take approximately one minute to complete.",
             };
         case "executed": {
-            const receivedText = formattedActualDstAmount && dstToken ? `Received ${formattedActualDstAmount} ${dstToken.symbol}` : undefined;
             const { text, description } = order.type === "swap"
-                ? { text: receivedText || "Swap Complete", description: "Your swap has been completed successfully." }
+                ? { text: "Swap Complete", description: "Your swap has been completed successfully." }
                 : order.type === "mint_nft"
                     ? { text: "NFT Minted", description: "Your NFT has been minted" }
                     : order.type === "join_tournament"
                         ? { text: "Tournament Joined", description: "You have joined the tournament" }
                         : order.type === "fund_tournament"
                             ? { text: "Tournament Funded", description: "You have funded the tournament" }
-                            : { text: receivedText || "Order Complete", description: "Your order has been completed" };
+                            : { text: "Order Complete", description: "Your order has been completed" };
             return { text, status: "success", description };
         }
         case "refunding":
@@ -64,18 +51,8 @@ const getStatusDisplay = (order) => {
                 status: "failure",
                 description: "This order has failed. Please try again or contact support.",
             };
-        case "quoting_after_deposit": {
-            return {
-                text: "Quoting After Deposit",
-                status: "processing",
-                description: "Getting quote for the order",
-            };
-        }
         default:
-            return {
-                text: order.status,
-                status: "processing",
-            };
+            throw new Error("Invalid order status");
     }
 };
 exports.getStatusDisplay = getStatusDisplay;

package/dist/cjs/global-account/react/stores/useModalStore.d.ts

@@ -144,10 +144,6 @@ export interface AnySpendModalProps extends BaseModalProps {
     customUsdInputValues?: string[];
     /** Client-provided reference ID for tracking orders */
     clientReferenceId?: string;
-    /** Whether to hide the header */
-    hideHeader?: boolean;
-    /** When true, disables URL parameter management for swap configuration */
-    disableUrlParamManagement?: boolean;
 }
 /**
  * Props for the AnySpend NFT modal

package/dist/esm/anyspend/react/components/AnySpend.d.ts

@@ -20,7 +20,6 @@ export declare enum PanelView {
 export declare function AnySpend(props: {
     mode?: "page" | "modal";
     defaultActiveTab?: "crypto" | "fiat";
-    sourceChainId?: number;
     destinationTokenAddress?: string;
     destinationTokenChainId?: number;
     recipientAddress?: string;
@@ -35,8 +34,4 @@ export declare function AnySpend(props: {
     }) => void;
     onSuccess?: (txHash?: string) => void;
     customUsdInputValues?: string[];
-    hideHeader?: boolean;
-    hideBottomNavigation?: boolean;
-    /** When true, disables URL parameter management for swap configuration */
-    disableUrlParamManagement?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/anyspend/react/components/AnySpend.js

@@ -50,7 +50,7 @@ export function AnySpend(props) {
     const fingerprintConfig = getFingerprintConfig();
     return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendInner, { ...props }) }));
 }
-function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, hideHeader, hideBottomNavigation = false, disableUrlParamManagement = false, }) {
+function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, }) {
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
     const { partnerId } = useB3();
@@ -90,7 +90,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     // const [newRecipientAddress, setNewRecipientAddress] = useState("");
     // const recipientInputRef = useRef<HTMLInputElement>(null);
     // Get initial chain IDs from URL or defaults
-    const initialSrcChainId = sourceChainId || parseInt(searchParams.get("fromChainId") || "0") || mainnet.id;
+    const initialSrcChainId = parseInt(searchParams.get("fromChainId") || "0") || mainnet.id;
     const initialDstChainId = parseInt(searchParams.get("toChainId") || "0") || (isBuyMode ? destinationTokenChainId : base.id);
     // State for source chain/token selection
     const [selectedSrcChainId, setSelectedSrcChainId] = useState(initialSrcChainId);
@@ -183,8 +183,8 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     }, [selectedDstToken.address, selectedDstToken.chainId]);
     // Load swap configuration from URL on initial render
     useEffect(() => {
-        // Skip if we've already processed the URL, if we have an order to load, or if URL param management is disabled
-        if (initialUrlProcessed.current || loadOrder || disableUrlParamManagement)
+        // Skip if we've already processed the URL or if we have an order to load
+        if (initialUrlProcessed.current || loadOrder)
             return;
         try {
             const tabParam = searchParams.get("tab");
@@ -217,7 +217,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
         }
         // Mark that we've processed the initial URL
         initialUrlProcessed.current = true;
-    }, [searchParams, loadOrder, disableUrlParamManagement]);
+    }, [searchParams, loadOrder]);
     // Update URL when swap configuration changes - but not on initial load
     const updateSwapParamsInURL = useCallback(() => {
         // Skip if:
@@ -228,8 +228,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
             activePanel !== PanelView.MAIN ||
             !initialUrlProcessed.current ||
             searchParams.has("orderId") ||
-            mode === "modal" ||
-            disableUrlParamManagement)
+            mode === "modal")
             return;
         // Create a representation of the current state
         const currentState = {
@@ -289,7 +288,6 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
         dstAmount,
         router,
         srcAmountOnRamp,
-        disableUrlParamManagement,
     ]);
     // Update URL when relevant state changes - but only after initial render
     useEffect(() => {
@@ -475,20 +473,20 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
             setOrderId(orderId);
             // setNewRecipientAddress("");
             navigateToPanel(PanelView.ORDER_DETAILS, "forward");
-            if (!disableUrlParamManagement) {
-                // Debug: Check payment method before setting URL
-                console.log("Creating order - selectedCryptoPaymentMethod:", selectedCryptoPaymentMethod);
-                // Add orderId and payment method to URL for persistence
-                const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
-                params.set("orderId", orderId);
-                if (effectiveCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
-                    params.set("cryptoPaymentMethod", effectiveCryptoPaymentMethod);
-                }
-                else {
-                    console.log("Payment method is NONE, not setting in URL");
-                }
-                router.push(`${window.location.pathname}?${params.toString()}`);
+            // Debug: Check payment method before setting URL
+            console.log("Creating order - selectedCryptoPaymentMethod:", selectedCryptoPaymentMethod);
+            // Add orderId and payment method to URL for persistence
+            const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
+            params.set("orderId", orderId);
+            if (effectiveCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
+                console.log("Setting cryptoPaymentMethod in URL:", effectiveCryptoPaymentMethod);
+                params.set("cryptoPaymentMethod", effectiveCryptoPaymentMethod);
+            }
+            else {
+                console.log("Payment method is NONE, not setting in URL");
             }
+            console.log("Final URL params:", params.toString());
+            router.push(`${window.location.pathname}?${params.toString()}`);
         },
         onError: error => {
             console.error(error);
@@ -501,13 +499,11 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
             const orderId = data.data.id;
             setOrderId(orderId);
             navigateToPanel(PanelView.ORDER_DETAILS, "forward");
-            if (!disableUrlParamManagement) {
-                // Add orderId and payment method to URL for persistence
-                const params = new URLSearchParams(searchParams.toString());
-                params.set("orderId", orderId);
-                params.set("paymentMethod", "fiat");
-                router.push(`${window.location.pathname}?${params.toString()}`);
-            }
+            // Add orderId and payment method to URL for persistence
+            const params = new URLSearchParams(searchParams.toString());
+            params.set("orderId", orderId);
+            params.set("paymentMethod", "fiat");
+            router.push(`${window.location.pathname}?${params.toString()}`);
         },
         onError: error => {
             console.error(error);
@@ -635,13 +631,11 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
             type: "anySpendOrderHistory",
             showBackButton: false,
         });
-        if (!disableUrlParamManagement) {
-            // Remove orderId and paymentMethod from URL when going back to history
-            const params = new URLSearchParams(searchParams.toString());
-            params.delete("orderId");
-            params.delete("paymentMethod");
-            router.push(`${window.location.pathname}?${params.toString()}`);
-        }
+        // Remove orderId and paymentMethod from URL when going back to history
+        const params = new URLSearchParams(searchParams.toString());
+        params.delete("orderId");
+        params.delete("paymentMethod");
+        router.push(`${window.location.pathname}?${params.toString()}`);
     };
     // Handle crypto swap creation
     const handleCryptoSwap = async (method) => {
@@ -750,24 +744,22 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     // const setDynamicModalContentType = useModalStore(state => state.setB3ModalContentType);
     // Update useEffect for URL parameter to not override loadOrder
     useEffect(() => {
-        if (loadOrder || disableUrlParamManagement)
-            return; // Skip if we have a loadOrder or URL param management is disabled
+        if (loadOrder)
+            return; // Skip if we have a loadOrder
         const orderIdParam = searchParams.get("orderId");
         if (orderIdParam) {
             setOrderId(orderIdParam);
             setActivePanel(PanelView.ORDER_DETAILS);
         }
-    }, [searchParams, loadOrder, disableUrlParamManagement]);
+    }, [searchParams, loadOrder]);
     const onSelectOrder = (selectedOrderId) => {
         setOrderId(selectedOrderId);
         navigateToPanel(PanelView.ORDER_DETAILS, "forward");
-        if (!disableUrlParamManagement) {
-            // Update URL with the new orderId and preserve existing parameters
-            const params = new URLSearchParams(searchParams.toString());
-            params.set("orderId", selectedOrderId);
-            // Keep existing paymentMethod if present
-            router.push(`${window.location.pathname}?${params.toString()}`);
-        }
+        // Update URL with the new orderId and preserve existing parameters
+        const params = new URLSearchParams(searchParams.toString());
+        params.set("orderId", selectedOrderId);
+        // Keep existing paymentMethod if present
+        router.push(`${window.location.pathname}?${params.toString()}`);
     };
     // Save custom recipients to local storage when they change
     useEffect(() => {
@@ -819,7 +811,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                     // Reset payment methods when going back
                     resetPaymentMethods();
                 } })) }) }));
-    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2 pt-5", children: [_jsxs("div", { className: "flex w-full max-w-full flex-col items-center gap-2 px-5", children: [isBuyMode && !hideHeader && (_jsxs("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: tab => {
+    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2 pt-5", children: [_jsxs("div", { className: "flex w-full max-w-full flex-col items-center gap-2 px-5", children: [isBuyMode && (_jsxs("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: tab => {
                             setActiveTab(tab);
                             // Reset payment methods when switching tabs
                             resetPaymentMethods();
@@ -874,23 +866,21 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                                 type: "anySpend",
                             });
                         }
-                    }, children: mode !== "page" && !hideBottomNavigation && _jsx(BottomNavigation, {}) }) })] }));
+                    }, children: mode !== "page" && _jsx(BottomNavigation, {}) }) })] }));
     const onrampPaymentView = (_jsx(PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName || undefined, recipientAddress: effectiveRecipientAddress, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
             setOrderId(orderId);
             navigateToPanel(PanelView.ORDER_DETAILS, "forward");
-            if (!disableUrlParamManagement) {
-                // Add orderId and payment method to URL for persistence
-                const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
-                params.set("orderId", orderId);
-                // For fiat payments, the payment method is always fiat (but we use the active tab context)
-                if (activeTab === "fiat") {
-                    params.set("paymentMethod", "fiat");
-                }
-                else if (selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
-                    params.set("paymentMethod", selectedCryptoPaymentMethod);
-                }
-                router.push(`${window.location.pathname}?${params.toString()}`);
+            // Add orderId and payment method to URL for persistence
+            const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
+            params.set("orderId", orderId);
+            // For fiat payments, the payment method is always fiat (but we use the active tab context)
+            if (activeTab === "fiat") {
+                params.set("paymentMethod", "fiat");
+            }
+            else if (selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
+                params.set("paymentMethod", selectedCryptoPaymentMethod);
             }
+            router.push(`${window.location.pathname}?${params.toString()}`);
         }, onBack: navigateBack, recipientEnsName: globalWallet?.ensName, recipientImageUrl: globalWalletImage }));
     const recipientSelectionView = (_jsx(RecipientSelection, { initialValue: effectiveRecipientAddress || "", onBack: navigateBack, onConfirm: address => {
             // User manually selected a recipient

package/dist/esm/anyspend/react/components/AnySpendCustomExactIn.d.ts

@@ -26,7 +26,7 @@ export interface AnySpendCustomExactInProps {
     customUsdInputValues?: string[];
     preferEoa?: boolean;
     customExactInConfig?: CustomExactInConfig;
-    orderType?: "hype_duel" | "custom_exact_in" | "swap";
+    orderType?: "hype_duel" | "custom_exact_in";
     minDestinationAmount?: number;
     header?: ({ anyspendPrice, isLoadingAnyspendPrice, }: {
         anyspendPrice: GetQuoteResponse | undefined;

package/dist/esm/anyspend/react/components/AnySpendCustomExactIn.js

@@ -35,6 +35,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         paymentType,
         recipientAddress,
         loadOrder,
+        isDepositMode: true,
         onTransactionSuccess: onSuccess,
         sourceTokenAddress,
         sourceTokenChainId,
@@ -175,7 +176,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         }
     };
     const headerContent = header ? (header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote })) : (_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsxs("div", { children: [_jsx("h1", { className: "text-as-primary text-xl font-bold", children: actionLabel }), _jsx("p", { className: "text-as-secondary text-sm", children: "Pay from any token to execute a custom exact-in transaction." })] }) }));
-    const mainView = (_jsxs("div", { className: "anyspend-custom-exact-in-container mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: cn("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, effectiveRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
+    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: cn("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, effectiveRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
                                 setIsSrcInputDirty(false);
                                 setSrcAmount(value);
                             }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL) }))] }) }), _jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && _jsx(Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }) }), mainFooter ? mainFooter : null] }));

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

@@ -31,7 +31,6 @@ 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":
@@ -153,7 +152,6 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
     const { data: walletClient } = useWalletClient();
     const [txHash, setTxHash] = useState();
     const [showQRCode, setShowQRCode] = useState(false);
-    const [orderDetailsOpen, setOrderDetailsOpen] = useState(true);
     const { isLoading: txLoading, isSuccess: txSuccess } = useWaitForTransactionReceipt({ hash: txHash });
     const { switchChainAndExecuteWithEOA, switchChainAndExecute, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
     // Track if auto-payment was attempted to avoid re-triggering
@@ -322,8 +320,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
     const expectedDstAmount = order.type === "mint_nft" ||
         order.type === "join_tournament" ||
         order.type === "fund_tournament" ||
-        order.type === "custom" ||
-        order.type === "deposit_first"
+        order.type === "custom"
         ? "0"
         : order.payload.expectedDstAmount.toString();
     const formattedExpectedDstAmount = formatTokenAmount(BigInt(expectedDstAmount), dstToken.decimals);
@@ -332,7 +329,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
         ? formatTokenAmount(BigInt(actualDstAmount), dstToken.decimals)
         : undefined;
     if (refundTxs.length > 0) {
-        return (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points, isOpen: orderDetailsOpen, onOpenChange: setOrderDetailsOpen }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "refund-details", className: "order-details-refund-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), _jsx(AccordionContent, { className: "accordion-content pl-2", children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(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 (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "refund-details", className: "order-details-refund-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), _jsx(AccordionContent, { className: "accordion-content pl-2", children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(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 => (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                     ? `Received payment`
                                                     : `Received ${formatTokenAmount(BigInt(dTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTx, isProcessing: false }, dTx.txHash)))
@@ -341,13 +338,13 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
                                             : null] }) })] }) }), order.errorDetails && (_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: getErrorDisplay(order.errorDetails) }) })), _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" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }));
     }
     if (executeTx) {
-        return (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points, isOpen: orderDetailsOpen, onOpenChange: setOrderDetailsOpen }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "execute-details", className: "order-details-execute-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), _jsx(AccordionContent, { className: "accordion-content pl-2", children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(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 (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "execute-details", className: "order-details-execute-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), _jsx(AccordionContent, { className: "accordion-content pl-2", children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(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 => (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                     ? `Received payment`
                                                     : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: false }, dTxs.txHash)))
                                             : null, relayTxs
-                                            ? relayTxs.map(relayTx => (_jsx(TransactionDetails, { title: "Processed Swap", chainId: relayTx.chain, tx: relayTx, delay: 0.5, isProcessing: false }, relayTx.txHash)))
-                                            : null, _jsx(TransactionDetails, { title: order.type === "swap" || order.type === "deposit_first"
+                                            ? relayTxs.map(relayTx => (_jsx(TransactionDetails, { title: "Processed Transaction", chainId: relayTx.chain, tx: relayTx, delay: 0.5, isProcessing: false }, relayTx.txHash)))
+                                            : null, _jsx(TransactionDetails, { title: order.type === "swap"
                                                 ? "Processed Swap"
                                                 : order.type === "mint_nft"
                                                     ? "Minted NFT"
@@ -366,14 +363,12 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
                                 }), _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && (_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" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
     }
     if (relayTxs.length > 0 && relayTxs.every(tx => tx.status === "success")) {
-        return (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points, isOpen: orderDetailsOpen, onOpenChange: setOrderDetailsOpen }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "more-details", className: "order-details-more-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "More Details" }), _jsx(AccordionContent, { className: "accordion-content pl-2", children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(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 (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "more-details", className: "order-details-more-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "More Details" }), _jsx(AccordionContent, { className: "accordion-content pl-2", children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(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 => (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                     ? `Received payment`
                                                     : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: false }, dTxs.txHash)))
-                                            : null, relayTxs.map(relayTx => (_jsx(TransactionDetails, { title: relayTx.chain === order.srcChain
-                                                ? `Process swap on ${getChainName(relayTx.chain)}`
-                                                : `Received on ${getChainName(relayTx.chain)}`, chainId: relayTx.chain, isProcessing: false, tx: relayTx, delay: 0.5 }, relayTx.txHash))), order.status === "executing" && (_jsx(TransactionDetails, { title: order.type === "swap" || order.type === "x402_swap" || order.type === "deposit_first"
-                                                ? "Processing swap"
+                                            : null, relayTxs.map(relayTx => (_jsx(TransactionDetails, { title: "Processed Transaction", chainId: relayTx.chain, isProcessing: false, tx: relayTx, delay: 0.5 }))), order.status === "executing" && (_jsx(TransactionDetails, { title: order.type === "swap" || order.type === "x402_swap"
+                                                ? "Processing Swap"
                                                 : order.type === "mint_nft"
                                                     ? "Minting NFT"
                                                     : order.type === "join_tournament"
@@ -389,10 +384,10 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
     // 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 (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points, isOpen: orderDetailsOpen, onOpenChange: setOrderDetailsOpen }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "deposit-details", className: "order-details-deposit-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), _jsx(AccordionContent, { className: "accordion-content pl-2", children: _jsxs("div", { className: "relative flex w-full flex-col gap-6", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(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) => (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
+        return (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "deposit-details", className: "order-details-deposit-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), _jsx(AccordionContent, { className: "accordion-content pl-2", children: _jsxs("div", { className: "relative flex w-full flex-col gap-6", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(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) => (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                 ? `Received payment`
-                                                : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: index < (depositTxs || []).length - 1 ? false : !depositEnoughAmount }, dTxs.txHash))), statusDisplay === "failure" ? (_jsx(TransactionDetails, { title: statusText, chainId: order.srcChain, tx: null, isProcessing: false, delay: 0.5 })) : depositEnoughAmount ? (_jsx(TransactionDetails, { title: order.type === "swap" || order.type === "deposit_first"
-                                                ? "Processing swap"
+                                                : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: index < (depositTxs || []).length - 1 ? false : !depositEnoughAmount }, dTxs.txHash))), statusDisplay === "failure" ? (_jsx(TransactionDetails, { title: statusText, chainId: order.srcChain, tx: null, isProcessing: false, delay: 0.5 })) : depositEnoughAmount ? (_jsx(TransactionDetails, { title: order.type === "swap"
+                                                ? "Processing Swap"
                                                 : order.type === "mint_nft"
                                                     ? "Minting NFT"
                                                     : order.type === "join_tournament"
@@ -416,7 +411,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
                                                         ? centerTruncate(phantomWalletAddress, 6)
                                                         : centerTruncate(account?.address || "", 6)] })] }), _jsxs("div", { className: "flex w-full flex-col items-center gap-2", children: [_jsxs(ShinyButton, { accentColor: colorMode === "dark" ? "#ffffff" : "#000000", className: "flex w-5/6 items-center gap-2 sm:px-0", onClick: () => setShowQRCode(true), children: [_jsx("span", { className: "pl-4 text-lg md:text-sm", children: "Pay from a different wallet" }), _jsx(ChevronRight, { className: "h-4 w-4" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(WalletMetamask, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletPhantom, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletTrust, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletWalletConnect, { className: "h-5 w-5", variant: "branded" }), _jsx("span", { className: "label-style text-as-primary/30 text-xs", children: "& more" })] })] })] }) })) : (
                         // Default case - existing QR code flow
-                        _jsx(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: _jsxs("div", { className: "order-details-qr-container mt-8 flex flex-col items-center rounded-lg bg-white p-6 pb-3", children: [_jsx(QRCodeSVG, { value: getPaymentUrl(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === ZERO_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "order-details-qr-code max-w-[200px]" }), _jsxs("div", { className: "order-details-qr-wallets mt-3 flex items-center justify-center gap-2 text-sm", children: [_jsx("span", { className: "label-style text-as-brand/70 text-sm", children: "Scan with" }), _jsxs(TextLoop, { interval: 3, children: [_jsx(WalletMetamask, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletPhantom, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletTrust, { className: "h-5 w-5", variant: "branded" })] })] })] }) }))] })) })), _jsxs("div", { className: "order-details-time-remaining flex w-full items-center justify-center gap-1 text-sm", children: [_jsx("div", { className: "text-as-primary/30 order-details-time-label", children: "Time remaining:" }), _jsx("div", { className: "text-as-primary order-details-time-value", children: depositEnoughAmount ? ("Received") : order.status === "expired" ? ("Expired") : (_jsx(TimeAgo, { date: new Date(order.expiredAt), live: true })) })] }), statusDisplay !== "processing" && (_jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points, isOpen: orderDetailsOpen, onOpenChange: setOrderDetailsOpen })), _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: [_jsx(RefreshCcw, { className: "ml-2 h-4 w-4" }), " Cancel and start over"] })] }));
+                        _jsx(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: _jsxs("div", { className: "order-details-qr-container mt-8 flex flex-col items-center rounded-lg bg-white p-6 pb-3", children: [_jsx(QRCodeSVG, { value: getPaymentUrl(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === ZERO_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "order-details-qr-code max-w-[200px]" }), _jsxs("div", { className: "order-details-qr-wallets mt-3 flex items-center justify-center gap-2 text-sm", children: [_jsx("span", { className: "label-style text-as-brand/70 text-sm", children: "Scan with" }), _jsxs(TextLoop, { interval: 3, children: [_jsx(WalletMetamask, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletPhantom, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletTrust, { className: "h-5 w-5", variant: "branded" })] })] })] }) }))] })) })), _jsxs("div", { className: "order-details-time-remaining flex w-full items-center justify-center gap-1 text-sm", children: [_jsx("div", { className: "text-as-primary/30 order-details-time-label", children: "Time remaining:" }), _jsx("div", { className: "text-as-primary order-details-time-value", children: depositEnoughAmount ? ("Received") : order.status === "expired" ? ("Expired") : (_jsx(TimeAgo, { date: new Date(order.expiredAt), live: true })) })] }), statusDisplay !== "processing" && (_jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points })), _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: [_jsx(RefreshCcw, { className: "ml-2 h-4 w-4" }), " Cancel and start over"] })] }));
 });
 function TransactionDetails({ title, chainId, tx, isProcessing, delay, }) {
     return (_jsxs("div", { className: "order-details-transaction-item relative flex w-full flex-1 items-center justify-between gap-4", children: [_jsxs("div", { className: "order-details-transaction-content flex grow items-center gap-4", children: [_jsx(motion.div, { className: "bg-as-surface-secondary relative h-10 w-10 rounded-full", children: isProcessing ? (_jsx(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: _jsx(Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }) })) : (_jsx(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: _jsx(CheckIcon, { className: "text-as-content-icon-success h-4 w-4" }) })) }), _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay }, className: "shrink-0 text-base", children: isProcessing ? (_jsx(TextShimmer, { duration: 1, children: title })) : (_jsx("span", { className: "text-as-primary", children: title })) })] }), _jsx("div", { className: "flex flex-col gap-1", children: tx ? (_jsx(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: _jsx("a", { href: getExplorerTxUrl(chainId, tx.txHash), target: "_blank", children: _jsx("div", { className: "text-as-primary/30 font-mono text-xs", children: centerTruncate(tx?.txHash, 6) }) }) })) : null })] }));

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

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