@b3dotfun/sdk 0.0.80 → 0.0.81-alpha.1

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

@@ -6,7 +6,7 @@ import { cn, formatUsername } from "../../../../shared/utils/index.js";
 import { formatAddress } from "../../../../shared/utils/formatAddress.js";
 import { ChevronRight, Info, Wallet } from "lucide-react";
 import { useRef } from "react";
-import { FiatPaymentMethod } from "./FiatPaymentMethod.js";
+import { FIAT_PAYMENT_METHOD_DISPLAY, FiatPaymentMethod } from "./FiatPaymentMethod.js";
 import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat.js";
 import { PointsBadge } from "./PointsBadge.js";
 const ONE_CHAR_WIDTH = 30;
@@ -75,7 +75,13 @@ export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPayme
     const handleQuickAmount = (value) => {
         setSrcAmountOnRamp(value);
     };
-    return (_jsxs("div", { className: "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [_jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [_jsxs("div", { className: "flex h-7 w-full items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm font-bold", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: selectedPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 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" })] })) : selectedPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Stripe"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx("div", { className: "flex items-center justify-center pb-2 pt-8", children: _jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), _jsx(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 (_jsxs("div", { className: "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [_jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [_jsxs("div", { className: "flex h-7 w-full items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm font-bold", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: (() => {
+                                    const config = selectedPaymentMethod ? FIAT_PAYMENT_METHOD_DISPLAY[selectedPaymentMethod] : null;
+                                    if (config) {
+                                        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 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" })] }));
+                                    }
+                                    return (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] }));
+                                })() })] }), _jsx("div", { className: "flex items-center justify-center pb-2 pt-8", children: _jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), _jsx(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`,
                                     } })] }) }), _jsx("div", { className: cn("mx-auto mb-6 flex justify-center gap-2", hideDstToken && "mb-0"), children: customUsdInputValues
                             .filter(v => !isNaN(Number(v)))

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

@@ -162,7 +162,7 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
             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/esm/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/esm/global-account/react/hooks/useUserQuery.js

@@ -1,77 +1,98 @@
 import { debugB3React } from "../../../shared/utils/debug.js";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect } from "react";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
 const debug = 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 = create()(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
  */
 export function useUserQuery() {
-    const queryClient = useQueryClient();
-    // Query to get user data (primarily from cache/localStorage)
-    const { data: user } = 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 = 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
+    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/types/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/types/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/package.json

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

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

@@ -510,7 +510,8 @@ function AnySpendInner({
   });
 
   // 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: FiatPaymentMethod): "coinbase" | "stripe" | "stripe-web2" | undefined => {
@@ -518,11 +519,11 @@ function AnySpendInner({
       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;
     }
@@ -683,7 +684,10 @@ function AnySpendInner({
 
   // Determine button state and text
   const btnInfo: { text: string; disable: boolean; error: boolean; loading: boolean } = useMemo(() => {
-    if (activeInputAmountInWei === "0") return { text: "Enter an amount", disable: true, error: false, loading: false };
+    // 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 };
     if (isLoadingAnyspendQuote) return { text: "Loading quote...", disable: true, error: false, loading: true };
@@ -739,6 +743,7 @@ function AnySpendInner({
     activeTab,
     effectiveCryptoPaymentMethod,
     selectedFiatPaymentMethod,
+    srcAmountOnRamp,
   ]);
 
   // Handle main button click
@@ -870,11 +875,20 @@ function AnySpendInner({
         vendor = "coinbase";
         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 {
         toast.error("Please select a payment method");

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

@@ -50,7 +50,7 @@ import { useRecipientAddressState } from "../hooks/useRecipientAddressState";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
 import { FeeBreakDown } from "./common/FeeBreakDown";
-import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
+import { FIAT_PAYMENT_METHOD_DISPLAY, FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
 import { OrderDetails } from "./common/OrderDetails";
 import { OrderHistory } from "./common/OrderHistory";
 import { OrderToken } from "./common/OrderToken";
@@ -355,7 +355,12 @@ function AnySpendCustomInner({
       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,
@@ -1127,32 +1132,28 @@ function AnySpendCustomInner({
                   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)}
                 >
-                  {selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (
-                    <>
-                      <div className="flex items-center gap-2 whitespace-nowrap">
-                        <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600">
-                          <span className="text-xs font-bold text-white">C</span>
-                        </div>
-                        Coinbase Pay
-                      </div>
-                      <ChevronRight className="h-4 w-4 shrink-0" />
-                    </>
-                  ) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (
-                    <>
-                      <div className="flex items-center gap-2 whitespace-nowrap">
-                        <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600">
-                          <span className="text-xs font-bold text-white">S</span>
-                        </div>
-                        Credit/Debit Card
-                      </div>
-                      <ChevronRight className="h-4 w-4 shrink-0" />
-                    </>
-                  ) : (
-                    <>
-                      <span className="whitespace-nowrap">Select payment method</span>
-                      <ChevronRight className="h-4 w-4 shrink-0" />
-                    </>
-                  )}
+                  {(() => {
+                    const config = FIAT_PAYMENT_METHOD_DISPLAY[selectedFiatPaymentMethod];
+                    if (config) {
+                      return (
+                        <>
+                          <div className="flex items-center gap-2 whitespace-nowrap">
+                            <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600">
+                              <span className="text-xs font-bold text-white">{config.icon}</span>
+                            </div>
+                            {config.label}
+                          </div>
+                          <ChevronRight className="h-4 w-4 shrink-0" />
+                        </>
+                      );
+                    }
+                    return (
+                      <>
+                        <span className="whitespace-nowrap">Select payment method</span>
+                        <ChevronRight className="h-4 w-4 shrink-0" />
+                      </>
+                    );
+                  })()}
                 </button>
               </motion.div>
 
@@ -1318,17 +1319,25 @@ function AnySpendCustomInner({
     </div>
   );
 
+  // Stable callback for fiat payment method selection
+  const handleFiatPaymentMethodSelect = useCallback((method: FiatPaymentMethod) => {
+    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 = (
     <div className={cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4")}>
       <FiatPaymentMethodComponent
         selectedPaymentMethod={selectedFiatPaymentMethod}
         setSelectedPaymentMethod={setSelectedFiatPaymentMethod}
-        onBack={() => setActivePanel(PanelView.CONFIRM_ORDER)}
-        onSelectPaymentMethod={(method: FiatPaymentMethod) => {
-          setSelectedFiatPaymentMethod(method);
-          setActivePanel(PanelView.CONFIRM_ORDER);
-        }}
+        onBack={handleBackToConfirmOrder}
+        onSelectPaymentMethod={handleFiatPaymentMethodSelect}
         srcAmountOnRamp={srcFiatAmount}
       />
     </div>

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

@@ -11,6 +11,14 @@ export enum FiatPaymentMethod {
   STRIPE_WEB2 = "stripe_web2", // Stripe embedded payment
 }
 
+// Shared display config for fiat payment methods
+export const FIAT_PAYMENT_METHOD_DISPLAY: Record<FiatPaymentMethod, { icon: string; label: string } | null> = {
+  [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,
+};
+
 interface FiatPaymentMethodProps {
   selectedPaymentMethod: FiatPaymentMethod;
   setSelectedPaymentMethod: (method: FiatPaymentMethod) => void;
@@ -70,26 +78,26 @@ export function FiatPaymentMethodComponent({
     });
   }
 
-  // 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/src/anyspend/react/components/common/PanelOnramp.tsx

@@ -8,7 +8,7 @@ import { formatAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { ChevronRight, Info, Wallet } from "lucide-react";
 import { useRef } from "react";
 
-import { FiatPaymentMethod } from "./FiatPaymentMethod";
+import { FIAT_PAYMENT_METHOD_DISPLAY, FiatPaymentMethod } from "./FiatPaymentMethod";
 import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat";
 import { PointsBadge } from "./PointsBadge";
 
@@ -141,32 +141,28 @@ export function PanelOnramp({
             className="text-as-tertiarry flex h-7 items-center gap-1 text-sm"
             onClick={() => setActivePanel(fiatPaymentMethodIndex)} // PanelView.FIAT_PAYMENT_METHOD
           >
-            {selectedPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (
-              <>
-                <div className="flex items-center gap-2">
-                  <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
-                    <span className="text-xs font-bold text-white">C</span>
-                  </div>
-                  Coinbase Pay
-                </div>
-                <ChevronRight className="h-4 w-4" />
-              </>
-            ) : selectedPaymentMethod === FiatPaymentMethod.STRIPE ? (
-              <>
-                <div className="flex items-center gap-2">
-                  <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
-                    <span className="text-xs font-bold text-white">S</span>
-                  </div>
-                  Stripe
-                </div>
-                <ChevronRight className="h-4 w-4" />
-              </>
-            ) : (
-              <>
-                Select payment method
-                <ChevronRight className="h-4 w-4" />
-              </>
-            )}
+            {(() => {
+              const config = selectedPaymentMethod ? FIAT_PAYMENT_METHOD_DISPLAY[selectedPaymentMethod] : null;
+              if (config) {
+                return (
+                  <>
+                    <div className="flex items-center gap-2">
+                      <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
+                        <span className="text-xs font-bold text-white">{config.icon}</span>
+                      </div>
+                      {config.label}
+                    </div>
+                    <ChevronRight className="h-4 w-4" />
+                  </>
+                );
+              }
+              return (
+                <>
+                  Select payment method
+                  <ChevronRight className="h-4 w-4" />
+                </>
+              );
+            })()}
           </button>
         </div>
 

package/src/global-account/react/components/SignInWithB3/SignInWithB3Flow.tsx

@@ -198,7 +198,7 @@ export function SignInWithB3Flow({
       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) {