@b3dotfun/sdk 0.0.43 → 0.0.44-alpha.1

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,

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/dist/esm/anyspend/react/components/common/OrderDetails.js

@@ -274,12 +274,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
         ? "0"
         : order.payload.expectedDstAmount.toString();
     const formattedExpectedDstAmount = formatTokenAmount(BigInt(expectedDstAmount), dstToken.decimals);
-    const actualDstAmount = order.type === "mint_nft" ||
-        order.type === "join_tournament" ||
-        order.type === "fund_tournament" ||
-        order.type === "custom"
-        ? undefined
-        : order.payload.actualDstAmount;
+    const actualDstAmount = order.settlement?.actualDstAmount;
     const formattedActualDstAmount = actualDstAmount
         ? formatTokenAmount(BigInt(actualDstAmount), dstToken.decimals)
         : undefined;
@@ -481,7 +476,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
                                                             ? "Funding Tournament"
                                                             : "Processing Transaction", chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 })) : (_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" && (_jsx(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" && (_jsx(InsufficientDepositPayment, { order: order, srcToken: srcToken, depositDeficit: depositDeficit, phantomWalletAddress: phantomWalletAddress, txLoading: txLoading, isSwitchingOrExecuting: isSwitchingOrExecuting, onPayment: handlePayment }))] }));
     }
     return (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), statusDisplay === "processing" && (_jsx(_Fragment, { children: order.onrampMetadata ? (_jsx(PaymentVendorUI, { order: order, dstTokenSymbol: dstToken.symbol })) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
                     effectiveCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? (_jsx(ConnectWalletPayment, { order: order, onPayment: handlePayment, onCancel: handleBack, txLoading: txLoading, isSwitchingOrExecuting: isSwitchingOrExecuting, phantomWalletAddress: phantomWalletAddress, tournament: tournament, nft: nft, cryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: onPaymentMethodChange })) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (

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

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

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

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

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

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

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

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

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

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

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

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