@b3dotfun/sdk 0.0.43 → 0.0.44-alpha.0

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

@@ -487,7 +487,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/hooks/useAnyspendOrderHistory.d.ts

@@ -12,6 +12,7 @@ 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;
@@ -34,6 +35,7 @@ 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;
@@ -56,6 +58,7 @@ 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;
@@ -78,6 +81,7 @@ 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;
@@ -100,6 +104,7 @@ 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;
@@ -122,6 +127,7 @@ 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;
@@ -147,6 +153,7 @@ 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;
@@ -169,6 +176,7 @@ 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;
@@ -191,6 +199,7 @@ 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;
@@ -213,6 +222,7 @@ 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;
@@ -235,6 +245,7 @@ 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;
@@ -257,6 +268,7 @@ 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;

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

@@ -1117,11 +1117,6 @@ export interface components {
              * @example 990000
              */
             actualDstAmount: string | null;
-            /**
-             * @description Amount in after fee
-             * @example 990000
-             */
-            amountInAfterFee: string | null;
         };
         /** @description HypeDuel-specific payload */
         HypeDuelPayload: {
@@ -1135,11 +1130,6 @@ export interface components {
              * @example 990000
              */
             actualDstAmount: string | null;
-            /**
-             * @description Amount in after fee
-             * @example 990000
-             */
-            amountInAfterFee: string | null;
         };
         /** @description Custom execution payload */
         CustomPayload: {
@@ -1307,6 +1297,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

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;

package/dist/cjs/shared/react/hooks/useCurrencyConversion.js

@@ -1,9 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCurrencyConversion = useCurrencyConversion;
-const react_1 = require("../../../global-account/react");
+const react_query_1 = require("@tanstack/react-query");
 const number_1 = require("../../../shared/utils/number");
 const currencyStore_1 = require("../stores/currencyStore");
+const COINBASE_API_URL = "https://api.coinbase.com/v2/exchange-rates";
+const REFETCH_INTERVAL_MS = 30000;
+/**
+ * Fetches all exchange rates for a given base currency from Coinbase API.
+ */
+async function fetchAllExchangeRates(baseCurrency) {
+    const response = await fetch(`${COINBASE_API_URL}?currency=${baseCurrency}`);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch exchange rates for ${baseCurrency}: ${response.status}`);
+    }
+    const data = await response.json();
+    const rates = {};
+    for (const [currency, rate] of Object.entries(data.data.rates)) {
+        rates[currency] = parseFloat(rate);
+    }
+    return rates;
+}
 /**
  * Hook for currency conversion and formatting with real-time exchange rates.
  *
@@ -23,16 +40,18 @@ const currencyStore_1 = require("../stores/currencyStore");
 function useCurrencyConversion() {
     const selectedCurrency = (0, currencyStore_1.useCurrencyStore)(state => state.selectedCurrency);
     const baseCurrency = (0, currencyStore_1.useCurrencyStore)(state => state.baseCurrency);
-    // Get exchange rate for the selected currency
-    const { rate: exchangeRate } = (0, react_1.useExchangeRate)({
-        baseCurrency,
-        quoteCurrency: selectedCurrency === baseCurrency ? "USD" : selectedCurrency,
-    });
-    // Always fetch USD rate for tooltip purposes
-    const { rate: usdRate } = (0, react_1.useExchangeRate)({
-        baseCurrency,
-        quoteCurrency: "USD",
+    // Fetch all exchange rates for the base currency
+    const { data: exchangeRates } = (0, react_query_1.useQuery)({
+        queryKey: ["exchangeRates", baseCurrency],
+        queryFn: () => fetchAllExchangeRates(baseCurrency),
+        refetchInterval: REFETCH_INTERVAL_MS,
+        staleTime: REFETCH_INTERVAL_MS / 2,
+        retry: 3,
+        retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, REFETCH_INTERVAL_MS),
     });
+    // Extract specific rates from the full rates object
+    const exchangeRate = exchangeRates?.[selectedCurrency];
+    const usdRate = exchangeRates?.["USD"];
     /**
      * Formats a numeric value as a currency string with proper conversion and formatting.
      *
@@ -78,8 +97,7 @@ function useCurrencyConversion() {
             });
             return `${formatted} ${baseCurrency}`;
         }
-        // If no exchange rate available, show base currency to prevent showing
-        // incorrect values with wrong currency symbols during rate fetching
+        // If showing base currency, no conversion needed
         if (selectedCurrency === baseCurrency || !exchangeRate) {
             const formatted = (0, number_1.formatDisplayNumber)(value, {
                 significantDigits: baseCurrency === "B3" ? 6 : 8,