@b3dotfun/sdk 0.1.66 → 0.1.68

package/src/anyspend/react/components/AnySpendCustom.tsx

@@ -48,6 +48,8 @@ import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodStat
 import { useOnOrderSuccess } from "../hooks/useOnOrderSuccess";
 import { useRecipientAddressState } from "../hooks/useRecipientAddressState";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
+import { AnySpendCustomizationProvider } from "./context/AnySpendCustomizationContext";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
 import { CryptoPaymentMethodDisplay } from "./common/CryptoPaymentMethodDisplay";
 import { FeeBreakDown } from "./common/FeeBreakDown";
@@ -191,12 +193,22 @@ export 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;
 }) {
   const fingerprintConfig = getFingerprintConfig();
 
   return (
     <AnySpendFingerprintWrapper fingerprint={fingerprintConfig}>
-      <AnySpendCustomInner {...props} />
+      <AnySpendCustomizationProvider slots={props.slots} content={props.content} theme={props.theme}>
+        <AnySpendCustomInner {...props} />
+      </AnySpendCustomizationProvider>
     </AnySpendFingerprintWrapper>
   );
 }
@@ -220,6 +232,7 @@ function AnySpendCustomInner({
   onShowPointsDetail,
   srcFiatAmount: srcFiatAmountProps,
   forceFiatPayment,
+  senderAddress,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -245,6 +258,10 @@ function AnySpendCustomInner({
   onShowPointsDetail?: () => void;
   srcFiatAmount?: string;
   forceFiatPayment?: boolean;
+  senderAddress?: string;
+  slots?: AnySpendSlots;
+  content?: AnySpendContent;
+  theme?: AnySpendTheme;
 }) {
   const hasMounted = useHasMounted();
 
@@ -282,15 +299,16 @@ function AnySpendCustomInner({
   const { data: tokenList } = useAnyspendTokenList(srcChainId, "");
 
   // Get token balances for the selected chain
+  const effectiveBalanceAddress = senderAddress || currentWallet?.wallet?.address || "";
   const { nativeTokens, fungibleTokens } = useTokenBalancesByChain({
-    address: currentWallet?.wallet?.address || "",
+    address: effectiveBalanceAddress,
     chainsIds: [srcChainId],
-    enabled: !!currentWallet?.wallet?.address && !!chainName,
+    enabled: !!effectiveBalanceAddress && !!chainName,
   });
 
   // Find a token with a balance, prioritizing tokens the user already owns
   const getTokenWithBalance = useCallback(() => {
-    if (!currentWallet?.wallet?.address || (!nativeTokens && !fungibleTokens) || !tokenList) {
+    if (!effectiveBalanceAddress || (!nativeTokens && !fungibleTokens) || !tokenList) {
       return getDefaultToken(srcChainId);
     }
 
@@ -321,7 +339,7 @@ function AnySpendCustomInner({
 
     // Default fallback
     return getDefaultToken(srcChainId);
-  }, [currentWallet?.wallet?.address, nativeTokens, fungibleTokens, tokenList, srcChainId]);
+  }, [effectiveBalanceAddress, nativeTokens, fungibleTokens, tokenList, srcChainId]);
 
   // Set the selected token with preference for tokens user owns
   const [srcToken, setSrcToken] = useState<components["schemas"]["Token"]>(getDefaultToken(srcChainId));
@@ -476,7 +494,7 @@ function AnySpendCustomInner({
         dstToken: dstToken,
         srcAmount: srcAmount.toString(),
         recipientAddress,
-        creatorAddress: currentWallet?.wallet?.address,
+        creatorAddress: senderAddress || currentWallet?.wallet?.address,
         nft:
           orderType === "mint_nft"
             ? metadata.nftContract.type === "erc1155"
@@ -656,7 +674,7 @@ function AnySpendCustomInner({
       transition={{ duration: 0.3, delay: 0.2, ease: "easeInOut" }}
       className="flex w-full items-center justify-between gap-4"
     >
-      <div className="text-as-tertiarry text-sm">
+      <div className="text-as-tertiary text-sm">
         {orderType === "swap"
           ? "Recipient"
           : orderType === "mint_nft"
@@ -668,10 +686,10 @@ function AnySpendCustomInner({
       <div className="flex flex-wrap items-center justify-end gap-2">
         {recipientAddress ? (
           <button
-            className={cn("text-as-tertiarry flex items-center gap-2 rounded-lg")}
+            className={cn("text-as-tertiary flex items-center gap-2 rounded-lg")}
             onClick={() => setActivePanel(PanelView.RECIPIENT_SELECTION)}
           >
-            <div className="text-as-tertiarry flex items-center gap-1 text-sm">
+            <div className="text-as-tertiary flex items-center gap-1 text-sm">
               <span className="whitespace-nowrap">
                 {recipientName ? formatUsername(recipientName) : shortenAddress(recipientAddress)}
               </span>
@@ -935,9 +953,9 @@ function AnySpendCustomInner({
                 transition={{ duration: 0.3, delay: 0, ease: "easeInOut" }}
                 className="relative flex w-full items-center justify-between"
               >
-                <div className="text-as-tertiarry flex h-7 items-center text-sm">Pay</div>
+                <div className="text-as-tertiary flex h-7 items-center text-sm">Pay</div>
                 <button
-                  className="text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700"
+                  className="text-as-tertiary flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700"
                   onClick={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
                 >
                   <CryptoPaymentMethodDisplay
@@ -965,9 +983,9 @@ function AnySpendCustomInner({
                   transition={{ duration: 0.3, delay: 0, ease: "easeInOut" }}
                   className="relative flex w-full items-center justify-between"
                 >
-                  <div className="text-as-tertiarry text-sm">Pay with</div>
+                  <div className="text-as-tertiary text-sm">Pay with</div>
                   <OrderToken
-                    address={currentWallet?.wallet?.address}
+                    address={effectiveBalanceAddress || undefined}
                     context="from"
                     chainId={srcChainId}
                     setChainId={setSrcChainId}
@@ -992,9 +1010,9 @@ function AnySpendCustomInner({
                   transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
                   className="relative flex w-full items-center justify-between gap-4"
                 >
-                  <span className="text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm">
+                  <span className="text-as-tertiary flex flex-wrap items-center gap-1.5 text-sm">
                     <span className="whitespace-nowrap">
-                      Total <span className="text-as-tertiarry">(with fee)</span>
+                      Total <span className="text-as-tertiary">(with fee)</span>
                     </span>
                     {anyspendQuote?.data?.fee && (
                       <TooltipProvider>
@@ -1095,9 +1113,9 @@ function AnySpendCustomInner({
                 transition={{ duration: 0.3, delay: 0, ease: "easeInOut" }}
                 className="relative flex w-full items-center justify-between"
               >
-                <div className="text-as-tertiarry flex h-7 items-center text-sm">Pay with</div>
+                <div className="text-as-tertiary flex h-7 items-center text-sm">Pay with</div>
                 <button
-                  className="text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700"
+                  className="text-as-tertiary flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700"
                   onClick={() => setActivePanel(PanelView.FIAT_PAYMENT_METHOD)}
                 >
                   {(() => {
@@ -1142,9 +1160,9 @@ function AnySpendCustomInner({
                 transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
                 className="relative flex w-full items-center justify-between gap-4"
               >
-                <span className="text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm">
+                <span className="text-as-tertiary flex flex-wrap items-center gap-1.5 text-sm">
                   <span className="whitespace-nowrap">
-                    Total <span className="text-as-tertiarry">(USD)</span>
+                    Total <span className="text-as-tertiary">(USD)</span>
                   </span>
                   {anyspendQuote?.data?.fee && (
                     <TooltipProvider>
@@ -1173,7 +1191,7 @@ function AnySpendCustomInner({
                         ) : (
                           <>
                             ${parseFloat(srcFiatAmount || "0").toFixed(2)}
-                            <span className="text-as-tertiarry text-base">+</span>
+                            <span className="text-as-tertiary text-base">+</span>
                           </>
                         )}
                       </span>

package/src/anyspend/react/components/AnySpendCustomExactIn.tsx

@@ -15,10 +15,13 @@ import {
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { formatUnits } from "@b3dotfun/sdk/shared/utils/number";
 import invariant from "invariant";
-import { ArrowDown, CheckCircle, Loader2 } from "lucide-react";
+import { ArrowDown, Loader2 } from "lucide-react";
+import { AnimatedCheckmark } from "./icons/AnimatedCheckmark";
 import { motion } from "motion/react";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { AnySpendCustomizationProvider, useAnySpendCustomization } from "./context/AnySpendCustomizationContext";
 import type { AnySpendCustomExactInClasses } from "./types/classes";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
 
 import { useSetActiveWallet } from "thirdweb/react";
 import { B3_TOKEN } from "../../constants";
@@ -85,6 +88,14 @@ export interface AnySpendCustomExactInProps {
   allowDirectTransfer?: boolean;
   /** Opaque metadata passed to the order for callbacks (e.g., workflow form data) */
   callbackMetadata?: Record<string, unknown>;
+  /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
+  senderAddress?: string;
+  /** Render function overrides for replaceable UI elements */
+  slots?: AnySpendSlots;
+  /** String or ReactNode overrides for text/messages */
+  content?: AnySpendContent;
+  /** Structured color/theme configuration */
+  theme?: AnySpendTheme;
 }
 
 export function AnySpendCustomExactIn(props: AnySpendCustomExactInProps) {
@@ -92,7 +103,9 @@ export function AnySpendCustomExactIn(props: AnySpendCustomExactInProps) {
 
   return (
     <AnySpendFingerprintWrapper fingerprint={fingerprintConfig}>
-      <AnySpendCustomExactInInner {...props} />
+      <AnySpendCustomizationProvider slots={props.slots} content={props.content} theme={props.theme}>
+        <AnySpendCustomExactInInner {...props} />
+      </AnySpendCustomizationProvider>
     </AnySpendFingerprintWrapper>
   );
 }
@@ -123,7 +136,9 @@ function AnySpendCustomExactInInner({
   classes,
   allowDirectTransfer = false,
   callbackMetadata,
+  senderAddress,
 }: AnySpendCustomExactInProps) {
+  const { slots, content } = useAnySpendCustomization();
   const actionLabel = customExactInConfig?.action ?? "Custom Execution";
   const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
 
@@ -188,6 +203,7 @@ function AnySpendCustomExactInInner({
     disableUrlParamManagement: true,
     orderType,
     customExactInConfig,
+    senderAddress,
   });
 
   const { connectedEOAWallet } = useAccountWallet();
@@ -503,26 +519,35 @@ function AnySpendCustomExactInInner({
         transition={{ duration: 0.3, delay: 0.2, ease: "easeInOut" }}
         className={cn("mt-4 flex w-full max-w-[460px] flex-col gap-2")}
       >
-        <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")}
-        >
-          <div className="flex items-center justify-center gap-2">
-            {btnInfo.loading && <Loader2 className="h-4 w-4 animate-spin" />}
-            {btnInfo.text}
-          </div>
-        </ShinyButton>
+        {slots.actionButton ? (
+          slots.actionButton({
+            onClick: onMainButtonClick,
+            disabled: btnInfo.disable,
+            loading: btnInfo.loading,
+            text: btnInfo.text,
+          })
+        ) : (
+          <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")}
+          >
+            <div className="flex items-center justify-center gap-2">
+              {btnInfo.loading && <Loader2 className="h-4 w-4 animate-spin" />}
+              {btnInfo.text}
+            </div>
+          </ShinyButton>
+        )}
       </motion.div>
 
       {/* Gas indicator - show when source chain has gas data, hide for direct transfers */}
@@ -580,7 +605,7 @@ function AnySpendCustomExactInInner({
           dstToken: selectedDstToken,
           srcAmount: srcAmountFromQuote,
           expectedDstAmount,
-          creatorAddress: globalAddress,
+          creatorAddress: senderAddress || globalAddress,
           payload: {
             amount: activeOutputAmountInWei,
             data: encodedData,
@@ -605,7 +630,7 @@ function AnySpendCustomExactInInner({
           dstToken: selectedDstToken,
           srcAmount: srcAmountBigInt.toString(),
           expectedDstAmount: expectedDstAmountRaw,
-          creatorAddress: globalAddress,
+          creatorAddress: senderAddress || globalAddress,
           payload,
           callbackMetadata,
         });
@@ -667,7 +692,7 @@ function AnySpendCustomExactInInner({
           srcFiatAmount: srcAmount,
           onramp: onrampOptions,
           expectedDstAmount,
-          creatorAddress: globalAddress,
+          creatorAddress: senderAddress || globalAddress,
           payload: {
             amount: activeOutputAmountInWei,
             data: encodedData,
@@ -689,7 +714,7 @@ function AnySpendCustomExactInInner({
           srcFiatAmount: srcAmount,
           onramp: onrampOptions,
           expectedDstAmount: expectedDstAmountRaw,
-          creatorAddress: globalAddress,
+          creatorAddress: senderAddress || globalAddress,
           payload,
         });
       }
@@ -791,20 +816,42 @@ function AnySpendCustomExactInInner({
     />
   ) : null;
 
-  const directTransferSuccessView = (
+  const exactInSuccessTitle = content.successTitle || "Transfer Complete!";
+  const exactInSuccessDesc =
+    content.successDescription || `${srcAmount} ${selectedSrcToken.symbol} sent on ${getChainName(selectedSrcChainId)}`;
+  const exactInReturnLabel = content.returnButtonLabel || returnHomeLabel;
+
+  const directTransferSuccessView = slots.successScreen ? (
+    <>
+      {slots.successScreen({
+        title: typeof exactInSuccessTitle === "string" ? exactInSuccessTitle : "Transfer Complete!",
+        description: typeof exactInSuccessDesc === "string" ? exactInSuccessDesc : "",
+        txHash: directTransferTxHash,
+        explorerUrl: directTransferTxHash
+          ? getExplorerTxUrl(selectedSrcChainId, directTransferTxHash || "")
+          : undefined,
+        onDone: () => {
+          onSuccess?.(srcAmount);
+          if (returnToHomeUrl) {
+            window.location.href = returnToHomeUrl;
+          } else {
+            setB3ModalOpen(false);
+          }
+        },
+        returnUrl: returnToHomeUrl,
+        returnLabel: exactInReturnLabel || undefined,
+      })}
+    </>
+  ) : (
     <motion.div
       initial={{ opacity: 0, scale: 0.95 }}
       animate={{ opacity: 1, scale: 1 }}
       className="flex flex-col items-center justify-center gap-6 py-8"
     >
-      <div className="flex h-16 w-16 items-center justify-center rounded-full bg-green-500/20">
-        <CheckCircle className="h-10 w-10 text-green-500" />
-      </div>
+      <AnimatedCheckmark className="h-16 w-16" />
       <div className="text-center">
-        <h2 className="text-as-primary mb-2 text-xl font-bold">Transfer Complete!</h2>
-        <p className="text-as-primary/60 text-sm">
-          {srcAmount} {selectedSrcToken.symbol} sent on {getChainName(selectedSrcChainId)}
-        </p>
+        <h2 className="text-as-primary mb-2 text-xl font-bold">{exactInSuccessTitle}</h2>
+        <p className="text-as-primary/60 text-sm">{exactInSuccessDesc}</p>
         <p className="text-as-primary/60 mt-1 text-sm">
           to {selectedRecipientOrDefault?.slice(0, 6)}...{selectedRecipientOrDefault?.slice(-4)}
         </p>
@@ -830,7 +877,7 @@ function AnySpendCustomExactInInner({
           }
         }}
       >
-        {returnHomeLabel || (returnToHomeUrl ? "Return to Home" : "Done")}
+        {exactInReturnLabel || (returnToHomeUrl ? "Return to Home" : "Done")}
       </Button>
     </motion.div>
   );

package/src/anyspend/react/components/AnySpendDeposit.tsx

@@ -19,6 +19,7 @@ import { CreditCardIcon } from "./icons/CreditCardIcon";
 import { QrCodeIcon } from "./icons/QrCodeIcon";
 import { QRDeposit } from "./QRDeposit";
 import type { AnySpendAllClasses } from "./types/classes";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
 
 export interface DepositContractConfig {
   /** Custom function ABI JSON string */
@@ -125,6 +126,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;
 }
 
 // Default supported chains
@@ -251,6 +260,10 @@ export function AnySpendDeposit({
   allowDirectTransfer = false,
   destinationTokenAmount,
   callbackMetadata,
+  senderAddress,
+  slots,
+  content,
+  theme,
 }: AnySpendDepositProps) {
   // Extract deposit-specific classes for convenience
   const depositClasses = classes?.deposit;
@@ -280,9 +293,10 @@ export function AnySpendDeposit({
     [destinationTokenAddress, destinationTokenChainId, destinationTokenData],
   );
 
-  // Fetch balances for EOA wallet
+  // Fetch balances for EOA wallet (use senderAddress as fallback for pre-filled balance display)
+  const effectiveBalanceAddress = senderAddress || eoaAddress;
   const { data: balanceData, isLoading: isBalanceLoading } = useSimBalance(
-    shouldShowChainSelection ? eoaAddress : undefined,
+    shouldShowChainSelection ? effectiveBalanceAddress : undefined,
     supportedChains.map(c => c.id),
   );
 
@@ -701,6 +715,10 @@ export function AnySpendDeposit({
             allowDirectTransfer={allowDirectTransfer}
             destinationTokenAmount={destinationTokenAmount}
             callbackMetadata={callbackMetadata}
+            senderAddress={senderAddress}
+            slots={slots}
+            content={content}
+            theme={theme}
           />
         ) : (
           <AnySpend
@@ -725,6 +743,10 @@ export function AnySpendDeposit({
             allowDirectTransfer={allowDirectTransfer}
             destinationTokenAmount={destinationTokenAmount}
             callbackMetadata={callbackMetadata}
+            senderAddress={senderAddress}
+            slots={slots}
+            content={content}
+            theme={theme}
           />
         )}
       </div>

package/src/anyspend/react/components/AnySpendDepositUpside.tsx

@@ -2,6 +2,7 @@ import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
 import { base } from "viem/chains";
 import { AnySpendCustomExactIn } from "./AnySpendCustomExactIn";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
 
 const DEPOSIT_FOR_FUNCTION_ABI = JSON.stringify([
   {
@@ -33,6 +34,10 @@ export function AnySpendDepositUpside({
   depositContractAddress,
   token,
   onSuccess,
+  senderAddress,
+  slots,
+  content,
+  theme,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -42,6 +47,11 @@ export function AnySpendDepositUpside({
   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;
 }) {
   if (!recipientAddress) return null;
 
@@ -76,6 +86,10 @@ export function AnySpendDepositUpside({
       customExactInConfig={customExactInConfig}
       header={header}
       onSuccess={onSuccess}
+      senderAddress={senderAddress}
+      slots={slots}
+      content={content}
+      theme={theme}
     />
   );
 }

package/src/anyspend/react/components/AnySpendNFT.tsx

@@ -11,6 +11,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { b3 } from "viem/chains";
 import { GetQuoteResponse } from "../../types/api_req_res";
 import { AnySpendCustom } from "./AnySpendCustom";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
 
 // ABI for contractURI and uri functions
 const CONTRACT_URI_ABI = [
@@ -37,6 +38,10 @@ export function AnySpendNFT({
   nftContract,
   onSuccess,
   onShowPointsDetail,
+  senderAddress,
+  slots,
+  content,
+  theme,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -44,6 +49,11 @@ export function AnySpendNFT({
   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;
 }) {
   const [imageUrlWithFallback, setFallbackImageUrl] = useState<string | null>(nftContract.imageUrl);
   const hasFetchedRef = useRef(false);
@@ -168,6 +178,10 @@ export function AnySpendNFT({
       header={header}
       onSuccess={onSuccess}
       onShowPointsDetail={onShowPointsDetail}
+      senderAddress={senderAddress}
+      slots={slots}
+      content={content}
+      theme={theme}
     />
   );
 }

package/src/anyspend/react/components/AnySpendStakeB3.tsx

@@ -22,6 +22,7 @@ import { createPublicClient, encodeFunctionData, erc20Abi, http } from "viem";
 import { base } from "viem/chains";
 import { useAccount, useWaitForTransactionReceipt } from "wagmi";
 import { AnySpendCustom } from "./AnySpendCustom";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
 import { EthIcon } from "./icons/EthIcon";
 import { SolIcon } from "./icons/SolIcon";
 import { UsdcIcon } from "./icons/USDCIcon";
@@ -49,12 +50,21 @@ export function AnySpendStakeB3({
   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;
 }) {
   const hasMounted = useHasMounted();
   const { setB3ModalOpen } = useModalStore();
@@ -507,6 +517,10 @@ export function AnySpendStakeB3({
       header={header}
       onSuccess={onSuccess}
       showRecipient={true}
+      senderAddress={senderAddress}
+      slots={slots}
+      content={content}
+      theme={theme}
     />
   );
 }

package/src/anyspend/react/components/AnySpendStakeB3ExactIn.tsx

@@ -22,6 +22,7 @@ import { createPublicClient, encodeFunctionData, erc20Abi, http } from "viem";
 import { base } from "viem/chains";
 import { useAccount, useWaitForTransactionReceipt } from "wagmi";
 import { AnySpendCustomExactIn } from "./AnySpendCustomExactIn";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
 import { EthIcon } from "./icons/EthIcon";
 import { SolIcon } from "./icons/SolIcon";
 import { UsdcIcon } from "./icons/USDCIcon";
@@ -54,6 +55,10 @@ export function AnySpendStakeB3ExactIn({
   recipientAddress,
   stakeAmount,
   onSuccess,
+  senderAddress,
+  slots,
+  content,
+  theme,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -62,6 +67,11 @@ export function AnySpendStakeB3ExactIn({
   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;
 }) {
   const hasMounted = useHasMounted();
   const { setB3ModalOpen } = useModalStore();
@@ -518,6 +528,10 @@ export function AnySpendStakeB3ExactIn({
       customExactInConfig={customExactInConfig}
       header={header}
       onSuccess={onSuccess}
+      senderAddress={senderAddress}
+      slots={slots}
+      content={content}
+      theme={theme}
     />
   );
 }

package/src/anyspend/react/components/AnySpendStakeUpside.tsx

@@ -6,6 +6,7 @@ import { encodeFunctionData } from "viem";
 import { base } from "viem/chains";
 import { STAKING_CONTRACT } from "../../abis/upsideStaking";
 import { AnySpendCustom } from "./AnySpendCustom";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
 
 function generateEncodedDataForStaking(amount: string, beneficiary: string): string {
   invariant(BigInt(amount) > 0, "Amount must be greater than zero");
@@ -25,6 +26,10 @@ export function AnySpendStakeUpside({
   token,
   onSuccess,
   activeTab,
+  senderAddress,
+  slots,
+  content,
+  theme,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -34,6 +39,11 @@ export function AnySpendStakeUpside({
   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;
 }) {
   const header = () => (
     <>
@@ -80,6 +90,10 @@ export function AnySpendStakeUpside({
       onSuccess={onSuccess}
       showRecipient={true}
       activeTab={activeTab}
+      senderAddress={senderAddress}
+      slots={slots}
+      content={content}
+      theme={theme}
     />
   );
 }