@b3dotfun/sdk 0.1.69-test.0 → 0.1.70-alpha.1

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

@@ -30,6 +30,7 @@ export function AnySpendStakeUpside({
   slots,
   content,
   theme,
+  showFiatOption = true,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -44,6 +45,8 @@ export function AnySpendStakeUpside({
   slots?: AnySpendSlots;
   content?: AnySpendContent;
   theme?: AnySpendTheme;
+  /** Whether to show the "Pay with fiat" tab. Defaults to true. */
+  showFiatOption?: boolean;
 }) {
   const header = () => (
     <>
@@ -90,6 +93,7 @@ export function AnySpendStakeUpside({
       onSuccess={onSuccess}
       showRecipient={true}
       activeTab={activeTab}
+      showFiatOption={showFiatOption}
       senderAddress={senderAddress}
       slots={slots}
       content={content}

package/src/anyspend/react/components/checkout/AnySpendCheckout.tsx

@@ -295,10 +295,14 @@ export function AnySpendCheckout({
     variablePricingAmount,
   ]);
 
-  // Get destination token metadata
-  const { data: tokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
-  const tokenSymbol = tokenData?.symbol || "";
-  const tokenDecimals = tokenData?.decimals || 18;
+  // Get destination token metadata. While loading, skip price-dependent UI
+  // since the 18-decimal fallback is wrong for non-18 tokens (e.g. USDC).
+  const { data: tokenData, isLoading: isTokenDataLoading } = useTokenData(
+    destinationTokenChainId,
+    destinationTokenAddress,
+  );
+  const tokenSymbol = tokenData?.symbol ?? "";
+  const tokenDecimals = tokenData?.decimals ?? 18;
 
   // Resolve USD equivalent for non-stablecoin tokens (shown in cart summary)
   const isStablecoin = useMemo(() => {
@@ -412,6 +416,7 @@ export function AnySpendCheckout({
                     validateDiscount={validateDiscount}
                     tokenSymbol={tokenSymbol}
                     tokenDecimals={tokenDecimals}
+                    pricesLoading={isTokenDataLoading}
                     classes={classes}
                     formData={formData}
                     onFormDataChange={handleFormDataChange}
@@ -456,6 +461,7 @@ export function AnySpendCheckout({
               totalAmount={computedTotal}
               tokenSymbol={tokenSymbol}
               tokenDecimals={tokenDecimals}
+              pricesLoading={isTokenDataLoading}
               organizationName={organizationName}
               organizationLogo={organizationLogo}
               classes={classes}

package/src/anyspend/react/components/checkout/CartItemRow.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import type { ReactNode } from "react";
 import type { CheckoutItem, AnySpendCheckoutClasses } from "./AnySpendCheckout";
 
 interface CartItemRowProps {
   item: CheckoutItem;
-  formattedPrice: string;
+  formattedPrice: ReactNode;
   classes?: AnySpendCheckoutClasses;
 }
 

package/src/anyspend/react/components/checkout/CartSummary.tsx

@@ -2,13 +2,12 @@
 
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { formatTokenAmount, safeBigInt } from "@b3dotfun/sdk/shared/utils/number";
-import { useMemo } from "react";
-import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
-import type { CheckoutSummaryLine } from "./AnySpendCheckout";
+import { useMemo, type ReactNode } from "react";
+import type { AnySpendCheckoutClasses, CheckoutSummaryLine } from "./AnySpendCheckout";
 
 interface CartSummaryProps {
   /** Formatted total (final amount after all adjustments) */
-  total: string;
+  total: ReactNode;
   tokenSymbol?: string;
   classes?: AnySpendCheckoutClasses;
   /** Formatted subtotal (sum of items only — shown when adjustments exist) */
@@ -20,6 +19,8 @@ interface CartSummaryProps {
   summaryLines?: CheckoutSummaryLine[];
   /** Formatted USD equivalent (e.g. "$5.56") — shown for non-stablecoin tokens */
   usdEquivalent?: string | null;
+  /** When true, hide adjustment rows and USD equivalent (caller passes a skeleton as `total`). */
+  pricesLoading?: boolean;
 }
 
 export function CartSummary({
@@ -33,35 +34,38 @@ export function CartSummary({
   discount,
   summaryLines,
   usdEquivalent,
+  pricesLoading = false,
 }: CartSummaryProps) {
-  const hasAdjustments =
-    !!shipping?.amount || !!tax?.amount || !!discount?.amount || (summaryLines && summaryLines.length > 0);
-
   const formattedShipping = useMemo(
-    () => (shipping?.amount ? formatTokenAmount(safeBigInt(shipping.amount), tokenDecimals) : null),
-    [shipping?.amount, tokenDecimals],
+    () => (!pricesLoading && shipping?.amount ? formatTokenAmount(safeBigInt(shipping.amount), tokenDecimals) : null),
+    [pricesLoading, shipping?.amount, tokenDecimals],
   );
 
   const formattedTax = useMemo(
-    () => (tax?.amount ? formatTokenAmount(safeBigInt(tax.amount), tokenDecimals) : null),
-    [tax?.amount, tokenDecimals],
+    () => (!pricesLoading && tax?.amount ? formatTokenAmount(safeBigInt(tax.amount), tokenDecimals) : null),
+    [pricesLoading, tax?.amount, tokenDecimals],
   );
 
   const formattedDiscount = useMemo(
-    () => (discount?.amount ? formatTokenAmount(safeBigInt(discount.amount), tokenDecimals) : null),
-    [discount?.amount, tokenDecimals],
+    () => (!pricesLoading && discount?.amount ? formatTokenAmount(safeBigInt(discount.amount), tokenDecimals) : null),
+    [pricesLoading, discount?.amount, tokenDecimals],
   );
 
   const formattedSummaryLines = useMemo(
     () =>
-      summaryLines?.map(line => ({
-        ...line,
-        formattedAmount: formatTokenAmount(safeBigInt(line.amount), tokenDecimals),
-        isNegative: safeBigInt(line.amount) < BigInt(0),
-      })),
-    [summaryLines, tokenDecimals],
+      pricesLoading
+        ? undefined
+        : summaryLines?.map(line => ({
+            ...line,
+            formattedAmount: formatTokenAmount(safeBigInt(line.amount), tokenDecimals),
+            isNegative: safeBigInt(line.amount) < BigInt(0),
+          })),
+    [pricesLoading, summaryLines, tokenDecimals],
   );
 
+  const hasAdjustments =
+    !!formattedShipping || !!formattedTax || !!formattedDiscount || !!formattedSummaryLines?.length;
+
   return (
     <div className={cn("border-t border-gray-200 pt-3 dark:border-neutral-700", classes?.cartSummary)}>
       {/* Subtotal — only shown when adjustments exist */}
@@ -147,7 +151,7 @@ export function CartSummary({
             {total} {tokenSymbol}
           </span>
         </div>
-        {usdEquivalent && (
+        {!pricesLoading && usdEquivalent && (
           <div className="flex justify-end">
             <span className="text-xs text-gray-400 dark:text-gray-500">~{usdEquivalent} USD</span>
           </div>

package/src/anyspend/react/components/checkout/CheckoutCartPanel.tsx

@@ -7,12 +7,15 @@ import type { CheckoutItem, CheckoutSummaryLine, AnySpendCheckoutClasses } from
 import { CartItemRow } from "./CartItemRow";
 import { CartSummary } from "./CartSummary";
 import { PoweredByBranding } from "./PoweredByBranding";
+import { PriceSkeleton } from "./PriceSkeleton";
 
 interface CheckoutCartPanelProps {
   items: CheckoutItem[];
   totalAmount: string;
   tokenSymbol?: string;
   tokenDecimals?: number;
+  /** True while token decimals/symbol are still loading — prevents rendering mis-decimalized prices. */
+  pricesLoading?: boolean;
   organizationName?: string;
   organizationLogo?: string;
   classes?: AnySpendCheckoutClasses;
@@ -31,6 +34,7 @@ export function CheckoutCartPanel({
   totalAmount,
   tokenSymbol = "",
   tokenDecimals = 18,
+  pricesLoading = false,
   organizationName,
   organizationLogo,
   classes,
@@ -56,7 +60,7 @@ export function CheckoutCartPanel({
   }, [items, tokenDecimals]);
 
   return (
-    <div className={cn("anyspend-cart-panel flex flex-col", classes?.cartPanel)}>
+    <div className={cn("anyspend-cart-panel flex flex-col", classes?.cartPanel)} aria-busy={pricesLoading || undefined}>
       <h2
         className={cn(
           "anyspend-cart-title mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100",
@@ -69,14 +73,18 @@ export function CheckoutCartPanel({
       <div className="anyspend-cart-items divide-y divide-gray-100 dark:divide-gray-800">
         {items.map((item, index) => {
           const itemTotal = safeBigInt(item.amount) * BigInt(item.quantity);
-          const formattedPrice = `${formatTokenAmount(itemTotal, tokenDecimals)} ${tokenSymbol}`;
+          const formattedPrice: ReactNode = pricesLoading ? (
+            <PriceSkeleton />
+          ) : (
+            `${formatTokenAmount(itemTotal, tokenDecimals)} ${tokenSymbol}`
+          );
 
           return <CartItemRow key={item.id || index} item={item} formattedPrice={formattedPrice} classes={classes} />;
         })}
       </div>
 
       <CartSummary
-        total={formattedTotal}
+        total={pricesLoading ? <PriceSkeleton className="w-20" /> : formattedTotal}
         tokenSymbol={tokenSymbol}
         classes={classes}
         subtotal={formattedSubtotal}
@@ -86,6 +94,7 @@ export function CheckoutCartPanel({
         discount={discount}
         summaryLines={summaryLines}
         usdEquivalent={usdEquivalent}
+        pricesLoading={pricesLoading}
       />
 
       {footer === undefined ? (

package/src/anyspend/react/components/checkout/CheckoutFormPanel.tsx

@@ -31,6 +31,8 @@ interface CheckoutFormPanelProps {
   /** Token info for display */
   tokenSymbol?: string;
   tokenDecimals?: number;
+  /** True while token decimals/symbol are still loading — prevents rendering mis-decimalized prices. */
+  pricesLoading?: boolean;
   /** CSS class overrides */
   classes?: AnySpendCheckoutClasses;
   /** Current form data (lifted state) */
@@ -62,6 +64,7 @@ export function CheckoutFormPanel({
   validateDiscount,
   tokenSymbol,
   tokenDecimals,
+  pricesLoading = false,
   classes,
   formData,
   onFormDataChange,
@@ -144,6 +147,7 @@ export function CheckoutFormPanel({
           onSelect={onShippingChange}
           tokenSymbol={tokenSymbol}
           tokenDecimals={tokenDecimals}
+          pricesLoading={pricesLoading}
         />
       )}
       {enableDiscountCode && validateDiscount && (
@@ -153,6 +157,7 @@ export function CheckoutFormPanel({
           onRemove={onDiscountRemoved}
           tokenSymbol={tokenSymbol}
           tokenDecimals={tokenDecimals}
+          pricesLoading={pricesLoading}
         />
       )}
     </>

package/src/anyspend/react/components/checkout/DiscountCodeInput.tsx

@@ -5,6 +5,7 @@ import { formatTokenAmount, safeBigInt } from "@b3dotfun/sdk/shared/utils/number
 import { X, Loader2, Check } from "lucide-react";
 import { useState, useCallback } from "react";
 import type { DiscountResult } from "../../../types/forms";
+import { PriceSkeleton } from "./PriceSkeleton";
 
 interface DiscountCodeInputProps {
   onApply: (code: string) => Promise<DiscountResult>;
@@ -13,6 +14,8 @@ interface DiscountCodeInputProps {
   loading?: boolean;
   tokenSymbol?: string;
   tokenDecimals?: number;
+  /** True while token decimals/symbol are still loading — renders applied amount as skeleton. */
+  pricesLoading?: boolean;
   className?: string;
 }
 
@@ -29,6 +32,7 @@ export function DiscountCodeInput({
   loading = false,
   tokenSymbol = "",
   tokenDecimals = 6,
+  pricesLoading = false,
   className,
 }: DiscountCodeInputProps) {
   const [code, setCode] = useState("");
@@ -67,11 +71,17 @@ export function DiscountCodeInput({
           <div className="flex items-center gap-2">
             <Check className="h-4 w-4 text-green-600 dark:text-green-400" />
             <span className="anyspend-discount-value text-sm font-medium text-green-700 dark:text-green-300">
-              {appliedDiscount.discount_type === "percentage"
-                ? `${appliedDiscount.discount_value}% off`
-                : appliedDiscount.discount_amount
-                  ? `-${formatAmount(appliedDiscount.discount_amount, tokenDecimals, tokenSymbol)}`
-                  : "Discount applied"}
+              {appliedDiscount.discount_type === "percentage" ? (
+                `${appliedDiscount.discount_value}% off`
+              ) : appliedDiscount.discount_amount ? (
+                pricesLoading ? (
+                  <PriceSkeleton />
+                ) : (
+                  `-${formatAmount(appliedDiscount.discount_amount, tokenDecimals, tokenSymbol)}`
+                )
+              ) : (
+                "Discount applied"
+              )}
             </span>
           </div>
           <button

package/src/anyspend/react/components/checkout/PriceSkeleton.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+
+interface PriceSkeletonProps {
+  className?: string;
+}
+
+export function PriceSkeleton({ className }: PriceSkeletonProps) {
+  return (
+    <span
+      className={cn(
+        "animate-pulse-fade bg-b3-react-background inline-block h-4 w-16 rounded-md align-middle",
+        className,
+      )}
+      aria-hidden="true"
+    />
+  );
+}

package/src/anyspend/react/components/checkout/ShippingSelector.tsx

@@ -3,6 +3,7 @@
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { formatTokenAmount, safeBigInt } from "@b3dotfun/sdk/shared/utils/number";
 import type { ShippingOption } from "../../../types/forms";
+import { PriceSkeleton } from "./PriceSkeleton";
 
 interface ShippingSelectorProps {
   options: ShippingOption[];
@@ -10,6 +11,8 @@ interface ShippingSelectorProps {
   onSelect: (option: ShippingOption) => void;
   tokenSymbol?: string;
   tokenDecimals?: number;
+  /** True while token decimals/symbol are still loading — renders price as skeleton. */
+  pricesLoading?: boolean;
   className?: string;
 }
 
@@ -25,6 +28,7 @@ export function ShippingSelector({
   onSelect,
   tokenSymbol = "",
   tokenDecimals = 6,
+  pricesLoading = false,
   className,
 }: ShippingSelectorProps) {
   if (options.length === 0) return null;
@@ -63,7 +67,7 @@ export function ShippingSelector({
               </div>
             </div>
             <div className="anyspend-shipping-option-price text-sm font-medium text-gray-900 dark:text-gray-100">
-              {formatAmount(option.amount, tokenDecimals, tokenSymbol)}
+              {pricesLoading ? <PriceSkeleton /> : formatAmount(option.amount, tokenDecimals, tokenSymbol)}
             </div>
           </label>
         ))}

package/src/global-account/react/components/AvatarEditor/AvatarEditor.tsx

@@ -62,6 +62,8 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
   const contentType = useModalStore(state => state.contentType);
 
+  const { authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
   const account = useActiveAccount();
   const { data: profile, refetch: refreshProfile } = useProfile({
     address: account?.address,
@@ -162,7 +164,7 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
   };
 
   const handleSaveChanges = async () => {
-    if (!account?.address) {
+    if (!isBetterAuth && !account?.address) {
       toast.error("No account connected");
       return;
     }

package/src/global-account/react/components/B3Provider/B3ConfigProvider.tsx

@@ -28,6 +28,8 @@ export interface B3ConfigContextType {
   stripePublishableKey?: string;
   createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
   authStrategy: AuthStrategy;
+  /** Override the API base URL for all auth operations (Better Auth client, Feathers JWT exchange). */
+  apiUrl?: string;
 }
 
 const B3ConfigContext = createContext<B3ConfigContextType | null>(null);
@@ -44,6 +46,7 @@ export function B3ConfigProvider({
   stripePublishableKey,
   createClientReferenceId,
   authStrategy = "thirdweb",
+  apiUrl,
 }: {
   children: React.ReactNode;
   accountOverride?: Account;
@@ -56,6 +59,8 @@ export function B3ConfigProvider({
   stripePublishableKey?: string;
   createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
   authStrategy?: AuthStrategy;
+  /** Override the API base URL for all auth operations (Better Auth client, Feathers JWT exchange). */
+  apiUrl?: string;
 }) {
   return (
     <B3ConfigContext.Provider
@@ -70,6 +75,7 @@ export function B3ConfigProvider({
         stripePublishableKey,
         createClientReferenceId,
         authStrategy,
+        apiUrl,
       }}
     >
       {children}

package/src/global-account/react/components/B3Provider/B3Provider.tsx

@@ -16,6 +16,7 @@ import { StyleRoot } from "../StyleRoot";
 import { setToastContext, ToastProvider, useToastContext } from "../Toast/index";
 import AuthenticationProvider from "./AuthenticationProvider";
 import { B3ConfigProvider } from "./B3ConfigProvider";
+import { BetterAuthClientProvider } from "./BetterAuthClientProvider";
 import BetterAuthProvider from "./BetterAuthProvider";
 import { LocalSDKProvider } from "./LocalSDKProvider";
 
@@ -45,6 +46,7 @@ export function B3Provider({
   disableBSMNTAuthentication = false,
   queryClient,
   authStrategy = "thirdweb",
+  apiUrl,
 }: {
   theme: "light" | "dark";
   children: React.ReactNode;
@@ -74,6 +76,22 @@ export function B3Provider({
   queryClient?: QueryClient;
   /** Auth strategy: "thirdweb" (default, ecosystem wallet) or "better-auth" (email/password via Better Auth) */
   authStrategy?: AuthStrategy;
+  /**
+   * Override the API base URL for Better Auth operations.
+   *
+   * When set, the Better Auth client (signIn, signUp, signOut, getSession) will
+   * target this URL instead of the default `B3_API_URL` / `NEXT_PUBLIC_B3_API`.
+   *
+   * Useful for local development where the frontend runs on localhost:3003 and
+   * the b3-api runs on localhost:3031 — keeps the entire OAuth flow local so
+   * sessions, cookies, and token exchange all hit the same server.
+   *
+   * @example
+   * ```tsx
+   * <B3Provider apiUrl="http://localhost:3031" ... />
+   * ```
+   */
+  apiUrl?: string;
 }) {
   // Initialize Google Analytics on mount
   useEffect(() => {
@@ -110,22 +128,25 @@ export function B3Provider({
               createClientReferenceId={createClientReferenceId}
               defaultPermissions={defaultPermissions}
               authStrategy={authStrategy}
+              apiUrl={apiUrl}
             >
-              <ToastContextConnector />
-              <RelayKitProviderWrapper simDuneApiKey={simDuneApiKey}>
-                {children}
-                {/* For the modal https://github.com/b3-fun/b3/blob/main/packages/sdk/src/global-account/react/components/ui/dialog.tsx#L46 */}
-                <StyleRoot id="b3-root" />
-              </RelayKitProviderWrapper>
-              {authStrategy === "better-auth" ? (
-                <BetterAuthProvider partnerId={partnerId} />
-              ) : (
-                <AuthenticationProvider
-                  partnerId={partnerId}
-                  automaticallySetFirstEoa={!!automaticallySetFirstEoa}
-                  defaultEoaProvider={defaultEoaProvider}
-                />
-              )}
+              <BetterAuthClientProvider apiUrl={apiUrl}>
+                <ToastContextConnector />
+                <RelayKitProviderWrapper simDuneApiKey={simDuneApiKey}>
+                  {children}
+                  {/* For the modal https://github.com/b3-fun/b3/blob/main/packages/sdk/src/global-account/react/components/ui/dialog.tsx#L46 */}
+                  <StyleRoot id="b3-root" />
+                </RelayKitProviderWrapper>
+                {authStrategy === "better-auth" ? (
+                  <BetterAuthProvider partnerId={partnerId} />
+                ) : (
+                  <AuthenticationProvider
+                    partnerId={partnerId}
+                    automaticallySetFirstEoa={!!automaticallySetFirstEoa}
+                    defaultEoaProvider={defaultEoaProvider}
+                  />
+                )}
+              </BetterAuthClientProvider>
             </B3ConfigProvider>
           </LocalSDKProvider>
         </ToastProvider>

package/src/global-account/react/components/B3Provider/BetterAuthClientProvider.tsx

@@ -0,0 +1,40 @@
+import { createContext, useContext, useMemo } from "react";
+import {
+  betterAuthClient,
+  createB3BetterAuthClient,
+  type B3BetterAuthClient,
+} from "../../../better-auth-client";
+
+const BetterAuthClientContext = createContext<B3BetterAuthClient>(betterAuthClient);
+
+/**
+ * Provides a Better Auth client instance to the subtree.
+ *
+ * When `apiUrl` is supplied, a custom client targeting that URL is created
+ * (e.g. `http://localhost:3031` for local development). Otherwise, the
+ * default singleton (which uses `B3_API_URL` / `NEXT_PUBLIC_B3_API`) is used.
+ */
+export function BetterAuthClientProvider({
+  children,
+  apiUrl,
+}: {
+  children: React.ReactNode;
+  apiUrl?: string;
+}) {
+  const client = useMemo(() => {
+    if (apiUrl) {
+      return createB3BetterAuthClient(apiUrl);
+    }
+    return betterAuthClient;
+  }, [apiUrl]);
+
+  return <BetterAuthClientContext.Provider value={client}>{children}</BetterAuthClientContext.Provider>;
+}
+
+/**
+ * Returns the Better Auth client from the nearest `BetterAuthClientProvider`.
+ * Falls back to the default singleton if no provider is present.
+ */
+export function useBetterAuthClient(): B3BetterAuthClient {
+  return useContext(BetterAuthClientContext);
+}

package/src/global-account/react/components/B3Provider/BetterAuthProvider.tsx

@@ -4,8 +4,8 @@ import { B3_AUTH_COOKIE_NAME } from "@b3dotfun/sdk/shared/constants";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import Cookies from "js-cookie";
 import { useEffect, useRef } from "react";
-import { betterAuthClient } from "../../../better-auth-client";
 import { useUserQuery } from "../../hooks/useUserQuery";
+import { useBetterAuthClient } from "./BetterAuthClientProvider";
 
 const debug = debugB3React("BetterAuthProvider");
 
@@ -22,6 +22,7 @@ const debug = debugB3React("BetterAuthProvider");
  * useAuth, SignIn component, etc.) automatically clears the Better Auth session.
  */
 const BetterAuthProvider = ({ partnerId }: { partnerId: string }) => {
+  const betterAuthClient = useBetterAuthClient();
   const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
   const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
   const setIsConnected = useAuthStore(state => state.setIsConnected);
@@ -54,7 +55,7 @@ const BetterAuthProvider = ({ partnerId }: { partnerId: string }) => {
       (app as any).logout = originalLogout;
       hasPatched.current = false;
     };
-  }, []);
+  }, [betterAuthClient]);
 
   // Session restore on mount
   useEffect(() => {
@@ -119,7 +120,7 @@ const BetterAuthProvider = ({ partnerId }: { partnerId: string }) => {
     };
 
     restoreSession();
-  }, [setIsAuthenticated, setIsAuthenticating, setIsConnected, setUser, partnerId]);
+  }, [setIsAuthenticated, setIsAuthenticating, setIsConnected, setUser, partnerId, betterAuthClient]);
 
   return null;
 };

package/src/global-account/react/components/ManageAccount/BottomNavigation.tsx

@@ -1,4 +1,4 @@
-import { TabsListPrimitive, TabTriggerPrimitive, useModalStore } from "@b3dotfun/sdk/global-account/react";
+import { TabsListPrimitive, TabTriggerPrimitive, useB3Config, useModalStore } from "@b3dotfun/sdk/global-account/react";
 
 const HomeIcon = () => {
   return (
@@ -42,6 +42,8 @@ const SettingsIcon = () => {
 
 const BottomNavigation = () => {
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+  const { authStrategy } = useB3Config();
+  const isBetterAuth = authStrategy === "better-auth";
 
   return (
     <div className="b3-modal-bottom-navigation sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]">
@@ -54,19 +56,21 @@ const BottomNavigation = () => {
           <span className="text-b3-grey font-neue-montreal-semibold text-xs">Home</span>
         </TabTriggerPrimitive>
 
-        <TabTriggerPrimitive
-          value="swap"
-          className="data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white"
-          onClick={() => {
-            setB3ModalContentType({
-              type: "anySpend",
-              showBackButton: true,
-            });
-          }}
-        >
-          <SwapIcon />
-          <span className="text-b3-grey font-neue-montreal-semibold text-xs">Swap</span>
-        </TabTriggerPrimitive>
+        {!isBetterAuth && (
+          <TabTriggerPrimitive
+            value="swap"
+            className="data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white"
+            onClick={() => {
+              setB3ModalContentType({
+                type: "anySpend",
+                showBackButton: true,
+              });
+            }}
+          >
+            <SwapIcon />
+            <span className="text-b3-grey font-neue-montreal-semibold text-xs">Swap</span>
+          </TabTriggerPrimitive>
+        )}
 
         <TabTriggerPrimitive
           value="settings"