@b3dotfun/sdk 0.1.66 → 0.1.68

package/dist/cjs/anyspend/react/components/AnySpend.d.ts

@@ -1,5 +1,6 @@
 import { components } from "../../types/api";
 import type { AnySpendClasses } from "./types/classes";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
 export interface RecipientOption {
     address: string;
     icon?: string;
@@ -55,4 +56,12 @@ export declare function AnySpend(props: {
     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;
+    /** Render function overrides for replaceable UI elements */
+    slots?: AnySpendSlots;
+    /** String or ReactNode overrides for text/messages */
+    content?: AnySpendContent;
+    /** Structured color/theme configuration */
+    theme?: AnySpendTheme;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/anyspend/react/components/AnySpend.js

@@ -17,6 +17,7 @@ const cn_1 = require("../../../shared/utils/cn");
 const number_1 = require("../../../shared/utils/number");
 const invariant_1 = __importDefault(require("invariant"));
 const lucide_react_1 = require("lucide-react");
+const AnimatedCheckmark_1 = require("./icons/AnimatedCheckmark");
 const react_3 = require("motion/react");
 const react_4 = require("react");
 const viem_1 = require("viem");
@@ -41,6 +42,7 @@ const PanelOnrampPayment_1 = require("./common/PanelOnrampPayment");
 const PointsDetailPanel_1 = require("./common/PointsDetailPanel");
 const RecipientSelection_1 = require("./common/RecipientSelection");
 const TabSection_1 = require("./common/TabSection");
+const AnySpendCustomizationContext_1 = require("./context/AnySpendCustomizationContext");
 const baseChain = (0, supported_1.getThirdwebChain)(8453);
 var PanelView;
 (function (PanelView) {
@@ -59,10 +61,10 @@ var PanelView;
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
 function AnySpend(props) {
     const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
-    console.log("[mitch] AnySpend rendered with fingerprintConfig:", props, fingerprintConfig);
-    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendInner, { ...props }) }));
+    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendCustomizationContext_1.AnySpendCustomizationProvider, { slots: props.slots, content: props.content, theme: props.theme, children: (0, jsx_runtime_1.jsx)(AnySpendInner, { ...props }) }) }));
 }
-function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, hideHeader, hideBottomNavigation = false, disableUrlParamManagement = false, returnToHomeUrl, customRecipientLabel, returnHomeLabel, classes, allowDirectTransfer = false, destinationTokenAmount, callbackMetadata, }) {
+function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, hideHeader, hideBottomNavigation = false, disableUrlParamManagement = false, returnToHomeUrl, customRecipientLabel, returnHomeLabel, classes, allowDirectTransfer = false, destinationTokenAmount, callbackMetadata, senderAddress, }) {
+    const { slots, content } = (0, AnySpendCustomizationContext_1.useAnySpendCustomization)();
     const searchParams = (0, react_2.useSearchParamsSSR)();
     const router = (0, react_2.useRouter)();
     const { partnerId } = (0, react_2.useB3Config)();
@@ -365,9 +367,10 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     const recipientProfile = (0, react_2.useProfile)({ address: effectiveRecipientAddress, fresh: true });
     const recipientName = recipientProfile.data?.name;
     // Check token balance for crypto payments
+    const effectiveBalanceAddress = senderAddress || connectedEOAWallet?.getAccount()?.address;
     const { rawBalance, isLoading: isBalanceLoading } = (0, react_2.useTokenBalanceDirect)({
         token: selectedSrcToken,
-        address: connectedEOAWallet?.getAccount()?.address,
+        address: effectiveBalanceAddress,
     });
     // Check if user has enough balanceuseAutoSetActiveWalletFromWagmi
     const hasEnoughBalance = (0, react_4.useMemo)(() => {
@@ -719,7 +722,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                     : selectedDstToken,
                 srcAmount: srcAmountBigInt.toString(),
                 expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount || "0",
-                creatorAddress: globalAddress,
+                creatorAddress: senderAddress || globalAddress,
                 callbackMetadata,
             });
         }
@@ -794,7 +797,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                     redirectUrl: window.location.origin === "https://basement.fun" ? "https://basement.fun/deposit" : window.location.origin,
                 },
                 expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0",
-                creatorAddress: globalAddress,
+                creatorAddress: senderAddress || globalAddress,
                 callbackMetadata,
             });
         }
@@ -912,10 +915,15 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                                     }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) })), activeTab === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, effectiveRecipientAddress: effectiveRecipientAddress, recipientName: recipientName || undefined, customRecipientLabel: customRecipientLabel, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
                                     setIsSrcInputDirty(false);
                                     setDstAmount(value);
-                                }, disableAmountInput: !!destinationTokenAmount, anyspendQuote: isDirectTransfer ? undefined : anyspendQuote, onShowPointsDetail: isDirectTransfer ? undefined : () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: isDirectTransfer ? undefined : () => navigateToPanel(PanelView.FEE_DETAIL, "forward") }))] }), gasPriceData && !isLoadingGas && activeTab === "crypto" && !isDirectTransfer && ((0, jsx_runtime_1.jsx)(GasIndicator_1.GasIndicator, { gasPrice: gasPriceData, className: classes?.gasIndicator || "mt-2 w-full" })), (0, jsx_runtime_1.jsxs)(react_3.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: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [(0, jsx_runtime_1.jsx)(react_2.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 : () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: isDirectTransfer ? undefined : () => navigateToPanel(PanelView.FEE_DETAIL, "forward") }))] }), gasPriceData && !isLoadingGas && activeTab === "crypto" && !isDirectTransfer && ((0, jsx_runtime_1.jsx)(GasIndicator_1.GasIndicator, { gasPrice: gasPriceData, className: classes?.gasIndicator || "mt-2 w-full" })), (0, jsx_runtime_1.jsxs)(react_3.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: (0, cn_1.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,
+                            })) : ((0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (btnInfo.error && classes?.mainButtonError) ||
                                     (btnInfo.disable && classes?.mainButtonDisabled) ||
                                     classes?.mainButton ||
-                                    (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || effectiveRecipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: classes?.historyButton ||
+                                    (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) })), !hideTransactionHistoryButton && (globalAddress || effectiveRecipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: classes?.historyButton ||
                                     "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: (0, jsx_runtime_1.jsx)(react_2.TabsPrimitive, { defaultValue: "swap", onValueChange: value => {
                         if (value === "settings" || value === "home") {
                             setB3ModalContentType({
@@ -968,13 +976,34 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
         }, srcAmountOnRamp: srcAmountOnRamp }));
     const pointsDetailView = ((0, jsx_runtime_1.jsx)(PointsDetailPanel_1.PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: navigateBack }));
     const feeDetailView = anyspendQuote?.data?.fee ? ((0, jsx_runtime_1.jsx)(FeeDetailPanel_1.FeeDetailPanel, { fee: anyspendQuote.data.fee, transactionAmountUsd: activeTab === "crypto" ? Number(anyspendQuote.data.currencyIn?.amountUsd) : parseFloat(srcAmountOnRamp), onBack: navigateBack })) : null;
-    const directTransferSuccessView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-6 p-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-brand/10 flex h-16 w-16 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle, { className: "text-as-brand h-8 w-8" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-bold", children: "Transfer Complete" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-as-secondary mt-1 text-sm", children: ["Your ", selectedSrcToken.symbol, " has been sent to ", effectiveRecipientAddress?.slice(0, 6), "...", effectiveRecipientAddress?.slice(-4), " on ", (0, anyspend_1.getChainName)(selectedSrcChainId)] })] })] }), directTransferTxHash && ((0, jsx_runtime_1.jsx)("a", { href: (0, anyspend_1.getExplorerTxUrl)(selectedSrcChainId, directTransferTxHash), target: "_blank", rel: "noopener noreferrer", className: "text-as-brand hover:text-as-brand/80 text-sm underline", children: "View transaction" })), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-2", children: returnToHomeUrl ? ((0, jsx_runtime_1.jsx)(react_2.Button, { onClick: () => {
+    const defaultSuccessTitle = content.successTitle || "Transfer Complete";
+    const defaultSuccessDesc = content.successDescription ||
+        `Your ${selectedSrcToken.symbol} has been sent to ${effectiveRecipientAddress?.slice(0, 6)}...${effectiveRecipientAddress?.slice(-4)} on ${(0, anyspend_1.getChainName)(selectedSrcChainId)}`;
+    const resolvedReturnLabel = content.returnButtonLabel || returnHomeLabel;
+    const directTransferSuccessView = slots.successScreen ? (slots.successScreen({
+        title: typeof defaultSuccessTitle === "string" ? defaultSuccessTitle : "Transfer Complete",
+        description: typeof defaultSuccessDesc === "string" ? defaultSuccessDesc : "",
+        txHash: directTransferTxHash,
+        explorerUrl: directTransferTxHash ? (0, anyspend_1.getExplorerTxUrl)(selectedSrcChainId, directTransferTxHash) : undefined,
+        onDone: () => {
+            if (returnToHomeUrl) {
+                window.location.href = returnToHomeUrl;
+            }
+            else {
+                onSuccess?.(directTransferTxHash);
+                setDirectTransferTxHash(undefined);
+                setB3ModalOpen(false);
+            }
+        },
+        returnUrl: returnToHomeUrl,
+        returnLabel: resolvedReturnLabel || undefined,
+    })) : ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-6 p-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [(0, jsx_runtime_1.jsx)(AnimatedCheckmark_1.AnimatedCheckmark, { className: "h-16 w-16" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-bold", children: defaultSuccessTitle }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary mt-1 text-sm", children: defaultSuccessDesc })] })] }), directTransferTxHash && ((0, jsx_runtime_1.jsx)("a", { href: (0, anyspend_1.getExplorerTxUrl)(selectedSrcChainId, directTransferTxHash), target: "_blank", rel: "noopener noreferrer", className: "text-as-brand hover:text-as-brand/80 text-sm underline", children: "View transaction" })), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-2", children: returnToHomeUrl ? ((0, jsx_runtime_1.jsx)(react_2.Button, { onClick: () => {
                         window.location.href = returnToHomeUrl;
-                    }, className: "bg-as-brand hover:bg-as-brand/90 w-full text-white", children: returnHomeLabel || "Return to Home" })) : ((0, jsx_runtime_1.jsx)(react_2.Button, { onClick: () => {
+                    }, className: "bg-as-brand hover:bg-as-brand/90 w-full text-white", children: resolvedReturnLabel || "Return to Home" })) : ((0, jsx_runtime_1.jsx)(react_2.Button, { onClick: () => {
                         onSuccess?.(directTransferTxHash);
                         setDirectTransferTxHash(undefined);
                         setB3ModalOpen(false);
-                    }, className: "bg-as-brand hover:bg-as-brand/90 w-full text-white", children: returnHomeLabel || "Done" })) })] }));
+                    }, className: "bg-as-brand hover:bg-as-brand/90 w-full text-white", children: resolvedReturnLabel || "Done" })) })] }));
     // Add tabs to the main component when no order is loaded
     return ((0, jsx_runtime_1.jsx)(react_2.StyleRoot, { children: (0, jsx_runtime_1.jsx)("div", { className: classes?.container ||
                 (0, cn_1.cn)("anyspend-container font-inter mx-auto w-full max-w-[460px]", mode === "page" &&

package/dist/cjs/anyspend/react/components/AnySpendBondKit.d.ts

@@ -1,2 +1,7 @@
 import { AnySpendBondKitProps } from "../../../global-account/react/stores/useModalStore";
-export declare function AnySpendBondKit({ mode, recipientAddress, contractAddress, minTokensOut, imageUrl, b3Amount: initialB3Amount, onSuccess, }: AnySpendBondKitProps): import("react/jsx-runtime").JSX.Element;
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
+export declare function AnySpendBondKit({ mode, recipientAddress, contractAddress, minTokensOut, imageUrl, b3Amount: initialB3Amount, onSuccess, slots, content, theme, }: AnySpendBondKitProps & {
+    slots?: AnySpendSlots;
+    content?: AnySpendContent;
+    theme?: AnySpendTheme;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/anyspend/react/components/AnySpendBondKit.js

@@ -23,7 +23,7 @@ function formatNumberWithCommas(x) {
     parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     return parts.join(".");
 }
-function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, minTokensOut = "0", imageUrl, b3Amount: initialB3Amount, onSuccess, }) {
+function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, minTokensOut = "0", imageUrl, b3Amount: initialB3Amount, onSuccess, slots, content, theme, }) {
     const hasMounted = (0, react_1.useHasMounted)();
     const [showAmountPrompt, setShowAmountPrompt] = (0, react_3.useState)(!initialB3Amount);
     const [b3Amount, setB3Amount] = (0, react_3.useState)(initialB3Amount || "");
@@ -203,5 +203,5 @@ function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, mi
     });
     return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.AnySpendCustom, { mode: mode, recipientAddress: recipientAddress, orderType: "custom", dstChainId: supported_1.baseMainnet.id, dstToken: dstToken, dstAmount: (0, viem_1.parseEther)(b3Amount).toString(), contractAddress: contractAddress, encodedData: encodedData, metadata: {
             action: "BondKit Buy",
-        }, header: header, onSuccess: onSuccess, showRecipient: true }));
+        }, header: header, onSuccess: onSuccess, showRecipient: true, slots: slots, content: content, theme: theme }));
 }

package/dist/cjs/anyspend/react/components/AnySpendBuySpin.d.ts

@@ -1,4 +1,5 @@
-export declare function AnySpendBuySpin({ loadOrder, mode, spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess, }: {
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
+export declare function AnySpendBuySpin({ loadOrder, mode, spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess, senderAddress, slots, content, theme, }: {
     loadOrder?: string;
     mode?: "modal" | "page";
     spinwheelContractAddress: string;
@@ -6,4 +7,9 @@ export declare function AnySpendBuySpin({ loadOrder, mode, spinwheelContractAddr
     recipientAddress: string;
     prefillQuantity?: string;
     onSuccess?: (txHash?: 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;

package/dist/cjs/anyspend/react/components/AnySpendBuySpin.js

@@ -90,7 +90,7 @@ const basePublicClient = (0, viem_1.createPublicClient)({
     chain: supported_1.baseMainnet,
     transport: (0, viem_1.http)(constants_1.PUBLIC_BASE_RPC_URL),
 });
-function AnySpendBuySpin({ loadOrder, mode = "modal", spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess, }) {
+function AnySpendBuySpin({ loadOrder, mode = "modal", spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess, senderAddress, slots, content, theme, }) {
     const hasMounted = (0, react_1.useHasMounted)();
     const { setB3ModalOpen } = (0, react_1.useModalStore)();
     // Payment config state
@@ -396,5 +396,5 @@ function AnySpendBuySpin({ loadOrder, mode = "modal", spinwheelContractAddress,
     const encodedData = generateEncodedDataForBuyEntriesAndSpin(address || "", userSpinQuantity);
     return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.AnySpendCustom, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, orderType: "custom", dstChainId: chainId, dstToken: anyspend_1.B3_TOKEN, dstAmount: totalCost.toString(), contractAddress: spinwheelContractAddress, spenderAddress: paymentConfig.entryModule, encodedData: encodedData, metadata: {
             action: `buy ${userSpinQuantity} spin${userSpinQuantity !== "1" ? "s" : ""}`,
-        }, header: header, onSuccess: txHash => onSuccess?.(txHash), showRecipient: false }));
+        }, header: header, onSuccess: txHash => onSuccess?.(txHash), showRecipient: false, senderAddress: senderAddress, slots: slots, content: content, theme: theme }));
 }

package/dist/cjs/anyspend/react/components/AnySpendCollectorClubPurchase.d.ts

@@ -1,6 +1,7 @@
 import { components } from "../../../anyspend/types/api";
 import { GetQuoteResponse } from "../../../anyspend/types/api_req_res";
 import React from "react";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
 export interface AnySpendCollectorClubPurchaseProps {
     /**
      * Optional order ID to load existing order
@@ -74,5 +75,8 @@ export interface AnySpendCollectorClubPurchaseProps {
      * When provided, validates on-chain and adjusts the price accordingly.
      */
     discountCode?: string;
+    slots?: AnySpendSlots;
+    content?: AnySpendContent;
+    theme?: AnySpendTheme;
 }
-export declare function AnySpendCollectorClubPurchase({ loadOrder, mode, activeTab, packId, packAmount, pricePerPack, paymentToken, recipientAddress, spenderAddress, isStaging, onSuccess, header, showRecipient, vendingMachineId, packType, forceFiatPayment, discountCode, }: AnySpendCollectorClubPurchaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function AnySpendCollectorClubPurchase({ loadOrder, mode, activeTab, packId, packAmount, pricePerPack, paymentToken, recipientAddress, spenderAddress, isStaging, onSuccess, header, showRecipient, vendingMachineId, packType, forceFiatPayment, discountCode, slots, content, theme, }: AnySpendCollectorClubPurchaseProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/anyspend/react/components/AnySpendCollectorClubPurchase.js

@@ -44,7 +44,7 @@ const basePublicClient = (0, viem_1.createPublicClient)({
     chain: chains_1.base,
     transport: (0, viem_1.http)(constants_2.PUBLIC_BASE_RPC_URL),
 });
-function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab = "crypto", packId, packAmount, pricePerPack, paymentToken = constants_1.USDC_BASE, recipientAddress, spenderAddress, isStaging = false, onSuccess, header, showRecipient = true, vendingMachineId, packType, forceFiatPayment, discountCode, }) {
+function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab = "crypto", packId, packAmount, pricePerPack, paymentToken = constants_1.USDC_BASE, recipientAddress, spenderAddress, isStaging = false, onSuccess, header, showRecipient = true, vendingMachineId, packType, forceFiatPayment, discountCode, slots, content, theme, }) {
     const ccShopAddress = isStaging ? CC_SHOP_ADDRESS_STAGING : CC_SHOP_ADDRESS;
     // Calculate total amount needed (pricePerPack * packAmount)
     const totalAmount = (0, react_1.useMemo)(() => {
@@ -218,5 +218,5 @@ function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab =
             ...(discountCode && discountInfo.isValid
                 ? { discountCode, discountAmount: discountInfo.discountAmount.toString() }
                 : {}),
-        }, header: header || defaultHeader, onSuccess: onSuccess, showRecipient: showRecipient, srcFiatAmount: srcFiatAmount, forceFiatPayment: forceFiatPayment }));
+        }, header: header || defaultHeader, onSuccess: onSuccess, showRecipient: showRecipient, srcFiatAmount: srcFiatAmount, forceFiatPayment: forceFiatPayment, slots: slots, content: content, theme: theme }));
 }

package/dist/cjs/anyspend/react/components/AnySpendCustom.d.ts

@@ -1,6 +1,7 @@
 import { components } from "../../../anyspend/types/api";
 import { GetQuoteResponse } from "../../../anyspend/types/api_req_res";
 import React from "react";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
 export declare function AnySpendCustom(props: {
     loadOrder?: string;
     mode?: "modal" | "page";
@@ -24,4 +25,12 @@ export declare function AnySpendCustom(props: {
     onShowPointsDetail?: () => void;
     /** Fiat amount in USD for fiat payments */
     srcFiatAmount?: string;
+    /** 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;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -23,6 +23,7 @@ const useCryptoPaymentMethodState_1 = require("../hooks/useCryptoPaymentMethodSt
 const useOnOrderSuccess_1 = require("../hooks/useOnOrderSuccess");
 const useRecipientAddressState_1 = require("../hooks/useRecipientAddressState");
 const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
+const AnySpendCustomizationContext_1 = require("./context/AnySpendCustomizationContext");
 const CryptoPaymentMethod_1 = require("./common/CryptoPaymentMethod");
 const CryptoPaymentMethodDisplay_1 = require("./common/CryptoPaymentMethodDisplay");
 const FeeBreakDown_1 = require("./common/FeeBreakDown");
@@ -112,9 +113,9 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
 }
 function AnySpendCustom(props) {
     const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
-    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendCustomInner, { ...props }) }));
+    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendCustomizationContext_1.AnySpendCustomizationProvider, { slots: props.slots, content: props.content, theme: props.theme, children: (0, jsx_runtime_1.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 = (0, react_2.useHasMounted)();
     const searchParams = (0, react_2.useSearchParamsSSR)();
     const router = (0, react_2.useRouter)();
@@ -138,14 +139,15 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
     const chainName = (0, react_5.useMemo)(() => (0, simplehash_1.simpleHashChainToChainName)(srcChainId), [srcChainId]);
     const { data: tokenList } = (0, react_1.useAnyspendTokenList)(srcChainId, "");
     // Get token balances for the selected chain
+    const effectiveBalanceAddress = senderAddress || currentWallet?.wallet?.address || "";
     const { nativeTokens, fungibleTokens } = (0, react_2.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 = (0, react_5.useCallback)(() => {
-        if (!currentWallet?.wallet?.address || (!nativeTokens && !fungibleTokens) || !tokenList) {
+        if (!effectiveBalanceAddress || (!nativeTokens && !fungibleTokens) || !tokenList) {
             return (0, anyspend_1.getDefaultToken)(srcChainId);
         }
         // First check native tokens (ETH, etc.)
@@ -172,7 +174,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         }
         // Default fallback
         return (0, anyspend_1.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] = (0, react_5.useState)((0, anyspend_1.getDefaultToken)(srcChainId));
     const [dirtySelectSrcToken, setDirtySelectSrcToken] = (0, react_5.useState)(false);
@@ -306,7 +308,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"
                         ? {
@@ -464,13 +466,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: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiary text-sm", children: orderType === "swap"
                     ? "Recipient"
                     : orderType === "mint_nft"
                         ? "Receive NFT at"
                         : orderType === "join_tournament"
                             ? "Join for"
-                            : "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [recipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)("text-as-tertiarry flex items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: (0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.shortenAddress)(recipientAddress) }) }) })) : ((0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)("div", { className: "whitespace-nowrap text-sm font-medium", children: "Select recipient" }) })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })] }, recipientAddress)) : null;
+                            : "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [recipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)("text-as-tertiary flex items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiary flex items-center gap-1 text-sm", children: (0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.shortenAddress)(recipientAddress) }) }) })) : ((0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)("div", { className: "whitespace-nowrap text-sm font-medium", children: "Select recipient" }) })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })] }, recipientAddress)) : null;
     const historyView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("mx-auto flex w-full max-w-2xl flex-col items-center", mode === "modal" && "bg-b3-react-background"), children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: () => {
                 setActivePanel(PanelView.HISTORY);
             }, onSelectOrder: onSelectOrder }) }));
@@ -513,18 +515,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: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(CryptoPaymentMethodDisplay_1.CryptoPaymentMethodDisplay, { paymentMethod: effectiveCryptoPaymentMethod, connectedAddress: connectedAddress, connectedName: connectedName }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)(react_4.motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiary flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(CryptoPaymentMethodDisplay_1.CryptoPaymentMethodDisplay, { paymentMethod: effectiveCryptoPaymentMethod, connectedAddress: connectedAddress, connectedName: connectedName }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)(react_4.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: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry text-sm", children: "Pay with" }), (0, jsx_runtime_1.jsx)(OrderToken_1.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: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiary text-sm", children: "Pay with" }), (0, jsx_runtime_1.jsx)(OrderToken_1.OrderToken, { address: effectiveBalanceAddress || undefined, context: "from", chainId: srcChainId, setChainId: setSrcChainId, token: srcToken, setToken: token => {
                                                                 setDirtySelectSrcToken(true);
                                                                 setSrcToken(token);
                                                             }, requiredAmount: srcAmount || undefined })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)(react_4.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: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm", children: [(0, jsx_runtime_1.jsxs)("span", { className: "whitespace-nowrap", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry", children: "(with fee)" })] }), anyspendQuote?.data?.fee && ((0, jsx_runtime_1.jsx)(react_2.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { side: "top", children: (0, jsx_runtime_1.jsx)(FeeBreakDown_1.FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [renderPointsBadge(), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary whitespace-nowrap font-semibold", children: [formattedSrcAmount || "--", " ", srcToken.symbol] })] }), anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd && ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiary flex flex-wrap items-center gap-1.5 text-sm", children: [(0, jsx_runtime_1.jsxs)("span", { className: "whitespace-nowrap", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiary", children: "(with fee)" })] }), anyspendQuote?.data?.fee && ((0, jsx_runtime_1.jsx)(react_2.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { side: "top", children: (0, jsx_runtime_1.jsx)(FeeBreakDown_1.FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [renderPointsBadge(), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary whitespace-nowrap font-semibold", children: [formattedSrcAmount || "--", " ", srcToken.symbol] })] }), anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd && ((0, jsx_runtime_1.jsxs)("span", { className: "text-as-secondary text-xs", children: ["incl. $", ((Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
                                                                             10000).toFixed(2), " ", "fee"] }))] })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex w-full flex-col items-center justify-between gap-2"), children: (0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: false, animate: {
                                             opacity: hasMounted ? 1 : 0,
                                             y: hasMounted ? 0 : 20,
@@ -533,7 +535,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: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiary flex h-7 items-center text-sm", children: "Pay with" }), (0, jsx_runtime_1.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 = FiatPaymentMethod_1.FIAT_PAYMENT_METHOD_DISPLAY[selectedFiatPaymentMethod];
                                                         if (config) {
                                                             return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: config.icon }) }), config.label] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
@@ -543,7 +545,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: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm", children: [(0, jsx_runtime_1.jsxs)("span", { className: "whitespace-nowrap", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry", children: "(USD)" })] }), anyspendQuote?.data?.fee && ((0, jsx_runtime_1.jsx)(react_2.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { side: "top", children: (0, jsx_runtime_1.jsx)(FeeBreakDown_1.FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [renderPointsBadge(), isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary h-7 w-16 animate-pulse rounded" })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-as-primary whitespace-nowrap text-xl font-semibold", children: anyspendQuote?.data?.currencyIn?.amountUsd ? (`$${Number(anyspendQuote.data.currencyIn.amountUsd).toFixed(2)}`) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["$", parseFloat(srcFiatAmount || "0").toFixed(2), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiary flex flex-wrap items-center gap-1.5 text-sm", children: [(0, jsx_runtime_1.jsxs)("span", { className: "whitespace-nowrap", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiary", children: "(USD)" })] }), anyspendQuote?.data?.fee && ((0, jsx_runtime_1.jsx)(react_2.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { side: "top", children: (0, jsx_runtime_1.jsx)(FeeBreakDown_1.FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [renderPointsBadge(), isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary h-7 w-16 animate-pulse rounded" })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-as-primary whitespace-nowrap text-xl font-semibold", children: anyspendQuote?.data?.currencyIn?.amountUsd ? (`$${Number(anyspendQuote.data.currencyIn.amountUsd).toFixed(2)}`) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["$", parseFloat(srcFiatAmount || "0").toFixed(2), (0, jsx_runtime_1.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/cjs/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/cjs/anyspend/react/components/AnySpendCustomExactIn.js

@@ -13,8 +13,10 @@ const cn_1 = require("../../../shared/utils/cn");
 const number_1 = require("../../../shared/utils/number");
 const invariant_1 = __importDefault(require("invariant"));
 const lucide_react_1 = require("lucide-react");
+const AnimatedCheckmark_1 = require("./icons/AnimatedCheckmark");
 const react_3 = require("motion/react");
 const react_4 = require("react");
+const AnySpendCustomizationContext_1 = require("./context/AnySpendCustomizationContext");
 const react_5 = require("thirdweb/react");
 const constants_1 = require("../../constants");
 const useDirectTransfer_1 = require("../hooks/useDirectTransfer");
@@ -33,9 +35,10 @@ const RecipientSelection_1 = require("./common/RecipientSelection");
 const SLIPPAGE_PERCENT = 3;
 function AnySpendCustomExactIn(props) {
     const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
-    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendCustomExactInInner, { ...props }) }));
+    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendCustomizationContext_1.AnySpendCustomizationProvider, { slots: props.slots, content: props.content, theme: props.theme, children: (0, jsx_runtime_1.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 } = (0, AnySpendCustomizationContext_1.useAnySpendCustomization)();
     const actionLabel = customExactInConfig?.action ?? "Custom Execution";
     const setB3ModalOpen = (0, react_2.useModalStore)(state => state.setB3ModalOpen);
     const DESTINATION_TOKEN_DETAILS = {
@@ -55,6 +58,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         disableUrlParamManagement: true,
         orderType,
         customExactInConfig,
+        senderAddress,
     });
     const { connectedEOAWallet } = (0, react_2.useAccountWallet)();
     const setActiveWallet = (0, react_5.useSetActiveWallet)();
@@ -232,10 +236,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: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: false, effectiveRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, customRecipientLabel: customRecipientLabel, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.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(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: isDirectTransfer ? undefined : () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL) }))] }) }), (0, jsx_runtime_1.jsx)(react_3.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: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: (0, jsx_runtime_1.jsx)(react_2.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(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: isDirectTransfer ? undefined : () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL) }))] }) }), (0, jsx_runtime_1.jsx)(react_3.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: (0, cn_1.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,
+                })) : ((0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (btnInfo.error && classes?.mainButtonError) ||
                         (btnInfo.disable && classes?.mainButtonDisabled) ||
                         classes?.mainButton ||
-                        (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }) }), gasPriceData && !isLoadingGas && paymentType === "crypto" && !isDirectTransfer && ((0, jsx_runtime_1.jsx)(GasIndicator_1.GasIndicator, { gasPrice: gasPriceData, className: classes?.gasIndicator || "mt-2 w-full" })), mainFooter ? mainFooter : null] }));
+                        (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) })) }), gasPriceData && !isLoadingGas && paymentType === "crypto" && !isDirectTransfer && ((0, jsx_runtime_1.jsx)(GasIndicator_1.GasIndicator, { gasPrice: gasPriceData, className: classes?.gasIndicator || "mt-2 w-full" })), mainFooter ? mainFooter : null] }));
     const handleCryptoOrder = async () => {
         try {
             const isDirectTransfer = isSameChainSameToken && allowDirectTransfer;
@@ -275,7 +284,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
                     dstToken: selectedDstToken,
                     srcAmount: srcAmountFromQuote,
                     expectedDstAmount,
-                    creatorAddress: globalAddress,
+                    creatorAddress: senderAddress || globalAddress,
                     payload: {
                         amount: activeOutputAmountInWei,
                         data: encodedData,
@@ -300,7 +309,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
                     dstToken: selectedDstToken,
                     srcAmount: srcAmountBigInt.toString(),
                     expectedDstAmount: expectedDstAmountRaw,
-                    creatorAddress: globalAddress,
+                    creatorAddress: senderAddress || globalAddress,
                     payload,
                     callbackMetadata,
                 });
@@ -358,7 +367,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
                     srcFiatAmount: srcAmount,
                     onramp: onrampOptions,
                     expectedDstAmount,
-                    creatorAddress: globalAddress,
+                    creatorAddress: senderAddress || globalAddress,
                     payload: {
                         amount: activeOutputAmountInWei,
                         data: encodedData,
@@ -380,7 +389,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
                     srcFiatAmount: srcAmount,
                     onramp: onrampOptions,
                     expectedDstAmount: expectedDstAmountRaw,
-                    creatorAddress: globalAddress,
+                    creatorAddress: senderAddress || globalAddress,
                     payload,
                 });
             }
@@ -413,7 +422,28 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
             : anyspendQuote.data.currencyIn?.amountUsd
                 ? Number(anyspendQuote.data.currencyIn.amountUsd)
                 : undefined, onBack: () => setActivePanel(useAnyspendFlow_1.PanelView.MAIN) })) : null;
-    const directTransferSuccessView = ((0, jsx_runtime_1.jsxs)(react_3.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: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-green-500/20", children: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle, { className: "h-10 w-10 text-green-500" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary mb-2 text-xl font-bold", children: "Transfer Complete!" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-as-primary/60 text-sm", children: [srcAmount, " ", selectedSrcToken.symbol, " sent on ", (0, anyspend_1.getChainName)(selectedSrcChainId)] }), (0, jsx_runtime_1.jsxs)("p", { className: "text-as-primary/60 mt-1 text-sm", children: ["to ", selectedRecipientOrDefault?.slice(0, 6), "...", selectedRecipientOrDefault?.slice(-4)] })] }), directTransferTxHash && ((0, jsx_runtime_1.jsx)("a", { href: (0, anyspend_1.getExplorerTxUrl)(selectedSrcChainId, directTransferTxHash || ""), target: "_blank", rel: "noopener noreferrer", className: "text-as-brand text-sm underline", children: "View Transaction" })), (0, jsx_runtime_1.jsx)(react_2.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 ${(0, anyspend_1.getChainName)(selectedSrcChainId)}`;
+    const exactInReturnLabel = content.returnButtonLabel || returnHomeLabel;
+    const directTransferSuccessView = slots.successScreen ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: slots.successScreen({
+            title: typeof exactInSuccessTitle === "string" ? exactInSuccessTitle : "Transfer Complete!",
+            description: typeof exactInSuccessDesc === "string" ? exactInSuccessDesc : "",
+            txHash: directTransferTxHash,
+            explorerUrl: directTransferTxHash
+                ? (0, anyspend_1.getExplorerTxUrl)(selectedSrcChainId, directTransferTxHash || "")
+                : undefined,
+            onDone: () => {
+                onSuccess?.(srcAmount);
+                if (returnToHomeUrl) {
+                    window.location.href = returnToHomeUrl;
+                }
+                else {
+                    setB3ModalOpen(false);
+                }
+            },
+            returnUrl: returnToHomeUrl,
+            returnLabel: exactInReturnLabel || undefined,
+        }) })) : ((0, jsx_runtime_1.jsxs)(react_3.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: [(0, jsx_runtime_1.jsx)(AnimatedCheckmark_1.AnimatedCheckmark, { className: "h-16 w-16" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary mb-2 text-xl font-bold", children: exactInSuccessTitle }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/60 text-sm", children: exactInSuccessDesc }), (0, jsx_runtime_1.jsxs)("p", { className: "text-as-primary/60 mt-1 text-sm", children: ["to ", selectedRecipientOrDefault?.slice(0, 6), "...", selectedRecipientOrDefault?.slice(-4)] })] }), directTransferTxHash && ((0, jsx_runtime_1.jsx)("a", { href: (0, anyspend_1.getExplorerTxUrl)(selectedSrcChainId, directTransferTxHash || ""), target: "_blank", rel: "noopener noreferrer", className: "text-as-brand text-sm underline", children: "View Transaction" })), (0, jsx_runtime_1.jsx)(react_2.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;
@@ -421,7 +451,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 ((0, jsx_runtime_1.jsx)(react_2.StyleRoot, { children: (0, jsx_runtime_1.jsx)("div", { className: classes?.root ||
                 (0, cn_1.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: (0, jsx_runtime_1.jsx)(react_2.TransitionPanel, { activeIndex: orderId
                     ? oat