@b3dotfun/sdk 0.0.80 → 0.0.81-alpha.1

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

@@ -362,18 +362,18 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         isBalanceLoading,
     });
     // Get geo-based onramp options for fiat payments
-    const { geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support } = (0, react_1.useGeoOnrampOptions)(srcAmountOnRamp);
+    const { geoData, coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support } = (0, react_1.useGeoOnrampOptions)(srcAmountOnRamp);
     // Helper function to map payment method to onramp vendor
     const getOnrampVendor = (paymentMethod) => {
         switch (paymentMethod) {
             case FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY:
                 return "coinbase";
             case FiatPaymentMethod_1.FiatPaymentMethod.STRIPE:
-                // Determine if it's stripe onramp or stripe-web2 based on support
-                if (stripeWeb2Support?.isSupport) {
-                    return "stripe-web2";
-                }
-                return undefined;
+                // Stripe redirect flow (one-click URL)
+                return stripeOnrampSupport ? "stripe" : undefined;
+            case FiatPaymentMethod_1.FiatPaymentMethod.STRIPE_WEB2:
+                // Stripe embedded payment form
+                return stripeWeb2Support?.isSupport ? "stripe-web2" : undefined;
             default:
                 return undefined;
         }
@@ -518,7 +518,9 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     }, [activeTab, selectedSrcChainId, selectedDstChainId, selectedSrcToken.address, selectedDstToken.address]);
     // Determine button state and text
     const btnInfo = (0, react_4.useMemo)(() => {
-        if (activeInputAmountInWei === "0")
+        // For fiat tab, check srcAmountOnRamp; for crypto tab, check activeInputAmountInWei
+        const hasAmount = activeTab === "fiat" ? srcAmountOnRamp && parseFloat(srcAmountOnRamp) > 0 : activeInputAmountInWei !== "0";
+        if (!hasAmount)
             return { text: "Enter an amount", disable: true, error: false, loading: false };
         if (isSameChainSameToken)
             return { text: "Select a different token or chain", disable: true, error: false, loading: false };
@@ -569,6 +571,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         activeTab,
         effectiveCryptoPaymentMethod,
         selectedFiatPaymentMethod,
+        srcAmountOnRamp,
     ]);
     // Handle main button click
     const onMainButtonClick = async () => {
@@ -683,11 +686,21 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                 paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || ""; // Use first available payment method ID
             }
             else if (paymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE) {
-                if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
-                    react_2.toast.error("Stripe not available");
+                // Stripe redirect flow (one-click URL)
+                if (!stripeOnrampSupport) {
+                    react_2.toast.error("Credit/Debit Card not available");
+                    return;
+                }
+                vendor = "stripe";
+                paymentMethodString = "";
+            }
+            else if (paymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE_WEB2) {
+                // Stripe embedded payment form
+                if (!stripeWeb2Support.isSupport) {
+                    react_2.toast.error("Pay with Card not available");
                     return;
                 }
-                vendor = stripeWeb2Support && stripeWeb2Support.isSupport ? "stripe-web2" : "stripe";
+                vendor = "stripe-web2";
                 paymentMethodString = "";
             }
             else {

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

@@ -236,7 +236,11 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
             contractType: orderType === "mint_nft" ? metadata?.nftContract?.type : undefined,
             encodedData: encodedData,
             spenderAddress: spenderAddress,
-            onrampVendor: selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE ? "stripe-web2" : undefined,
+            onrampVendor: selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE
+                ? "stripe"
+                : selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE_WEB2
+                    ? "stripe-web2"
+                    : undefined,
         });
     }, [
         activeTab,
@@ -578,7 +582,13 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Select payment method" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)(react_4.motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: (() => {
+                                                        const config = FiatPaymentMethod_1.FIAT_PAYMENT_METHOD_DISPLAY[selectedFiatPaymentMethod];
+                                                        if (config) {
+                                                            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: config.icon }) }), config.label] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+                                                        }
+                                                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Select payment method" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+                                                    })() })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)(react_4.motion.div, { initial: false, animate: {
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
@@ -618,11 +628,17 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                 setSelectedCryptoPaymentMethod(method);
                 setActivePanel(PanelView.CONFIRM_ORDER);
             } }) }));
+    // Stable callback for fiat payment method selection
+    const handleFiatPaymentMethodSelect = (0, react_5.useCallback)((method) => {
+        setSelectedFiatPaymentMethod(method);
+        setActivePanel(PanelView.CONFIRM_ORDER);
+    }, []);
+    // Stable callback for navigating back to confirm order
+    const handleBackToConfirmOrder = (0, react_5.useCallback)(() => {
+        setActivePanel(PanelView.CONFIRM_ORDER);
+    }, []);
     // Fiat payment method view
-    const fiatPaymentMethodView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(FiatPaymentMethod_1.FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onSelectPaymentMethod: (method) => {
-                setSelectedFiatPaymentMethod(method);
-                setActivePanel(PanelView.CONFIRM_ORDER);
-            }, srcAmountOnRamp: srcFiatAmount }) }));
+    const fiatPaymentMethodView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(FiatPaymentMethod_1.FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: handleBackToConfirmOrder, onSelectPaymentMethod: handleFiatPaymentMethodSelect, srcAmountOnRamp: srcFiatAmount }) }));
     // Points detail view
     const pointsDetailView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(PointsDetailPanel_1.PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER) }) }));
     // Return the TransitionPanel with all views

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

@@ -4,6 +4,10 @@ export declare enum FiatPaymentMethod {
     STRIPE = "stripe",// Stripe redirect (one-click buy URL)
     STRIPE_WEB2 = "stripe_web2"
 }
+export declare const FIAT_PAYMENT_METHOD_DISPLAY: Record<FiatPaymentMethod, {
+    icon: string;
+    label: string;
+} | null>;
 interface FiatPaymentMethodProps {
     selectedPaymentMethod: FiatPaymentMethod;
     setSelectedPaymentMethod: (method: FiatPaymentMethod) => void;

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

@@ -1,7 +1,7 @@
 "use strict";
 "use client";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FiatPaymentMethod = void 0;
+exports.FIAT_PAYMENT_METHOD_DISPLAY = exports.FiatPaymentMethod = void 0;
 exports.FiatPaymentMethodComponent = FiatPaymentMethodComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../anyspend/react");
@@ -14,6 +14,13 @@ var FiatPaymentMethod;
     FiatPaymentMethod["STRIPE"] = "stripe";
     FiatPaymentMethod["STRIPE_WEB2"] = "stripe_web2";
 })(FiatPaymentMethod || (exports.FiatPaymentMethod = FiatPaymentMethod = {}));
+// Shared display config for fiat payment methods
+exports.FIAT_PAYMENT_METHOD_DISPLAY = {
+    [FiatPaymentMethod.COINBASE_PAY]: { icon: "C", label: "Coinbase Pay" },
+    [FiatPaymentMethod.STRIPE]: { icon: "S", label: "Pay via Stripe" },
+    [FiatPaymentMethod.STRIPE_WEB2]: { icon: "S", label: "Pay with Card" },
+    [FiatPaymentMethod.NONE]: null,
+};
 function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedPaymentMethod, onBack, onSelectPaymentMethod, srcAmountOnRamp, }) {
     // Load geo-based onramp options like in PanelOnramp
     const { coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = (0, react_1.useGeoOnrampOptions)(srcAmountOnRamp);
@@ -50,25 +57,25 @@ function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedPaymentM
             available: true,
         });
     }
-    // Add Stripe redirect (one-click) if available - primary option
+    // Add Stripe redirect (one-click) if available - redirects to Stripe checkout
     if (stripeOnrampSupport) {
         const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2); // Use same fee estimate
         availablePaymentMethods.push({
             id: FiatPaymentMethod.STRIPE,
-            name: "Credit/Debit Card",
-            description: "Pay via Stripe checkout",
+            name: "Pay via Stripe",
+            description: "Redirects to Stripe checkout",
             badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
             badgeColor: "bg-gray-100 text-gray-800",
             available: true,
         });
     }
-    // Add Stripe Web2 (embedded) if available - secondary option
+    // Add Stripe Web2 (embedded) if available - embedded card form
     if (stripeWeb2Support && stripeWeb2Support.isSupport) {
         const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2);
         availablePaymentMethods.push({
             id: FiatPaymentMethod.STRIPE_WEB2,
-            name: "Quick Pay",
-            description: "Credit or debit card",
+            name: "Pay with Card",
+            description: "Fast checkout",
             badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
             badgeColor: "bg-gray-100 text-gray-800",
             available: true,

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

@@ -78,7 +78,13 @@ function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMetho
     const handleQuickAmount = (value) => {
         setSrcAmountOnRamp(value);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex h-7 w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center text-sm font-bold", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: selectedPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Stripe"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center pb-2 pt-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto border-0 bg-transparent p-0 px-1 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex h-7 w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center text-sm font-bold", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: (() => {
+                                    const config = selectedPaymentMethod ? FiatPaymentMethod_1.FIAT_PAYMENT_METHOD_DISPLAY[selectedPaymentMethod] : null;
+                                    if (config) {
+                                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: config.icon }) }), config.label] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }));
+                                    }
+                                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }));
+                                })() })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center pb-2 pt-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto border-0 bg-transparent p-0 px-1 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
                                         width: `${Math.max(ONE_CHAR_WIDTH, srcAmountOnRamp.length * ONE_CHAR_WIDTH)}px`,
                                     } })] }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("mx-auto mb-6 flex justify-center gap-2", hideDstToken && "mb-0"), children: customUsdInputValues
                             .filter(v => !isNaN(Number(v)))

package/dist/cjs/global-account/react/components/SignInWithB3/SignInWithB3Flow.js

@@ -165,7 +165,7 @@ function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onE
             isOpen,
             source,
         });
-        if (isConnected && isAuthenticated) {
+        if (isConnected && isAuthenticated && user) {
             // Mark that login just completed BEFORE opening manage account or closing modal
             // This allows Turnkey modal to show (if enableTurnkey is true)
             if (closeAfterLogin) {

package/dist/cjs/global-account/react/hooks/useUserQuery.d.ts

@@ -2,7 +2,7 @@ import { Users } from "@b3dotfun/b3-api";
 /**
  * NOTE: THIS IS ONLY MEANT FOR INTERNAL USE, from useOnConnect
  *
- * Custom hook to manage user state with react-query
+ * Custom hook to manage user state with Zustand
  * This allows for invalidation and refetching of user data
  */
 export declare function useUserQuery(): {
@@ -59,7 +59,7 @@ export declare function useUserQuery(): {
         };
     } | undefined;
     setUser: (newUser?: Users) => void;
-    refetchUser: () => Promise<void>;
+    refetchUser: () => Promise<any>;
     clearUser: () => void;
     queryKey: string[];
 };

package/dist/cjs/global-account/react/hooks/useUserQuery.js

@@ -2,79 +2,100 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useUserQuery = useUserQuery;
 const debug_1 = require("../../../shared/utils/debug");
-const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+const zustand_1 = require("zustand");
+const middleware_1 = require("zustand/middleware");
 const debug = (0, debug_1.debugB3React)("useUserQuery");
 const USER_QUERY_KEY = ["b3-user"];
 /**
- * Retrieves the user from localStorage
+ * Zustand store for managing user state
+ * Persists user data to localStorage
  */
-function getUserFromStorage() {
-    if (typeof window === "undefined") {
-        return null;
-    }
-    try {
-        const storedUser = localStorage.getItem("b3-user");
-        return storedUser ? JSON.parse(storedUser) : null;
-    }
-    catch (error) {
-        console.warn("Failed to restore user from localStorage:", error);
-        return null;
-    }
-}
-/**
- * Saves user to localStorage
- */
-function saveUserToStorage(user) {
-    if (typeof window === "undefined") {
-        return;
-    }
-    if (user) {
-        localStorage.setItem("b3-user", JSON.stringify(user));
-    }
-    else {
-        localStorage.removeItem("b3-user");
-    }
-}
+const useUserStore = (0, zustand_1.create)()((0, middleware_1.persist)(set => ({
+    user: null,
+    setUser: (newUser) => {
+        const userToSave = newUser ?? null;
+        set({ user: userToSave });
+        debug("User updated", userToSave);
+    },
+    clearUser: () => {
+        set({ user: null });
+        debug("User cleared");
+    },
+}), {
+    name: "b3-user",
+    onRehydrateStorage: () => (_, error) => {
+        if (error) {
+            console.warn("Failed to rehydrate user store:", error);
+        }
+    },
+}));
 /**
  * NOTE: THIS IS ONLY MEANT FOR INTERNAL USE, from useOnConnect
  *
- * Custom hook to manage user state with react-query
+ * Custom hook to manage user state with Zustand
  * This allows for invalidation and refetching of user data
  */
 function useUserQuery() {
-    const queryClient = (0, react_query_1.useQueryClient)();
-    // Query to get user data (primarily from cache/localStorage)
-    const { data: user } = (0, react_query_1.useQuery)({
-        queryKey: USER_QUERY_KEY,
-        queryFn: getUserFromStorage,
-        staleTime: Infinity, // User data doesn't go stale automatically
-        gcTime: Infinity, // Keep in cache indefinitely
-        initialData: getUserFromStorage,
-    });
-    // Mutation to update user
-    const setUserMutation = (0, react_query_1.useMutation)({
-        mutationFn: async (newUser) => {
-            const userToSave = newUser ?? null;
-            saveUserToStorage(userToSave);
-            return userToSave;
-        },
-        onSuccess: data => {
-            queryClient.setQueryData(USER_QUERY_KEY, data);
-            debug("User updated", data);
-        },
-    });
+    const user = useUserStore(state => state.user);
+    const setUserStore = useUserStore(state => state.setUser);
+    const clearUserStore = useUserStore(state => state.clearUser);
+    // Listen for storage events from other tabs/windows
+    (0, react_1.useEffect)(() => {
+        const handleStorageChange = (e) => {
+            if (e.key === "b3-user") {
+                // Sync with changes from other tabs/windows
+                const stored = e.newValue;
+                if (stored) {
+                    try {
+                        const parsed = JSON.parse(stored);
+                        // Zustand persist format: { state: { user: ... }, version: ... }
+                        const userData = parsed?.state?.user ?? parsed?.user ?? null;
+                        useUserStore.setState({ user: userData });
+                    }
+                    catch (error) {
+                        console.warn("Failed to parse user from storage event:", error);
+                    }
+                }
+                else {
+                    useUserStore.setState({ user: null });
+                }
+            }
+        };
+        window.addEventListener("storage", handleStorageChange);
+        return () => {
+            window.removeEventListener("storage", handleStorageChange);
+        };
+    }, []);
     // Helper function to set user (maintains backward compatibility)
     const setUser = (newUser) => {
-        setUserMutation.mutate(newUser);
+        setUserStore(newUser);
     };
     // Helper function to invalidate and refetch user
     const refetchUser = async () => {
-        await queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
-        return queryClient.refetchQueries({ queryKey: USER_QUERY_KEY });
+        // Re-read from localStorage and update store
+        // Zustand persist stores data as { state: { user: ... }, version: ... }
+        const stored = localStorage.getItem("b3-user");
+        if (stored) {
+            try {
+                const parsed = JSON.parse(stored);
+                // Zustand persist format: { state: { user: ... }, version: ... }
+                const userData = parsed?.state?.user ?? parsed?.user ?? null;
+                useUserStore.setState({ user: userData });
+                return userData ?? undefined;
+            }
+            catch (error) {
+                console.warn("Failed to refetch user from localStorage:", error);
+                // Fallback to current store state
+                return useUserStore.getState().user ?? undefined;
+            }
+        }
+        useUserStore.setState({ user: null });
+        return undefined;
     };
     // Helper function to clear user
     const clearUser = () => {
-        setUser(undefined);
+        clearUserStore();
     };
     return {
         user: user ?? undefined,

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

@@ -355,18 +355,18 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         isBalanceLoading,
     });
     // Get geo-based onramp options for fiat payments
-    const { geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
+    const { geoData, coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
     // Helper function to map payment method to onramp vendor
     const getOnrampVendor = (paymentMethod) => {
         switch (paymentMethod) {
             case FiatPaymentMethod.COINBASE_PAY:
                 return "coinbase";
             case FiatPaymentMethod.STRIPE:
-                // Determine if it's stripe onramp or stripe-web2 based on support
-                if (stripeWeb2Support?.isSupport) {
-                    return "stripe-web2";
-                }
-                return undefined;
+                // Stripe redirect flow (one-click URL)
+                return stripeOnrampSupport ? "stripe" : undefined;
+            case FiatPaymentMethod.STRIPE_WEB2:
+                // Stripe embedded payment form
+                return stripeWeb2Support?.isSupport ? "stripe-web2" : undefined;
             default:
                 return undefined;
         }
@@ -511,7 +511,9 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     }, [activeTab, selectedSrcChainId, selectedDstChainId, selectedSrcToken.address, selectedDstToken.address]);
     // Determine button state and text
     const btnInfo = useMemo(() => {
-        if (activeInputAmountInWei === "0")
+        // For fiat tab, check srcAmountOnRamp; for crypto tab, check activeInputAmountInWei
+        const hasAmount = activeTab === "fiat" ? srcAmountOnRamp && parseFloat(srcAmountOnRamp) > 0 : activeInputAmountInWei !== "0";
+        if (!hasAmount)
             return { text: "Enter an amount", disable: true, error: false, loading: false };
         if (isSameChainSameToken)
             return { text: "Select a different token or chain", disable: true, error: false, loading: false };
@@ -562,6 +564,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         activeTab,
         effectiveCryptoPaymentMethod,
         selectedFiatPaymentMethod,
+        srcAmountOnRamp,
     ]);
     // Handle main button click
     const onMainButtonClick = async () => {
@@ -676,11 +679,21 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                 paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || ""; // Use first available payment method ID
             }
             else if (paymentMethod === FiatPaymentMethod.STRIPE) {
-                if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
-                    toast.error("Stripe not available");
+                // Stripe redirect flow (one-click URL)
+                if (!stripeOnrampSupport) {
+                    toast.error("Credit/Debit Card not available");
+                    return;
+                }
+                vendor = "stripe";
+                paymentMethodString = "";
+            }
+            else if (paymentMethod === FiatPaymentMethod.STRIPE_WEB2) {
+                // Stripe embedded payment form
+                if (!stripeWeb2Support.isSupport) {
+                    toast.error("Pay with Card not available");
                     return;
                 }
-                vendor = stripeWeb2Support && stripeWeb2Support.isSupport ? "stripe-web2" : "stripe";
+                vendor = "stripe-web2";
                 paymentMethodString = "";
             }
             else {

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

@@ -19,7 +19,7 @@ import { useRecipientAddressState } from "../hooks/useRecipientAddressState.js";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
 import { FeeBreakDown } from "./common/FeeBreakDown.js";
-import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
+import { FIAT_PAYMENT_METHOD_DISPLAY, FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
 import { OrderDetails } from "./common/OrderDetails.js";
 import { OrderHistory } from "./common/OrderHistory.js";
 import { OrderToken } from "./common/OrderToken.js";
@@ -197,7 +197,11 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
             contractType: orderType === "mint_nft" ? metadata?.nftContract?.type : undefined,
             encodedData: encodedData,
             spenderAddress: spenderAddress,
-            onrampVendor: selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? "stripe-web2" : undefined,
+            onrampVendor: selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE
+                ? "stripe"
+                : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE_WEB2
+                    ? "stripe-web2"
+                    : undefined,
         });
     }, [
         activeTab,
@@ -539,7 +543,13 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), _jsx("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [_jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [_jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Select payment method" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs(motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), _jsx("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: (() => {
+                                                        const config = FIAT_PAYMENT_METHOD_DISPLAY[selectedFiatPaymentMethod];
+                                                        if (config) {
+                                                            return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [_jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: config.icon }) }), config.label] }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+                                                        }
+                                                        return (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Select payment method" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+                                                    })() })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs(motion.div, { initial: false, animate: {
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
@@ -579,11 +589,17 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                 setSelectedCryptoPaymentMethod(method);
                 setActivePanel(PanelView.CONFIRM_ORDER);
             } }) }));
+    // Stable callback for fiat payment method selection
+    const handleFiatPaymentMethodSelect = useCallback((method) => {
+        setSelectedFiatPaymentMethod(method);
+        setActivePanel(PanelView.CONFIRM_ORDER);
+    }, []);
+    // Stable callback for navigating back to confirm order
+    const handleBackToConfirmOrder = useCallback(() => {
+        setActivePanel(PanelView.CONFIRM_ORDER);
+    }, []);
     // Fiat payment method view
-    const fiatPaymentMethodView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onSelectPaymentMethod: (method) => {
-                setSelectedFiatPaymentMethod(method);
-                setActivePanel(PanelView.CONFIRM_ORDER);
-            }, srcAmountOnRamp: srcFiatAmount }) }));
+    const fiatPaymentMethodView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: handleBackToConfirmOrder, onSelectPaymentMethod: handleFiatPaymentMethodSelect, srcAmountOnRamp: srcFiatAmount }) }));
     // Points detail view
     const pointsDetailView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER) }) }));
     // Return the TransitionPanel with all views

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

@@ -4,6 +4,10 @@ export declare enum FiatPaymentMethod {
     STRIPE = "stripe",// Stripe redirect (one-click buy URL)
     STRIPE_WEB2 = "stripe_web2"
 }
+export declare const FIAT_PAYMENT_METHOD_DISPLAY: Record<FiatPaymentMethod, {
+    icon: string;
+    label: string;
+} | null>;
 interface FiatPaymentMethodProps {
     selectedPaymentMethod: FiatPaymentMethod;
     setSelectedPaymentMethod: (method: FiatPaymentMethod) => void;

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

@@ -10,6 +10,13 @@ export var FiatPaymentMethod;
     FiatPaymentMethod["STRIPE"] = "stripe";
     FiatPaymentMethod["STRIPE_WEB2"] = "stripe_web2";
 })(FiatPaymentMethod || (FiatPaymentMethod = {}));
+// Shared display config for fiat payment methods
+export const FIAT_PAYMENT_METHOD_DISPLAY = {
+    [FiatPaymentMethod.COINBASE_PAY]: { icon: "C", label: "Coinbase Pay" },
+    [FiatPaymentMethod.STRIPE]: { icon: "S", label: "Pay via Stripe" },
+    [FiatPaymentMethod.STRIPE_WEB2]: { icon: "S", label: "Pay with Card" },
+    [FiatPaymentMethod.NONE]: null,
+};
 export function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedPaymentMethod, onBack, onSelectPaymentMethod, srcAmountOnRamp, }) {
     // Load geo-based onramp options like in PanelOnramp
     const { coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = useGeoOnrampOptions(srcAmountOnRamp);
@@ -46,25 +53,25 @@ export function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedP
             available: true,
         });
     }
-    // Add Stripe redirect (one-click) if available - primary option
+    // Add Stripe redirect (one-click) if available - redirects to Stripe checkout
     if (stripeOnrampSupport) {
         const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2); // Use same fee estimate
         availablePaymentMethods.push({
             id: FiatPaymentMethod.STRIPE,
-            name: "Credit/Debit Card",
-            description: "Pay via Stripe checkout",
+            name: "Pay via Stripe",
+            description: "Redirects to Stripe checkout",
             badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
             badgeColor: "bg-gray-100 text-gray-800",
             available: true,
         });
     }
-    // Add Stripe Web2 (embedded) if available - secondary option
+    // Add Stripe Web2 (embedded) if available - embedded card form
     if (stripeWeb2Support && stripeWeb2Support.isSupport) {
         const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2);
         availablePaymentMethods.push({
             id: FiatPaymentMethod.STRIPE_WEB2,
-            name: "Quick Pay",
-            description: "Credit or debit card",
+            name: "Pay with Card",
+            description: "Fast checkout",
             badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
             badgeColor: "bg-gray-100 text-gray-800",
             available: true,