@b3dotfun/sdk 0.1.66 → 0.1.68

package/dist/esm/anyspend/react/components/AnySpendCustom.js

@@ -17,6 +17,7 @@ import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodStat
 import { useOnOrderSuccess } from "../hooks/useOnOrderSuccess.js";
 import { useRecipientAddressState } from "../hooks/useRecipientAddressState.js";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
+import { AnySpendCustomizationProvider } from "./context/AnySpendCustomizationContext.js";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
 import { CryptoPaymentMethodDisplay } from "./common/CryptoPaymentMethodDisplay.js";
 import { FeeBreakDown } from "./common/FeeBreakDown.js";
@@ -106,9 +107,9 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
 }
 export function AnySpendCustom(props) {
     const fingerprintConfig = getFingerprintConfig();
-    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendCustomInner, { ...props }) }));
+    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendCustomizationProvider, { slots: props.slots, content: props.content, theme: props.theme, children: _jsx(AnySpendCustomInner, { ...props }) }) }));
 }
-function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabProps = "crypto", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true, onShowPointsDetail, srcFiatAmount: srcFiatAmountProps, forceFiatPayment, }) {
+function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabProps = "crypto", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true, onShowPointsDetail, srcFiatAmount: srcFiatAmountProps, forceFiatPayment, senderAddress, }) {
     const hasMounted = useHasMounted();
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
@@ -132,14 +133,15 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
     const chainName = useMemo(() => simpleHashChainToChainName(srcChainId), [srcChainId]);
     const { data: tokenList } = useAnyspendTokenList(srcChainId, "");
     // Get token balances for the selected chain
+    const effectiveBalanceAddress = senderAddress || currentWallet?.wallet?.address || "";
     const { nativeTokens, fungibleTokens } = useTokenBalancesByChain({
-        address: currentWallet?.wallet?.address || "",
+        address: effectiveBalanceAddress,
         chainsIds: [srcChainId],
-        enabled: !!currentWallet?.wallet?.address && !!chainName,
+        enabled: !!effectiveBalanceAddress && !!chainName,
     });
     // Find a token with a balance, prioritizing tokens the user already owns
     const getTokenWithBalance = useCallback(() => {
-        if (!currentWallet?.wallet?.address || (!nativeTokens && !fungibleTokens) || !tokenList) {
+        if (!effectiveBalanceAddress || (!nativeTokens && !fungibleTokens) || !tokenList) {
             return getDefaultToken(srcChainId);
         }
         // First check native tokens (ETH, etc.)
@@ -166,7 +168,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         }
         // Default fallback
         return getDefaultToken(srcChainId);
-    }, [currentWallet?.wallet?.address, nativeTokens, fungibleTokens, tokenList, srcChainId]);
+    }, [effectiveBalanceAddress, nativeTokens, fungibleTokens, tokenList, srcChainId]);
     // Set the selected token with preference for tokens user owns
     const [srcToken, setSrcToken] = useState(getDefaultToken(srcChainId));
     const [dirtySelectSrcToken, setDirtySelectSrcToken] = useState(false);
@@ -300,7 +302,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                 dstToken: dstToken,
                 srcAmount: srcAmount.toString(),
                 recipientAddress,
-                creatorAddress: currentWallet?.wallet?.address,
+                creatorAddress: senderAddress || currentWallet?.wallet?.address,
                 nft: orderType === "mint_nft"
                     ? metadata.nftContract.type === "erc1155"
                         ? {
@@ -458,13 +460,13 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
             opacity: hasMounted ? 1 : 0,
             y: hasMounted ? 0 : 20,
             filter: hasMounted ? "blur(0px)" : "blur(10px)",
-        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "flex w-full items-center justify-between gap-4", children: [_jsx("div", { className: "text-as-tertiarry text-sm", children: orderType === "swap"
+        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "flex w-full items-center justify-between gap-4", children: [_jsx("div", { className: "text-as-tertiary text-sm", children: orderType === "swap"
                     ? "Recipient"
                     : orderType === "mint_nft"
                         ? "Receive NFT at"
                         : orderType === "join_tournament"
                             ? "Join for"
-                            : "Recipient" }), _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [recipientAddress ? (_jsx("button", { className: cn("text-as-tertiarry flex items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx("div", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: _jsx("span", { className: "whitespace-nowrap", children: recipientName ? formatUsername(recipientName) : shortenAddress(recipientAddress) }) }) })) : (_jsx("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx("div", { className: "whitespace-nowrap text-sm font-medium", children: "Select recipient" }) })), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })] }, recipientAddress)) : null;
+                            : "Recipient" }), _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [recipientAddress ? (_jsx("button", { className: cn("text-as-tertiary flex items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx("div", { className: "text-as-tertiary flex items-center gap-1 text-sm", children: _jsx("span", { className: "whitespace-nowrap", children: recipientName ? formatUsername(recipientName) : shortenAddress(recipientAddress) }) }) })) : (_jsx("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx("div", { className: "whitespace-nowrap text-sm font-medium", children: "Select recipient" }) })), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })] }, recipientAddress)) : null;
     const historyView = (_jsx("div", { className: cn("mx-auto flex w-full max-w-2xl flex-col items-center", mode === "modal" && "bg-b3-react-background"), children: _jsx(OrderHistory, { mode: mode, onBack: () => {
                 setActivePanel(PanelView.HISTORY);
             }, onSelectOrder: onSelectOrder }) }));
@@ -507,18 +509,18 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: _jsx(CryptoPaymentMethodDisplay, { paymentMethod: effectiveCryptoPaymentMethod, connectedAddress: connectedAddress, connectedName: connectedName }) })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiary flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiary flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: _jsx(CryptoPaymentMethodDisplay, { paymentMethod: effectiveCryptoPaymentMethod, connectedAddress: connectedAddress, connectedName: connectedName }) })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(motion.div, { initial: false, animate: {
                                                         opacity: hasMounted ? 1 : 0,
                                                         y: hasMounted ? 0 : 20,
                                                         filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                                    }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry text-sm", children: "Pay with" }), _jsx(OrderToken, { address: currentWallet?.wallet?.address, context: "from", chainId: srcChainId, setChainId: setSrcChainId, token: srcToken, setToken: token => {
+                                                    }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiary text-sm", children: "Pay with" }), _jsx(OrderToken, { address: effectiveBalanceAddress || undefined, context: "from", chainId: srcChainId, setChainId: setSrcChainId, token: srcToken, setToken: token => {
                                                                 setDirtySelectSrcToken(true);
                                                                 setSrcToken(token);
                                                             }, requiredAmount: srcAmount || undefined })] }), _jsx("div", { className: "divider w-full" }), _jsxs(motion.div, { initial: false, animate: {
                                                         opacity: hasMounted ? 1 : 0,
                                                         y: hasMounted ? 0 : 20,
                                                         filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                                    }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between gap-4", children: [_jsxs("span", { className: "text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm", children: [_jsxs("span", { className: "whitespace-nowrap", children: ["Total ", _jsx("span", { className: "text-as-tertiarry", children: "(with fee)" })] }), anyspendQuote?.data?.fee && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "top", children: _jsx(FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), _jsxs("div", { className: "flex flex-col items-end gap-0.5", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [renderPointsBadge(), _jsxs("span", { className: "text-as-primary whitespace-nowrap font-semibold", children: [formattedSrcAmount || "--", " ", srcToken.symbol] })] }), anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd && (_jsxs("span", { className: "text-as-secondary text-xs", children: ["incl. $", ((Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
+                                                    }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between gap-4", children: [_jsxs("span", { className: "text-as-tertiary flex flex-wrap items-center gap-1.5 text-sm", children: [_jsxs("span", { className: "whitespace-nowrap", children: ["Total ", _jsx("span", { className: "text-as-tertiary", children: "(with fee)" })] }), anyspendQuote?.data?.fee && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "top", children: _jsx(FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), _jsxs("div", { className: "flex flex-col items-end gap-0.5", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [renderPointsBadge(), _jsxs("span", { className: "text-as-primary whitespace-nowrap font-semibold", children: [formattedSrcAmount || "--", " ", srcToken.symbol] })] }), anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd && (_jsxs("span", { className: "text-as-secondary text-xs", children: ["incl. $", ((Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
                                                                             10000).toFixed(2), " ", "fee"] }))] })] })] })] }), _jsx("div", { className: cn("flex w-full flex-col items-center justify-between gap-2"), children: _jsx(motion.div, { initial: false, animate: {
                                             opacity: hasMounted ? 1 : 0,
                                             y: hasMounted ? 0 : 20,
@@ -527,7 +529,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), _jsx("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: (() => {
+                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiary flex h-7 items-center text-sm", children: "Pay with" }), _jsx("button", { className: "text-as-tertiary flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: (() => {
                                                         const config = FIAT_PAYMENT_METHOD_DISPLAY[selectedFiatPaymentMethod];
                                                         if (config) {
                                                             return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [_jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: config.icon }) }), config.label] }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
@@ -537,7 +539,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between gap-4", children: [_jsxs("span", { className: "text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm", children: [_jsxs("span", { className: "whitespace-nowrap", children: ["Total ", _jsx("span", { className: "text-as-tertiarry", children: "(USD)" })] }), anyspendQuote?.data?.fee && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "top", children: _jsx(FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), _jsxs("div", { className: "flex flex-col items-end gap-0.5", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [renderPointsBadge(), isLoadingAnyspendQuote ? (_jsx("div", { className: "bg-as-surface-secondary h-7 w-16 animate-pulse rounded" })) : (_jsx("span", { className: "text-as-primary whitespace-nowrap text-xl font-semibold", children: anyspendQuote?.data?.currencyIn?.amountUsd ? (`$${Number(anyspendQuote.data.currencyIn.amountUsd).toFixed(2)}`) : (_jsxs(_Fragment, { children: ["$", parseFloat(srcFiatAmount || "0").toFixed(2), _jsx("span", { className: "text-as-tertiarry text-base", children: "+" })] })) }))] }), (() => {
+                                            }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between gap-4", children: [_jsxs("span", { className: "text-as-tertiary flex flex-wrap items-center gap-1.5 text-sm", children: [_jsxs("span", { className: "whitespace-nowrap", children: ["Total ", _jsx("span", { className: "text-as-tertiary", children: "(USD)" })] }), anyspendQuote?.data?.fee && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "top", children: _jsx(FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), _jsxs("div", { className: "flex flex-col items-end gap-0.5", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [renderPointsBadge(), isLoadingAnyspendQuote ? (_jsx("div", { className: "bg-as-surface-secondary h-7 w-16 animate-pulse rounded" })) : (_jsx("span", { className: "text-as-primary whitespace-nowrap text-xl font-semibold", children: anyspendQuote?.data?.currencyIn?.amountUsd ? (`$${Number(anyspendQuote.data.currencyIn.amountUsd).toFixed(2)}`) : (_jsxs(_Fragment, { children: ["$", parseFloat(srcFiatAmount || "0").toFixed(2), _jsx("span", { className: "text-as-tertiary text-base", children: "+" })] })) }))] }), (() => {
                                                             if (anyspendQuote?.data?.fee?.type === "stripeweb2_fee" && anyspendQuote.data.fee.originalAmount) {
                                                                 const fee = (Number(anyspendQuote.data.fee.originalAmount) - Number(anyspendQuote.data.fee.finalAmount)) /
                                                                     1e6;

package/dist/esm/anyspend/react/components/AnySpendCustomExactIn.d.ts

@@ -1,6 +1,7 @@
 import { components } from "../../../anyspend/types/api";
 import { GetQuoteResponse } from "../../../anyspend/types/api_req_res";
 import type { AnySpendCustomExactInClasses } from "./types/classes";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
 type CustomExactInConfig = {
     functionAbi: string;
     functionName: string;
@@ -46,6 +47,14 @@ export interface AnySpendCustomExactInProps {
     allowDirectTransfer?: boolean;
     /** Opaque metadata passed to the order for callbacks (e.g., workflow form data) */
     callbackMetadata?: Record<string, unknown>;
+    /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
+    senderAddress?: string;
+    /** Render function overrides for replaceable UI elements */
+    slots?: AnySpendSlots;
+    /** String or ReactNode overrides for text/messages */
+    content?: AnySpendContent;
+    /** Structured color/theme configuration */
+    theme?: AnySpendTheme;
 }
 export declare function AnySpendCustomExactIn(props: AnySpendCustomExactInProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/anyspend/react/components/AnySpendCustomExactIn.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { getChainName, getExplorerTxUrl } from "../../../anyspend/index.js";
 import { useGasPrice } from "../../../anyspend/react/index.js";
 import { normalizeAddress } from "../../../anyspend/utils/index.js";
@@ -6,9 +6,11 @@ import { Button, ShinyButton, StyleRoot, toast, TransitionPanel, useAccountWalle
 import { cn } from "../../../shared/utils/cn.js";
 import { formatUnits } from "../../../shared/utils/number.js";
 import invariant from "invariant";
-import { ArrowDown, CheckCircle, Loader2 } from "lucide-react";
+import { ArrowDown, Loader2 } from "lucide-react";
+import { AnimatedCheckmark } from "./icons/AnimatedCheckmark.js";
 import { motion } from "motion/react";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { AnySpendCustomizationProvider, useAnySpendCustomization } from "./context/AnySpendCustomizationContext.js";
 import { useSetActiveWallet } from "thirdweb/react";
 import { B3_TOKEN } from "../../constants/index.js";
 import { useDirectTransfer } from "../hooks/useDirectTransfer.js";
@@ -27,9 +29,10 @@ import { RecipientSelection } from "./common/RecipientSelection.js";
 const SLIPPAGE_PERCENT = 3;
 export function AnySpendCustomExactIn(props) {
     const fingerprintConfig = getFingerprintConfig();
-    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendCustomExactInInner, { ...props }) }));
+    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendCustomizationProvider, { slots: props.slots, content: props.content, theme: props.theme, children: _jsx(AnySpendCustomExactInInner, { ...props }) }) }));
 }
-function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, destinationToken, destinationChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, customExactInConfig, destinationTokenAmount, orderType = "custom_exact_in", minDestinationAmount, header, returnToHomeUrl, customRecipientLabel, returnHomeLabel, classes, allowDirectTransfer = false, callbackMetadata, }) {
+function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, destinationToken, destinationChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, customExactInConfig, destinationTokenAmount, orderType = "custom_exact_in", minDestinationAmount, header, returnToHomeUrl, customRecipientLabel, returnHomeLabel, classes, allowDirectTransfer = false, callbackMetadata, senderAddress, }) {
+    const { slots, content } = useAnySpendCustomization();
     const actionLabel = customExactInConfig?.action ?? "Custom Execution";
     const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
     const DESTINATION_TOKEN_DETAILS = {
@@ -49,6 +52,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         disableUrlParamManagement: true,
         orderType,
         customExactInConfig,
+        senderAddress,
     });
     const { connectedEOAWallet } = useAccountWallet();
     const setActiveWallet = useSetActiveWallet();
@@ -226,10 +230,15 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
                                     "swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: false, effectiveRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, customRecipientLabel: customRecipientLabel, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: isSrcInputDirty && !destinationTokenAmount ? dstAmount : dstAmountInput, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
                                 setIsSrcInputDirty(false);
                                 setDstAmountInput(value);
-                            }, disableAmountInput: !!destinationTokenAmount, anyspendQuote: isDirectTransfer ? undefined : anyspendQuote, onShowPointsDetail: isDirectTransfer ? undefined : () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: isDirectTransfer ? undefined : () => setActivePanel(PanelView.FEE_DETAIL) }))] }) }), _jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (btnInfo.error && classes?.mainButtonError) ||
+                            }, disableAmountInput: !!destinationTokenAmount, anyspendQuote: isDirectTransfer ? undefined : anyspendQuote, onShowPointsDetail: isDirectTransfer ? undefined : () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: isDirectTransfer ? undefined : () => setActivePanel(PanelView.FEE_DETAIL) }))] }) }), _jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: slots.actionButton ? (slots.actionButton({
+                    onClick: onMainButtonClick,
+                    disabled: btnInfo.disable,
+                    loading: btnInfo.loading,
+                    text: btnInfo.text,
+                })) : (_jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, 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"), children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && _jsx(Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }) }), gasPriceData && !isLoadingGas && paymentType === "crypto" && !isDirectTransfer && (_jsx(GasIndicator, { gasPrice: gasPriceData, className: classes?.gasIndicator || "mt-2 w-full" })), mainFooter ? mainFooter : null] }));
+                        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"), children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && _jsx(Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) })) }), gasPriceData && !isLoadingGas && paymentType === "crypto" && !isDirectTransfer && (_jsx(GasIndicator, { gasPrice: gasPriceData, className: classes?.gasIndicator || "mt-2 w-full" })), mainFooter ? mainFooter : null] }));
     const handleCryptoOrder = async () => {
         try {
             const isDirectTransfer = isSameChainSameToken && allowDirectTransfer;
@@ -269,7 +278,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
                     dstToken: selectedDstToken,
                     srcAmount: srcAmountFromQuote,
                     expectedDstAmount,
-                    creatorAddress: globalAddress,
+                    creatorAddress: senderAddress || globalAddress,
                     payload: {
                         amount: activeOutputAmountInWei,
                         data: encodedData,
@@ -294,7 +303,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
                     dstToken: selectedDstToken,
                     srcAmount: srcAmountBigInt.toString(),
                     expectedDstAmount: expectedDstAmountRaw,
-                    creatorAddress: globalAddress,
+                    creatorAddress: senderAddress || globalAddress,
                     payload,
                     callbackMetadata,
                 });
@@ -352,7 +361,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
                     srcFiatAmount: srcAmount,
                     onramp: onrampOptions,
                     expectedDstAmount,
-                    creatorAddress: globalAddress,
+                    creatorAddress: senderAddress || globalAddress,
                     payload: {
                         amount: activeOutputAmountInWei,
                         data: encodedData,
@@ -374,7 +383,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
                     srcFiatAmount: srcAmount,
                     onramp: onrampOptions,
                     expectedDstAmount: expectedDstAmountRaw,
-                    creatorAddress: globalAddress,
+                    creatorAddress: senderAddress || globalAddress,
                     payload,
                 });
             }
@@ -407,7 +416,28 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
             : anyspendQuote.data.currencyIn?.amountUsd
                 ? Number(anyspendQuote.data.currencyIn.amountUsd)
                 : undefined, onBack: () => setActivePanel(PanelView.MAIN) })) : null;
-    const directTransferSuccessView = (_jsxs(motion.div, { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 }, className: "flex flex-col items-center justify-center gap-6 py-8", children: [_jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-green-500/20", children: _jsx(CheckCircle, { className: "h-10 w-10 text-green-500" }) }), _jsxs("div", { className: "text-center", children: [_jsx("h2", { className: "text-as-primary mb-2 text-xl font-bold", children: "Transfer Complete!" }), _jsxs("p", { className: "text-as-primary/60 text-sm", children: [srcAmount, " ", selectedSrcToken.symbol, " sent on ", getChainName(selectedSrcChainId)] }), _jsxs("p", { className: "text-as-primary/60 mt-1 text-sm", children: ["to ", selectedRecipientOrDefault?.slice(0, 6), "...", selectedRecipientOrDefault?.slice(-4)] })] }), directTransferTxHash && (_jsx("a", { href: getExplorerTxUrl(selectedSrcChainId, directTransferTxHash || ""), target: "_blank", rel: "noopener noreferrer", className: "text-as-brand text-sm underline", children: "View Transaction" })), _jsx(Button, { className: "bg-as-brand hover:bg-as-brand/90 mt-4 w-full rounded-xl py-3 font-semibold text-white", onClick: () => {
+    const exactInSuccessTitle = content.successTitle || "Transfer Complete!";
+    const exactInSuccessDesc = content.successDescription || `${srcAmount} ${selectedSrcToken.symbol} sent on ${getChainName(selectedSrcChainId)}`;
+    const exactInReturnLabel = content.returnButtonLabel || returnHomeLabel;
+    const directTransferSuccessView = slots.successScreen ? (_jsx(_Fragment, { children: slots.successScreen({
+            title: typeof exactInSuccessTitle === "string" ? exactInSuccessTitle : "Transfer Complete!",
+            description: typeof exactInSuccessDesc === "string" ? exactInSuccessDesc : "",
+            txHash: directTransferTxHash,
+            explorerUrl: directTransferTxHash
+                ? getExplorerTxUrl(selectedSrcChainId, directTransferTxHash || "")
+                : undefined,
+            onDone: () => {
+                onSuccess?.(srcAmount);
+                if (returnToHomeUrl) {
+                    window.location.href = returnToHomeUrl;
+                }
+                else {
+                    setB3ModalOpen(false);
+                }
+            },
+            returnUrl: returnToHomeUrl,
+            returnLabel: exactInReturnLabel || undefined,
+        }) })) : (_jsxs(motion.div, { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 }, className: "flex flex-col items-center justify-center gap-6 py-8", children: [_jsx(AnimatedCheckmark, { className: "h-16 w-16" }), _jsxs("div", { className: "text-center", children: [_jsx("h2", { className: "text-as-primary mb-2 text-xl font-bold", children: exactInSuccessTitle }), _jsx("p", { className: "text-as-primary/60 text-sm", children: exactInSuccessDesc }), _jsxs("p", { className: "text-as-primary/60 mt-1 text-sm", children: ["to ", selectedRecipientOrDefault?.slice(0, 6), "...", selectedRecipientOrDefault?.slice(-4)] })] }), directTransferTxHash && (_jsx("a", { href: getExplorerTxUrl(selectedSrcChainId, directTransferTxHash || ""), target: "_blank", rel: "noopener noreferrer", className: "text-as-brand text-sm underline", children: "View Transaction" })), _jsx(Button, { className: "bg-as-brand hover:bg-as-brand/90 mt-4 w-full rounded-xl py-3 font-semibold text-white", onClick: () => {
                     onSuccess?.(srcAmount);
                     if (returnToHomeUrl) {
                         window.location.href = returnToHomeUrl;
@@ -415,7 +445,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
                     else {
                         setB3ModalOpen(false);
                     }
-                }, children: returnHomeLabel || (returnToHomeUrl ? "Return to Home" : "Done") })] }));
+                }, children: exactInReturnLabel || (returnToHomeUrl ? "Return to Home" : "Done") })] }));
     return (_jsx(StyleRoot, { children: _jsx("div", { className: classes?.root ||
                 cn("anyspend-container font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: _jsx(TransitionPanel, { activeIndex: orderId
                     ? oat

package/dist/esm/anyspend/react/components/AnySpendDeposit.d.ts

@@ -1,6 +1,7 @@
 import { components } from "../../../anyspend/types/api";
 import { GetQuoteResponse } from "../../../anyspend/types/api_req_res";
 import type { AnySpendAllClasses } from "./types/classes";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
 export interface DepositContractConfig {
     /** Custom function ABI JSON string */
     functionAbi: string;
@@ -103,6 +104,14 @@ export interface AnySpendDepositProps {
     destinationTokenAmount?: string;
     /** Opaque metadata passed to the order for callbacks (e.g., workflow form data) */
     callbackMetadata?: Record<string, unknown>;
+    /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
+    senderAddress?: string;
+    /** Custom slot overrides for sub-components */
+    slots?: AnySpendSlots;
+    /** Custom content overrides for sub-components */
+    content?: AnySpendContent;
+    /** Custom theme overrides for sub-components */
+    theme?: AnySpendTheme;
 }
 /**
  * A flexible deposit component that wraps AnySpendCustomExactIn with optional chain selection.
@@ -139,4 +148,4 @@ export interface AnySpendDepositProps {
  *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
  * />
  */
-export declare function AnySpendDeposit({ loadOrder, mode, recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains, minPoolSize, topChainsCount, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit, classes, allowDirectTransfer, destinationTokenAmount, callbackMetadata, }: AnySpendDepositProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function AnySpendDeposit({ loadOrder, mode, recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains, minPoolSize, topChainsCount, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit, classes, allowDirectTransfer, destinationTokenAmount, callbackMetadata, senderAddress, slots, content, theme, }: AnySpendDepositProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/anyspend/react/components/AnySpendDeposit.js

@@ -94,7 +94,7 @@ function ChainIcon({ chainId, className }) {
  *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
  * />
  */
-export function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains = DEFAULT_SUPPORTED_CHAINS, minPoolSize = DEFAULT_MIN_POOL_SIZE, topChainsCount = 3, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit = false, classes, allowDirectTransfer = false, destinationTokenAmount, callbackMetadata, }) {
+export function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains = DEFAULT_SUPPORTED_CHAINS, minPoolSize = DEFAULT_MIN_POOL_SIZE, topChainsCount = 3, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit = false, classes, allowDirectTransfer = false, destinationTokenAmount, callbackMetadata, senderAddress, slots, content, theme, }) {
     // Extract deposit-specific classes for convenience
     const depositClasses = classes?.deposit;
     const { connectedEOAWallet } = useAccountWallet();
@@ -115,8 +115,9 @@ export function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, p
         decimals: destinationTokenData?.decimals ?? 18,
         metadata: { logoURI: destinationTokenData?.logoURI },
     }), [destinationTokenAddress, destinationTokenChainId, destinationTokenData]);
-    // Fetch balances for EOA wallet
-    const { data: balanceData, isLoading: isBalanceLoading } = useSimBalance(shouldShowChainSelection ? eoaAddress : undefined, supportedChains.map(c => c.id));
+    // Fetch balances for EOA wallet (use senderAddress as fallback for pre-filled balance display)
+    const effectiveBalanceAddress = senderAddress || eoaAddress;
+    const { data: balanceData, isLoading: isBalanceLoading } = useSimBalance(shouldShowChainSelection ? effectiveBalanceAddress : undefined, supportedChains.map(c => c.id));
     // Group balances by chain and calculate total USD value per chain
     const chainBalances = useMemo(() => {
         if (!balanceData?.balances)
@@ -206,5 +207,5 @@ export function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, p
     // Deposit view
     return (_jsxs("div", { className: depositClasses?.form || "anyspend-deposit anyspend-deposit-form relative", children: [shouldShowChainSelection && (_jsxs("button", { onClick: handleBack, className: depositClasses?.backButton ||
                     "anyspend-deposit-back-button text-as-secondary hover:text-as-primary absolute left-4 top-4 z-10 flex items-center gap-1", children: [_jsx("svg", { className: depositClasses?.backIcon || "anyspend-deposit-back-icon h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }), _jsx("span", { className: depositClasses?.backText || "anyspend-deposit-back-text text-sm", children: "Back" })] })), onClose && (_jsx("button", { onClick: onClose, className: depositClasses?.closeButton ||
-                    "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: _jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), _jsx("div", { className: depositClasses?.formContent || cn("anyspend-deposit-form-content", shouldShowChainSelection && "pt-8"), children: isCustomDeposit ? (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: selectedChainId, destinationToken: destinationToken, destinationChainId: destinationTokenChainId, orderType: effectiveOrderType, minDestinationAmount: minDestinationAmount, header: header ?? defaultHeader, onSuccess: onSuccess, onOpenCustomModal: onOpenCustomModal, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa, customExactInConfig: depositContractConfig, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel, classes: classes?.customExactIn, allowDirectTransfer: allowDirectTransfer, destinationTokenAmount: destinationTokenAmount, callbackMetadata: callbackMetadata }, selectedChainId)) : (_jsx(AnySpend, { loadOrder: loadOrder, mode: mode, defaultActiveTab: paymentType, recipientAddress: recipientAddress, sourceChainId: selectedChainId, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, onSuccess: txHash => onSuccess?.(txHash ?? ""), onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, hideHeader: true, hideBottomNavigation: true, disableUrlParamManagement: true, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel, classes: classes?.anySpend, allowDirectTransfer: allowDirectTransfer, destinationTokenAmount: destinationTokenAmount, callbackMetadata: callbackMetadata }, selectedChainId)) }), _jsx(ChainWarningText, { chainId: destinationTokenChainId, classes: classes?.chainWarningText || { root: "px-4 pb-4" } })] }));
+                    "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: _jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), _jsx("div", { className: depositClasses?.formContent || cn("anyspend-deposit-form-content", shouldShowChainSelection && "pt-8"), children: isCustomDeposit ? (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: selectedChainId, destinationToken: destinationToken, destinationChainId: destinationTokenChainId, orderType: effectiveOrderType, minDestinationAmount: minDestinationAmount, header: header ?? defaultHeader, onSuccess: onSuccess, onOpenCustomModal: onOpenCustomModal, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa, customExactInConfig: depositContractConfig, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel, classes: classes?.customExactIn, allowDirectTransfer: allowDirectTransfer, destinationTokenAmount: destinationTokenAmount, callbackMetadata: callbackMetadata, senderAddress: senderAddress, slots: slots, content: content, theme: theme }, selectedChainId)) : (_jsx(AnySpend, { loadOrder: loadOrder, mode: mode, defaultActiveTab: paymentType, recipientAddress: recipientAddress, sourceChainId: selectedChainId, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, onSuccess: txHash => onSuccess?.(txHash ?? ""), onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, hideHeader: true, hideBottomNavigation: true, disableUrlParamManagement: true, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel, classes: classes?.anySpend, allowDirectTransfer: allowDirectTransfer, destinationTokenAmount: destinationTokenAmount, callbackMetadata: callbackMetadata, senderAddress: senderAddress, slots: slots, content: content, theme: theme }, selectedChainId)) }), _jsx(ChainWarningText, { chainId: destinationTokenChainId, classes: classes?.chainWarningText || { root: "px-4 pb-4" } })] }));
 }

package/dist/esm/anyspend/react/components/AnySpendDepositUpside.d.ts

@@ -1,5 +1,6 @@
 import { components } from "../../../anyspend/types/api";
-export declare function AnySpendDepositUpside({ loadOrder, mode, recipientAddress, sourceTokenAddress, sourceTokenChainId, depositContractAddress, token, onSuccess, }: {
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
+export declare function AnySpendDepositUpside({ loadOrder, mode, recipientAddress, sourceTokenAddress, sourceTokenChainId, depositContractAddress, token, onSuccess, senderAddress, slots, content, theme, }: {
     loadOrder?: string;
     mode?: "modal" | "page";
     recipientAddress: string;
@@ -8,4 +9,9 @@ export declare function AnySpendDepositUpside({ loadOrder, mode, recipientAddres
     depositContractAddress: string;
     token: components["schemas"]["Token"];
     onSuccess?: (amount: string) => void;
+    /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
+    senderAddress?: string;
+    slots?: AnySpendSlots;
+    content?: AnySpendContent;
+    theme?: AnySpendTheme;
 }): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/anyspend/react/components/AnySpendDepositUpside.js

@@ -22,7 +22,7 @@ const DEPOSIT_FOR_FUNCTION_ABI = JSON.stringify([
         type: "function",
     },
 ]);
-export function AnySpendDepositUpside({ loadOrder, mode = "modal", recipientAddress, sourceTokenAddress, sourceTokenChainId, depositContractAddress, token, onSuccess, }) {
+export function AnySpendDepositUpside({ loadOrder, mode = "modal", recipientAddress, sourceTokenAddress, sourceTokenChainId, depositContractAddress, token, onSuccess, senderAddress, slots, content, theme, }) {
     if (!recipientAddress)
         return null;
     const header = () => (_jsx(_Fragment, { children: _jsx("div", { className: "from-b3-react-background to-as-on-surface-1 w-full rounded-t-lg bg-gradient-to-t", children: _jsx("div", { className: "mb-1 flex w-full flex-col items-center gap-2", children: _jsxs("span", { className: "font-sf-rounded text-2xl font-semibold", children: ["Swap & Deposit ", token.symbol] }) }) }) }));
@@ -34,5 +34,5 @@ export function AnySpendDepositUpside({ loadOrder, mode = "modal", recipientAddr
         spenderAddress: depositContractAddress,
         action: `deposit ${token.symbol}`,
     };
-    return (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: token, destinationChainId: base.id, customExactInConfig: customExactInConfig, header: header, onSuccess: onSuccess }));
+    return (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: token, destinationChainId: base.id, customExactInConfig: customExactInConfig, header: header, onSuccess: onSuccess, senderAddress: senderAddress, slots: slots, content: content, theme: theme }));
 }

package/dist/esm/anyspend/react/components/AnySpendNFT.d.ts

@@ -1,9 +1,15 @@
 import { components } from "../../../anyspend/types/api";
-export declare function AnySpendNFT({ loadOrder, mode, recipientAddress, nftContract, onSuccess, onShowPointsDetail, }: {
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
+export declare function AnySpendNFT({ loadOrder, mode, recipientAddress, nftContract, onSuccess, onShowPointsDetail, senderAddress, slots, content, theme, }: {
     loadOrder?: string;
     mode?: "modal" | "page";
     recipientAddress?: string;
     nftContract: components["schemas"]["NftContract"];
     onSuccess?: (txHash?: string) => void;
     onShowPointsDetail?: () => void;
+    /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
+    senderAddress?: string;
+    slots?: AnySpendSlots;
+    content?: AnySpendContent;
+    theme?: AnySpendTheme;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/anyspend/react/components/AnySpendNFT.js

@@ -26,7 +26,7 @@ const CONTRACT_URI_ABI = [
         type: "function",
     },
 ];
-export function AnySpendNFT({ loadOrder, mode = "modal", recipientAddress, nftContract, onSuccess, onShowPointsDetail, }) {
+export function AnySpendNFT({ loadOrder, mode = "modal", recipientAddress, nftContract, onSuccess, onShowPointsDetail, senderAddress, slots, content, theme, }) {
     const [imageUrlWithFallback, setFallbackImageUrl] = useState(nftContract.imageUrl);
     const hasFetchedRef = useRef(false);
     // Fetch contract metadata when imageUrl is empty
@@ -83,7 +83,7 @@ export function AnySpendNFT({ loadOrder, mode = "modal", recipientAddress, nftCo
     return (_jsx(AnySpendCustom, { loadOrder: loadOrder, mode: mode, activeTab: "fiat", recipientAddress: recipientAddress, orderType: "mint_nft", dstChainId: nftContract.chainId, dstToken: nftContract.currency, dstAmount: nftContract.price, contractAddress: nftContract.contractAddress, encodedData: "0x", metadata: {
             type: "mint_nft",
             nftContract: nftContract,
-        }, header: header, onSuccess: onSuccess, onShowPointsDetail: onShowPointsDetail }));
+        }, header: header, onSuccess: onSuccess, onShowPointsDetail: onShowPointsDetail, senderAddress: senderAddress, slots: slots, content: content, theme: theme }));
 }
 function DropdownMenu({ nftContract }) {
     const [open, setOpen] = useState(false);

package/dist/esm/anyspend/react/components/AnySpendStakeB3.d.ts

@@ -1,7 +1,13 @@
-export declare function AnySpendStakeB3({ loadOrder, mode, recipientAddress, stakeAmount, onSuccess, }: {
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
+export declare function AnySpendStakeB3({ loadOrder, mode, recipientAddress, stakeAmount, onSuccess, senderAddress, slots, content, theme, }: {
     loadOrder?: string;
     mode?: "modal" | "page";
     recipientAddress: string;
     stakeAmount?: string;
     onSuccess?: () => void;
+    /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
+    senderAddress?: string;
+    slots?: AnySpendSlots;
+    content?: AnySpendContent;
+    theme?: AnySpendTheme;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/anyspend/react/components/AnySpendStakeB3.js

@@ -28,7 +28,7 @@ function generateEncodedDataForStakingB3(amount, beneficiary) {
     });
     return encodedData;
 }
-export function AnySpendStakeB3({ loadOrder, mode = "modal", recipientAddress, stakeAmount, onSuccess, }) {
+export function AnySpendStakeB3({ loadOrder, mode = "modal", recipientAddress, stakeAmount, onSuccess, senderAddress, slots, content, theme, }) {
     const hasMounted = useHasMounted();
     const { setB3ModalOpen } = useModalStore();
     // Wagmi hooks for direct staking
@@ -270,5 +270,5 @@ export function AnySpendStakeB3({ loadOrder, mode = "modal", recipientAddress, s
     const encodedData = generateEncodedDataForStakingB3(userStakeAmount, recipientAddress);
     return (_jsx(AnySpendCustom, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, orderType: "custom", dstChainId: base.id, dstToken: B3_TOKEN, dstAmount: userStakeAmount, contractAddress: ERC20Staking, encodedData: encodedData, metadata: {
             action: "stake B3",
-        }, header: header, onSuccess: onSuccess, showRecipient: true }));
+        }, header: header, onSuccess: onSuccess, showRecipient: true, senderAddress: senderAddress, slots: slots, content: content, theme: theme }));
 }

package/dist/esm/anyspend/react/components/AnySpendStakeB3ExactIn.d.ts

@@ -1,4 +1,5 @@
-export declare function AnySpendStakeB3ExactIn({ loadOrder, mode, sourceTokenAddress, sourceTokenChainId, recipientAddress, stakeAmount, onSuccess, }: {
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
+export declare function AnySpendStakeB3ExactIn({ loadOrder, mode, sourceTokenAddress, sourceTokenChainId, recipientAddress, stakeAmount, onSuccess, senderAddress, slots, content, theme, }: {
     loadOrder?: string;
     mode?: "modal" | "page";
     sourceTokenAddress?: string;
@@ -6,4 +7,9 @@ export declare function AnySpendStakeB3ExactIn({ loadOrder, mode, sourceTokenAdd
     recipientAddress: string;
     stakeAmount?: string;
     onSuccess?: (amount: string) => void;
+    /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
+    senderAddress?: string;
+    slots?: AnySpendSlots;
+    content?: AnySpendContent;
+    theme?: AnySpendTheme;
 }): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/anyspend/react/components/AnySpendStakeB3ExactIn.js

@@ -31,7 +31,7 @@ const STAKE_FUNCTION_ABI = JSON.stringify([
         outputs: [],
     },
 ]);
-export function AnySpendStakeB3ExactIn({ loadOrder, mode = "modal", sourceTokenAddress, sourceTokenChainId, recipientAddress, stakeAmount, onSuccess, }) {
+export function AnySpendStakeB3ExactIn({ loadOrder, mode = "modal", sourceTokenAddress, sourceTokenChainId, recipientAddress, stakeAmount, onSuccess, senderAddress, slots, content, theme, }) {
     const hasMounted = useHasMounted();
     const { setB3ModalOpen } = useModalStore();
     // Wagmi hooks for direct staking
@@ -280,5 +280,5 @@ export function AnySpendStakeB3ExactIn({ loadOrder, mode = "modal", sourceTokenA
                                     onSuccess?.(formatTokenAmount(BigInt(userStakeAmount), 18) ?? "");
                                 }, className: "bg-as-brand hover:bg-as-brand/90 text-as-primary h-14 w-full rounded-xl text-lg font-medium", children: "Done" })] })] }) }));
     }
-    return (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: B3_TOKEN, destinationChainId: base.id, customExactInConfig: customExactInConfig, header: header, onSuccess: onSuccess }));
+    return (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: B3_TOKEN, destinationChainId: base.id, customExactInConfig: customExactInConfig, header: header, onSuccess: onSuccess, senderAddress: senderAddress, slots: slots, content: content, theme: theme }));
 }

package/dist/esm/anyspend/react/components/AnySpendStakeUpside.d.ts

@@ -1,5 +1,6 @@
 import { components } from "../../../anyspend/types/api";
-export declare function AnySpendStakeUpside({ loadOrder, mode, beneficiaryAddress, stakeAmount, stakingContractAddress, token, onSuccess, activeTab, }: {
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
+export declare function AnySpendStakeUpside({ loadOrder, mode, beneficiaryAddress, stakeAmount, stakingContractAddress, token, onSuccess, activeTab, senderAddress, slots, content, theme, }: {
     loadOrder?: string;
     mode?: "modal" | "page";
     beneficiaryAddress: string;
@@ -8,4 +9,9 @@ export declare function AnySpendStakeUpside({ loadOrder, mode, beneficiaryAddres
     token: components["schemas"]["Token"];
     onSuccess?: () => void;
     activeTab?: "crypto" | "fiat";
+    /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
+    senderAddress?: string;
+    slots?: AnySpendSlots;
+    content?: AnySpendContent;
+    theme?: AnySpendTheme;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/anyspend/react/components/AnySpendStakeUpside.js

@@ -14,7 +14,7 @@ function generateEncodedDataForStaking(amount, beneficiary) {
         args: [beneficiary, BigInt(amount)],
     });
 }
-export function AnySpendStakeUpside({ loadOrder, mode = "modal", beneficiaryAddress, stakeAmount, stakingContractAddress, token, onSuccess, activeTab, }) {
+export function AnySpendStakeUpside({ loadOrder, mode = "modal", beneficiaryAddress, stakeAmount, stakingContractAddress, token, onSuccess, activeTab, senderAddress, slots, content, theme, }) {
     const header = () => (_jsx(_Fragment, { children: _jsxs("div", { className: "from-b3-react-background to-as-on-surface-1 mt-[-60px] w-full rounded-t-lg bg-gradient-to-t", children: [_jsx("div", { className: "h-[60px] w-full" }), _jsx("div", { className: "mb-1 flex w-full flex-col items-center gap-2 p-5", children: _jsxs("span", { className: "font-sf-rounded text-2xl font-semibold", children: ["Swap & Stake ", stakeAmount ? formatTokenAmount(BigInt(stakeAmount), token.decimals) : "", " ", token.symbol] }) })] }) }));
     // Only generate encoded data if we have a valid beneficiary address
     // This is used for the AnySpendCustom swap & stake flow
@@ -24,5 +24,5 @@ export function AnySpendStakeUpside({ loadOrder, mode = "modal", beneficiaryAddr
     const encodedData = generateEncodedDataForStaking(stakeAmount, beneficiaryAddress);
     return (_jsx(AnySpendCustom, { loadOrder: loadOrder, mode: mode, recipientAddress: beneficiaryAddress, orderType: "custom", dstChainId: base.id, dstToken: token, dstAmount: stakeAmount, contractAddress: stakingContractAddress, encodedData: encodedData, metadata: {
             action: `stake ${token.symbol}`,
-        }, header: header, onSuccess: onSuccess, showRecipient: true, activeTab: activeTab }));
+        }, header: header, onSuccess: onSuccess, showRecipient: true, activeTab: activeTab, senderAddress: senderAddress, slots: slots, content: content, theme: theme }));
 }

package/dist/esm/anyspend/react/components/AnySpendStakeUpsideExactIn.d.ts

@@ -1,5 +1,6 @@
 import { components } from "../../../anyspend/types/api";
-export declare function AnySpendStakeUpsideExactIn({ loadOrder, mode, recipientAddress, sourceTokenAddress, sourceTokenChainId, destinationTokenAmount, stakingContractAddress, token, onSuccess, }: {
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
+export declare function AnySpendStakeUpsideExactIn({ loadOrder, mode, recipientAddress, sourceTokenAddress, sourceTokenChainId, destinationTokenAmount, stakingContractAddress, token, onSuccess, senderAddress, slots, content, theme, }: {
     loadOrder?: string;
     mode?: "modal" | "page";
     recipientAddress: string;
@@ -9,4 +10,9 @@ export declare function AnySpendStakeUpsideExactIn({ loadOrder, mode, recipientA
     token: components["schemas"]["Token"];
     destinationTokenAmount?: string;
     onSuccess?: (amount: string) => void;
+    /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
+    senderAddress?: string;
+    slots?: AnySpendSlots;
+    content?: AnySpendContent;
+    theme?: AnySpendTheme;
 }): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/anyspend/react/components/AnySpendStakeUpsideExactIn.js

@@ -14,7 +14,7 @@ const STAKE_FOR_FUNCTION_ABI = JSON.stringify([
         outputs: [],
     },
 ]);
-export function AnySpendStakeUpsideExactIn({ loadOrder, mode = "modal", recipientAddress, sourceTokenAddress, sourceTokenChainId, destinationTokenAmount, stakingContractAddress, token, onSuccess, }) {
+export function AnySpendStakeUpsideExactIn({ loadOrder, mode = "modal", recipientAddress, sourceTokenAddress, sourceTokenChainId, destinationTokenAmount, stakingContractAddress, token, onSuccess, senderAddress, slots, content, theme, }) {
     if (!recipientAddress)
         return null;
     const header = () => (_jsx(_Fragment, { children: _jsx("div", { className: "from-b3-react-background to-as-on-surface-1 w-full rounded-t-lg bg-gradient-to-t", children: _jsx("div", { className: "mb-1 flex w-full flex-col items-center gap-2", children: _jsxs("span", { className: "font-sf-rounded text-2xl font-semibold", children: ["Swap & Stake ", token.symbol, " (Exact In)"] }) }) }) }));
@@ -26,5 +26,5 @@ export function AnySpendStakeUpsideExactIn({ loadOrder, mode = "modal", recipien
         spenderAddress: stakingContractAddress,
         action: `stake ${token.symbol}`,
     };
-    return (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: token, destinationChainId: base.id, destinationTokenAmount: destinationTokenAmount, customExactInConfig: customExactInConfig, header: header, onSuccess: onSuccess }));
+    return (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: token, destinationChainId: base.id, destinationTokenAmount: destinationTokenAmount, customExactInConfig: customExactInConfig, header: header, onSuccess: onSuccess, senderAddress: senderAddress, slots: slots, content: content, theme: theme }));
 }