@b3dotfun/sdk 0.1.66 → 0.1.68

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

@@ -64,18 +64,6 @@ export function TokenBalance({
 
           {!!rawBalance && (
             <>
-              {/* <button
-                onClick={() => handlePercentageClick(20)}
-                className="text-as-primary/50 bg-as-on-surface-2 hover:bg-as-on-surface-3 inline-flex rounded-lg px-2 py-1 text-xs transition-colors sm:hidden"
-              >
-                20%
-              </button>
-              <button
-                onClick={() => handlePercentageClick(50)}
-                className="text-as-primary/50 bg-as-on-surface-2 hover:bg-as-on-surface-3 inline-flex rounded-lg px-2 py-1 text-xs transition-colors"
-              >
-                50%
-              </button> */}
               <button
                 onClick={() => handlePercentageClick(100)}
                 className="text-as-primary/50 bg-as-on-surface-2 hover:bg-as-on-surface-3 inline-flex cursor-pointer rounded-lg px-2 py-1 text-xs transition-colors"

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

@@ -248,7 +248,7 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
                 {order.globalAddress}
               </div>
               <div className="order-transfer-crypto-address-copy-icon-wrapper place-self-end">
-                <Copy className="order-transfer-crypto-address-copy-icon group-hover:text-as-brand text-as-tertiarry h-4 w-4 cursor-pointer transition-all duration-200" />
+                <Copy className="order-transfer-crypto-address-copy-icon group-hover:text-as-brand text-as-tertiary h-4 w-4 cursor-pointer transition-all duration-200" />
               </div>
             </div>
           </div>
@@ -275,14 +275,6 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
           Copy deposit address
         </ShinyButton>
 
-        {/* <button
-          className="order-transfer-crypto-cancel-btn text-as-primary/60 hover:text-as-primary flex w-full items-center justify-center gap-2 py-2 transition-colors"
-          onClick={onBack}
-        >
-          <RefreshCcw className="h-4 w-4" />
-          Cancel and start over
-        </button> */}
-
         <PaymentMethodSwitch
           currentMethod={CryptoPaymentMethodType.TRANSFER_CRYPTO}
           onMethodChange={onPaymentMethodChange}

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

@@ -3,7 +3,10 @@
 import { ALL_CHAINS } from "@b3dotfun/sdk/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
-import { CheckCircle2, Home } from "lucide-react";
+import { ShinyButton } from "@b3dotfun/sdk/global-account/react";
+import { Home } from "lucide-react";
+import { useAnySpendCustomization } from "../context/AnySpendCustomizationContext";
+import { AnimatedCheckmark } from "../icons/AnimatedCheckmark";
 import { TransferResult } from "../../hooks/useWatchTransfer";
 import { ChainTokenIcon } from "./ChainTokenIcon";
 
@@ -37,6 +40,7 @@ export function TransferResultScreen({
   onClose,
 }: TransferResultScreenProps) {
   const chain = ALL_CHAINS[chainId];
+  const { content } = useAnySpendCustomization();
 
   const handleClose = () => {
     if (onClose) {
@@ -54,15 +58,17 @@ export function TransferResultScreen({
       )}
     >
       <div className="anyspend-transfer-result-content flex flex-col items-center gap-6">
-        {/* Success icon */}
-        <div className="anyspend-transfer-success-icon bg-as-success-secondary flex h-16 w-16 items-center justify-center rounded-full">
-          <CheckCircle2 className="text-as-content-icon-success h-10 w-10" />
+        {/* Animated success checkmark */}
+        <div className="anyspend-transfer-success-icon">
+          <AnimatedCheckmark className="h-16 w-16" />
         </div>
 
         {/* Success message */}
         <div className="anyspend-transfer-success-message flex flex-col items-center gap-2">
-          <h2 className="text-as-primary text-xl font-semibold">Transfer Received!</h2>
-          <p className="text-as-secondary text-center text-sm">Your transfer has been successfully received.</p>
+          <h2 className="text-as-primary text-xl font-semibold">{content.successTitle || "Transfer Received!"}</h2>
+          <p className="text-as-secondary text-center text-sm">
+            {content.successDescription || "Your transfer has been successfully received."}
+          </p>
         </div>
 
         {/* Amount display */}
@@ -89,18 +95,20 @@ export function TransferResultScreen({
         </div>
 
         {/* Close button */}
-        <button
+        <ShinyButton
+          accentColor="hsl(var(--as-brand))"
           onClick={handleClose}
-          className="anyspend-transfer-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-xl py-3.5 font-medium text-white transition-all hover:opacity-90"
+          className="anyspend-transfer-close-button w-full"
+          textClassName="text-white"
         >
           {mode === "page" ? (
-            <>
+            <span className="flex items-center justify-center gap-2">
               Return to Home <Home className="ml-2 h-4 w-4" />
-            </>
+            </span>
           ) : (
             "Close"
           )}
-        </button>
+        </ShinyButton>
       </div>
     </div>
   );

package/src/anyspend/react/components/context/AnySpendCustomizationContext.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "../types/customization";
+
+interface AnySpendCustomizationContextValue {
+  slots: AnySpendSlots;
+  content: AnySpendContent;
+  theme: AnySpendTheme;
+}
+
+const AnySpendCustomizationContext = createContext<AnySpendCustomizationContextValue>({
+  slots: {},
+  content: {},
+  theme: {},
+});
+
+/** Convert a hex color to HSL string (e.g. "210 50% 40%"). Supports both 3-digit (#fff) and 6-digit (#ffffff) formats. */
+function hexToHsl(hex: string): string | null {
+  const hexStr = hex.replace(/^#/, "");
+  let r: number, g: number, b: number;
+
+  if (hexStr.length === 3) {
+    // 3-digit hex shorthand (e.g., #fff)
+    [r, g, b] = [0, 1, 2].map(i => parseInt(hexStr[i] + hexStr[i], 16) / 255);
+  } else if (hexStr.length === 6) {
+    // 6-digit hex (e.g., #ffffff)
+    [r, g, b] = [0, 2, 4].map(i => parseInt(hexStr.substring(i, i + 2), 16) / 255);
+  } else {
+    return null;
+  }
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+
+  return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+}
+
+const CSS_VAR_MAP: Record<string, string> = {
+  primary: "--as-primary",
+  secondary: "--as-secondary",
+  tertiary: "--as-tertiary",
+  surfacePrimary: "--as-surface-primary",
+  surfaceSecondary: "--as-surface-secondary",
+  brand: "--as-brand",
+  borderPrimary: "--as-border-primary",
+  borderSecondary: "--as-border-secondary",
+};
+
+export interface AnySpendCustomizationProviderProps {
+  slots?: AnySpendSlots;
+  content?: AnySpendContent;
+  theme?: AnySpendTheme;
+  children: ReactNode;
+}
+
+export function AnySpendCustomizationProvider({ slots, content, theme, children }: AnySpendCustomizationProviderProps) {
+  const value = useMemo<AnySpendCustomizationContextValue>(
+    () => ({
+      slots: slots || {},
+      content: content || {},
+      theme: theme || {},
+    }),
+    [slots, content, theme],
+  );
+
+  const cssVarOverrides = useMemo(() => {
+    const vars: Record<string, string> = {};
+
+    // Convert brandColor hex → HSL → --as-brand
+    if (theme?.brandColor) {
+      const hsl = hexToHsl(theme.brandColor);
+      if (hsl) vars["--as-brand"] = hsl;
+    }
+
+    // Apply explicit color overrides (convert hex to HSL)
+    if (theme?.colors) {
+      for (const [key, val] of Object.entries(theme.colors)) {
+        const cssVar = CSS_VAR_MAP[key];
+        if (cssVar && val) {
+          const hsl = hexToHsl(val);
+          if (hsl) vars[cssVar] = hsl;
+        }
+      }
+    }
+
+    return vars;
+  }, [theme?.brandColor, theme?.colors]);
+
+  const hasOverrides = Object.keys(cssVarOverrides).length > 0;
+
+  return (
+    <AnySpendCustomizationContext.Provider value={value}>
+      {hasOverrides ? (
+        <div style={{ ...cssVarOverrides, display: "contents" } as React.CSSProperties}>{children}</div>
+      ) : (
+        children
+      )}
+    </AnySpendCustomizationContext.Provider>
+  );
+}
+
+export function useAnySpendCustomization(): AnySpendCustomizationContextValue {
+  return useContext(AnySpendCustomizationContext);
+}

package/src/anyspend/react/components/icons/AnimatedCheckmark.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { useId } from "react";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+
+interface AnimatedCheckmarkProps {
+  /** Circle stroke / fill color (CSS color value) */
+  color?: string;
+  /** Checkmark stroke color (defaults to white) */
+  checkColor?: string;
+  /** Stroke width for the circle and check path */
+  strokeWidth?: number;
+  /** Tailwind or custom className to control size, e.g. "h-16 w-16" */
+  className?: string;
+  /** Animation delay in seconds */
+  delay?: number;
+  /** Render in final (post-animation) state with no animation */
+  static?: boolean;
+}
+
+/**
+ * Animated checkmark SVG component.
+ * Circle draws in → checkmark draws → background fills → subtle scale bounce.
+ *
+ * Size is controlled via className (Tailwind classes like `h-10 w-10`, `h-16 w-16`, etc.).
+ * The SVG scales to fit its container via viewBox.
+ */
+export function AnimatedCheckmark({
+  color = "#22c55e",
+  checkColor = "#fff",
+  strokeWidth = 2,
+  className,
+  delay = 0,
+  static: isStatic = false,
+}: AnimatedCheckmarkProps) {
+  const id = `ac-${useId().replace(/:/g, "")}`;
+
+  if (isStatic) {
+    return (
+      <svg
+        className={className}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 52 52"
+        style={{
+          borderRadius: "50%",
+          display: "block",
+          strokeWidth,
+          stroke: checkColor,
+          strokeMiterlimit: 10,
+          boxShadow: `inset 0px 0px 0px 100px ${color}`,
+        }}
+      >
+        <circle
+          cx="26"
+          cy="26"
+          r="25"
+          fill="none"
+          style={{
+            strokeWidth,
+            strokeMiterlimit: 10,
+            stroke: color,
+          }}
+        />
+        <path fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" style={{ transformOrigin: "50% 50%" }} />
+      </svg>
+    );
+  }
+
+  return (
+    <>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+@keyframes ${id}-stroke {
+  100% { stroke-dashoffset: 0; }
+}
+@keyframes ${id}-scale {
+  0%, 100% { transform: none; }
+  50% { transform: scale3d(1.1, 1.1, 1); }
+}
+@keyframes ${id}-fill {
+  100% { box-shadow: inset 0px 0px 0px 100px ${color}; }
+}
+.${id} {
+  border-radius: 50%;
+  display: block;
+  stroke-width: ${strokeWidth};
+  stroke: ${checkColor};
+  stroke-miterlimit: 10;
+  box-shadow: inset 0px 0px 0px ${color};
+  animation:
+    ${id}-fill .4s ease-in-out ${delay + 0.4}s forwards,
+    ${id}-scale .3s ease-in-out ${delay + 0.9}s both;
+}
+.${id}__circle {
+  stroke-dasharray: 166;
+  stroke-dashoffset: 166;
+  stroke-width: ${strokeWidth};
+  stroke-miterlimit: 10;
+  stroke: ${color};
+  fill: none;
+  animation: ${id}-stroke .6s cubic-bezier(0.65, 0, 0.45, 1) ${delay}s forwards;
+}
+.${id}__check {
+  transform-origin: 50% 50%;
+  stroke-dasharray: 48;
+  stroke-dashoffset: 48;
+  animation: ${id}-stroke .3s cubic-bezier(0.65, 0, 0.45, 1) ${delay + 0.8}s forwards;
+}
+`,
+        }}
+      />
+      <svg className={cn(id, className)} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+        <circle className={`${id}__circle`} cx="26" cy="26" r="25" fill="none" />
+        <path className={`${id}__check`} fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
+      </svg>
+    </>
+  );
+}

package/src/anyspend/react/components/index.ts

@@ -1,3 +1,20 @@
+// Checkout
+export { AnySpendCheckout } from "./checkout/AnySpendCheckout";
+export type {
+  AnySpendCheckoutProps,
+  CheckoutItem,
+  CheckoutSummaryLine,
+  AnySpendCheckoutClasses,
+  CheckoutFormSchema,
+  CheckoutFormComponentProps,
+  ShippingOption,
+  DiscountResult,
+  AddressData,
+} from "./checkout/AnySpendCheckout";
+export { AnySpendCheckoutTrigger } from "./checkout/AnySpendCheckoutTrigger";
+export type { AnySpendCheckoutTriggerProps } from "./checkout/AnySpendCheckoutTrigger";
+export type { PaymentMethod } from "./checkout/CheckoutPaymentPanel";
+
 // Components
 export { AnySpend } from "./AnySpend";
 export { AnySpendBondKit } from "./AnySpendBondKit";
@@ -11,6 +28,7 @@ export type { AnySpendDepositProps, ChainConfig, DepositContractConfig } from ".
 // Classes types for styling customization
 export type {
   AnySpendAllClasses,
+  AnySpendCheckoutClasses as AnySpendCheckoutClassesFromTypes,
   AnySpendClasses,
   AnySpendCustomExactInClasses,
   AnySpendDepositClasses,
@@ -23,6 +41,21 @@ export type {
   QRDepositClasses,
   RecipientSelectionClasses,
 } from "./types/classes";
+
+// Customization types (slots, content, theme)
+export type {
+  ActionButtonSlotProps,
+  AnySpendContent,
+  AnySpendSlots,
+  AnySpendTheme,
+  ConnectWalletButtonSlotProps,
+  ErrorScreenSlotProps,
+  SuccessScreenSlotProps,
+} from "./types/customization";
+
+// Customization context (for advanced/nested usage)
+export { AnySpendCustomizationProvider, useAnySpendCustomization } from "./context/AnySpendCustomizationContext";
+
 export { AnySpendDepositHype, HYPE_TOKEN_DETAILS } from "./AnyspendDepositHype";
 export { AnySpendWorkflowTrigger } from "./AnySpendWorkflowTrigger";
 export type { AnySpendWorkflowTriggerProps } from "./AnySpendWorkflowTrigger";

package/src/anyspend/react/components/types/classes.ts

@@ -452,11 +452,81 @@ export interface QRDepositClasses {
   orderDetailsContent?: string;
 }
 
+/** Classes for AnySpendCheckout component */
+export interface AnySpendCheckoutClasses {
+  // Layout
+  root?: string;
+  layout?: string;
+  paymentColumn?: string;
+  cartColumn?: string;
+
+  // Payment panel
+  paymentPanel?: string;
+  paymentTitle?: string;
+  paymentMethodSelector?: string;
+  paymentMethodButton?: string;
+
+  // Crypto panel
+  cryptoPanel?: string;
+  tokenSelector?: string;
+  quoteDisplay?: string;
+  payButton?: string;
+
+  // Fiat / Stripe panel
+  fiatPanel?: string;
+  stripeForm?: string;
+  stripeSubmitButton?: string;
+
+  // Coinbase panel
+  coinbasePanel?: string;
+
+  // Cart panel
+  cartPanel?: string;
+  cartTitle?: string;
+  cartItemRow?: string;
+  cartItemImage?: string;
+  cartItemName?: string;
+  cartItemDescription?: string;
+  cartItemPrice?: string;
+  cartSummary?: string;
+  cartTotal?: string;
+  cartSubtotal?: string;
+  cartSummaryLine?: string;
+  cartSummaryLineLabel?: string;
+  cartSummaryLineAmount?: string;
+  cartDiscount?: string;
+  cartItemMetadata?: string;
+  cartItemMetadataLabel?: string;
+  cartItemMetadataValue?: string;
+
+  // Form panel
+  formPanel?: string;
+  formField?: string;
+  formFieldLabel?: string;
+  formFieldInput?: string;
+  shippingSelector?: string;
+  discountInput?: string;
+  addressForm?: string;
+
+  // Branding
+  poweredBy?: string;
+
+  // Success
+  successPanel?: string;
+  returnButton?: string;
+
+  // Order status tracking
+  orderStatusPanel?: string;
+  retryButton?: string;
+  transactionLink?: string;
+}
+
 /** Combined classes for all AnySpend-related components */
 export interface AnySpendAllClasses {
   deposit?: AnySpendDepositClasses;
   anySpend?: AnySpendClasses;
   customExactIn?: AnySpendCustomExactInClasses;
+  checkout?: AnySpendCheckoutClasses;
   cryptoPaySection?: CryptoPaySectionClasses;
   cryptoReceiveSection?: CryptoReceiveSectionClasses;
   panelOnramp?: PanelOnrampClasses;

package/src/anyspend/react/components/types/customization.ts

@@ -0,0 +1,99 @@
+import type { ReactNode } from "react";
+import type {
+  CheckoutFormComponentProps,
+  ShippingSelectorSlotProps,
+  DiscountInputSlotProps,
+} from "../../../types/forms";
+
+// === SLOT PROP INTERFACES ===
+
+export interface ActionButtonSlotProps {
+  onClick: () => void;
+  disabled: boolean;
+  loading: boolean;
+  text: string;
+}
+
+export interface ConnectWalletButtonSlotProps {
+  onPayment: () => void;
+  txLoading: boolean;
+  connectedAddress?: string;
+  paymentLabel: string;
+}
+
+export interface SuccessScreenSlotProps {
+  title: string;
+  description: string;
+  txHash?: string;
+  orderId?: string;
+  explorerUrl?: string;
+  onDone: () => void;
+  returnUrl?: string;
+  returnLabel?: string;
+}
+
+export interface ErrorScreenSlotProps {
+  title: string;
+  description: string;
+  errorType: "failure" | "expired" | "refunded";
+  orderId?: string;
+  onRetry?: () => void;
+  onDone?: () => void;
+}
+
+// === SLOTS (element replacement) ===
+
+export interface AnySpendSlots {
+  actionButton?: (props: ActionButtonSlotProps) => ReactNode;
+  connectWalletButton?: (props: ConnectWalletButtonSlotProps) => ReactNode;
+  header?: (props: { mode: "page" | "modal" }) => ReactNode;
+  footer?: ReactNode;
+  successScreen?: (props: SuccessScreenSlotProps) => ReactNode;
+  errorScreen?: (props: ErrorScreenSlotProps) => ReactNode;
+  /** Replace the entire checkout form panel with a custom component */
+  checkoutForm?: (props: CheckoutFormComponentProps) => ReactNode;
+  /** Replace the shipping method selector */
+  shippingSelector?: (props: ShippingSelectorSlotProps) => ReactNode;
+  /** Replace the discount code input */
+  discountInput?: (props: DiscountInputSlotProps) => ReactNode;
+}
+
+// === CONTENT (text/message overrides) ===
+
+export interface AnySpendContent {
+  // Success states
+  successTitle?: string | ReactNode;
+  successDescription?: string | ReactNode;
+
+  // Error states
+  failureTitle?: string | ReactNode;
+  failureDescription?: string | ReactNode;
+  expiredTitle?: string | ReactNode;
+  expiredDescription?: string | ReactNode;
+  refundedTitle?: string | ReactNode;
+  refundedDescription?: string | ReactNode;
+
+  // Processing states
+  processingTitle?: string | ReactNode;
+  processingDescription?: string | ReactNode;
+
+  // Buttons
+  returnButtonLabel?: string;
+  retryButtonLabel?: string;
+}
+
+// === THEME ===
+
+export interface AnySpendTheme {
+  brandColor?: string;
+  colors?: Partial<{
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    surfacePrimary: string;
+    surfaceSecondary: string;
+    brand: string;
+    borderPrimary: string;
+    borderSecondary: string;
+  }>;
+}

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

@@ -1,6 +1,7 @@
 import { USDC_BASE } from "@b3dotfun/sdk/anyspend/constants";
 import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { CreateOrderResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
 import { VisitorData } from "@b3dotfun/sdk/anyspend/types/fingerprint";
 import { buildMetadata, buildPayload, normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
 import { useB3Config } from "@b3dotfun/sdk/global-account/react";
@@ -26,7 +27,7 @@ export type CreateOnrampOrderParams = Omit<CreateOrderParams, "srcChain" | "srcT
 };
 
 export type UseAnyspendCreateOnrampOrderProps = {
-  onSuccess?: (data: any) => void;
+  onSuccess?: (data: CreateOrderResponse) => void;
   onError?: (error: Error) => void;
 };
 
@@ -124,7 +125,7 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspend
         throw error;
       }
     },
-    onSuccess: (data: any) => {
+    onSuccess: (data: CreateOrderResponse) => {
       onSuccess?.(data);
     },
     onError: (error: Error) => {

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

@@ -1,5 +1,6 @@
 import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { CreateOrderResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
 import { VisitorData } from "@b3dotfun/sdk/anyspend/types/fingerprint";
 import { buildMetadata, buildPayload, normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
 import { useB3Config } from "@b3dotfun/sdk/global-account/react";
@@ -26,7 +27,7 @@ export type CreateOrderParams = {
 };
 
 export type UseAnyspendCreateOrderProps = {
-  onSuccess?: (data: any) => void;
+  onSuccess?: (data: CreateOrderResponse) => void;
   onError?: (error: Error) => void;
 };
 
@@ -99,7 +100,7 @@ export function useAnyspendCreateOrder({ onSuccess, onError }: UseAnyspendCreate
         throw error;
       }
     },
-    onSuccess: (data: any) => {
+    onSuccess: (data: CreateOrderResponse) => {
       onSuccess?.(data);
     },
     onError: (error: Error) => {

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

@@ -110,6 +110,8 @@ interface UseAnyspendFlowProps {
   disableUrlParamManagement?: boolean;
   orderType?: "hype_duel" | "custom_exact_in" | "swap";
   customExactInConfig?: CustomExactInConfig;
+  /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
+  senderAddress?: string;
 }
 
 // This hook serves for order hype_duel and custom_exact_in
@@ -127,6 +129,7 @@ export function useAnyspendFlow({
   disableUrlParamManagement = false,
   orderType = "hype_duel",
   customExactInConfig,
+  senderAddress,
 }: UseAnyspendFlowProps) {
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
@@ -180,9 +183,10 @@ export function useAnyspendFlow({
   const recipientName = recipientProfile.data?.name;
 
   // Check token balance for crypto payments
+  const effectiveBalanceAddress = senderAddress || walletAddress;
   const { rawBalance, isLoading: isBalanceLoading } = useTokenBalance({
     token: selectedSrcToken,
-    address: walletAddress,
+    address: effectiveBalanceAddress,
   });
 
   // Check if user has enough balance