@b3dotfun/sdk 0.0.43 → 0.0.44-alpha.0

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 }}
         >

package/src/anyspend/react/components/common/OrderDetails.tsx

@@ -987,8 +987,8 @@ export const OrderDetails = memo(function OrderDetails({
           </AccordionItem>
         </Accordion>
 
-        {/* Show payment UI when deposit is not enough and order is not expired */}
-        {!depositEnoughAmount && order.status !== "expired" && (
+        {/* Show payment UI for insufficient deposit while scanning for transaction */}
+        {depositTxs?.length > 0 && !depositEnoughAmount && order.status === "scanning_deposit_transaction" && (
           <InsufficientDepositPayment
             order={order}
             srcToken={srcToken}

package/src/anyspend/types/api.ts

@@ -1124,11 +1124,6 @@ export interface components {
        * @example 990000
        */
       actualDstAmount: string | null;
-      /**
-       * @description Amount in after fee
-       * @example 990000
-       */
-      amountInAfterFee: string | null;
     };
     /** @description HypeDuel-specific payload */
     HypeDuelPayload: {
@@ -1142,11 +1137,6 @@ export interface components {
        * @example 990000
        */
       actualDstAmount: string | null;
-      /**
-       * @description Amount in after fee
-       * @example 990000
-       */
-      amountInAfterFee: string | null;
     };
     /** @description Custom execution payload */
     CustomPayload: {
@@ -1324,6 +1314,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/src/shared/react/hooks/useCurrencyConversion.ts

@@ -1,7 +1,33 @@
-import { useExchangeRate } from "@b3dotfun/sdk/global-account/react";
+import { useQuery } from "@tanstack/react-query";
 import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
 import { CURRENCY_SYMBOLS, useCurrencyStore } from "../stores/currencyStore";
 
+const COINBASE_API_URL = "https://api.coinbase.com/v2/exchange-rates";
+const REFETCH_INTERVAL_MS = 30000;
+
+interface CoinbaseExchangeRatesResponse {
+  data: {
+    currency: string;
+    rates: Record<string, string>;
+  };
+}
+
+/**
+ * Fetches all exchange rates for a given base currency from Coinbase API.
+ */
+async function fetchAllExchangeRates(baseCurrency: string): Promise<Record<string, number>> {
+  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: CoinbaseExchangeRatesResponse = await response.json();
+  const rates: Record<string, number> = {};
+  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.
  *
@@ -22,17 +48,19 @@ export function useCurrencyConversion() {
   const selectedCurrency = useCurrencyStore(state => state.selectedCurrency);
   const baseCurrency = useCurrencyStore(state => state.baseCurrency);
 
-  // Get exchange rate for the selected currency
-  const { rate: exchangeRate } = useExchangeRate({
-    baseCurrency,
-    quoteCurrency: selectedCurrency === baseCurrency ? "USD" : selectedCurrency,
+  // Fetch all exchange rates for the base currency
+  const { data: exchangeRates } = 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),
   });
 
-  // Always fetch USD rate for tooltip purposes
-  const { rate: usdRate } = useExchangeRate({
-    baseCurrency,
-    quoteCurrency: "USD",
-  });
+  // 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.
@@ -83,8 +111,7 @@ export 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 = formatDisplayNumber(value, {
         significantDigits: baseCurrency === "B3" ? 6 : 8,