@b3dotfun/sdk 0.0.31-alpha.0 → 0.0.31-alpha.1

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

@@ -57,6 +57,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
         sourceTokenAddress,
         sourceTokenChainId,
         slippage: SLIPPAGE_PERCENT,
+        disableUrlParamManagement: true,
     });
     // Button state logic
     const btnInfo = (0, react_3.useMemo)(() => {
@@ -233,8 +234,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
     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.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: oat.data.order, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }), (0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: paymentType === "fiat" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, onBack: () => {
                             setOrderId(undefined);
                             setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
-                            onSuccess?.();
-                        } })] })) }) }));
+                        }, disableUrlParamManagement: true })] })) }) }));
     // Loading view
     const loadingView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-full flex-col items-center gap-4 p-5", children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary", children: "Loading order details..." }) }));
     // Panel views

package/dist/cjs/anyspend/react/components/common/OrderDetails.d.ts

@@ -9,6 +9,7 @@ interface OrderDetailsProps {
     refundTxs: components["schemas"]["RefundTx"][] | null;
     cryptoPaymentMethod?: CryptoPaymentMethodType;
     onBack?: () => void;
+    disableUrlParamManagement?: boolean;
 }
 export declare const OrderDetails: import("react").NamedExoticComponent<OrderDetailsProps>;
 export declare const OrderDetailsLoadingView: import("react/jsx-runtime").JSX.Element;

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

@@ -130,7 +130,7 @@ function roundTokenAmount(amount) {
     const roundedDecimalPart = digits.join("");
     return `${wholePart}.${roundedDecimalPart}`;
 }
-exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal", order, depositTxs, relayTx, executeTx, refundTxs, cryptoPaymentMethod, onBack, }) {
+exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal", order, depositTxs, relayTx, executeTx, refundTxs, cryptoPaymentMethod, onBack, disableUrlParamManagement = false, }) {
     const router = (0, hooks_1.useRouter)();
     const searchParams = (0, hooks_1.useSearchParams)();
     // Read crypto payment method from URL parameters
@@ -196,12 +196,16 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
     };
     // When waitingForDeposit is true, we show a message to the user to wait for the deposit to be processed.
     const setWaitingForDeposit = (0, react_5.useCallback)(() => {
+        if (disableUrlParamManagement)
+            return;
         const params = new URLSearchParams(searchParams.toString());
         params.set("waitingForDeposit", "true");
         router.push(`?${params}`);
-    }, [router, searchParams]);
+    }, [router, searchParams, disableUrlParamManagement]);
     // Clean up URL parameters before closing modal or navigating back
     const cleanupUrlParams = (0, react_5.useCallback)(() => {
+        if (disableUrlParamManagement)
+            return;
         const params = new URLSearchParams(searchParams.toString());
         params.delete("waitingForDeposit");
         params.delete("orderId");
@@ -210,7 +214,7 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
         if (params.toString() !== searchParams.toString()) {
             router.push(`?${params}`);
         }
-    }, [router, searchParams]);
+    }, [router, searchParams, disableUrlParamManagement]);
     // Helper functions that clean up URL params before executing actions
     const handleCloseModal = (0, react_5.useCallback)(() => {
         cleanupUrlParams();

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

@@ -19,8 +19,9 @@ interface UseAnyspendFlowProps {
     sourceTokenAddress?: string;
     sourceTokenChainId?: number;
     slippage?: number;
+    disableUrlParamManagement?: boolean;
 }
-export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrder, isDepositMode, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, slippage, }: UseAnyspendFlowProps): {
+export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrder, isDepositMode, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, slippage, disableUrlParamManagement, }: UseAnyspendFlowProps): {
     activePanel: PanelView;
     setActivePanel: import("react").Dispatch<import("react").SetStateAction<PanelView>>;
     orderId: string | undefined;
@@ -75,6 +76,8 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
     setSelectedRecipientAddress: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     recipientName: string | null | undefined;
     globalAddress: string | undefined;
+    hasEnoughBalance: boolean;
+    isBalanceLoading: boolean;
     anyspendQuote: {
         success: boolean;
         message: string;

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

@@ -11,6 +11,7 @@ const react_3 = require("react");
 const sonner_1 = require("sonner");
 const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
+const wagmi_1 = require("wagmi");
 const CryptoPaymentMethod_1 = require("../components/common/CryptoPaymentMethod");
 const FiatPaymentMethod_1 = require("../components/common/FiatPaymentMethod");
 var PanelView;
@@ -22,7 +23,7 @@ var PanelView;
     PanelView[PanelView["ORDER_DETAILS"] = 4] = "ORDER_DETAILS";
     PanelView[PanelView["LOADING"] = 5] = "LOADING";
 })(PanelView || (exports.PanelView = PanelView = {}));
-function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder, isDepositMode = false, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, slippage = 0, }) {
+function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder, isDepositMode = false, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, slippage = 0, disableUrlParamManagement = false, }) {
     const searchParams = (0, react_2.useSearchParamsSSR)();
     const router = (0, react_2.useRouter)();
     // Panel and order state
@@ -42,6 +43,7 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
     const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = (0, react_3.useState)(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
     // Recipient state
     const { address: globalAddress } = (0, react_2.useAccountWallet)();
+    const { address: wagmiAddress } = (0, wagmi_1.useAccount)();
     const [selectedRecipientAddress, setSelectedRecipientAddress] = (0, react_3.useState)(recipientAddress);
     const recipientProfile = (0, react_2.useProfile)({ address: selectedRecipientAddress, fresh: true });
     const recipientName = recipientProfile.data?.name;
@@ -51,11 +53,34 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
             setSelectedRecipientAddress(globalAddress);
         }
     }, [selectedRecipientAddress, globalAddress]);
+    // Check token balance for crypto payments
+    const { rawBalance, isLoading: isBalanceLoading } = (0, react_2.useTokenBalance)({
+        token: selectedSrcToken,
+        address: wagmiAddress,
+    });
+    // Check if user has enough balance
+    const hasEnoughBalance = (0, react_3.useMemo)(() => {
+        if (!rawBalance || isBalanceLoading || paymentType !== "crypto")
+            return false;
+        try {
+            const requiredAmount = (0, viem_1.parseUnits)(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals);
+            return rawBalance >= requiredAmount;
+        }
+        catch {
+            return false;
+        }
+    }, [rawBalance, srcAmount, selectedSrcToken.decimals, isBalanceLoading, paymentType]);
+    // Auto-set crypto payment method based on balance
     (0, react_3.useEffect)(() => {
-        if (paymentType === "crypto") {
-            setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET);
+        if (paymentType === "crypto" && !isBalanceLoading) {
+            if (hasEnoughBalance) {
+                setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET);
+            }
+            else {
+                setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO);
+            }
         }
-    }, [paymentType]);
+    }, [paymentType, hasEnoughBalance, isBalanceLoading]);
     // Fetch specific token when sourceTokenAddress and sourceTokenChainId are provided
     (0, react_3.useEffect)(() => {
         const fetchSourceToken = async () => {
@@ -114,14 +139,14 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
     }, [anyspendQuote, slippage]);
     // Update useEffect for URL parameter to not override loadOrder
     (0, react_3.useEffect)(() => {
-        if (loadOrder)
-            return; // Skip if we have a loadOrder
+        if (loadOrder || disableUrlParamManagement)
+            return; // Skip if we have a loadOrder or URL param management is disabled
         const orderIdParam = searchParams.get("orderId");
         if (orderIdParam) {
             setOrderId(orderIdParam);
             setActivePanel(PanelView.ORDER_DETAILS);
         }
-    }, [searchParams, loadOrder]);
+    }, [searchParams, loadOrder, disableUrlParamManagement]);
     // Order creation hooks
     const { createOrder, isCreatingOrder } = (0, react_1.useAnyspendCreateOrder)({
         onSuccess: data => {
@@ -130,17 +155,19 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
             setActivePanel(PanelView.ORDER_DETAILS);
             onOrderSuccess?.(newOrderId);
             // Add orderId and payment method to URL for persistence
-            const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
-            params.set("orderId", newOrderId);
-            if (selectedCryptoPaymentMethod !== CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
-                console.log("Setting cryptoPaymentMethod in URL:", selectedCryptoPaymentMethod);
-                params.set("cryptoPaymentMethod", selectedCryptoPaymentMethod);
-            }
-            else {
-                console.log("Payment method is NONE, not setting in URL");
+            if (!disableUrlParamManagement) {
+                const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
+                params.set("orderId", newOrderId);
+                if (selectedCryptoPaymentMethod !== CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
+                    console.log("Setting cryptoPaymentMethod in URL:", selectedCryptoPaymentMethod);
+                    params.set("cryptoPaymentMethod", selectedCryptoPaymentMethod);
+                }
+                else {
+                    console.log("Payment method is NONE, not setting in URL");
+                }
+                console.log("Final URL params:", params.toString());
+                router.push(`${window.location.pathname}?${params.toString()}`);
             }
-            console.log("Final URL params:", params.toString());
-            router.push(`${window.location.pathname}?${params.toString()}`);
         },
         onError: error => {
             console.error(error);
@@ -196,6 +223,9 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
         setSelectedRecipientAddress,
         recipientName,
         globalAddress,
+        // Balance check
+        hasEnoughBalance,
+        isBalanceLoading,
         // Quote data
         anyspendQuote,
         isLoadingAnyspendQuote,

package/dist/esm/anyspend/react/components/AnyspendDepositHype.js

@@ -50,6 +50,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
         sourceTokenAddress,
         sourceTokenChainId,
         slippage: SLIPPAGE_PERCENT,
+        disableUrlParamManagement: true,
     });
     // Button state logic
     const btnInfo = useMemo(() => {
@@ -226,8 +227,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
     const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: oat.data.order, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }), _jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: paymentType === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, onBack: () => {
                             setOrderId(undefined);
                             setActivePanel(PanelView.MAIN);
-                            onSuccess?.();
-                        } })] })) }) }));
+                        }, disableUrlParamManagement: true })] })) }) }));
     // Loading view
     const loadingView = (_jsx("div", { className: "mx-auto flex w-full flex-col items-center gap-4 p-5", children: _jsx("div", { className: "text-as-primary", children: "Loading order details..." }) }));
     // Panel views

package/dist/esm/anyspend/react/components/common/OrderDetails.d.ts

@@ -9,6 +9,7 @@ interface OrderDetailsProps {
     refundTxs: components["schemas"]["RefundTx"][] | null;
     cryptoPaymentMethod?: CryptoPaymentMethodType;
     onBack?: () => void;
+    disableUrlParamManagement?: boolean;
 }
 export declare const OrderDetails: import("react").NamedExoticComponent<OrderDetailsProps>;
 export declare const OrderDetailsLoadingView: import("react/jsx-runtime").JSX.Element;

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

@@ -124,7 +124,7 @@ function roundTokenAmount(amount) {
     const roundedDecimalPart = digits.join("");
     return `${wholePart}.${roundedDecimalPart}`;
 }
-export const OrderDetails = memo(function OrderDetails({ mode = "modal", order, depositTxs, relayTx, executeTx, refundTxs, cryptoPaymentMethod, onBack, }) {
+export const OrderDetails = memo(function OrderDetails({ mode = "modal", order, depositTxs, relayTx, executeTx, refundTxs, cryptoPaymentMethod, onBack, disableUrlParamManagement = false, }) {
     const router = useRouter();
     const searchParams = useSearchParams();
     // Read crypto payment method from URL parameters
@@ -190,12 +190,16 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
     };
     // When waitingForDeposit is true, we show a message to the user to wait for the deposit to be processed.
     const setWaitingForDeposit = useCallback(() => {
+        if (disableUrlParamManagement)
+            return;
         const params = new URLSearchParams(searchParams.toString());
         params.set("waitingForDeposit", "true");
         router.push(`?${params}`);
-    }, [router, searchParams]);
+    }, [router, searchParams, disableUrlParamManagement]);
     // Clean up URL parameters before closing modal or navigating back
     const cleanupUrlParams = useCallback(() => {
+        if (disableUrlParamManagement)
+            return;
         const params = new URLSearchParams(searchParams.toString());
         params.delete("waitingForDeposit");
         params.delete("orderId");
@@ -204,7 +208,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
         if (params.toString() !== searchParams.toString()) {
             router.push(`?${params}`);
         }
-    }, [router, searchParams]);
+    }, [router, searchParams, disableUrlParamManagement]);
     // Helper functions that clean up URL params before executing actions
     const handleCloseModal = useCallback(() => {
         cleanupUrlParams();

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

@@ -19,8 +19,9 @@ interface UseAnyspendFlowProps {
     sourceTokenAddress?: string;
     sourceTokenChainId?: number;
     slippage?: number;
+    disableUrlParamManagement?: boolean;
 }
-export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrder, isDepositMode, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, slippage, }: UseAnyspendFlowProps): {
+export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrder, isDepositMode, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, slippage, disableUrlParamManagement, }: UseAnyspendFlowProps): {
     activePanel: PanelView;
     setActivePanel: import("react").Dispatch<import("react").SetStateAction<PanelView>>;
     orderId: string | undefined;
@@ -75,6 +76,8 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
     setSelectedRecipientAddress: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     recipientName: string | null | undefined;
     globalAddress: string | undefined;
+    hasEnoughBalance: boolean;
+    isBalanceLoading: boolean;
     anyspendQuote: {
         success: boolean;
         message: string;

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

@@ -1,12 +1,13 @@
 import { B3_TOKEN, getDefaultToken, USDC_BASE } from "../../../anyspend/index.js";
 import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
 import { anyspendService } from "../../../anyspend/services/anyspend.js";
-import { useAccountWallet, useProfile, useRouter, useSearchParamsSSR } from "../../../global-account/react/index.js";
+import { useAccountWallet, useProfile, useRouter, useSearchParamsSSR, useTokenBalance, } from "../../../global-account/react/index.js";
 import { formatTokenAmount, formatUnits } from "../../../shared/utils/number.js";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { parseUnits } from "viem";
 import { base, mainnet } from "viem/chains";
+import { useAccount } from "wagmi";
 import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod.js";
 import { FiatPaymentMethod } from "../components/common/FiatPaymentMethod.js";
 export var PanelView;
@@ -18,7 +19,7 @@ export var PanelView;
     PanelView[PanelView["ORDER_DETAILS"] = 4] = "ORDER_DETAILS";
     PanelView[PanelView["LOADING"] = 5] = "LOADING";
 })(PanelView || (PanelView = {}));
-export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder, isDepositMode = false, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, slippage = 0, }) {
+export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder, isDepositMode = false, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, slippage = 0, disableUrlParamManagement = false, }) {
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
     // Panel and order state
@@ -38,6 +39,7 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
     const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState(FiatPaymentMethod.NONE);
     // Recipient state
     const { address: globalAddress } = useAccountWallet();
+    const { address: wagmiAddress } = useAccount();
     const [selectedRecipientAddress, setSelectedRecipientAddress] = useState(recipientAddress);
     const recipientProfile = useProfile({ address: selectedRecipientAddress, fresh: true });
     const recipientName = recipientProfile.data?.name;
@@ -47,11 +49,34 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
             setSelectedRecipientAddress(globalAddress);
         }
     }, [selectedRecipientAddress, globalAddress]);
+    // Check token balance for crypto payments
+    const { rawBalance, isLoading: isBalanceLoading } = useTokenBalance({
+        token: selectedSrcToken,
+        address: wagmiAddress,
+    });
+    // Check if user has enough balance
+    const hasEnoughBalance = useMemo(() => {
+        if (!rawBalance || isBalanceLoading || paymentType !== "crypto")
+            return false;
+        try {
+            const requiredAmount = parseUnits(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals);
+            return rawBalance >= requiredAmount;
+        }
+        catch {
+            return false;
+        }
+    }, [rawBalance, srcAmount, selectedSrcToken.decimals, isBalanceLoading, paymentType]);
+    // Auto-set crypto payment method based on balance
     useEffect(() => {
-        if (paymentType === "crypto") {
-            setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+        if (paymentType === "crypto" && !isBalanceLoading) {
+            if (hasEnoughBalance) {
+                setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+            }
+            else {
+                setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
+            }
         }
-    }, [paymentType]);
+    }, [paymentType, hasEnoughBalance, isBalanceLoading]);
     // Fetch specific token when sourceTokenAddress and sourceTokenChainId are provided
     useEffect(() => {
         const fetchSourceToken = async () => {
@@ -110,14 +135,14 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
     }, [anyspendQuote, slippage]);
     // Update useEffect for URL parameter to not override loadOrder
     useEffect(() => {
-        if (loadOrder)
-            return; // Skip if we have a loadOrder
+        if (loadOrder || disableUrlParamManagement)
+            return; // Skip if we have a loadOrder or URL param management is disabled
         const orderIdParam = searchParams.get("orderId");
         if (orderIdParam) {
             setOrderId(orderIdParam);
             setActivePanel(PanelView.ORDER_DETAILS);
         }
-    }, [searchParams, loadOrder]);
+    }, [searchParams, loadOrder, disableUrlParamManagement]);
     // Order creation hooks
     const { createOrder, isCreatingOrder } = useAnyspendCreateOrder({
         onSuccess: data => {
@@ -126,17 +151,19 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
             setActivePanel(PanelView.ORDER_DETAILS);
             onOrderSuccess?.(newOrderId);
             // Add orderId and payment method to URL for persistence
-            const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
-            params.set("orderId", newOrderId);
-            if (selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
-                console.log("Setting cryptoPaymentMethod in URL:", selectedCryptoPaymentMethod);
-                params.set("cryptoPaymentMethod", selectedCryptoPaymentMethod);
-            }
-            else {
-                console.log("Payment method is NONE, not setting in URL");
+            if (!disableUrlParamManagement) {
+                const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
+                params.set("orderId", newOrderId);
+                if (selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
+                    console.log("Setting cryptoPaymentMethod in URL:", selectedCryptoPaymentMethod);
+                    params.set("cryptoPaymentMethod", selectedCryptoPaymentMethod);
+                }
+                else {
+                    console.log("Payment method is NONE, not setting in URL");
+                }
+                console.log("Final URL params:", params.toString());
+                router.push(`${window.location.pathname}?${params.toString()}`);
             }
-            console.log("Final URL params:", params.toString());
-            router.push(`${window.location.pathname}?${params.toString()}`);
         },
         onError: error => {
             console.error(error);
@@ -192,6 +219,9 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
         setSelectedRecipientAddress,
         recipientName,
         globalAddress,
+        // Balance check
+        hasEnoughBalance,
+        isBalanceLoading,
         // Quote data
         anyspendQuote,
         isLoadingAnyspendQuote,

package/dist/types/anyspend/react/components/common/OrderDetails.d.ts

@@ -9,6 +9,7 @@ interface OrderDetailsProps {
     refundTxs: components["schemas"]["RefundTx"][] | null;
     cryptoPaymentMethod?: CryptoPaymentMethodType;
     onBack?: () => void;
+    disableUrlParamManagement?: boolean;
 }
 export declare const OrderDetails: import("react").NamedExoticComponent<OrderDetailsProps>;
 export declare const OrderDetailsLoadingView: import("react/jsx-runtime").JSX.Element;

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

@@ -19,8 +19,9 @@ interface UseAnyspendFlowProps {
     sourceTokenAddress?: string;
     sourceTokenChainId?: number;
     slippage?: number;
+    disableUrlParamManagement?: boolean;
 }
-export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrder, isDepositMode, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, slippage, }: UseAnyspendFlowProps): {
+export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrder, isDepositMode, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, slippage, disableUrlParamManagement, }: UseAnyspendFlowProps): {
     activePanel: PanelView;
     setActivePanel: import("react").Dispatch<import("react").SetStateAction<PanelView>>;
     orderId: string | undefined;
@@ -75,6 +76,8 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
     setSelectedRecipientAddress: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     recipientName: string | null | undefined;
     globalAddress: string | undefined;
+    hasEnoughBalance: boolean;
+    isBalanceLoading: boolean;
     anyspendQuote: {
         success: boolean;
         message: string;

package/package.json

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

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

@@ -115,6 +115,7 @@ function AnySpendDepositHypeInner({
     sourceTokenAddress,
     sourceTokenChainId,
     slippage: SLIPPAGE_PERCENT,
+    disableUrlParamManagement: true,
   });
 
   // Button state logic
@@ -434,8 +435,8 @@ function AnySpendDepositHypeInner({
               onBack={() => {
                 setOrderId(undefined);
                 setActivePanel(PanelView.MAIN);
-                onSuccess?.();
               }}
+              disableUrlParamManagement
             />
           </>
         )}

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

@@ -63,6 +63,7 @@ interface OrderDetailsProps {
   refundTxs: components["schemas"]["RefundTx"][] | null;
   cryptoPaymentMethod?: CryptoPaymentMethodType; // Now optional since we read from URL
   onBack?: () => void;
+  disableUrlParamManagement?: boolean; // When true, will not modify URL parameters
 }
 
 // Add this helper function near the top or just above the component
@@ -202,6 +203,7 @@ export const OrderDetails = memo(function OrderDetails({
   refundTxs,
   cryptoPaymentMethod,
   onBack,
+  disableUrlParamManagement = false,
 }: OrderDetailsProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -284,13 +286,15 @@ export const OrderDetails = memo(function OrderDetails({
 
   // When waitingForDeposit is true, we show a message to the user to wait for the deposit to be processed.
   const setWaitingForDeposit = useCallback(() => {
+    if (disableUrlParamManagement) return;
     const params = new URLSearchParams(searchParams.toString());
     params.set("waitingForDeposit", "true");
     router.push(`?${params}`);
-  }, [router, searchParams]);
+  }, [router, searchParams, disableUrlParamManagement]);
 
   // Clean up URL parameters before closing modal or navigating back
   const cleanupUrlParams = useCallback(() => {
+    if (disableUrlParamManagement) return;
     const params = new URLSearchParams(searchParams.toString());
     params.delete("waitingForDeposit");
     params.delete("orderId");
@@ -300,7 +304,7 @@ export const OrderDetails = memo(function OrderDetails({
     if (params.toString() !== searchParams.toString()) {
       router.push(`?${params}`);
     }
-  }, [router, searchParams]);
+  }, [router, searchParams, disableUrlParamManagement]);
 
   // Helper functions that clean up URL params before executing actions
   const handleCloseModal = useCallback(() => {

package/src/anyspend/react/hooks/useAnyspendFlow.ts

@@ -7,12 +7,19 @@ import {
   useGeoOnrampOptions,
 } from "@b3dotfun/sdk/anyspend/react";
 import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
-import { useAccountWallet, useProfile, useRouter, useSearchParamsSSR } from "@b3dotfun/sdk/global-account/react";
+import {
+  useAccountWallet,
+  useProfile,
+  useRouter,
+  useSearchParamsSSR,
+  useTokenBalance,
+} from "@b3dotfun/sdk/global-account/react";
 import { formatTokenAmount, formatUnits } from "@b3dotfun/sdk/shared/utils/number";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { parseUnits } from "viem";
 import { base, mainnet } from "viem/chains";
+import { useAccount } from "wagmi";
 import { components } from "../../types/api";
 import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
 import { FiatPaymentMethod } from "../components/common/FiatPaymentMethod";
@@ -36,6 +43,7 @@ interface UseAnyspendFlowProps {
   sourceTokenAddress?: string;
   sourceTokenChainId?: number;
   slippage?: number;
+  disableUrlParamManagement?: boolean;
 }
 
 export function useAnyspendFlow({
@@ -48,6 +56,7 @@ export function useAnyspendFlow({
   sourceTokenAddress,
   sourceTokenChainId,
   slippage = 0,
+  disableUrlParamManagement = false,
 }: UseAnyspendFlowProps) {
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
@@ -76,6 +85,7 @@ export function useAnyspendFlow({
 
   // Recipient state
   const { address: globalAddress } = useAccountWallet();
+  const { address: wagmiAddress } = useAccount();
   const [selectedRecipientAddress, setSelectedRecipientAddress] = useState<string | undefined>(recipientAddress);
   const recipientProfile = useProfile({ address: selectedRecipientAddress, fresh: true });
   const recipientName = recipientProfile.data?.name;
@@ -87,11 +97,33 @@ export function useAnyspendFlow({
     }
   }, [selectedRecipientAddress, globalAddress]);
 
+  // Check token balance for crypto payments
+  const { rawBalance, isLoading: isBalanceLoading } = useTokenBalance({
+    token: selectedSrcToken,
+    address: wagmiAddress,
+  });
+
+  // Check if user has enough balance
+  const hasEnoughBalance = useMemo(() => {
+    if (!rawBalance || isBalanceLoading || paymentType !== "crypto") return false;
+    try {
+      const requiredAmount = parseUnits(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals);
+      return rawBalance >= requiredAmount;
+    } catch {
+      return false;
+    }
+  }, [rawBalance, srcAmount, selectedSrcToken.decimals, isBalanceLoading, paymentType]);
+
+  // Auto-set crypto payment method based on balance
   useEffect(() => {
-    if (paymentType === "crypto") {
-      setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+    if (paymentType === "crypto" && !isBalanceLoading) {
+      if (hasEnoughBalance) {
+        setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+      } else {
+        setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
+      }
     }
-  }, [paymentType]);
+  }, [paymentType, hasEnoughBalance, isBalanceLoading]);
 
   // Fetch specific token when sourceTokenAddress and sourceTokenChainId are provided
   useEffect(() => {
@@ -159,14 +191,14 @@ export function useAnyspendFlow({
 
   // Update useEffect for URL parameter to not override loadOrder
   useEffect(() => {
-    if (loadOrder) return; // Skip if we have a loadOrder
+    if (loadOrder || disableUrlParamManagement) return; // Skip if we have a loadOrder or URL param management is disabled
 
     const orderIdParam = searchParams.get("orderId");
     if (orderIdParam) {
       setOrderId(orderIdParam);
       setActivePanel(PanelView.ORDER_DETAILS);
     }
-  }, [searchParams, loadOrder]);
+  }, [searchParams, loadOrder, disableUrlParamManagement]);
 
   // Order creation hooks
   const { createOrder, isCreatingOrder } = useAnyspendCreateOrder({
@@ -177,16 +209,18 @@ export function useAnyspendFlow({
       onOrderSuccess?.(newOrderId);
 
       // Add orderId and payment method to URL for persistence
-      const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
-      params.set("orderId", newOrderId);
-      if (selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
-        console.log("Setting cryptoPaymentMethod in URL:", selectedCryptoPaymentMethod);
-        params.set("cryptoPaymentMethod", selectedCryptoPaymentMethod);
-      } else {
-        console.log("Payment method is NONE, not setting in URL");
+      if (!disableUrlParamManagement) {
+        const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
+        params.set("orderId", newOrderId);
+        if (selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
+          console.log("Setting cryptoPaymentMethod in URL:", selectedCryptoPaymentMethod);
+          params.set("cryptoPaymentMethod", selectedCryptoPaymentMethod);
+        } else {
+          console.log("Payment method is NONE, not setting in URL");
+        }
+        console.log("Final URL params:", params.toString());
+        router.push(`${window.location.pathname}?${params.toString()}`);
       }
-      console.log("Final URL params:", params.toString());
-      router.push(`${window.location.pathname}?${params.toString()}`);
     },
     onError: error => {
       console.error(error);
@@ -245,6 +279,9 @@ export function useAnyspendFlow({
     setSelectedRecipientAddress,
     recipientName,
     globalAddress,
+    // Balance check
+    hasEnoughBalance,
+    isBalanceLoading,
     // Quote data
     anyspendQuote,
     isLoadingAnyspendQuote,