@b3dotfun/sdk 0.1.2 → 0.1.5

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

@@ -9,8 +9,22 @@ export declare enum PanelView {
     ORDER_DETAILS = 4,
     LOADING = 5,
     POINTS_DETAIL = 6,
-    FEE_DETAIL = 7
+    FEE_DETAIL = 7,
+    DIRECT_TRANSFER_SUCCESS = 8
 }
+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 declare function generateEncodedData(config: CustomExactInConfig | undefined, amountInWei: string): string | undefined;
 interface UseAnyspendFlowProps {
     paymentType?: "crypto" | "fiat";
     recipientAddress?: string;
@@ -25,8 +39,9 @@ interface UseAnyspendFlowProps {
     slippage?: number;
     disableUrlParamManagement?: boolean;
     orderType?: "hype_duel" | "custom_exact_in" | "swap";
+    customExactInConfig?: CustomExactInConfig;
 }
-export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrder, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, destinationTokenAddress, destinationTokenChainId, slippage, disableUrlParamManagement, orderType, }: UseAnyspendFlowProps): {
+export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrder, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, destinationTokenAddress, destinationTokenChainId, slippage, disableUrlParamManagement, orderType, customExactInConfig, }: UseAnyspendFlowProps): {
     activePanel: PanelView;
     setActivePanel: import("react").Dispatch<import("react").SetStateAction<PanelView>>;
     orderId: string | undefined;
@@ -91,8 +106,11 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
     setSrcAmount: import("react").Dispatch<import("react").SetStateAction<string>>;
     dstAmount: string;
     setDstAmount: import("react").Dispatch<import("react").SetStateAction<string>>;
+    dstAmountInput: string;
+    setDstAmountInput: import("react").Dispatch<import("react").SetStateAction<string>>;
     isSrcInputDirty: boolean;
     setIsSrcInputDirty: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    tradeType: string;
     cryptoPaymentMethod: CryptoPaymentMethodType;
     setCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
     selectedCryptoPaymentMethod: CryptoPaymentMethodType;
@@ -176,8 +194,10 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
         statusCode: number;
     } | undefined;
     isLoadingAnyspendQuote: boolean;
+    isQuoteLoading: boolean;
     getAnyspendQuoteError: Error | null;
     activeInputAmountInWei: string;
+    activeOutputAmountInWei: string;
     geoData: import("@b3dotfun/sdk/anyspend/react").GeoData | undefined;
     coinbaseAvailablePaymentMethods: {
         id?: string;

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

@@ -0,0 +1,17 @@
+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 declare function useDirectTransfer(): {
+    executeDirectTransfer: ({ chainId, tokenAddress, recipientAddress, amount, method, }: DirectTransferParams) => Promise<string | undefined>;
+    isTransferring: boolean;
+};
+export {};

package/dist/types/global-account/react/components/B3Provider/B3ConfigProvider.d.ts

@@ -13,9 +13,8 @@ export interface B3ConfigContextType {
     partnerId: string;
     stripePublishableKey?: string;
     createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
-    enableTurnkey: boolean;
 }
-export declare function B3ConfigProvider({ children, accountOverride, environment, defaultPermissions, automaticallySetFirstEoa, theme, clientType, partnerId, stripePublishableKey, createClientReferenceId, enableTurnkey, }: {
+export declare function B3ConfigProvider({ children, accountOverride, environment, defaultPermissions, automaticallySetFirstEoa, theme, clientType, partnerId, stripePublishableKey, createClientReferenceId, }: {
     children: React.ReactNode;
     accountOverride?: Account;
     environment?: "development" | "production";
@@ -26,6 +25,5 @@ export declare function B3ConfigProvider({ children, accountOverride, environmen
     partnerId: string;
     stripePublishableKey?: string;
     createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
-    enableTurnkey?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function useB3Config(): B3ConfigContextType;

package/dist/types/global-account/react/components/B3Provider/B3Provider.d.ts

@@ -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 { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
@@ -9,7 +8,7 @@ import { ClientType } from "../../../client-manager";
 /**
  * Main B3Provider component
  */
-export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster: _toaster, clientType, rpcUrls, partnerId, stripePublishableKey, onConnect, onLogout, connectors, overrideDefaultConnectors, createClientReferenceId, enableTurnkey, defaultPermissions, onTurnkeyConnect, }: {
+export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster: _toaster, clientType, rpcUrls, partnerId, stripePublishableKey, onConnect, onLogout, connectors, overrideDefaultConnectors, createClientReferenceId, defaultPermissions, }: {
     theme: "light" | "dark";
     children: React.ReactNode;
     accountOverride?: Account;
@@ -30,7 +29,5 @@ export declare function B3Provider({ theme, children, accountOverride, environme
     connectors?: CreateConnectorFn[];
     overrideDefaultConnectors?: boolean;
     createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
-    enableTurnkey?: boolean;
     defaultPermissions?: PermissionsConfig;
-    onTurnkeyConnect?: (user: Users) => void | Promise<void>;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/types/global-account/react/components/B3Provider/B3Provider.native.d.ts

@@ -4,7 +4,7 @@ import { ClientType } from "../../../client-manager";
 /**
  * Main B3Provider component
  */
-export declare function B3Provider({ theme, children, accountOverride, environment, clientType, partnerId, rpcUrls, onConnect, defaultPermissions, }: {
+export declare function B3Provider({ theme, children, accountOverride, environment, clientType, partnerId, rpcUrls: _rpcUrls, onConnect, defaultPermissions, }: {
     theme: "light" | "dark";
     children: React.ReactNode;
     accountOverride?: Account;

package/dist/types/global-account/react/components/B3Provider/LocalSDKProvider.d.ts

@@ -1,4 +1,3 @@
-import { Users } from "@b3dotfun/b3-api";
 import { Wallet } from "thirdweb/wallets";
 /**
  * Local SDK Context for internal SDK state (like authentication callbacks)
@@ -7,15 +6,13 @@ 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 declare const LocalSDKContext: import("react").Context<LocalSDKContextType>;
 /**
  * Local SDK Provider that wraps the app and provides internal SDK state
  */
-export declare function LocalSDKProvider({ children, onConnectCallback, onLogoutCallback, onTurnkeyConnect, }: {
+export declare function LocalSDKProvider({ children, onConnectCallback, onLogoutCallback, }: {
     children: React.ReactNode;
     onConnectCallback?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
     onLogoutCallback?: () => void | Promise<void>;
-    onTurnkeyConnect?: (user: Users) => void | Promise<void>;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/types/global-account/react/components/index.d.ts

@@ -13,7 +13,6 @@ export { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";
 export { SignInWithB3Privy } from "./SignInWithB3/SignInWithB3Privy";
 export { LoginStepContainer } from "./SignInWithB3/steps/LoginStep";
 export { getConnectOptionsFromStrategy, isWalletType, type AllowedStrategy } from "./SignInWithB3/utils/signInUtils";
-export { TurnkeyAuthModal } from "./TurnkeyAuthModal";
 export { ManageAccount } from "./ManageAccount/ManageAccount";
 export { Deposit } from "./Deposit/Deposit";
 export { Send } from "./Send/Send";

package/dist/types/global-account/react/hooks/index.d.ts

@@ -41,7 +41,6 @@ export { useTokenFromUrl } from "./useTokenFromUrl";
 export { useTokenPrice } from "./useTokenPrice";
 export { useTokenPriceWithFallback } from "./useTokenPriceWithFallback";
 export { useTokensFromAddress } from "./useTokensFromAddress";
-export { useTurnkeyAuth } from "./useTurnkeyAuth";
 export { useUnifiedChainSwitchAndExecute } from "./useUnifiedChainSwitchAndExecute";
 export { useURLParams } from "./useURLParams";
 export { useUser } from "./useUser";

package/dist/types/global-account/react/hooks/useAuth.d.ts

@@ -1,13 +1,12 @@
 import { Wallet } from "thirdweb/wallets";
 import { preAuthenticate } from "thirdweb/wallets/in-app";
 /**
- * Unified authentication hook that uses Turnkey for authentication
- * This replaces the previous Thirdweb-based authentication
+ * Unified authentication hook for B3
  *
  * This hook provides 1:1 feature parity with useAuthentication.ts
  */
 export declare function useAuth(): {
-    authenticate: (turnkeySessionJwt: string, partnerId: string) => Promise<import("@feathersjs/authentication").AuthenticationResult>;
+    authenticate: (accessToken: string, partnerId: string, strategy?: string) => Promise<import("@feathersjs/authentication").AuthenticationResult>;
     reAuthenticate: () => Promise<import("@feathersjs/authentication").AuthenticationResult>;
     logout: (callback?: () => void) => Promise<void>;
     isAuthenticated: boolean;

package/dist/types/global-account/react/hooks/useTWAuth.d.ts

@@ -1,6 +1,6 @@
 import { Wallet } from "thirdweb/wallets";
 /**
- * @deprecated Use useAuth() with Turnkey authentication instead
+ * @deprecated Use useAuth() instead
  */
 export declare function useTWAuth(): {
     authenticate: (wallet: Wallet, partnerId: string) => Promise<import("@feathersjs/authentication").AuthenticationResult>;

package/dist/types/global-account/react/stores/useModalStore.d.ts

@@ -1,3 +1,4 @@
+import { AnySpendAllClasses } from "@b3dotfun/sdk/anyspend/react";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { GenerateSigMintResponse } from "@b3dotfun/sdk/anyspend/types/signatureMint";
 import { AllowedStrategy } from "@b3dotfun/sdk/global-account/react";
@@ -41,24 +42,6 @@ export interface SignInWithB3ModalProps extends BaseModalProps {
     /** Whether to show the signers enabled modal */
     signersEnabled?: boolean;
 }
-/**
- * Props for the Turnkey Authentication modal
- * Handles Turnkey email/OTP authentication flow
- */
-export interface TurnkeyAuthModalProps extends BaseModalProps {
-    /** Modal type identifier */
-    type: "turnkeyAuth";
-    /** Callback function called when authentication is successful */
-    onSuccess: (_user: any) => void;
-    /** Callback function called when modal is closed */
-    onClose: () => void;
-    /** Initial email to pre-fill */
-    initialEmail?: string;
-    /** Whether to skip directly to OTP step */
-    skipToOtp?: boolean;
-    /** Whether the modal can be closed - defaults to false for Turnkey */
-    closable?: boolean;
-}
 /**
  * Props for the Request Permissions modal
  * Used to request permission for session keys to interact with contracts
@@ -305,6 +288,8 @@ export interface AnySpendDepositUpsideProps extends BaseModalProps {
     depositContractAddress: string;
     /** Token to deposit */
     token: components["schemas"]["Token"];
+    /** The exact amount of destination tokens to receive, in wei. This will pre-fill the output amount and switch to an exact output swap. */
+    destinationTokenAmount?: string;
     /** Callback function called when the deposit is successful */
     onSuccess?: () => void;
 }
@@ -541,11 +526,15 @@ export interface AnySpendDepositModalProps extends BaseModalProps {
     returnHomeLabel?: string;
     /** Whether the deposit requires a custom function (uses AnySpendCustomExactIn). Defaults to false. */
     isCustomDeposit?: boolean;
+    /** Custom class names for styling specific elements */
+    classes?: AnySpendAllClasses;
+    /** Whether to allow direct transfer without swap */
+    allowDirectTransfer?: boolean;
 }
 /**
  * Union type of all possible modal content types
  */
-export type ModalContentType = SignInWithB3ModalProps | TurnkeyAuthModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendDepositUpsideProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | LinkNewAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps | DepositModalProps | SendModalProps | NotificationsModalProps | AnySpendCollectorClubPurchaseProps | AnySpendDepositModalProps;
+export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendDepositUpsideProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | LinkNewAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps | DepositModalProps | SendModalProps | NotificationsModalProps | AnySpendCollectorClubPurchaseProps | AnySpendDepositModalProps;
 /**
  * State interface for the modal store
  */

package/package.json

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

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

@@ -2,7 +2,9 @@
 
 import {
   eqci,
+  getChainName,
   getDefaultToken,
+  getExplorerTxUrl,
   getHyperliquidUSDCToken,
   HYPERLIQUID_CHAIN_ID,
   HYPERLIQUID_USDC_ADDRESS,
@@ -40,7 +42,7 @@ import { getThirdwebChain } from "@b3dotfun/sdk/shared/constants/chains/supporte
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import invariant from "invariant";
-import { ArrowDown, HistoryIcon, Loader2 } from "lucide-react";
+import { ArrowDown, CheckCircle, HistoryIcon, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { parseUnits } from "viem";
@@ -49,6 +51,7 @@ import { components } from "../../types/api";
 import { useAutoSelectCryptoPaymentMethod } from "../hooks/useAutoSelectCryptoPaymentMethod";
 import { useConnectedWalletDisplay } from "../hooks/useConnectedWalletDisplay";
 import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodState";
+import { useDirectTransfer } from "../hooks/useDirectTransfer";
 import { useRecipientAddressState } from "../hooks/useRecipientAddressState";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
@@ -64,6 +67,7 @@ import { PanelOnrampPayment } from "./common/PanelOnrampPayment";
 import { PointsDetailPanel } from "./common/PointsDetailPanel";
 import { RecipientSelection } from "./common/RecipientSelection";
 import { TabSection } from "./common/TabSection";
+import type { AnySpendClasses } from "./types/classes";
 
 const baseChain = getThirdwebChain(8453);
 
@@ -85,6 +89,7 @@ export enum PanelView {
   FIAT_PAYMENT_METHOD,
   POINTS_DETAIL,
   FEE_DETAIL,
+  DIRECT_TRANSFER_SUCCESS,
 }
 
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
@@ -115,9 +120,14 @@ export function AnySpend(props: {
   customRecipientLabel?: string;
   /** Custom label for the return home button (overrides "Return to Home" / "Close") */
   returnHomeLabel?: string;
+  /** Custom class names for styling specific elements */
+  classes?: AnySpendClasses;
+  /** When true, allows direct transfer without swap if source and destination token/chain are the same */
+  allowDirectTransfer?: boolean;
 }) {
   const fingerprintConfig = getFingerprintConfig();
 
+  console.log("[mitch] AnySpend rendered with fingerprintConfig:", props, fingerprintConfig);
   return (
     <AnySpendFingerprintWrapper fingerprint={fingerprintConfig}>
       <AnySpendInner {...props} />
@@ -143,6 +153,8 @@ function AnySpendInner({
   returnToHomeUrl,
   customRecipientLabel,
   returnHomeLabel,
+  classes,
+  allowDirectTransfer = false,
 }: {
   sourceChainId?: number;
   destinationTokenAddress?: string;
@@ -161,12 +173,15 @@ function AnySpendInner({
   returnToHomeUrl?: string;
   customRecipientLabel?: string;
   returnHomeLabel?: string;
+  classes?: AnySpendClasses;
+  allowDirectTransfer?: boolean;
 }) {
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
 
   const { partnerId } = useB3Config();
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+  const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
 
   // Determine if we're in "buy mode" based on whether destination token props are provided
   const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
@@ -200,6 +215,7 @@ function AnySpendInner({
   const [activeTab, setActiveTab] = useState<"crypto" | "fiat">(defaultActiveTab);
 
   const [orderId, setOrderId] = useState<string | undefined>(loadOrder);
+  const [directTransferTxHash, setDirectTransferTxHash] = useState<string | undefined>();
   const { orderAndTransactions: oat, getOrderAndTransactionsError } = useAnyspendOrderAndTransactions(orderId);
   !!getOrderAndTransactionsError && console.log("getOrderAndTransactionsError", getOrderAndTransactionsError);
 
@@ -511,6 +527,7 @@ function AnySpendInner({
   // );
 
   const { address: globalAddress, wallet: globalWallet, connectedEOAWallet } = useAccountWallet();
+  const { executeDirectTransfer, isTransferring: isSwitchingOrExecuting } = useDirectTransfer();
 
   const globalWalletImage = useAccountWalletImage();
 
@@ -737,18 +754,27 @@ function AnySpendInner({
     );
   }, [activeTab, selectedSrcChainId, selectedDstChainId, selectedSrcToken.address, selectedDstToken.address]);
 
+  // Check if this is a direct transfer (same chain/token with allowDirectTransfer enabled)
+  const isDirectTransfer = isSameChainSameToken && allowDirectTransfer;
+
   // Determine button state and text
   const btnInfo: { text: string; disable: boolean; error: boolean; loading: boolean } = useMemo(() => {
     // 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)
+    if (isSameChainSameToken && !allowDirectTransfer)
       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 };
-    if (isCreatingOrder || isCreatingOnrampOrder)
-      return { text: "Creating order...", disable: true, error: false, loading: true };
-    if (!anyspendQuote || !anyspendQuote.success)
+    if (isLoadingAnyspendQuote && !isSameChainSameToken)
+      return { text: "Loading quote...", disable: true, error: false, loading: true };
+    if (isCreatingOrder || isCreatingOnrampOrder || isSwitchingOrExecuting)
+      return {
+        text: isSwitchingOrExecuting ? "Transferring..." : "Creating order...",
+        disable: true,
+        error: false,
+        loading: true,
+      };
+    if ((!anyspendQuote || !anyspendQuote.success) && !(isSameChainSameToken && allowDirectTransfer))
       return { text: "No quote found", disable: true, error: false, loading: false };
 
     if (activeTab === "fiat") {
@@ -779,7 +805,8 @@ function AnySpendInner({
         effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
         effectiveCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
       ) {
-        return { text: "Swap", disable: false, error: false, loading: false };
+        const buttonText = isSameChainSameToken && allowDirectTransfer ? "Transfer" : "Swap";
+        return { text: buttonText, disable: false, error: false, loading: false };
       }
       if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO) {
         return { text: "Continue to payment", disable: false, error: false, loading: false };
@@ -794,19 +821,26 @@ function AnySpendInner({
     effectiveRecipientAddress,
     isCreatingOrder,
     isCreatingOnrampOrder,
+    isSwitchingOrExecuting,
     anyspendQuote,
     activeTab,
     effectiveCryptoPaymentMethod,
     selectedFiatPaymentMethod,
     srcAmountOnRamp,
+    allowDirectTransfer,
   ]);
 
   // Handle main button click
   const onMainButtonClick = async () => {
     if (btnInfo.disable) return;
 
+    const isDirectTransfer = isSameChainSameToken && allowDirectTransfer;
+
     try {
-      invariant(anyspendQuote, "Relay price is not found");
+      // Only require quote for non-direct transfers
+      if (!isDirectTransfer) {
+        invariant(anyspendQuote, "Relay price is not found");
+      }
 
       if (activeTab === "fiat") {
         // For fiat: check recipient first
@@ -881,15 +915,36 @@ function AnySpendInner({
   // Handle crypto swap creation
   const handleCryptoSwap = async (method: CryptoPaymentMethodType) => {
     try {
-      invariant(anyspendQuote, "Relay price is not found");
+      const isDirectTransfer = isSameChainSameToken && allowDirectTransfer;
+
       invariant(effectiveRecipientAddress, "Recipient address is not found");
 
+      const srcAmountBigInt = parseUnits(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals);
+
+      // Handle direct transfer (same chain/token) - bypass backend, transfer directly
+      if (isDirectTransfer) {
+        const txHash = await executeDirectTransfer({
+          chainId: selectedSrcChainId,
+          tokenAddress: selectedSrcToken.address,
+          recipientAddress: effectiveRecipientAddress,
+          amount: srcAmountBigInt,
+          method,
+        });
+
+        if (txHash) {
+          setDirectTransferTxHash(txHash);
+          navigateToPanel(PanelView.DIRECT_TRANSFER_SUCCESS, "forward");
+        }
+        return;
+      }
+
+      // Regular swap flow - use backend
+      invariant(anyspendQuote, "Relay price is not found");
+
       // Debug: Check payment method values
       console.log("handleCryptoSwap - method parameter:", method);
       console.log("handleCryptoSwap - selectedCryptoPaymentMethod state:", selectedCryptoPaymentMethod);
 
-      const srcAmountBigInt = parseUnits(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals);
-
       createOrder({
         recipientAddress: effectiveRecipientAddress,
         orderType: "swap",
@@ -1098,22 +1153,24 @@ function AnySpendInner({
   );
 
   const mainView = (
-    <div className={"mx-auto flex w-[460px] max-w-full flex-col items-center gap-2 pt-5"}>
+    <div className={classes?.mainContent || "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2 pt-5"}>
       <div className={"flex w-full max-w-full flex-col items-center gap-2 px-5"}>
         {/* Token Header - Show when in buy mode */}
         {isBuyMode && !hideHeader && (
-          <div className="mb-4 flex flex-col items-center gap-3 text-center">
+          <div className={classes?.header || "mb-4 flex flex-col items-center gap-3 text-center"}>
             {selectedDstToken.metadata?.logoURI && (
               <div className="relative">
                 <img
                   src={selectedDstToken.metadata.logoURI}
                   alt={selectedDstToken.symbol}
-                  className="border-as-stroke h-12 w-12 rounded-full border-2 shadow-md"
+                  className={classes?.headerLogo || "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md"}
                 />
               </div>
             )}
             <div>
-              <h1 className="text-as-primary text-xl font-bold">Buy {selectedDstToken.symbol}</h1>
+              <h1 className={classes?.headerTitle || "text-as-primary text-xl font-bold"}>
+                Buy {selectedDstToken.symbol}
+              </h1>
             </div>
           </div>
         )}
@@ -1191,11 +1248,14 @@ function AnySpendInner({
             <div className="z-10 -my-6 flex justify-center">
               <Button
                 variant="ghost"
-                className={cn(
-                  "border-as-stroke bg-as-surface-primary h-10 w-10 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl",
-                  isBuyMode && "cursor-default",
-                  selectedDstChainId === HYPERLIQUID_CHAIN_ID && "cursor-not-allowed opacity-50",
-                )}
+                className={
+                  classes?.swapDirectionButton ||
+                  cn(
+                    "border-as-stroke bg-as-surface-primary h-10 w-10 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl",
+                    isBuyMode && "cursor-default",
+                    selectedDstChainId === HYPERLIQUID_CHAIN_ID && "cursor-not-allowed opacity-50",
+                  )
+                }
                 onClick={() => {
                   if (isBuyMode) {
                     return;
@@ -1246,16 +1306,18 @@ function AnySpendInner({
                 setIsSrcInputDirty(false);
                 setDstAmount(value);
               }}
-              anyspendQuote={anyspendQuote}
-              onShowPointsDetail={() => navigateToPanel(PanelView.POINTS_DETAIL, "forward")}
-              onShowFeeDetail={() => navigateToPanel(PanelView.FEE_DETAIL, "forward")}
+              anyspendQuote={isDirectTransfer ? undefined : anyspendQuote}
+              onShowPointsDetail={
+                isDirectTransfer ? undefined : () => navigateToPanel(PanelView.POINTS_DETAIL, "forward")
+              }
+              onShowFeeDetail={isDirectTransfer ? undefined : () => navigateToPanel(PanelView.FEE_DETAIL, "forward")}
             />
           )}
         </div>
 
-        {/* Gas indicator - show when source chain has gas data */}
-        {gasPriceData && !isLoadingGas && activeTab === "crypto" && (
-          <GasIndicator gasPrice={gasPriceData} className="mt-2 w-full" />
+        {/* Gas indicator - show when source chain has gas data, hide for direct transfers */}
+        {gasPriceData && !isLoadingGas && activeTab === "crypto" && !isDirectTransfer && (
+          <GasIndicator gasPrice={gasPriceData} className={classes?.gasIndicator || "mt-2 w-full"} />
         )}
 
         {/* Main button section */}
@@ -1269,10 +1331,15 @@ function AnySpendInner({
             accentColor={"hsl(var(--as-brand))"}
             disabled={btnInfo.disable}
             onClick={onMainButtonClick}
-            className={cn(
-              "as-main-button relative w-full",
-              btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand",
-            )}
+            className={
+              (btnInfo.error && classes?.mainButtonError) ||
+              (btnInfo.disable && classes?.mainButtonDisabled) ||
+              classes?.mainButton ||
+              cn(
+                "as-main-button relative w-full",
+                btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand",
+              )
+            }
             textClassName={cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white")}
           >
             <div className="flex items-center justify-center gap-2">
@@ -1285,7 +1352,10 @@ function AnySpendInner({
             <Button
               variant="link"
               onClick={onClickHistory}
-              className="text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors"
+              className={
+                classes?.historyButton ||
+                "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors"
+              }
             >
               <HistoryIcon className="h-4 w-4" /> <span className="pr-4">Transaction History</span>
             </Button>
@@ -1408,15 +1478,70 @@ function AnySpendInner({
     />
   ) : null;
 
+  const directTransferSuccessView = (
+    <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-6 p-5">
+      <div className="flex flex-col items-center gap-4">
+        <div className="bg-as-brand/10 flex h-16 w-16 items-center justify-center rounded-full">
+          <CheckCircle className="text-as-brand h-8 w-8" />
+        </div>
+        <div className="text-center">
+          <h2 className="text-as-primary text-xl font-bold">Transfer Complete</h2>
+          <p className="text-as-secondary mt-1 text-sm">
+            Your {selectedSrcToken.symbol} has been sent to {effectiveRecipientAddress?.slice(0, 6)}...
+            {effectiveRecipientAddress?.slice(-4)} on {getChainName(selectedSrcChainId)}
+          </p>
+        </div>
+      </div>
+
+      {directTransferTxHash && (
+        <a
+          href={getExplorerTxUrl(selectedSrcChainId, directTransferTxHash)}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-as-brand hover:text-as-brand/80 text-sm underline"
+        >
+          View transaction
+        </a>
+      )}
+
+      <div className="flex w-full flex-col gap-2">
+        {returnToHomeUrl ? (
+          <Button
+            onClick={() => {
+              window.location.href = returnToHomeUrl;
+            }}
+            className="bg-as-brand hover:bg-as-brand/90 w-full text-white"
+          >
+            {returnHomeLabel || "Return to Home"}
+          </Button>
+        ) : (
+          <Button
+            onClick={() => {
+              onSuccess?.(directTransferTxHash);
+              setDirectTransferTxHash(undefined);
+              setB3ModalOpen(false);
+            }}
+            className="bg-as-brand hover:bg-as-brand/90 w-full text-white"
+          >
+            {returnHomeLabel || "Done"}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+
   // Add tabs to the main component when no order is loaded
   return (
     <StyleRoot>
       <div
-        className={cn(
-          "anyspend-container font-inter mx-auto w-full max-w-[460px]",
-          mode === "page" &&
-            "bg-as-surface-primary border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl",
-        )}
+        className={
+          classes?.container ||
+          cn(
+            "anyspend-container font-inter mx-auto w-full max-w-[460px]",
+            mode === "page" &&
+              "bg-as-surface-primary border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl",
+          )
+        }
       >
         <TransitionPanel
           activeIndex={
@@ -1476,6 +1601,9 @@ function AnySpendInner({
             <div key="fee-detail-view" className={cn(mode === "page" && "p-6")}>
               {feeDetailView}
             </div>,
+            <div key="direct-transfer-success-view" className={cn(mode === "page" && "p-6")}>
+              {directTransferSuccessView}
+            </div>,
           ]}
         </TransitionPanel>
       </div>