@b3dotfun/sdk 0.0.43-alpha.1 → 0.0.43-alpha.2

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/esm/anyspend/react/components/AnySpend.js

@@ -52,11 +52,27 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     const lastUrlUpdate = useRef(null);
     // Track if onSuccess has been called for the current order
     const onSuccessCalled = useRef(false);
+    // Track animation direction for TransitionPanel
+    const animationDirection = useRef(null);
+    // Track previous panel for proper back navigation
+    const previousPanel = useRef(PanelView.MAIN);
     const [activeTab, setActiveTab] = useState(defaultActiveTab);
     const [orderId, setOrderId] = useState(loadOrder);
     const { orderAndTransactions: oat, getOrderAndTransactionsError } = useAnyspendOrderAndTransactions(orderId);
     !!getOrderAndTransactionsError && console.log("getOrderAndTransactionsError", getOrderAndTransactionsError);
     const [activePanel, setActivePanel] = useState(loadOrder ? PanelView.ORDER_DETAILS : PanelView.MAIN);
+    // Helper functions to navigate with animation direction
+    const navigateToPanel = useCallback((panel, direction = "forward") => {
+        previousPanel.current = activePanel;
+        animationDirection.current = direction;
+        setActivePanel(panel);
+    }, [activePanel]);
+    const navigateBack = 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] = useState([]);
     // Add state for selected payment method
     const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState(CryptoPaymentMethodType.NONE);
@@ -405,7 +421,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
@@ -431,7 +447,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);
@@ -494,7 +510,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         if (btnInfo.disable)
             return;
         if (!recipientAddress) {
-            setActivePanel(PanelView.RECIPIENT_SELECTION);
+            navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward");
             return;
         }
         try {
@@ -503,7 +519,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             if (activeTab === "fiat") {
                 // If no fiat payment method selected, show payment method selection
                 if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
-                    setActivePanel(PanelView.FIAT_PAYMENT_METHOD);
+                    navigateToPanel(PanelView.FIAT_PAYMENT_METHOD, "forward");
                     return;
                 }
                 // If payment method is selected, create order directly
@@ -514,7 +530,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                 // If no payment method selected, show payment method selection
                 if (selectedCryptoPaymentMethod === 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
@@ -534,7 +550,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");
@@ -647,8 +663,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);
@@ -668,13 +684,49 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     useEffect(() => {
         window.scrollTo({ top: 0, behavior: "smooth" });
     }, [activePanel]);
-    const historyView = (_jsx("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: _jsx(OrderHistory, { mode: mode, onBack: () => setActivePanel(PanelView.MAIN), onSelectOrder: onSelectOrder }) }));
+    // Handle browser back button for recipient selection and payment method views
+    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 = (_jsx("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: _jsx(OrderHistory, { mode: mode, onBack: navigateBack, onSelectOrder: onSelectOrder }) }));
     const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsx(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(CryptoPaymentMethodType.NONE); // Reset payment method when going back
                 } })) }) }));
-    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", 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: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsx(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 })) : (_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: 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 }) })), _jsx(Button, { variant: "ghost", className: 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 = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", 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: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsx(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 })) : (_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: 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 }) })), _jsx(Button, { variant: "ghost", className: 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;
                             }
@@ -693,13 +745,13 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                             const tempDstAmount = dstAmount;
                             setSrcAmount(tempDstAmount);
                             setDstAmount(tempSrcAmount);
-                        }, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && (_jsx(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: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && (_jsx(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) }))] }), _jsx(ErrorSection, { error: getAnyspendQuoteError }), _jsxs(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", getAnyspendQuoteError && "mt-0"), 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: btnInfo.text }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
+                        }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward") }))] }), _jsx(ErrorSection, { error: getAnyspendQuoteError }), _jsxs(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", getAnyspendQuoteError && "mt-0"), 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: btnInfo.text }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
     const onrampPaymentView = (_jsx(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);
@@ -711,20 +763,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 = (_jsx(RecipientSelection, { initialValue: recipientAddress || "", onBack: () => setActivePanel(PanelView.MAIN), onConfirm: address => {
+        }, onBack: navigateBack, recipientEnsName: globalWallet?.ensName, recipientImageUrl: globalWallet?.meta?.icon }));
+    const recipientSelectionView = (_jsx(RecipientSelection, { initialValue: recipientAddress || "", onBack: navigateBack, onConfirm: address => {
             setRecipientAddress(address);
-            setActivePanel(PanelView.MAIN);
+            navigateBack();
         } }));
-    const cryptoPaymentMethodView = (_jsx(CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: globalWallet, selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {
+    const cryptoPaymentMethodView = (_jsx(CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: globalWallet, selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: navigateBack, onSelectPaymentMethod: (method) => {
             setSelectedCryptoPaymentMethod(method);
-            setActivePanel(PanelView.MAIN);
+            navigateBack();
         } }));
-    const fiatPaymentMethodView = (_jsx(FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {
+    const fiatPaymentMethodView = (_jsx(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 = (_jsx(PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(PanelView.MAIN) }));
+    const pointsDetailView = (_jsx(PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: navigateBack }));
     // Add tabs to the main component when no order is loaded
     return (_jsx(StyleRoot, { children: _jsx("div", { className: 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: _jsx(TransitionPanel, { activeIndex: orderId
@@ -735,10 +787,16 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                         ? PanelView.MAIN
                         : activePanel, className: 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: [
                     _jsx("div", { className: cn(mode === "page" && "p-6"), children: mainView }, "main-view"),
                     _jsx("div", { className: cn(mode === "page" && "p-6"), children: historyView }, "history-view"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.43-alpha.1",
+  "version": "0.0.43-alpha.2",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

package/src/anyspend/react/components/AnySpend.tsx

@@ -140,6 +140,11 @@ function AnySpendInner({
   // Track if onSuccess has been called for the current order
   const onSuccessCalled = useRef(false);
 
+  // Track animation direction for TransitionPanel
+  const animationDirection = useRef<"forward" | "back" | null>(null);
+  // Track previous panel for proper back navigation
+  const previousPanel = useRef<PanelView>(PanelView.MAIN);
+
   const [activeTab, setActiveTab] = useState<"crypto" | "fiat">(defaultActiveTab);
 
   const [orderId, setOrderId] = useState<string | undefined>(loadOrder);
@@ -147,6 +152,23 @@ function AnySpendInner({
   !!getOrderAndTransactionsError && console.log("getOrderAndTransactionsError", getOrderAndTransactionsError);
 
   const [activePanel, setActivePanel] = useState<PanelView>(loadOrder ? PanelView.ORDER_DETAILS : PanelView.MAIN);
+
+  // Helper functions to navigate with animation direction
+  const navigateToPanel = useCallback(
+    (panel: PanelView, direction: "forward" | "back" = "forward") => {
+      previousPanel.current = activePanel;
+      animationDirection.current = direction;
+      setActivePanel(panel);
+    },
+    [activePanel],
+  );
+
+  const navigateBack = 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] = useState<RecipientOption[]>([]);
   // Add state for selected payment method
   const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState<CryptoPaymentMethodType>(
@@ -544,7 +566,7 @@ function AnySpendInner({
       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);
@@ -572,7 +594,7 @@ function AnySpendInner({
     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());
@@ -638,7 +660,7 @@ function AnySpendInner({
     if (btnInfo.disable) return;
 
     if (!recipientAddress) {
-      setActivePanel(PanelView.RECIPIENT_SELECTION);
+      navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward");
       return;
     }
 
@@ -649,7 +671,7 @@ function AnySpendInner({
       if (activeTab === "fiat") {
         // If no fiat payment method selected, show payment method selection
         if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
-          setActivePanel(PanelView.FIAT_PAYMENT_METHOD);
+          navigateToPanel(PanelView.FIAT_PAYMENT_METHOD, "forward");
           return;
         }
         // If payment method is selected, create order directly
@@ -661,7 +683,7 @@ function AnySpendInner({
         // If no payment method selected, show payment method selection
         if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
           console.log("No payment method selected, showing selection panel");
-          setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD);
+          navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward");
           return;
         }
 
@@ -684,7 +706,7 @@ function AnySpendInner({
 
   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");
@@ -807,8 +829,8 @@ function AnySpendInner({
   }, [searchParams, loadOrder]);
 
   const onSelectOrder = (selectedOrderId: string) => {
-    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);
@@ -830,9 +852,40 @@ function AnySpendInner({
     window.scrollTo({ top: 0, behavior: "smooth" });
   }, [activePanel]);
 
+  // Handle browser back button for recipient selection and payment method views
+  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: PopStateEvent) => {
+      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 = (
     <div className={"mx-auto flex w-[560px] max-w-full flex-col items-center"}>
-      <OrderHistory mode={mode} onBack={() => setActivePanel(PanelView.MAIN)} onSelectOrder={onSelectOrder} />
+      <OrderHistory mode={mode} onBack={navigateBack} onSelectOrder={onSelectOrder} />
     </div>
   );
 
@@ -851,7 +904,7 @@ function AnySpendInner({
             onPaymentMethodChange={setSelectedCryptoPaymentMethod}
             onBack={() => {
               setOrderId(undefined);
-              setActivePanel(PanelView.MAIN);
+              navigateBack();
               setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when going back
             }}
           />
@@ -901,7 +954,7 @@ function AnySpendInner({
             setSrcAmount={setSrcAmount}
             setIsSrcInputDirty={setIsSrcInputDirty}
             selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
-            onSelectCryptoPaymentMethod={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
+            onSelectCryptoPaymentMethod={() => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward")}
             anyspendQuote={anyspendQuote}
             onTokenSelect={onTokenSelect}
           />
@@ -915,7 +968,15 @@ function AnySpendInner({
               srcAmountOnRamp={srcAmountOnRamp}
               setSrcAmountOnRamp={setSrcAmountOnRamp}
               selectedPaymentMethod={selectedFiatPaymentMethod}
-              setActivePanel={setActivePanel}
+              setActivePanel={(panelIndex: number) => {
+                // 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}
@@ -926,7 +987,7 @@ function AnySpendInner({
               recipientSelectionPanelIndex={PanelView.RECIPIENT_SELECTION}
               hideDstToken={isBuyMode}
               anyspendQuote={anyspendQuote}
-              onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
+              onShowPointsDetail={() => navigateToPanel(PanelView.POINTS_DETAIL, "forward")}
               customUsdInputValues={customUsdInputValues}
             />
           </motion.div>
@@ -976,7 +1037,7 @@ function AnySpendInner({
             isBuyMode={isBuyMode}
             selectedRecipientAddress={recipientAddress}
             recipientName={recipientName || undefined}
-            onSelectRecipient={() => setActivePanel(PanelView.RECIPIENT_SELECTION)}
+            onSelectRecipient={() => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward")}
             dstAmount={dstAmount}
             dstToken={selectedDstToken}
             selectedDstChainId={selectedDstChainId}
@@ -987,7 +1048,7 @@ function AnySpendInner({
               setDstAmount(value);
             }}
             anyspendQuote={anyspendQuote}
-            onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
+            onShowPointsDetail={() => navigateToPanel(PanelView.POINTS_DETAIL, "forward")}
           />
         )}
       </div>
@@ -1042,7 +1103,7 @@ function AnySpendInner({
       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);
@@ -1054,7 +1115,7 @@ function AnySpendInner({
         }
         router.push(`${window.location.pathname}?${params.toString()}`);
       }}
-      onBack={() => setActivePanel(PanelView.MAIN)}
+      onBack={navigateBack}
       recipientEnsName={globalWallet?.ensName}
       recipientImageUrl={globalWallet?.meta?.icon}
     />
@@ -1063,10 +1124,10 @@ function AnySpendInner({
   const recipientSelectionView = (
     <RecipientSelection
       initialValue={recipientAddress || ""}
-      onBack={() => setActivePanel(PanelView.MAIN)}
+      onBack={navigateBack}
       onConfirm={address => {
         setRecipientAddress(address);
-        setActivePanel(PanelView.MAIN);
+        navigateBack();
       }}
     />
   );
@@ -1078,10 +1139,10 @@ function AnySpendInner({
       selectedPaymentMethod={selectedCryptoPaymentMethod}
       setSelectedPaymentMethod={setSelectedCryptoPaymentMethod}
       isCreatingOrder={isCreatingOrder}
-      onBack={() => setActivePanel(PanelView.MAIN)}
+      onBack={navigateBack}
       onSelectPaymentMethod={(method: CryptoPaymentMethodType) => {
         setSelectedCryptoPaymentMethod(method);
-        setActivePanel(PanelView.MAIN);
+        navigateBack();
       }}
     />
   );
@@ -1090,20 +1151,17 @@ function AnySpendInner({
     <FiatPaymentMethodComponent
       selectedPaymentMethod={selectedFiatPaymentMethod}
       setSelectedPaymentMethod={setSelectedFiatPaymentMethod}
-      onBack={() => setActivePanel(PanelView.MAIN)}
+      onBack={navigateBack}
       onSelectPaymentMethod={(method: FiatPaymentMethod) => {
         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 = (
-    <PointsDetailPanel
-      pointsAmount={anyspendQuote?.data?.pointsAmount || 0}
-      onBack={() => setActivePanel(PanelView.MAIN)}
-    />
+    <PointsDetailPanel pointsAmount={anyspendQuote?.data?.pointsAmount || 0} onBack={navigateBack} />
   );
 
   // Add tabs to the main component when no order is loaded
@@ -1129,10 +1187,17 @@ function AnySpendInner({
           className={cn("rounded-2xl", {
             "mt-0": mode === "modal",
           })}
+          custom={animationDirection.current}
           variants={{
-            enter: { x: 300, opacity: 0 },
+            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 }}
         >