@b3dotfun/sdk 0.0.43 → 0.0.44-alpha.1

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

@@ -59,11 +59,27 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     const lastUrlUpdate = (0, react_4.useRef)(null);
     // Track if onSuccess has been called for the current order
     const onSuccessCalled = (0, react_4.useRef)(false);
+    // Track animation direction for TransitionPanel
+    const animationDirection = (0, react_4.useRef)(null);
+    // Track previous panel for proper back navigation
+    const previousPanel = (0, react_4.useRef)(PanelView.MAIN);
     const [activeTab, setActiveTab] = (0, react_4.useState)(defaultActiveTab);
     const [orderId, setOrderId] = (0, react_4.useState)(loadOrder);
     const { orderAndTransactions: oat, getOrderAndTransactionsError } = (0, react_1.useAnyspendOrderAndTransactions)(orderId);
     !!getOrderAndTransactionsError && console.log("getOrderAndTransactionsError", getOrderAndTransactionsError);
     const [activePanel, setActivePanel] = (0, react_4.useState)(loadOrder ? PanelView.ORDER_DETAILS : PanelView.MAIN);
+    // Helper functions to navigate with animation direction
+    const navigateToPanel = (0, react_4.useCallback)((panel, direction = "forward") => {
+        previousPanel.current = activePanel;
+        animationDirection.current = direction;
+        setActivePanel(panel);
+    }, [activePanel]);
+    const navigateBack = (0, react_4.useCallback)(() => {
+        animationDirection.current = "back";
+        // Navigate back to previous panel or default to MAIN
+        const targetPanel = previousPanel.current !== activePanel ? previousPanel.current : PanelView.MAIN;
+        setActivePanel(targetPanel);
+    }, [activePanel]);
     const [customRecipients, setCustomRecipients] = (0, react_4.useState)([]);
     // Add state for selected payment method
     const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = (0, react_4.useState)(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE);
@@ -412,7 +428,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             const orderId = data.data.id;
             setOrderId(orderId);
             // setNewRecipientAddress("");
-            setActivePanel(PanelView.ORDER_DETAILS);
+            navigateToPanel(PanelView.ORDER_DETAILS, "forward");
             // Debug: Check payment method before setting URL
             console.log("Creating order - selectedCryptoPaymentMethod:", selectedCryptoPaymentMethod);
             // Add orderId and payment method to URL for persistence
@@ -438,7 +454,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         onSuccess: data => {
             const orderId = data.data.id;
             setOrderId(orderId);
-            setActivePanel(PanelView.ORDER_DETAILS);
+            navigateToPanel(PanelView.ORDER_DETAILS, "forward");
             // Add orderId and payment method to URL for persistence
             const params = new URLSearchParams(searchParams.toString());
             params.set("orderId", orderId);
@@ -501,7 +517,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         if (btnInfo.disable)
             return;
         if (!recipientAddress) {
-            setActivePanel(PanelView.RECIPIENT_SELECTION);
+            navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward");
             return;
         }
         try {
@@ -510,7 +526,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             if (activeTab === "fiat") {
                 // If no fiat payment method selected, show payment method selection
                 if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.NONE) {
-                    setActivePanel(PanelView.FIAT_PAYMENT_METHOD);
+                    navigateToPanel(PanelView.FIAT_PAYMENT_METHOD, "forward");
                     return;
                 }
                 // If payment method is selected, create order directly
@@ -521,7 +537,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                 // If no payment method selected, show payment method selection
                 if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
                     console.log("No payment method selected, showing selection panel");
-                    setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD);
+                    navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward");
                     return;
                 }
                 // If payment method is selected, create order with payment method info
@@ -541,7 +557,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     };
     const onClickHistory = () => {
         setOrderId(undefined);
-        setActivePanel(PanelView.HISTORY);
+        navigateToPanel(PanelView.HISTORY, "forward");
         // Remove orderId and paymentMethod from URL when going back to history
         const params = new URLSearchParams(searchParams.toString());
         params.delete("orderId");
@@ -654,8 +670,8 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         }
     }, [searchParams, loadOrder]);
     const onSelectOrder = (selectedOrderId) => {
-        setActivePanel(PanelView.MAIN);
         setOrderId(selectedOrderId);
+        navigateToPanel(PanelView.ORDER_DETAILS, "forward");
         // Update URL with the new orderId and preserve existing parameters
         const params = new URLSearchParams(searchParams.toString());
         params.set("orderId", selectedOrderId);
@@ -675,13 +691,49 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     (0, react_4.useEffect)(() => {
         window.scrollTo({ top: 0, behavior: "smooth" });
     }, [activePanel]);
-    const historyView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: () => setActivePanel(PanelView.MAIN), onSelectOrder: onSelectOrder }) }));
+    // Handle browser back button for recipient selection and payment method views
+    (0, react_4.useEffect)(() => {
+        // Push a new history state when navigating to specific panels
+        if (activePanel === PanelView.RECIPIENT_SELECTION) {
+            window.history.pushState({ panel: "recipient-selection" }, "");
+        }
+        else if (activePanel === PanelView.CRYPTO_PAYMENT_METHOD) {
+            window.history.pushState({ panel: "crypto-payment-method" }, "");
+        }
+        else if (activePanel === PanelView.FIAT_PAYMENT_METHOD) {
+            window.history.pushState({ panel: "fiat-payment-method" }, "");
+        }
+        // Listen for popstate event (browser back button)
+        const handlePopState = (event) => {
+            if (activePanel === PanelView.RECIPIENT_SELECTION ||
+                activePanel === PanelView.CRYPTO_PAYMENT_METHOD ||
+                activePanel === PanelView.FIAT_PAYMENT_METHOD) {
+                // User pressed back while on these panels
+                event.preventDefault();
+                navigateBack();
+            }
+        };
+        window.addEventListener("popstate", handlePopState);
+        return () => {
+            window.removeEventListener("popstate", handlePopState);
+        };
+    }, [activePanel, navigateBack]);
+    const historyView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: navigateBack, onSelectOrder: onSelectOrder }) }));
     const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((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, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
                     setOrderId(undefined);
-                    setActivePanel(PanelView.MAIN);
+                    navigateBack();
                     setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE); // Reset payment method when going back
                 } })) }) }));
-    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : ((0, jsx_runtime_1.jsx)(react_3.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: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), customUsdInputValues: customUsdInputValues }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.cn)("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
+    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward"), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : ((0, jsx_runtime_1.jsx)(react_3.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: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: (panelIndex) => {
+                                // Map panel index to navigation with direction
+                                const panelsWithForwardNav = [PanelView.FIAT_PAYMENT_METHOD, PanelView.RECIPIENT_SELECTION];
+                                if (panelsWithForwardNav.includes(panelIndex)) {
+                                    navigateToPanel(panelIndex, "forward");
+                                }
+                                else {
+                                    setActivePanel(panelIndex);
+                                }
+                            }, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), customUsdInputValues: customUsdInputValues }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.cn)("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
                             if (activeTab === "fiat" || isBuyMode) {
                                 return;
                             }
@@ -700,13 +752,13 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                             const tempDstAmount = dstAmount;
                             setSrcAmount(tempDstAmount);
                             setDstAmount(tempSrcAmount);
-                        }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, onChangeDstAmount: value => {
+                        }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, onChangeDstAmount: value => {
                             setIsSrcInputDirty(false);
                             setDstAmount(value);
-                        }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL) }))] }), (0, jsx_runtime_1.jsx)(ErrorSection_1.ErrorSection, { error: getAnyspendQuoteError }), (0, jsx_runtime_1.jsxs)(react_3.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: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: [(0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
+                        }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward") }))] }), (0, jsx_runtime_1.jsx)(ErrorSection_1.ErrorSection, { error: getAnyspendQuoteError }), (0, jsx_runtime_1.jsxs)(react_3.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: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: [(0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
     const onrampPaymentView = ((0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName || undefined, recipientAddress: recipientAddress, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
             setOrderId(orderId);
-            setActivePanel(PanelView.ORDER_DETAILS);
+            navigateToPanel(PanelView.ORDER_DETAILS, "forward");
             // Add orderId and payment method to URL for persistence
             const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
             params.set("orderId", orderId);
@@ -718,20 +770,20 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                 params.set("paymentMethod", selectedCryptoPaymentMethod);
             }
             router.push(`${window.location.pathname}?${params.toString()}`);
-        }, onBack: () => setActivePanel(PanelView.MAIN), recipientEnsName: globalWallet?.ensName, recipientImageUrl: globalWallet?.meta?.icon }));
-    const recipientSelectionView = ((0, jsx_runtime_1.jsx)(RecipientSelection_1.RecipientSelection, { initialValue: recipientAddress || "", onBack: () => setActivePanel(PanelView.MAIN), onConfirm: address => {
+        }, onBack: navigateBack, recipientEnsName: globalWallet?.ensName, recipientImageUrl: globalWallet?.meta?.icon }));
+    const recipientSelectionView = ((0, jsx_runtime_1.jsx)(RecipientSelection_1.RecipientSelection, { initialValue: recipientAddress || "", onBack: navigateBack, onConfirm: address => {
             setRecipientAddress(address);
-            setActivePanel(PanelView.MAIN);
+            navigateBack();
         } }));
-    const cryptoPaymentMethodView = ((0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: globalWallet, selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {
+    const cryptoPaymentMethodView = ((0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: globalWallet, selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: navigateBack, onSelectPaymentMethod: (method) => {
             setSelectedCryptoPaymentMethod(method);
-            setActivePanel(PanelView.MAIN);
+            navigateBack();
         } }));
-    const fiatPaymentMethodView = ((0, jsx_runtime_1.jsx)(FiatPaymentMethod_1.FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {
+    const fiatPaymentMethodView = ((0, jsx_runtime_1.jsx)(FiatPaymentMethod_1.FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: navigateBack, onSelectPaymentMethod: (method) => {
             setSelectedFiatPaymentMethod(method);
-            setActivePanel(PanelView.MAIN); // Go back to main panel to show updated pricing
+            navigateBack(); // Go back to main panel to show updated pricing
         }, srcAmountOnRamp: srcAmountOnRamp }));
-    const pointsDetailView = ((0, jsx_runtime_1.jsx)(PointsDetailPanel_1.PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(PanelView.MAIN) }));
+    const pointsDetailView = ((0, jsx_runtime_1.jsx)(PointsDetailPanel_1.PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: navigateBack }));
     // Add tabs to the main component when no order is loaded
     return ((0, jsx_runtime_1.jsx)(react_2.StyleRoot, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-container font-inter mx-auto w-full max-w-[460px]", mode === "page" &&
                 "bg-as-surface-primary border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: (0, jsx_runtime_1.jsx)(react_2.TransitionPanel, { activeIndex: orderId
@@ -742,10 +794,16 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                         ? PanelView.MAIN
                         : activePanel, className: (0, cn_1.cn)("rounded-2xl", {
                     "mt-0": mode === "modal",
-                }), variants: {
-                    enter: { x: 300, opacity: 0 },
+                }), custom: animationDirection.current, variants: {
+                    enter: direction => ({
+                        x: direction === "back" ? -300 : 300,
+                        opacity: 0,
+                    }),
                     center: { x: 0, opacity: 1 },
-                    exit: { x: -300, opacity: 0 },
+                    exit: direction => ({
+                        x: direction === "back" ? 300 : -300,
+                        opacity: 0,
+                    }),
                 }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
                     (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: mainView }, "main-view"),
                     (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: historyView }, "history-view"),

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

@@ -280,12 +280,7 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
         ? "0"
         : order.payload.expectedDstAmount.toString();
     const formattedExpectedDstAmount = (0, number_1.formatTokenAmount)(BigInt(expectedDstAmount), dstToken.decimals);
-    const actualDstAmount = order.type === "mint_nft" ||
-        order.type === "join_tournament" ||
-        order.type === "fund_tournament" ||
-        order.type === "custom"
-        ? undefined
-        : order.payload.actualDstAmount;
+    const actualDstAmount = order.settlement?.actualDstAmount;
     const formattedActualDstAmount = actualDstAmount
         ? (0, number_1.formatTokenAmount)(BigInt(actualDstAmount), dstToken.decimals)
         : undefined;
@@ -487,7 +482,7 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
                                                             ? "Funding Tournament"
                                                             : "Processing Transaction", chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 })) : ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                 ? `Waiting for payment`
-                                                : `Waiting for deposit ${formattedDepositDeficit} ${srcToken.symbol}`, chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 }))] }) })] }) }), !depositEnoughAmount && order.status !== "expired" && ((0, jsx_runtime_1.jsx)(InsufficientDepositPayment_1.InsufficientDepositPayment, { order: order, srcToken: srcToken, depositDeficit: depositDeficit, phantomWalletAddress: phantomWalletAddress, txLoading: txLoading, isSwitchingOrExecuting: isSwitchingOrExecuting, onPayment: handlePayment }))] }));
+                                                : `Waiting for deposit ${formattedDepositDeficit} ${srcToken.symbol}`, chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 }))] }) })] }) }), depositTxs?.length > 0 && !depositEnoughAmount && order.status === "scanning_deposit_transaction" && ((0, jsx_runtime_1.jsx)(InsufficientDepositPayment_1.InsufficientDepositPayment, { order: order, srcToken: srcToken, depositDeficit: depositDeficit, phantomWalletAddress: phantomWalletAddress, txLoading: txLoading, isSwitchingOrExecuting: isSwitchingOrExecuting, onPayment: handlePayment }))] }));
     }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), statusDisplay === "processing" && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: order.onrampMetadata ? ((0, jsx_runtime_1.jsx)(PaymentVendorUI_1.default, { order: order, dstTokenSymbol: dstToken.symbol })) : effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ||
                     effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET ? ((0, jsx_runtime_1.jsx)(ConnectWalletPayment_1.default, { order: order, onPayment: handlePayment, onCancel: handleBack, txLoading: txLoading, isSwitchingOrExecuting: isSwitchingOrExecuting, phantomWalletAddress: phantomWalletAddress, tournament: tournament, nft: nft, cryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: onPaymentMethodChange })) : effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? (

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

@@ -16,12 +16,7 @@ function OrderHistoryItem({ order, onSelectOrder, mode }) {
     const nft = order.type === "mint_nft" ? order.metadata.nft : undefined;
     const tournament = order.type === "join_tournament" || order.type === "fund_tournament" ? order.metadata.tournament : undefined;
     const dstToken = order.metadata.dstToken;
-    const actualDstAmount = order.type === "mint_nft" ||
-        order.type === "join_tournament" ||
-        order.type === "fund_tournament" ||
-        order.type === "custom"
-        ? undefined
-        : order.payload.actualDstAmount;
+    const actualDstAmount = order.settlement?.actualDstAmount;
     const expectedDstAmount = order.type === "mint_nft" ||
         order.type === "join_tournament" ||
         order.type === "fund_tournament" ||

package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.d.ts

@@ -36,6 +36,7 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
             relayTxs: components["schemas"]["RelayTx"][];
             executeTx: components["schemas"]["ExecuteTx"] | null;
             refundTxs: components["schemas"]["RefundTx"][];
+            points: number | null;
         };
         statusCode: number;
     } | undefined;

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

@@ -192,8 +192,8 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
     // Handle order completion
     (0, react_3.useEffect)(() => {
         if (oat?.data?.order.status === "executed") {
-            // get the actualDstAmount if available from custompayload
-            const amount = oat.data.order.payload?.actualDstAmount;
+            // get the actualDstAmount if available from settlement
+            const amount = oat.data.order.settlement?.actualDstAmount;
             const formattedActualDstAmount = amount
                 ? (0, number_1.formatTokenAmount)(BigInt(amount), oat.data.order.metadata.dstToken.decimals)
                 : undefined;
@@ -201,7 +201,7 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
         }
     }, [
         oat?.data?.order.status,
-        oat?.data?.order.payload,
+        oat?.data?.order.settlement?.actualDstAmount,
         onTransactionSuccess,
         oat?.data?.order.metadata.dstToken.decimals,
     ]);

package/dist/cjs/anyspend/react/hooks/useAnyspendOrderAndTransactions.d.ts

@@ -8,6 +8,7 @@ export declare function useAnyspendOrderAndTransactions(orderId: string | undefi
             relayTxs: import("../..").components["schemas"]["RelayTx"][];
             executeTx: import("../..").components["schemas"]["ExecuteTx"] | null;
             refundTxs: import("../..").components["schemas"]["RefundTx"][];
+            points: number | null;
         };
         statusCode: number;
     } | undefined;
@@ -22,6 +23,7 @@ export declare function useAnyspendOrderAndTransactions(orderId: string | undefi
             relayTxs: import("../..").components["schemas"]["RelayTx"][];
             executeTx: import("../..").components["schemas"]["ExecuteTx"] | null;
             refundTxs: import("../..").components["schemas"]["RefundTx"][];
+            points: number | null;
         };
         statusCode: number;
     }, Error>>;

package/dist/cjs/anyspend/react/hooks/useAnyspendOrderHistory.d.ts

@@ -12,11 +12,15 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         errorDetails: string | null;
         createdAt: number;
         expiredAt: number;
+        filledAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
         oneClickBuyUrl: string | null;
         stripePaymentIntentId: string | null;
+        settlement: {
+            actualDstAmount: string | null;
+        } | null;
     } & {
         type: "swap";
         payload: import("../..").components["schemas"]["SwapPayload"];
@@ -34,11 +38,15 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         errorDetails: string | null;
         createdAt: number;
         expiredAt: number;
+        filledAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
         oneClickBuyUrl: string | null;
         stripePaymentIntentId: string | null;
+        settlement: {
+            actualDstAmount: string | null;
+        } | null;
     } & {
         type: "hype_duel";
         payload: import("../..").components["schemas"]["HypeDuelPayload"];
@@ -56,11 +64,15 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         errorDetails: string | null;
         createdAt: number;
         expiredAt: number;
+        filledAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
         oneClickBuyUrl: string | null;
         stripePaymentIntentId: string | null;
+        settlement: {
+            actualDstAmount: string | null;
+        } | null;
     } & {
         type: "custom";
         payload: import("../..").components["schemas"]["CustomPayload"];
@@ -78,11 +90,15 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         errorDetails: string | null;
         createdAt: number;
         expiredAt: number;
+        filledAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
         oneClickBuyUrl: string | null;
         stripePaymentIntentId: string | null;
+        settlement: {
+            actualDstAmount: string | null;
+        } | null;
     } & {
         type: "mint_nft";
         payload: import("../..").components["schemas"]["MintNftPayload"];
@@ -100,11 +116,15 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         errorDetails: string | null;
         createdAt: number;
         expiredAt: number;
+        filledAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
         oneClickBuyUrl: string | null;
         stripePaymentIntentId: string | null;
+        settlement: {
+            actualDstAmount: string | null;
+        } | null;
     } & {
         type: "join_tournament";
         payload: import("../..").components["schemas"]["JoinTournamentPayload"];
@@ -122,11 +142,15 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         errorDetails: string | null;
         createdAt: number;
         expiredAt: number;
+        filledAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
         oneClickBuyUrl: string | null;
         stripePaymentIntentId: string | null;
+        settlement: {
+            actualDstAmount: string | null;
+        } | null;
     } & {
         type: "fund_tournament";
         payload: import("../..").components["schemas"]["FundTournamentPayload"];
@@ -147,11 +171,15 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         errorDetails: string | null;
         createdAt: number;
         expiredAt: number;
+        filledAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
         oneClickBuyUrl: string | null;
         stripePaymentIntentId: string | null;
+        settlement: {
+            actualDstAmount: string | null;
+        } | null;
     } & {
         type: "swap";
         payload: import("../..").components["schemas"]["SwapPayload"];
@@ -169,11 +197,15 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         errorDetails: string | null;
         createdAt: number;
         expiredAt: number;
+        filledAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
         oneClickBuyUrl: string | null;
         stripePaymentIntentId: string | null;
+        settlement: {
+            actualDstAmount: string | null;
+        } | null;
     } & {
         type: "hype_duel";
         payload: import("../..").components["schemas"]["HypeDuelPayload"];
@@ -191,11 +223,15 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         errorDetails: string | null;
         createdAt: number;
         expiredAt: number;
+        filledAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
         oneClickBuyUrl: string | null;
         stripePaymentIntentId: string | null;
+        settlement: {
+            actualDstAmount: string | null;
+        } | null;
     } & {
         type: "custom";
         payload: import("../..").components["schemas"]["CustomPayload"];
@@ -213,11 +249,15 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         errorDetails: string | null;
         createdAt: number;
         expiredAt: number;
+        filledAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
         oneClickBuyUrl: string | null;
         stripePaymentIntentId: string | null;
+        settlement: {
+            actualDstAmount: string | null;
+        } | null;
     } & {
         type: "mint_nft";
         payload: import("../..").components["schemas"]["MintNftPayload"];
@@ -235,11 +275,15 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         errorDetails: string | null;
         createdAt: number;
         expiredAt: number;
+        filledAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
         oneClickBuyUrl: string | null;
         stripePaymentIntentId: string | null;
+        settlement: {
+            actualDstAmount: string | null;
+        } | null;
     } & {
         type: "join_tournament";
         payload: import("../..").components["schemas"]["JoinTournamentPayload"];
@@ -257,11 +301,15 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
         errorDetails: string | null;
         createdAt: number;
         expiredAt: number;
+        filledAt: number | null;
         creatorAddress: string | null;
         partnerId: string | null;
         onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
         oneClickBuyUrl: string | null;
         stripePaymentIntentId: string | null;
+        settlement: {
+            actualDstAmount: string | null;
+        } | null;
     } & {
         type: "fund_tournament";
         payload: import("../..").components["schemas"]["FundTournamentPayload"];

package/dist/cjs/anyspend/types/api.d.ts

@@ -434,6 +434,11 @@ export interface paths {
                                 executeTx: components["schemas"]["ExecuteTx"] | null;
                                 /** @description Refund transactions if order failed */
                                 refundTxs: components["schemas"]["RefundTx"][];
+                                /**
+                                 * @description Points awarded for this order (only present when order status is executed)
+                                 * @example 100
+                                 */
+                                points: number | null;
                             };
                             /** @example 200 */
                             statusCode: number;
@@ -1112,16 +1117,6 @@ export interface components {
              * @example 990000
              */
             expectedDstAmount: string;
-            /**
-             * @description Actual received amount (null for new orders)
-             * @example 990000
-             */
-            actualDstAmount: string | null;
-            /**
-             * @description Amount in after fee
-             * @example 990000
-             */
-            amountInAfterFee: string | null;
         };
         /** @description HypeDuel-specific payload */
         HypeDuelPayload: {
@@ -1130,16 +1125,6 @@ export interface components {
              * @example 990000
              */
             expectedDstAmount: string;
-            /**
-             * @description Actual received amount (null for new orders)
-             * @example 990000
-             */
-            actualDstAmount: string | null;
-            /**
-             * @description Amount in after fee
-             * @example 990000
-             */
-            amountInAfterFee: string | null;
         };
         /** @description Custom execution payload */
         CustomPayload: {
@@ -1307,6 +1292,8 @@ export interface components {
              * @example 1752506694679
              */
             expiredAt: number;
+            /** @description Timestamp when the order was filled/executed */
+            filledAt: number | null;
             /**
              * @description Optional creator address
              * @example 0xb34facb90a200251318e8841c05102366f2158cf
@@ -1323,6 +1310,14 @@ export interface components {
              * @example pi_3Rko0sJnoDg53PsP0PDLsHkR
              */
             stripePaymentIntentId: string | null;
+            /** @description Settlement information for executed orders */
+            settlement: {
+                /**
+                 * @description Actual received amount after execution
+                 * @example 990000
+                 */
+                actualDstAmount: string | null;
+            } | null;
         };
         SwapOrder: components["schemas"]["BaseOrder"] & {
             /**

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

@@ -8,8 +8,6 @@ const buildPayload = (orderType, params) => {
         case "swap":
             return {
                 expectedDstAmount,
-                actualDstAmount: null,
-                amountInAfterFee: null,
             };
         case "mint_nft":
             if (nft?.type === "erc1155") {
@@ -46,8 +44,6 @@ const buildPayload = (orderType, params) => {
         case "hype_duel":
             return {
                 expectedDstAmount,
-                actualDstAmount: null,
-                amountInAfterFee: null,
             };
         default:
             throw new Error(`Invalid order type: ${orderType}`);

package/dist/cjs/shared/react/hooks/useCurrencyConversion.d.ts

@@ -20,7 +20,7 @@ export declare function useCurrencyConversion(): {
     /** Base currency used for conversion (typically B3) */
     baseCurrency: import("../stores/currencyStore").SupportedCurrency;
     /** Current exchange rate from base to selected currency (undefined while loading) */
-    exchangeRate: number;
+    exchangeRate: number | undefined;
     /** Format a value with currency conversion and proper symbol/decimal handling */
     formatCurrencyValue: (value: number, options?: {
         decimals?: number;