@b3dotfun/sdk 0.1.66 → 0.1.68

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,5 @@
 import { components } from "../../../anyspend/types/api";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
 type AnySpendTournamentProps = {
     mode?: "modal" | "page";
     action: "join";
@@ -10,6 +11,11 @@ type AnySpendTournamentProps = {
     tournamentEntryToken: components["schemas"]["Token"];
     tournamentEntryFee: string;
     onSuccess?: () => void;
+    /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
+    senderAddress?: string;
+    slots?: AnySpendSlots;
+    content?: AnySpendContent;
+    theme?: AnySpendTheme;
 } | {
     mode?: "modal" | "page";
     action: "fund";
@@ -20,6 +26,11 @@ type AnySpendTournamentProps = {
     tournamentFundToken: components["schemas"]["Token"];
     tournamentFundAmount: string;
     onSuccess?: () => void;
+    /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
+    senderAddress?: string;
+    slots?: AnySpendSlots;
+    content?: AnySpendContent;
+    theme?: AnySpendTheme;
 };
 export declare function AnySpendTournament(props: AnySpendTournamentProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -7,7 +7,7 @@ const number_1 = require("../../../shared/utils/number");
 const react_1 = require("motion/react");
 const AnySpendCustom_1 = require("./AnySpendCustom");
 function AnySpendTournament(props) {
-    const { mode = "modal", action, loadOrder, tournamentChainId, tournamentContractAddress, tournamentMetadata, onSuccess, } = props;
+    const { mode = "modal", action, loadOrder, tournamentChainId, tournamentContractAddress, tournamentMetadata, onSuccess, senderAddress, slots, content, theme, } = props;
     const dstToken = action === "join" ? props.tournamentEntryToken : props.tournamentFundToken;
     const dstAmount = action === "join" ? props.tournamentEntryFee : props.tournamentFundAmount;
     const header = ({ anyspendPrice, isLoadingAnyspendPrice, }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "z-10 mt-[-100px] flex h-[270px] w-full items-end justify-center", children: (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/tournament-play.svg", alt: "Tournament Play", className: "h-[200px] w-[360px] object-cover object-center" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "from-b3-react-background to-as-on-surface-1 mt-[-100px] w-full rounded-t-lg bg-gradient-to-t", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-[100px] w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col items-center gap-1 p-6 pt-0", children: [(0, jsx_runtime_1.jsxs)("span", { className: "font-sf-rounded text-center text-lg font-semibold", children: [action === "join" ? "Pay entry fee to join " : "Pay to fund ", " ", tournamentMetadata.name] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-2 flex w-fit items-center gap-1", children: anyspendPrice ? ((0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { mode: "wait", children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("text-as-primary group flex items-center text-2xl font-semibold transition-all", {
@@ -16,5 +16,5 @@ function AnySpendTournament(props) {
     return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.AnySpendCustom, { loadOrder: loadOrder, mode: mode, recipientAddress: action === "join" ? props.joinFor : undefined, orderType: action === "join" ? "join_tournament" : "fund_tournament", dstChainId: tournamentChainId, dstToken: dstToken, dstAmount: dstAmount, contractAddress: tournamentContractAddress, encodedData: "0x", metadata: {
             type: action === "join" ? "join_tournament" : "fund_tournament",
             tournament: tournamentMetadata,
-        }, header: header, onSuccess: onSuccess, showRecipient: action === "join" }));
+        }, header: header, onSuccess: onSuccess, showRecipient: action === "join", senderAddress: senderAddress, slots: slots, content: content, theme: theme }));
 }

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

@@ -1,4 +1,5 @@
 import { components } from "../../../anyspend/types/api";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
 export declare const HYPE_TOKEN_DETAILS: {
     SYMBOL: string;
     LOGO_URI: string;
@@ -26,5 +27,10 @@ export interface AnySpendDepositHypeProps {
     returnToHomeUrl?: string;
     /** Custom label for recipient display (e.g., "OBSN Telegram Bot") */
     customRecipientLabel?: string;
+    /** 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;
 }
-export declare function AnySpendDepositHype({ loadOrder, mode, recipientAddress, paymentType, sourceTokenAddress, sourceTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, }: AnySpendDepositHypeProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function AnySpendDepositHype({ loadOrder, mode, recipientAddress, paymentType, sourceTokenAddress, sourceTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, senderAddress, slots, content, theme, }: AnySpendDepositHypeProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -10,7 +10,7 @@ exports.HYPE_TOKEN_DETAILS = {
     SYMBOL: "HYPE",
     LOGO_URI: "https://cdn.hypeduel.com/hypes-coin.svg",
 };
-function AnySpendDepositHype({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, }) {
+function AnySpendDepositHype({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, senderAddress, slots, content, theme, }) {
     if (!recipientAddress)
         return null;
     const header = () => ((0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }));
@@ -23,5 +23,5 @@ function AnySpendDepositHype({ loadOrder, mode = "modal", recipientAddress, paym
             logoURI: exports.HYPE_TOKEN_DETAILS.LOGO_URI,
         },
     };
-    return ((0, jsx_runtime_1.jsx)(AnySpendCustomExactIn_1.AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: hypeToken, destinationChainId: chains_1.base.id, orderType: "hype_duel", minDestinationAmount: 10, header: header, onSuccess: onSuccess, onOpenCustomModal: onOpenCustomModal, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa }));
+    return ((0, jsx_runtime_1.jsx)(AnySpendCustomExactIn_1.AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: hypeToken, destinationChainId: chains_1.base.id, orderType: "hype_duel", minDestinationAmount: 10, header: header, onSuccess: onSuccess, onOpenCustomModal: onOpenCustomModal, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa, senderAddress: senderAddress, slots: slots, content: content, theme: theme }));
 }

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

@@ -1,8 +1,12 @@
 import { GenerateSigMintResponse } from "../../types/signatureMint";
-export declare function AnyspendSignatureMint({ loadOrder, mode, signatureData, imageUrl, onSuccess, }: {
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
+export declare function AnyspendSignatureMint({ loadOrder, mode, signatureData, imageUrl, onSuccess, slots, content, theme, }: {
     loadOrder?: string;
     mode?: "modal" | "page";
     signatureData: GenerateSigMintResponse;
     imageUrl?: string;
     onSuccess?: (txHash?: string) => void;
+    slots?: AnySpendSlots;
+    content?: AnySpendContent;
+    theme?: AnySpendTheme;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -41,7 +41,7 @@ function generateEncodedDataForSignatureMint(signatureData) {
     });
     return encodedData;
 }
-function AnyspendSignatureMint({ loadOrder, mode = "modal", signatureData, imageUrl, onSuccess, }) {
+function AnyspendSignatureMint({ loadOrder, mode = "modal", signatureData, imageUrl, onSuccess, slots, content, theme, }) {
     // Get token data
     const { data: tokenData, isError: isTokenError, isLoading, } = (0, react_1.useTokenData)(signatureData.collection.chainId, signatureData.collection.signatureRequestBody?.currency);
     // Convert token data to AnySpend Token type
@@ -74,5 +74,5 @@ function AnyspendSignatureMint({ loadOrder, mode = "modal", signatureData, image
     const price = (0, viem_1.parseEther)(signatureData.payload.price?.toString() || "0");
     return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.AnySpendCustom, { loadOrder: loadOrder, mode: mode, recipientAddress: signatureData.payload.to, orderType: "custom", dstChainId: signatureData.collection.chainId, dstToken: dstToken, dstAmount: price.toString(), contractAddress: signatureData.collection.address || "", encodedData: encodedData, metadata: {
             action: "Signature Mint",
-        }, header: header, onSuccess: onSuccess, showRecipient: true }));
+        }, header: header, onSuccess: onSuccess, showRecipient: true, slots: slots, content: content, theme: theme }));
 }

package/dist/cjs/anyspend/react/components/checkout/AddressForm.d.ts

@@ -0,0 +1,9 @@
+import type { AddressData } from "../../../types/forms";
+interface AddressFormProps {
+    value: AddressData;
+    onChange: (address: AddressData) => void;
+    required?: boolean;
+    className?: string;
+}
+export declare function AddressForm({ value, onChange, required, className }: AddressFormProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/anyspend/react/components/checkout/AddressForm.js

@@ -0,0 +1,14 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddressForm = AddressForm;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../../shared/utils/cn");
+const inputBaseClass = "w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 outline-none transition-colors focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-blue-400";
+const labelClass = "mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300";
+function AddressForm({ value, onChange, required, className }) {
+    const update = (field, val) => {
+        onChange({ ...value, [field]: val });
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-address-form space-y-3", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-address-street", children: [(0, jsx_runtime_1.jsxs)("label", { className: (0, cn_1.cn)("anyspend-form-label", labelClass), children: ["Street Address", required && (0, jsx_runtime_1.jsx)("span", { className: "ml-0.5 text-red-500", children: "*" })] }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: value.street || "", onChange: e => update("street", e.target.value), placeholder: "123 Main Street", required: required, className: (0, cn_1.cn)("anyspend-form-input", inputBaseClass) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-address-city", children: [(0, jsx_runtime_1.jsxs)("label", { className: (0, cn_1.cn)("anyspend-form-label", labelClass), children: ["City", required && (0, jsx_runtime_1.jsx)("span", { className: "ml-0.5 text-red-500", children: "*" })] }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: value.city || "", onChange: e => update("city", e.target.value), placeholder: "City", required: required, className: (0, cn_1.cn)("anyspend-form-input", inputBaseClass) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-address-state", children: [(0, jsx_runtime_1.jsxs)("label", { className: (0, cn_1.cn)("anyspend-form-label", labelClass), children: ["State / Province", required && (0, jsx_runtime_1.jsx)("span", { className: "ml-0.5 text-red-500", children: "*" })] }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: value.state || "", onChange: e => update("state", e.target.value), placeholder: "State", required: required, className: (0, cn_1.cn)("anyspend-form-input", inputBaseClass) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-address-zip", children: [(0, jsx_runtime_1.jsxs)("label", { className: (0, cn_1.cn)("anyspend-form-label", labelClass), children: ["Zip / Postal Code", required && (0, jsx_runtime_1.jsx)("span", { className: "ml-0.5 text-red-500", children: "*" })] }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: value.zip || "", onChange: e => update("zip", e.target.value), placeholder: "12345", required: required, className: (0, cn_1.cn)("anyspend-form-input", inputBaseClass) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-address-country", children: [(0, jsx_runtime_1.jsxs)("label", { className: (0, cn_1.cn)("anyspend-form-label", labelClass), children: ["Country", required && (0, jsx_runtime_1.jsx)("span", { className: "ml-0.5 text-red-500", children: "*" })] }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: value.country || "", onChange: e => update("country", e.target.value), placeholder: "Country", required: required, className: (0, cn_1.cn)("anyspend-form-input", inputBaseClass) })] })] })] }));
+}

package/dist/cjs/anyspend/react/components/checkout/AnySpendCheckout.d.ts

@@ -0,0 +1,117 @@
+import { type ReactNode } from "react";
+import { type PaymentMethod } from "./CheckoutPaymentPanel";
+export type { AnySpendCheckoutClasses } from "../types/classes";
+import type { AnySpendCheckoutClasses } from "../types/classes";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "../types/customization";
+import type { CheckoutFormSchema, CheckoutFormComponentProps, ShippingOption, DiscountResult, AddressData } from "../../../types/forms";
+export type { CheckoutFormSchema, CheckoutFormComponentProps, ShippingOption, DiscountResult, AddressData };
+export interface CheckoutItem {
+    id?: string;
+    name: string;
+    description?: string;
+    imageUrl?: string;
+    /** Amount in wei (smallest unit of destination token) */
+    amount: string;
+    quantity: number;
+    /** Custom metadata displayed as label: value pairs (e.g., { "Size": "Large", "Color": "Blue" }) */
+    metadata?: Record<string, string>;
+}
+export interface CheckoutSummaryLine {
+    /** Display label (e.g., "Platform Fee", "Service Charge") */
+    label: string;
+    /** Amount in token's smallest unit (wei). Negative values shown as deductions. */
+    amount: string;
+    /** Optional description or note */
+    description?: string;
+}
+export interface AnySpendCheckoutProps {
+    /** Display mode */
+    mode?: "page" | "embedded";
+    /** The recipient address */
+    recipientAddress: string;
+    /** The destination token address */
+    destinationTokenAddress: string;
+    /** The destination chain ID */
+    destinationTokenChainId: number;
+    /** Line items */
+    items: CheckoutItem[];
+    /** Override computed total */
+    totalAmount?: string;
+    /** Organization name */
+    organizationName?: string;
+    /** Organization logo URL */
+    organizationLogo?: string;
+    /** Theme color (hex) */
+    themeColor?: string;
+    /** Custom button text */
+    buttonText?: string;
+    /** Checkout session ID (used by pay link backend to track sessions) */
+    checkoutSessionId?: string;
+    /** 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;
+    /** Custom class names */
+    classes?: AnySpendCheckoutClasses;
+    /** Custom footer for the order summary. Pass `null` to hide, or a ReactNode to replace the default. */
+    footer?: ReactNode | null;
+    /** Which payment method to expand initially. Defaults to none (all collapsed). */
+    defaultPaymentMethod?: PaymentMethod;
+    /** Optional sender (payer) address — pre-fills token balances in the crypto panel */
+    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;
+    /** Show the points row in the order status summary. Defaults to false. */
+    showPoints?: boolean;
+    /** Show the order ID row in the order status summary. Defaults to false. */
+    showOrderId?: boolean;
+    /** Shipping cost. String = amount in wei. Object = amount + custom label. */
+    shipping?: string | {
+        amount: string;
+        label?: string;
+    };
+    /** Tax amount. String = amount in wei. Object = amount + custom label + optional rate display. */
+    tax?: string | {
+        amount: string;
+        label?: string;
+        rate?: string;
+    };
+    /** Discount amount (displayed as negative). String = amount in wei. Object = amount + label + optional code. */
+    discount?: string | {
+        amount: string;
+        label?: string;
+        code?: string;
+    };
+    /** Additional summary line items (fees, tips, etc.) */
+    summaryLines?: CheckoutSummaryLine[];
+    /** JSON form schema defining fields to collect from the customer */
+    formSchema?: CheckoutFormSchema | null;
+    /** Custom React component to render as the checkout form */
+    formComponent?: React.ComponentType<CheckoutFormComponentProps>;
+    /** Called when form data changes */
+    onFormSubmit?: (data: Record<string, unknown>) => void;
+    /** Shipping options to display */
+    shippingOptions?: ShippingOption[] | null;
+    /** Whether to collect a shipping address */
+    collectShippingAddress?: boolean;
+    /** Called when shipping option changes */
+    onShippingChange?: (option: ShippingOption) => void;
+    /** Enable discount code input */
+    enableDiscountCode?: boolean;
+    /** Called when discount is applied */
+    onDiscountApplied?: (result: DiscountResult) => void;
+    /** Async function to validate a discount code. Returns DiscountResult. */
+    validateDiscount?: (code: string) => Promise<DiscountResult>;
+}
+export declare function AnySpendCheckout({ mode, recipientAddress, destinationTokenAddress, destinationTokenChainId, items, totalAmount: totalAmountOverride, organizationName, organizationLogo, themeColor, buttonText, checkoutSessionId, onSuccess, onError, returnUrl, returnLabel, classes, footer, defaultPaymentMethod, senderAddress, slots, content, theme, showPoints, showOrderId, shipping: shippingProp, tax, discount: discountProp, summaryLines, formSchema, formComponent, onFormSubmit, shippingOptions, collectShippingAddress, onShippingChange: onShippingChangeProp, enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount, }: AnySpendCheckoutProps): import("react/jsx-runtime").JSX.Element;