@b3dotfun/sdk 0.1.2 → 0.1.5

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

@@ -7,6 +7,7 @@ import {
   useGeoOnrampOptions,
 } from "@b3dotfun/sdk/anyspend/react";
 import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
+import { normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
 import {
   toast,
   useAccountWallet,
@@ -18,7 +19,7 @@ import {
 import { formatTokenAmount, formatUnits } from "@b3dotfun/sdk/shared/utils/number";
 import { useEffect, useMemo, useState } from "react";
 
-import { parseUnits } from "viem";
+import { encodeFunctionData, parseUnits } from "viem";
 import { base, mainnet } from "viem/chains";
 import { components } from "../../types/api";
 import { GetQuoteRequest } from "../../types/api_req_res";
@@ -38,6 +39,60 @@ export enum PanelView {
   LOADING,
   POINTS_DETAIL,
   FEE_DETAIL,
+  DIRECT_TRANSFER_SUCCESS,
+}
+
+export type CustomExactInConfig = {
+  functionAbi: string;
+  functionName: string;
+  functionArgs: string[];
+  to: string;
+  spenderAddress?: string;
+  action?: string;
+};
+
+/**
+ * Generates encoded function data for custom contract calls.
+ * Handles amount placeholder replacement and BigInt conversion.
+ */
+export function generateEncodedData(config: CustomExactInConfig | undefined, amountInWei: string): string | undefined {
+  if (!config || !config.functionAbi || !config.functionName || !config.functionArgs) {
+    console.warn("customExactInConfig missing required fields for encoding:", {
+      hasConfig: !!config,
+      hasFunctionAbi: !!config?.functionAbi,
+      hasFunctionName: !!config?.functionName,
+      hasFunctionArgs: !!config?.functionArgs,
+    });
+    return undefined;
+  }
+
+  try {
+    const abi = JSON.parse(config.functionAbi);
+    const processedArgs = config.functionArgs.map(arg => {
+      // Replace amount placeholders ({{dstAmount}}, {{amount_out}}, etc.)
+      if (arg === "{{dstAmount}}" || arg === "{{amount_out}}") {
+        return BigInt(amountInWei);
+      }
+      // Convert numeric strings to BigInt for uint256 args
+      if (/^\d+$/.test(arg)) {
+        return BigInt(arg);
+      }
+      return arg;
+    });
+
+    return encodeFunctionData({
+      abi,
+      functionName: config.functionName,
+      args: processedArgs,
+    });
+  } catch (e) {
+    console.error("Failed to encode function data:", e, {
+      functionAbi: config.functionAbi,
+      functionName: config.functionName,
+      functionArgs: config.functionArgs,
+    });
+    return undefined;
+  }
 }
 
 interface UseAnyspendFlowProps {
@@ -54,6 +109,7 @@ interface UseAnyspendFlowProps {
   slippage?: number;
   disableUrlParamManagement?: boolean;
   orderType?: "hype_duel" | "custom_exact_in" | "swap";
+  customExactInConfig?: CustomExactInConfig;
 }
 
 // This hook serves for order hype_duel and custom_exact_in
@@ -70,6 +126,7 @@ export function useAnyspendFlow({
   slippage = 0,
   disableUrlParamManagement = false,
   orderType = "hype_duel",
+  customExactInConfig,
 }: UseAnyspendFlowProps) {
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
@@ -89,6 +146,8 @@ export function useAnyspendFlow({
   const [selectedDstToken, setSelectedDstToken] = useState<components["schemas"]["Token"]>(defaultDstToken);
   const [srcAmount, setSrcAmount] = useState<string>(paymentType === "fiat" ? "5" : "0");
   const [dstAmount, setDstAmount] = useState<string>("");
+  const [dstAmountInput, setDstAmountInput] = useState<string>(""); // User input for destination amount (EXACT_OUTPUT mode)
+  const [debouncedDstAmountInput, setDebouncedDstAmountInput] = useState<string>(""); // Debounced version for quote requests
   const [isSrcInputDirty, setIsSrcInputDirty] = useState(true);
 
   // Derive destination chain ID from token or prop (cannot change)
@@ -183,6 +242,20 @@ export function useAnyspendFlow({
     fetchDestinationToken();
   }, [destinationTokenAddress, destinationTokenChainId]);
 
+  // Check if destination token is ready (matches the expected address from props)
+  // This is important for EXACT_OUTPUT mode where we need correct decimals
+  const isDestinationTokenReady =
+    !destinationTokenAddress || selectedDstToken.address.toLowerCase() === destinationTokenAddress.toLowerCase();
+
+  // Debounce destination amount input for quote requests (500ms delay)
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedDstAmountInput(dstAmountInput);
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, [dstAmountInput]);
+
   // Helper function for onramp vendor mapping
   const getOnrampVendor = (paymentMethod: FiatPaymentMethod): "coinbase" | "stripe" | "stripe-web2" | undefined => {
     switch (paymentMethod) {
@@ -197,8 +270,18 @@ export function useAnyspendFlow({
 
   // Get quote
   // For fiat payments, always use USDC decimals (6) regardless of selectedSrcToken
-  const effectiveDecimals = paymentType === "fiat" ? USDC_BASE.decimals : selectedSrcToken.decimals;
-  const activeInputAmountInWei = parseUnits(srcAmount.replace(/,/g, ""), effectiveDecimals).toString();
+  const effectiveSrcDecimals = paymentType === "fiat" ? USDC_BASE.decimals : selectedSrcToken.decimals;
+  const activeInputAmountInWei = parseUnits(srcAmount.replace(/,/g, ""), effectiveSrcDecimals).toString();
+
+  // Calculate output amount in wei for EXACT_OUTPUT mode
+  // Only calculate when destination token is ready (has correct decimals)
+  // Use debounced value to reduce quote API calls
+  const activeOutputAmountInWei = isDestinationTokenReady
+    ? parseUnits(debouncedDstAmountInput.replace(/,/g, "") || "0", selectedDstToken.decimals).toString()
+    : "0";
+
+  // Determine trade type based on which input was last edited
+  const tradeType = isSrcInputDirty ? "EXACT_INPUT" : "EXACT_OUTPUT";
 
   // Build quote request based on order type
   const quoteRequest: GetQuoteRequest = (() => {
@@ -215,8 +298,8 @@ export function useAnyspendFlow({
       return {
         ...baseParams,
         type: "swap" as const,
-        tradeType: "EXACT_INPUT" as const,
-        amount: activeInputAmountInWei,
+        tradeType: tradeType as "EXACT_INPUT" | "EXACT_OUTPUT",
+        amount: tradeType === "EXACT_INPUT" ? activeInputAmountInWei : activeOutputAmountInWei,
       };
     } else if (orderType === "hype_duel") {
       return {
@@ -225,6 +308,23 @@ export function useAnyspendFlow({
         amount: activeInputAmountInWei,
       };
     } else {
+      // custom_exact_in - for EXACT_OUTPUT, use custom type to get the quote
+      if (tradeType === "EXACT_OUTPUT") {
+        const encodedData = generateEncodedData(customExactInConfig, activeOutputAmountInWei);
+
+        return {
+          ...baseParams,
+          type: "custom" as const,
+          payload: {
+            amount: activeOutputAmountInWei,
+            data: encodedData || "",
+            to: customExactInConfig ? normalizeAddress(customExactInConfig.to) : "",
+            spenderAddress: customExactInConfig?.spenderAddress
+              ? normalizeAddress(customExactInConfig.spenderAddress)
+              : undefined,
+          },
+        };
+      }
       return {
         ...baseParams,
         type: "custom_exact_in" as const,
@@ -235,26 +335,45 @@ export function useAnyspendFlow({
 
   const { anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError } = useAnyspendQuote(quoteRequest);
 
+  // Combined loading state: includes debounce waiting period and actual quote fetching
+  // For EXACT_OUTPUT mode, also check if we're waiting for debounce
+  const isDebouncingDstAmount = tradeType === "EXACT_OUTPUT" && dstAmountInput !== debouncedDstAmountInput;
+  const isQuoteLoading = isLoadingAnyspendQuote || isDebouncingDstAmount;
+
   // Get geo options for fiat
   const { geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support } = useGeoOnrampOptions(
     paymentType === "fiat" ? formatUnits(activeInputAmountInWei, USDC_BASE.decimals) : "0",
   );
 
-  // Update destination amount when quote changes
+  // Update amounts when quote changes based on trade type
   useEffect(() => {
-    if (anyspendQuote?.data?.currencyOut?.amount && anyspendQuote.data.currencyOut.currency?.decimals) {
-      const amount = anyspendQuote.data.currencyOut.amount;
-      const decimals = anyspendQuote.data.currencyOut.currency.decimals;
-
-      // Apply slippage (0-100) - reduce amount by slippage percentageFixed slippage value
-      const amountWithSlippage = (BigInt(amount) * BigInt(100 - slippage)) / BigInt(100);
-
-      const formattedAmount = formatTokenAmount(amountWithSlippage, decimals, 6, false);
-      setDstAmount(formattedAmount);
+    if (isSrcInputDirty) {
+      // EXACT_INPUT mode: update destination amount from quote
+      if (anyspendQuote?.data?.currencyOut?.amount && anyspendQuote.data.currencyOut.currency?.decimals) {
+        const amount = anyspendQuote.data.currencyOut.amount;
+        const decimals = anyspendQuote.data.currencyOut.currency.decimals;
+
+        // Apply slippage (0-100) - reduce amount by slippage percentage
+        const amountWithSlippage = (BigInt(amount) * BigInt(100 - slippage)) / BigInt(100);
+
+        const formattedAmount = formatTokenAmount(amountWithSlippage, decimals, 6, false);
+        setDstAmount(formattedAmount);
+      } else {
+        setDstAmount("");
+      }
     } else {
-      setDstAmount("");
+      // EXACT_OUTPUT mode: update source amount from quote
+      if (anyspendQuote?.data?.currencyIn?.amount && anyspendQuote.data.currencyIn.currency?.decimals) {
+        const amount = anyspendQuote.data.currencyIn.amount;
+        const decimals = anyspendQuote.data.currencyIn.currency.decimals;
+
+        const formattedAmount = formatTokenAmount(BigInt(amount), decimals, 6, false);
+        setSrcAmount(formattedAmount);
+      }
+      // Also set the display destination amount from the user input
+      setDstAmount(dstAmountInput);
     }
-  }, [anyspendQuote, slippage]);
+  }, [anyspendQuote, slippage, isSrcInputDirty, dstAmountInput]);
 
   // Update useEffect for URL parameter to not override loadOrder
   useEffect(() => {
@@ -344,8 +463,11 @@ export function useAnyspendFlow({
     setSrcAmount,
     dstAmount,
     setDstAmount,
+    dstAmountInput,
+    setDstAmountInput,
     isSrcInputDirty,
     setIsSrcInputDirty,
+    tradeType,
     // Payment methods
     cryptoPaymentMethod,
     setCryptoPaymentMethod,
@@ -366,8 +488,10 @@ export function useAnyspendFlow({
     // Quote data
     anyspendQuote,
     isLoadingAnyspendQuote,
+    isQuoteLoading, // Combined loading state (includes debounce + quote fetching)
     getAnyspendQuoteError,
     activeInputAmountInWei,
+    activeOutputAmountInWei, // User's destination amount input in wei (for EXACT_OUTPUT mode)
     // Geo/onramp data
     geoData,
     coinbaseAvailablePaymentMethods,

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

@@ -0,0 +1,67 @@
+import { useUnifiedChainSwitchAndExecute } from "@b3dotfun/sdk/global-account/react";
+import { isNativeToken } from "@b3dotfun/sdk/anyspend/utils/token";
+import { encodeFunctionData, erc20Abi } from "viem";
+import { useCallback } from "react";
+import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
+
+interface DirectTransferParams {
+  chainId: number;
+  tokenAddress: string;
+  recipientAddress: string;
+  amount: bigint;
+  method: CryptoPaymentMethodType;
+}
+
+/**
+ * Hook for executing direct token transfers (same chain, same token)
+ * bypassing the swap backend.
+ */
+export function useDirectTransfer() {
+  const { switchChainAndExecute, switchChainAndExecuteWithEOA, isSwitchingOrExecuting } =
+    useUnifiedChainSwitchAndExecute();
+
+  const executeDirectTransfer = useCallback(
+    async ({
+      chainId,
+      tokenAddress,
+      recipientAddress,
+      amount,
+      method,
+    }: DirectTransferParams): Promise<string | undefined> => {
+      const isNative = isNativeToken(tokenAddress);
+
+      // Choose the correct execution function based on payment method
+      const execute =
+        method === CryptoPaymentMethodType.CONNECT_WALLET ? switchChainAndExecuteWithEOA : switchChainAndExecute;
+
+      let txHash: string | undefined;
+      if (isNative) {
+        // Native token transfer (ETH, etc.)
+        txHash = await execute(chainId, {
+          to: recipientAddress,
+          value: amount,
+        });
+      } else {
+        // ERC20 token transfer
+        const transferData = encodeFunctionData({
+          abi: erc20Abi,
+          functionName: "transfer",
+          args: [recipientAddress as `0x${string}`, amount],
+        });
+        txHash = await execute(chainId, {
+          to: tokenAddress,
+          data: transferData,
+          value: BigInt(0),
+        });
+      }
+
+      return txHash;
+    },
+    [switchChainAndExecute, switchChainAndExecuteWithEOA],
+  );
+
+  return {
+    executeDirectTransfer,
+    isTransferring: isSwitchingOrExecuting,
+  };
+}

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

@@ -62,7 +62,7 @@ export function useRecipientAddressState({
 
   // The effective recipient address, derived on each render, respecting priority.
   const effectiveRecipientAddress =
-    recipientAddressFromProps || selectedRecipientAddress || walletAddress || globalAddress;
+    selectedRecipientAddress || recipientAddressFromProps || walletAddress || globalAddress;
 
   // Helper function to reset user's manual selection.
   const resetRecipientAddress = () => {

package/src/anyspend/utils/format.ts

@@ -7,7 +7,12 @@ export const getStatusDisplay = (
   const srcToken = order.metadata?.srcToken;
   const dstToken = order.metadata?.dstToken;
   const formattedSrcAmount = srcToken ? formatTokenAmount(BigInt(order.srcAmount), srcToken.decimals) : undefined;
-  const actualDstAmount = order.settlement?.actualDstAmount;
+  // For custom orders, use payload.amount as fallback if actualDstAmount is not available
+  const actualDstAmount =
+    order.settlement?.actualDstAmount ||
+    (order.type === "custom" || order.type === "custom_exact_in" || order.type === "deposit_first"
+      ? order.payload.amount?.toString()
+      : undefined);
   const formattedActualDstAmount =
     actualDstAmount && dstToken ? formatTokenAmount(BigInt(actualDstAmount), dstToken.decimals) : undefined;
 
@@ -51,6 +56,7 @@ export const getStatusDisplay = (
     case "executed": {
       const receivedText =
         formattedActualDstAmount && dstToken ? `Received ${formattedActualDstAmount} ${dstToken.symbol}` : undefined;
+      const actionText = (order.metadata as { action?: string })?.action || "Order";
       const { text, description } =
         order.type === "swap"
           ? { text: receivedText || "Swap Complete", description: "Your swap has been completed successfully." }
@@ -60,7 +66,12 @@ export const getStatusDisplay = (
               ? { text: "Tournament Joined", description: "You have joined the tournament" }
               : order.type === "fund_tournament"
                 ? { text: "Tournament Funded", description: "You have funded the tournament" }
-                : { text: receivedText || "Order Complete", description: "Your order has been completed" };
+                : order.type === "custom" || order.type === "custom_exact_in"
+                  ? {
+                      text: receivedText || `${actionText} Complete`,
+                      description: "Your order has been completed successfully.",
+                    }
+                  : { text: receivedText || "Order Complete", description: "Your order has been completed" };
       return { text, status: "success", description };
     }
 

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

@@ -29,7 +29,6 @@ import { RequestPermissions } from "./RequestPermissions/RequestPermissions";
 import { Send } from "./Send/Send";
 import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";
 import { ToastContainer, useToastContext } from "./Toast/index";
-import { TurnkeyAuthModal } from "./TurnkeyAuthModal";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./ui/dialog";
 import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from "./ui/drawer";
 
@@ -57,7 +56,6 @@ export function B3DynamicModal() {
     "anySpendBuySpin",
     "anySpendOrderHistory",
     "signInWithB3",
-    "turnkeyAuth",
     "anySpendSignatureMint",
     "anySpendBondKit",
     "linkAccount",
@@ -96,7 +94,6 @@ export function B3DynamicModal() {
     fullWidthTypes.includes(contentType?.type as string) && "w-full",
     isFreestyleType && "b3-modal-freestyle",
     contentType?.type === "signInWithB3" && "p-0",
-    contentType?.type === "turnkeyAuth" && "p-0",
     contentType?.type === "anySpend" && "md:p-0",
     contentType?.type === "send" && "p-0",
     contentType?.type === "manageAccount" && " md:p-0 md:pt-2",
@@ -113,8 +110,6 @@ export function B3DynamicModal() {
     switch (contentType.type) {
       case "signInWithB3":
         return <SignInWithB3Flow {...contentType} />;
-      case "turnkeyAuth":
-        return <TurnkeyAuthModal {...contentType} />;
       case "requestPermissions":
         return <RequestPermissions {...contentType} />;
       case "manageAccount":

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

@@ -25,7 +25,6 @@ export interface B3ConfigContextType {
   partnerId: string;
   stripePublishableKey?: string;
   createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
-  enableTurnkey: boolean;
 }
 
 const B3ConfigContext = createContext<B3ConfigContextType | null>(null);
@@ -41,7 +40,6 @@ export function B3ConfigProvider({
   partnerId,
   stripePublishableKey,
   createClientReferenceId,
-  enableTurnkey = false,
 }: {
   children: React.ReactNode;
   accountOverride?: Account;
@@ -53,7 +51,6 @@ export function B3ConfigProvider({
   partnerId: string;
   stripePublishableKey?: string;
   createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
-  enableTurnkey?: boolean;
 }) {
   return (
     <B3ConfigContext.Provider
@@ -67,7 +64,6 @@ export function B3ConfigProvider({
         partnerId,
         stripePublishableKey,
         createClientReferenceId,
-        enableTurnkey,
       }}
     >
       {children}

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

@@ -24,7 +24,7 @@ export function B3Provider({
   environment,
   clientType = "socket",
   partnerId,
-  rpcUrls,
+  rpcUrls: _rpcUrls,
   onConnect,
   defaultPermissions,
 }: {

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

@@ -1,4 +1,3 @@
-import { Users } from "@b3dotfun/b3-api";
 import { CreateOnrampOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOnrampOrder";
 import { CreateOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOrder";
 import { RelayKitProviderWrapper, TooltipProvider } from "@b3dotfun/sdk/global-account/react";
@@ -42,9 +41,7 @@ export function B3Provider({
   connectors,
   overrideDefaultConnectors = false,
   createClientReferenceId,
-  enableTurnkey = false,
   defaultPermissions,
-  onTurnkeyConnect,
 }: {
   theme: "light" | "dark";
   children: React.ReactNode;
@@ -66,9 +63,7 @@ export function B3Provider({
   connectors?: CreateConnectorFn[];
   overrideDefaultConnectors?: boolean;
   createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
-  enableTurnkey?: boolean;
   defaultPermissions?: PermissionsConfig;
-  onTurnkeyConnect?: (user: Users) => void | Promise<void>;
 }) {
   // Initialize Google Analytics on mount
   useEffect(() => {
@@ -91,11 +86,7 @@ export function B3Provider({
         <QueryClientProvider client={queryClient}>
           <TooltipProvider>
             <ToastProvider>
-              <LocalSDKProvider
-                onConnectCallback={onConnect}
-                onLogoutCallback={onLogout}
-                onTurnkeyConnect={onTurnkeyConnect}
-              >
+              <LocalSDKProvider onConnectCallback={onConnect} onLogoutCallback={onLogout}>
                 <B3ConfigProvider
                   accountOverride={accountOverride}
                   environment={environment}
@@ -105,7 +96,6 @@ export function B3Provider({
                   partnerId={partnerId}
                   stripePublishableKey={stripePublishableKey}
                   createClientReferenceId={createClientReferenceId}
-                  enableTurnkey={enableTurnkey}
                   defaultPermissions={defaultPermissions}
                 >
                   <ToastContextConnector />

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

@@ -1,4 +1,3 @@
-import { Users } from "@b3dotfun/b3-api";
 import { createContext } from "react";
 import { Wallet } from "thirdweb/wallets";
 
@@ -9,13 +8,11 @@ import { Wallet } from "thirdweb/wallets";
 export interface LocalSDKContextType {
   onConnectCallback?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
   onLogoutCallback?: () => void | Promise<void>;
-  onTurnkeyConnect?: (user: Users) => void | Promise<void>;
 }
 
 export const LocalSDKContext = createContext<LocalSDKContextType>({
   onConnectCallback: undefined,
   onLogoutCallback: undefined,
-  onTurnkeyConnect: undefined,
 });
 
 /**
@@ -25,19 +22,16 @@ export function LocalSDKProvider({
   children,
   onConnectCallback,
   onLogoutCallback,
-  onTurnkeyConnect,
 }: {
   children: React.ReactNode;
   onConnectCallback?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
   onLogoutCallback?: () => void | Promise<void>;
-  onTurnkeyConnect?: (user: Users) => void | Promise<void>;
 }) {
   return (
     <LocalSDKContext.Provider
       value={{
         onConnectCallback,
         onLogoutCallback,
-        onTurnkeyConnect,
       }}
     >
       {children}

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

@@ -19,9 +19,6 @@ export function RelayKitProviderWrapper({
     fetchChains();
   }, []);
 
-  const isTurnkeyPrimary = process.env.NEXT_PUBLIC_TURNKEY_PRIMARY === "true";
-  const appName = isTurnkeyPrimary ? "Smart Wallet" : "AnySpend";
-
   return (
     <RelayKitProvider
       options={{
@@ -33,7 +30,7 @@ export function RelayKitProviderWrapper({
         },
         chains: relayChains,
         privateChainIds: undefined,
-        appName,
+        appName: "AnySpend",
         useGasFeeEstimations: true,
       }}
     >

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

@@ -1,7 +1,10 @@
-import { useModalStore } from "@b3dotfun/sdk/global-account/react";
+import { useAuthentication, useModalStore } from "@b3dotfun/sdk/global-account/react";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import { Loader2 } from "lucide-react";
+import { useState } from "react";
 import { Chain } from "thirdweb";
 import { useProfiles } from "thirdweb/react";
+import SignOutIcon from "../icons/SignOutIcon";
 import ModalHeader from "../ModalHeader/ModalHeader";
 import SettingsMenuItem from "./SettingsMenuItem";
 import SettingsProfileCard from "./SettingsProfileCard";
@@ -17,6 +20,8 @@ const SettingsContent = ({
 }) => {
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
   const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+  const { logout } = useAuthentication(partnerId);
+  const [logoutLoading, setLogoutLoading] = useState(false);
 
   const { data: profilesRaw = [] } = useProfiles({ client });
 
@@ -59,6 +64,14 @@ const SettingsContent = ({
     setB3ModalOpen(true);
   };
 
+  const onLogoutEnhanced = async () => {
+    setLogoutLoading(true);
+    await logout();
+    onLogout?.();
+    setB3ModalOpen(false);
+    setLogoutLoading(false);
+  };
+
   return (
     <div className="flex h-[470px] flex-col">
       <ModalHeader showBackButton={false} showCloseButton={false} title="Settings" />
@@ -99,6 +112,25 @@ const SettingsContent = ({
           onClick={() => handleNavigate("notifications")}
         />
       </div>
+
+      {/* Logout Section */}
+      <div className="mt-auto px-5 pb-5">
+        <button
+          className="b3-modal-sign-out-button border-b3-line hover:bg-b3-line bg-b3-background dark:bg-b3-background dark:border-b3-line dark:hover:bg-b3-line/80 flex w-full items-center justify-center gap-1.5 rounded-xl border border-solid p-3 transition-colors"
+          onClick={onLogoutEnhanced}
+          disabled={logoutLoading}
+          style={{
+            boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05)",
+          }}
+        >
+          {logoutLoading ? (
+            <Loader2 className="text-b3-grey animate-spin" size={20} />
+          ) : (
+            <SignOutIcon size={20} className="text-b3-grey" color="currentColor" />
+          )}
+          <p className="text-b3-grey dark:text-b3-foreground-muted font-neue-montreal-semibold text-base">Sign out</p>
+        </button>
+      </div>
     </div>
   );
 };