@b3dotfun/sdk 0.1.66 → 0.1.68

package/dist/cjs/global-account/react/components/ui/dialog.d.ts

@@ -11,6 +11,8 @@ type DialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
 type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
     hideCloseButton?: boolean;
     closeBtnClassName?: string;
+    /** Hide the "Global Account" branding footer below the modal */
+    hideGABranding?: boolean;
 };
 declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<DialogContentElement>>;
 declare const DialogHeader: {

package/dist/cjs/global-account/react/components/ui/dialog.js

@@ -51,9 +51,9 @@ exports.DialogClose = DialogClose;
 const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DialogPrimitive.Overlay, { ref: ref, className: (0, utils_1.cn)("fixed inset-0 z-50 bg-black/80 backdrop-blur-[20px]", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:backdrop-blur-none data-[state=open]:backdrop-blur-[20px]", "transition-all duration-300", className), ...props })));
 exports.DialogOverlay = DialogOverlay;
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, hideCloseButton = true, closeBtnClassName, ...props }, ref) => {
+const DialogContent = React.forwardRef(({ className, children, hideCloseButton = true, closeBtnClassName, hideGABranding, ...props }, ref) => {
     const container = typeof window !== "undefined" ? document.getElementById("b3-root") : null;
-    return ((0, jsx_runtime_1.jsxs)(DialogPortal, { container: container, children: [(0, jsx_runtime_1.jsx)(DialogOverlay, {}), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Content, { ref: ref, className: (0, utils_1.cn)("fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border shadow-lg !outline-none", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-500", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", "[perspective:1200px] [transform-style:preserve-3d] sm:rounded-xl", "transition-all ease-out", className), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "modal-inner-content mb-[23px] flex flex-1 flex-col overflow-hidden rounded-xl border border-[#D1D1D6] bg-white shadow-[0_20px_24px_-4px_rgba(10,13,18,0.08),0_8px_8px_-4px_rgba(10,13,18,0.03),0_3px_3px_-1.5px_rgba(10,13,18,0.04)]", children: [children, !hideCloseButton && ((0, jsx_runtime_1.jsxs)(DialogPrimitive.Close, { className: (0, utils_1.cn)("modal-close-button data-[state=open]:bg-b3-react-background data-[state=open]:text-b3-react-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400", closeBtnClassName), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Close" })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "b3-modal-ga-branding absolute bottom-[10px] left-0 right-0 flex items-center justify-center gap-1.5 pt-[10px]", children: [(0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { className: "font-neue-montreal-semibold text-xs uppercase leading-none tracking-[0.72px] text-[#0B57C2]", children: "Global Account" })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(DialogPortal, { container: container, children: [(0, jsx_runtime_1.jsx)(DialogOverlay, {}), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Content, { ref: ref, className: (0, utils_1.cn)("fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border shadow-lg !outline-none", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-500", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", "[perspective:1200px] [transform-style:preserve-3d] sm:rounded-xl", "transition-all ease-out", className), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("modal-inner-content flex flex-1 flex-col overflow-hidden rounded-xl border border-[#D1D1D6] bg-white shadow-[0_20px_24px_-4px_rgba(10,13,18,0.08),0_8px_8px_-4px_rgba(10,13,18,0.03),0_3px_3px_-1.5px_rgba(10,13,18,0.04)] dark:border-neutral-700 dark:bg-neutral-900", !hideGABranding && "mb-[23px]"), children: [children, !hideCloseButton && ((0, jsx_runtime_1.jsxs)(DialogPrimitive.Close, { className: (0, utils_1.cn)("modal-close-button data-[state=open]:bg-b3-react-background data-[state=open]:text-b3-react-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400", closeBtnClassName), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Close" })] }))] }), !hideGABranding && ((0, jsx_runtime_1.jsxs)("div", { className: "b3-modal-ga-branding absolute bottom-[10px] left-0 right-0 flex items-center justify-center gap-1.5 pt-[10px]", children: [(0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { className: "font-neue-montreal-semibold text-xs uppercase leading-none tracking-[0.72px] text-[#0B57C2]", children: "Global Account" })] }))] })] }));
 });
 exports.DialogContent = DialogContent;
 DialogContent.displayName = DialogPrimitive.Content.displayName;

package/dist/cjs/global-account/react/components/ui/drawer.d.ts

@@ -8,7 +8,9 @@ declare const DrawerTrigger: React.ForwardRefExoticComponent<import("@radix-ui/r
 declare const DrawerPortal: typeof import("vaul").Portal;
 declare const DrawerClose: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DrawerContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    hideGABranding?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
 declare const DrawerHeader: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/cjs/global-account/react/components/ui/drawer.js

@@ -51,7 +51,7 @@ exports.DrawerClose = DrawerClose;
 const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(vaul_1.Drawer.Overlay, { ref: ref, className: (0, utils_1.cn)("fixed inset-0 z-50 bg-black/80", className), ...props })));
 exports.DrawerOverlay = DrawerOverlay;
 DrawerOverlay.displayName = vaul_1.Drawer.Overlay.displayName;
-const DrawerContent = React.forwardRef(({ className, children, ...props }, ref) => {
+const DrawerContent = React.forwardRef(({ className, children, hideGABranding: _hideGABranding, ...props }, ref) => {
     const container = typeof window !== "undefined" ? document.getElementById("b3-root") : null;
     return ((0, jsx_runtime_1.jsxs)(DrawerPortal, { container: container, children: [(0, jsx_runtime_1.jsx)(DrawerOverlay, {}), (0, jsx_runtime_1.jsx)(vaul_1.Drawer.Content, { ref: ref, className: (0, utils_1.cn)("bg-b3-react-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border py-6 pt-5", className), ...props, children: children })] }));
 });

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

@@ -48,8 +48,8 @@ export declare function useAuth(): {
                 name?: string | undefined;
                 address?: string | undefined;
                 email?: string | undefined;
-                username?: string | undefined;
                 phone?: string | undefined;
+                username?: string | undefined;
                 fid?: string | undefined;
             };
         }[] | undefined;

package/dist/cjs/global-account/react/hooks/useAuthentication.d.ts

@@ -41,8 +41,8 @@ export declare function useAuthentication(partnerId: string): {
                 name?: string | undefined;
                 address?: string | undefined;
                 email?: string | undefined;
-                username?: string | undefined;
                 phone?: string | undefined;
+                username?: string | undefined;
                 fid?: string | undefined;
             };
         }[] | undefined;

package/dist/cjs/global-account/react/hooks/useFirstEOA.d.ts

@@ -7451,6 +7451,8 @@ export declare function useFirstEOA(chain?: {
             [x: `bool[${string}]`]: undefined;
             [x: `bytes[${string}]`]: undefined;
             [x: `bytes1[${string}]`]: undefined;
+            [x: `bytes4[${string}]`]: undefined;
+            [x: `bytes30[${string}]`]: undefined;
             [x: `bytes18[${string}]`]: undefined;
             [x: `bytes6[${string}]`]: undefined;
             [x: `bytes9[${string}]`]: undefined;
@@ -7458,7 +7460,6 @@ export declare function useFirstEOA(chain?: {
             [x: `bytes10[${string}]`]: undefined;
             [x: `bytes2[${string}]`]: undefined;
             [x: `bytes3[${string}]`]: undefined;
-            [x: `bytes4[${string}]`]: undefined;
             [x: `bytes5[${string}]`]: undefined;
             [x: `bytes7[${string}]`]: undefined;
             [x: `bytes11[${string}]`]: undefined;
@@ -7479,7 +7480,6 @@ export declare function useFirstEOA(chain?: {
             [x: `bytes27[${string}]`]: undefined;
             [x: `bytes28[${string}]`]: undefined;
             [x: `bytes29[${string}]`]: undefined;
-            [x: `bytes30[${string}]`]: undefined;
             [x: `bytes31[${string}]`]: undefined;
             [x: `bytes32[${string}]`]: undefined;
             [x: `int[${string}]`]: undefined;
@@ -7553,6 +7553,8 @@ export declare function useFirstEOA(chain?: {
             bool?: undefined;
             bytes?: undefined;
             bytes1?: undefined;
+            bytes4?: undefined;
+            bytes30?: undefined;
             bytes18?: undefined;
             bytes6?: undefined;
             bytes9?: undefined;
@@ -7560,7 +7562,6 @@ export declare function useFirstEOA(chain?: {
             bytes10?: undefined;
             bytes2?: undefined;
             bytes3?: undefined;
-            bytes4?: undefined;
             bytes5?: undefined;
             bytes7?: undefined;
             bytes11?: undefined;
@@ -7581,7 +7582,6 @@ export declare function useFirstEOA(chain?: {
             bytes27?: undefined;
             bytes28?: undefined;
             bytes29?: undefined;
-            bytes30?: undefined;
             bytes31?: undefined;
             bytes32?: undefined;
             int56?: undefined;

package/dist/cjs/global-account/react/hooks/useUser.d.ts

@@ -32,8 +32,8 @@ export declare function useUser(): {
                 name?: string | undefined;
                 address?: string | undefined;
                 email?: string | undefined;
-                username?: string | undefined;
                 phone?: string | undefined;
+                username?: string | undefined;
                 fid?: string | undefined;
             };
         }[] | undefined;

package/dist/cjs/global-account/react/hooks/useUserQuery.d.ts

@@ -36,8 +36,8 @@ export declare function useUserQuery(): {
                 name?: string | undefined;
                 address?: string | undefined;
                 email?: string | undefined;
-                username?: string | undefined;
                 phone?: string | undefined;
+                username?: string | undefined;
                 fid?: string | undefined;
             };
         }[] | undefined;

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

@@ -481,6 +481,58 @@ export interface AnySpendCollectorClubPurchaseProps extends BaseModalProps {
  * Props for the AnySpend Workflow Trigger modal
  * Handles payments that trigger b3os-workflow runs
  */
+/**
+ * Props for the AnySpend Checkout Trigger modal
+ * Shopify-style checkout with predefined destination token and amount
+ */
+export interface AnySpendCheckoutTriggerModalProps extends BaseModalProps {
+    /** Modal type identifier */
+    type: "anySpendCheckoutTrigger";
+    /** Payment recipient address (hex) */
+    recipientAddress: string;
+    /** Destination token address */
+    destinationTokenAddress: string;
+    /** Destination chain ID */
+    destinationTokenChainId: number;
+    /** Line items to display in the cart (optional — if omitted, only the payment panel is shown) */
+    items?: Array<{
+        id?: string;
+        name: string;
+        description?: string;
+        imageUrl?: string;
+        amount: string;
+        quantity: number;
+    }>;
+    /** Total amount in wei — required when items are not provided */
+    totalAmount?: string;
+    /** Organization name */
+    organizationName?: string;
+    /** Organization logo URL */
+    organizationLogo?: string;
+    /** Theme color (hex) */
+    themeColor?: string;
+    /** Custom button text */
+    buttonText?: string;
+    /** Workflow ID to trigger on payment */
+    workflowId?: string;
+    /** Organization ID that owns the workflow */
+    orgId?: string;
+    /** Optional callback metadata merged into the order */
+    callbackMetadata?: {
+        inputs?: Record<string, unknown>;
+    } & Record<string, unknown>;
+    /** Called on successful payment */
+    onSuccess?: (result: {
+        txHash?: string;
+        orderId?: string;
+    }) => void;
+    /** Called on payment error */
+    onError?: (error: Error) => void;
+    /** URL to redirect to after payment */
+    returnUrl?: string;
+    /** Label for the return button */
+    returnLabel?: string;
+}
 export interface AnySpendWorkflowTriggerModalProps extends BaseModalProps {
     /** Modal type identifier */
     type: "anySpendWorkflowTrigger";
@@ -574,7 +626,7 @@ export interface AnySpendDepositModalProps extends BaseModalProps {
 /**
  * Union type of all possible modal content types
  */
-export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendDepositUpsideProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | LinkNewAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps | DepositModalProps | SendModalProps | NotificationsModalProps | AnySpendCollectorClubPurchaseProps | AnySpendDepositModalProps | AnySpendWorkflowTriggerModalProps;
+export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendDepositUpsideProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | LinkNewAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps | DepositModalProps | SendModalProps | NotificationsModalProps | AnySpendCollectorClubPurchaseProps | AnySpendDepositModalProps | AnySpendWorkflowTriggerModalProps | AnySpendCheckoutTriggerModalProps;
 /**
  * State interface for the modal store
  */

package/dist/cjs/shared/constants/chains/b3Chain.d.ts

@@ -92,9 +92,9 @@ export declare const getViemChainConfig: (config: ChainNetworks) => {
     readonly rpc: string;
     readonly icon: {
         format: string;
-        height: number;
-        width: number;
         url: string;
+        width: number;
+        height: number;
     };
 };
 export declare const thirdwebB3Testnet: ThirdwebChain;

package/dist/cjs/shared/constants/chains/supported.d.ts

@@ -35,13 +35,13 @@ export declare const supportedChainNetworks: {
             uri: string;
         }[];
     };
+    _id: string | {};
     icon: {
         format: string;
-        height: number;
-        width: number;
         url: string;
+        width: number;
+        height: number;
     };
-    _id: string | {};
 }[];
 export declare const coingeckoChains: Record<number, {
     coingecko_id: string;

package/dist/cjs/shared/utils/number.d.ts

@@ -8,4 +8,9 @@ export declare const formatDisplayNumber: (value: string | bigint | number | und
     fallback?: string;
     showSubscripts?: boolean;
 }) => string;
+/**
+ * Safely convert a string to BigInt, returning 0n for invalid values.
+ * Use this for consumer-provided amount strings that may not be valid wei values.
+ */
+export declare function safeBigInt(value: string): bigint;
 export declare function formatUnits(value: string, decimals?: number): string;

package/dist/cjs/shared/utils/number.js

@@ -4,6 +4,7 @@ exports.formatDisplayNumber = void 0;
 exports.toRawString = toRawString;
 exports.divideBigIntToString = divideBigIntToString;
 exports.formatTokenAmount = formatTokenAmount;
+exports.safeBigInt = safeBigInt;
 exports.formatUnits = formatUnits;
 function toRawString(amountInWei, decimals) {
     const factor = BigInt(10 ** decimals);
@@ -93,6 +94,18 @@ const formatDisplayNumber = (value, options) => {
     return formatter.format(v);
 };
 exports.formatDisplayNumber = formatDisplayNumber;
+/**
+ * Safely convert a string to BigInt, returning 0n for invalid values.
+ * Use this for consumer-provided amount strings that may not be valid wei values.
+ */
+function safeBigInt(value) {
+    try {
+        return BigInt(value);
+    }
+    catch {
+        return BigInt(0);
+    }
+}
 function formatUnits(value, decimals = 18) {
     const factor = BigInt(10) ** BigInt(decimals);
     const wholePart = BigInt(value) / factor;

package/dist/esm/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/esm/anyspend/react/components/AnySpend.js

@@ -9,7 +9,8 @@ import { getThirdwebChain } from "../../../shared/constants/chains/supported.js"
 import { cn } from "../../../shared/utils/cn.js";
 import { formatTokenAmount } from "../../../shared/utils/number.js";
 import invariant from "invariant";
-import { ArrowDown, CheckCircle, HistoryIcon, Loader2 } from "lucide-react";
+import { ArrowDown, HistoryIcon, Loader2 } from "lucide-react";
+import { AnimatedCheckmark } from "./icons/AnimatedCheckmark.js";
 import { motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { formatUnits, parseUnits } from "viem";
@@ -34,6 +35,7 @@ import { PanelOnrampPayment } from "./common/PanelOnrampPayment.js";
 import { PointsDetailPanel } from "./common/PointsDetailPanel.js";
 import { RecipientSelection } from "./common/RecipientSelection.js";
 import { TabSection } from "./common/TabSection.js";
+import { AnySpendCustomizationProvider, useAnySpendCustomization } from "./context/AnySpendCustomizationContext.js";
 const baseChain = getThirdwebChain(8453);
 export var PanelView;
 (function (PanelView) {
@@ -52,10 +54,10 @@ export var PanelView;
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
 export function AnySpend(props) {
     const fingerprintConfig = getFingerprintConfig();
-    console.log("[mitch] AnySpend rendered with fingerprintConfig:", props, fingerprintConfig);
-    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendInner, { ...props }) }));
+    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendCustomizationProvider, { slots: props.slots, content: props.content, theme: props.theme, children: _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 } = useAnySpendCustomization();
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
     const { partnerId } = useB3Config();
@@ -358,9 +360,10 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     const recipientProfile = 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 } = useTokenBalanceDirect({
         token: selectedSrcToken,
-        address: connectedEOAWallet?.getAccount()?.address,
+        address: effectiveBalanceAddress,
     });
     // Check if user has enough balanceuseAutoSetActiveWalletFromWagmi
     const hasEnoughBalance = useMemo(() => {
@@ -712,7 +715,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                     : selectedDstToken,
                 srcAmount: srcAmountBigInt.toString(),
                 expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount || "0",
-                creatorAddress: globalAddress,
+                creatorAddress: senderAddress || globalAddress,
                 callbackMetadata,
             });
         }
@@ -787,7 +790,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,
             });
         }
@@ -905,10 +908,15 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                                     }, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) })), activeTab === "crypto" && (_jsx(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 && (_jsx(GasIndicator, { gasPrice: gasPriceData, className: classes?.gasIndicator || "mt-2 w-full" })), _jsxs(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 : () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: isDirectTransfer ? undefined : () => navigateToPanel(PanelView.FEE_DETAIL, "forward") }))] }), gasPriceData && !isLoadingGas && activeTab === "crypto" && !isDirectTransfer && (_jsx(GasIndicator, { gasPrice: gasPriceData, className: classes?.gasIndicator || "mt-2 w-full" })), _jsxs(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] }) }), !hideTransactionHistoryButton && (globalAddress || effectiveRecipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: classes?.historyButton ||
+                                    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] }) })), !hideTransactionHistoryButton && (globalAddress || effectiveRecipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: classes?.historyButton ||
                                     "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }), _jsx("div", { className: "w-full", children: _jsx(TabsPrimitive, { defaultValue: "swap", onValueChange: value => {
                         if (value === "settings" || value === "home") {
                             setB3ModalContentType({
@@ -961,13 +969,34 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
         }, srcAmountOnRamp: srcAmountOnRamp }));
     const pointsDetailView = (_jsx(PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: navigateBack }));
     const feeDetailView = anyspendQuote?.data?.fee ? (_jsx(FeeDetailPanel, { fee: anyspendQuote.data.fee, transactionAmountUsd: activeTab === "crypto" ? Number(anyspendQuote.data.currencyIn?.amountUsd) : parseFloat(srcAmountOnRamp), onBack: navigateBack })) : null;
-    const directTransferSuccessView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-6 p-5", children: [_jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx("div", { className: "bg-as-brand/10 flex h-16 w-16 items-center justify-center rounded-full", children: _jsx(CheckCircle, { className: "text-as-brand h-8 w-8" }) }), _jsxs("div", { className: "text-center", children: [_jsx("h2", { className: "text-as-primary text-xl font-bold", children: "Transfer Complete" }), _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 ", getChainName(selectedSrcChainId)] })] })] }), directTransferTxHash && (_jsx("a", { href: getExplorerTxUrl(selectedSrcChainId, directTransferTxHash), target: "_blank", rel: "noopener noreferrer", className: "text-as-brand hover:text-as-brand/80 text-sm underline", children: "View transaction" })), _jsx("div", { className: "flex w-full flex-col gap-2", children: returnToHomeUrl ? (_jsx(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 ${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 ? getExplorerTxUrl(selectedSrcChainId, directTransferTxHash) : undefined,
+        onDone: () => {
+            if (returnToHomeUrl) {
+                window.location.href = returnToHomeUrl;
+            }
+            else {
+                onSuccess?.(directTransferTxHash);
+                setDirectTransferTxHash(undefined);
+                setB3ModalOpen(false);
+            }
+        },
+        returnUrl: returnToHomeUrl,
+        returnLabel: resolvedReturnLabel || undefined,
+    })) : (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-6 p-5", children: [_jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx(AnimatedCheckmark, { className: "h-16 w-16" }), _jsxs("div", { className: "text-center", children: [_jsx("h2", { className: "text-as-primary text-xl font-bold", children: defaultSuccessTitle }), _jsx("p", { className: "text-as-secondary mt-1 text-sm", children: defaultSuccessDesc })] })] }), directTransferTxHash && (_jsx("a", { href: getExplorerTxUrl(selectedSrcChainId, directTransferTxHash), target: "_blank", rel: "noopener noreferrer", className: "text-as-brand hover:text-as-brand/80 text-sm underline", children: "View transaction" })), _jsx("div", { className: "flex w-full flex-col gap-2", children: returnToHomeUrl ? (_jsx(Button, { onClick: () => {
                         window.location.href = returnToHomeUrl;
-                    }, className: "bg-as-brand hover:bg-as-brand/90 w-full text-white", children: returnHomeLabel || "Return to Home" })) : (_jsx(Button, { onClick: () => {
+                    }, className: "bg-as-brand hover:bg-as-brand/90 w-full text-white", children: resolvedReturnLabel || "Return to Home" })) : (_jsx(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 (_jsx(StyleRoot, { children: _jsx("div", { className: classes?.container ||
                 cn("anyspend-container font-inter mx-auto w-full max-w-[460px]", mode === "page" &&

package/dist/esm/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/esm/anyspend/react/components/AnySpendBondKit.js

@@ -20,7 +20,7 @@ function formatNumberWithCommas(x) {
     parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     return parts.join(".");
 }
-export function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, minTokensOut = "0", imageUrl, b3Amount: initialB3Amount, onSuccess, }) {
+export function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, minTokensOut = "0", imageUrl, b3Amount: initialB3Amount, onSuccess, slots, content, theme, }) {
     const hasMounted = useHasMounted();
     const [showAmountPrompt, setShowAmountPrompt] = useState(!initialB3Amount);
     const [b3Amount, setB3Amount] = useState(initialB3Amount || "");
@@ -200,5 +200,5 @@ export function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddr
     });
     return (_jsx(AnySpendCustom, { mode: mode, recipientAddress: recipientAddress, orderType: "custom", dstChainId: baseMainnet.id, dstToken: dstToken, dstAmount: 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/esm/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/esm/anyspend/react/components/AnySpendBuySpin.js

@@ -84,7 +84,7 @@ const basePublicClient = createPublicClient({
     chain: baseMainnet,
     transport: http(PUBLIC_BASE_RPC_URL),
 });
-export function AnySpendBuySpin({ loadOrder, mode = "modal", spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess, }) {
+export function AnySpendBuySpin({ loadOrder, mode = "modal", spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess, senderAddress, slots, content, theme, }) {
     const hasMounted = useHasMounted();
     const { setB3ModalOpen } = useModalStore();
     // Payment config state
@@ -390,5 +390,5 @@ export function AnySpendBuySpin({ loadOrder, mode = "modal", spinwheelContractAd
     const encodedData = generateEncodedDataForBuyEntriesAndSpin(address || "", userSpinQuantity);
     return (_jsx(AnySpendCustom, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, orderType: "custom", dstChainId: chainId, dstToken: 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/esm/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/esm/anyspend/react/components/AnySpendCollectorClubPurchase.js

@@ -41,7 +41,7 @@ const basePublicClient = createPublicClient({
     chain: base,
     transport: http(PUBLIC_BASE_RPC_URL),
 });
-export function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab = "crypto", packId, packAmount, pricePerPack, paymentToken = USDC_BASE, recipientAddress, spenderAddress, isStaging = false, onSuccess, header, showRecipient = true, vendingMachineId, packType, forceFiatPayment, discountCode, }) {
+export function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab = "crypto", packId, packAmount, pricePerPack, paymentToken = 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 = useMemo(() => {
@@ -215,5 +215,5 @@ export function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activ
             ...(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/esm/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;