@b3dotfun/sdk 0.1.66 → 0.1.68

package/dist/types/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/types/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/types/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/types/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/types/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/types/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/types/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.1.66",
+  "version": "0.1.68",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

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

@@ -42,7 +42,8 @@ import { getThirdwebChain } from "@b3dotfun/sdk/shared/constants/chains/supporte
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import invariant from "invariant";
-import { ArrowDown, CheckCircle, HistoryIcon, Loader2 } from "lucide-react";
+import { ArrowDown, HistoryIcon, Loader2 } from "lucide-react";
+import { AnimatedCheckmark } from "./icons/AnimatedCheckmark";
 import { motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { formatUnits, parseUnits } from "viem";
@@ -68,7 +69,9 @@ import { PanelOnrampPayment } from "./common/PanelOnrampPayment";
 import { PointsDetailPanel } from "./common/PointsDetailPanel";
 import { RecipientSelection } from "./common/RecipientSelection";
 import { TabSection } from "./common/TabSection";
+import { AnySpendCustomizationProvider, useAnySpendCustomization } from "./context/AnySpendCustomizationContext";
 import type { AnySpendClasses } from "./types/classes";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
 
 const baseChain = getThirdwebChain(8453);
 
@@ -129,13 +132,22 @@ export 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;
 }) {
   const fingerprintConfig = getFingerprintConfig();
 
-  console.log("[mitch] AnySpend rendered with fingerprintConfig:", props, fingerprintConfig);
   return (
     <AnySpendFingerprintWrapper fingerprint={fingerprintConfig}>
-      <AnySpendInner {...props} />
+      <AnySpendCustomizationProvider slots={props.slots} content={props.content} theme={props.theme}>
+        <AnySpendInner {...props} />
+      </AnySpendCustomizationProvider>
     </AnySpendFingerprintWrapper>
   );
 }
@@ -162,6 +174,7 @@ function AnySpendInner({
   allowDirectTransfer = false,
   destinationTokenAmount,
   callbackMetadata,
+  senderAddress,
 }: {
   sourceChainId?: number;
   destinationTokenAddress?: string;
@@ -184,7 +197,12 @@ function AnySpendInner({
   allowDirectTransfer?: boolean;
   destinationTokenAmount?: string;
   callbackMetadata?: Record<string, unknown>;
+  senderAddress?: string;
+  slots?: AnySpendSlots;
+  content?: AnySpendContent;
+  theme?: AnySpendTheme;
 }) {
+  const { slots, content } = useAnySpendCustomization();
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
 
@@ -568,9 +586,10 @@ function AnySpendInner({
   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
@@ -969,7 +988,7 @@ function AnySpendInner({
           : selectedDstToken,
         srcAmount: srcAmountBigInt.toString(),
         expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount || "0",
-        creatorAddress: globalAddress,
+        creatorAddress: senderAddress || globalAddress,
         callbackMetadata,
       });
     } catch (err: any) {
@@ -1047,7 +1066,7 @@ function AnySpendInner({
             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,
       });
     } catch (err: any) {
@@ -1343,26 +1362,35 @@ function AnySpendInner({
           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>
+          )}
 
           {!hideTransactionHistoryButton && (globalAddress || effectiveRecipientAddress) ? (
             <Button
@@ -1494,18 +1522,37 @@ function AnySpendInner({
     />
   ) : null;
 
-  const directTransferSuccessView = (
+  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,
+    })
+  ) : (
     <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-6 p-5">
       <div className="flex flex-col items-center gap-4">
-        <div className="bg-as-brand/10 flex h-16 w-16 items-center justify-center rounded-full">
-          <CheckCircle className="text-as-brand h-8 w-8" />
-        </div>
+        <AnimatedCheckmark className="h-16 w-16" />
         <div className="text-center">
-          <h2 className="text-as-primary text-xl font-bold">Transfer Complete</h2>
-          <p className="text-as-secondary mt-1 text-sm">
-            Your {selectedSrcToken.symbol} has been sent to {effectiveRecipientAddress?.slice(0, 6)}...
-            {effectiveRecipientAddress?.slice(-4)} on {getChainName(selectedSrcChainId)}
-          </p>
+          <h2 className="text-as-primary text-xl font-bold">{defaultSuccessTitle}</h2>
+          <p className="text-as-secondary mt-1 text-sm">{defaultSuccessDesc}</p>
         </div>
       </div>
 
@@ -1528,7 +1575,7 @@ function AnySpendInner({
             }}
             className="bg-as-brand hover:bg-as-brand/90 w-full text-white"
           >
-            {returnHomeLabel || "Return to Home"}
+            {resolvedReturnLabel || "Return to Home"}
           </Button>
         ) : (
           <Button
@@ -1539,7 +1586,7 @@ function AnySpendInner({
             }}
             className="bg-as-brand hover:bg-as-brand/90 w-full text-white"
           >
-            {returnHomeLabel || "Done"}
+            {resolvedReturnLabel || "Done"}
           </Button>
         )}
       </div>

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

@@ -13,6 +13,7 @@ import { useEffect, useMemo, useState } from "react";
 import { createPublicClient, encodeFunctionData, formatEther, http, parseEther } from "viem";
 import { BondkitToken, BondkitTokenABI } from "../../../bondkit";
 import { AnySpendCustom } from "./AnySpendCustom";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
 
 // Debounce utility function
 function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void {
@@ -38,7 +39,14 @@ export function AnySpendBondKit({
   imageUrl,
   b3Amount: initialB3Amount,
   onSuccess,
-}: AnySpendBondKitProps) {
+  slots,
+  content,
+  theme,
+}: AnySpendBondKitProps & {
+  slots?: AnySpendSlots;
+  content?: AnySpendContent;
+  theme?: AnySpendTheme;
+}) {
   const hasMounted = useHasMounted();
   const [showAmountPrompt, setShowAmountPrompt] = useState(!initialB3Amount);
   const [b3Amount, setB3Amount] = useState(initialB3Amount || "");
@@ -371,6 +379,9 @@ export function AnySpendBondKit({
       header={header}
       onSuccess={onSuccess}
       showRecipient={true}
+      slots={slots}
+      content={content}
+      theme={theme}
     />
   );
 }

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

@@ -21,6 +21,7 @@ import { useCallback, useEffect, useState } from "react";
 import { createPublicClient, encodeFunctionData, erc20Abi, formatUnits, http } from "viem";
 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";
@@ -130,6 +131,10 @@ export function AnySpendBuySpin({
   recipientAddress,
   prefillQuantity,
   onSuccess,
+  senderAddress,
+  slots,
+  content,
+  theme,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -138,6 +143,11 @@ export function AnySpendBuySpin({
   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;
 }) {
   const hasMounted = useHasMounted();
   const { setB3ModalOpen } = useModalStore();
@@ -681,6 +691,10 @@ export function AnySpendBuySpin({
       header={header}
       onSuccess={txHash => onSuccess?.(txHash)}
       showRecipient={false}
+      senderAddress={senderAddress}
+      slots={slots}
+      content={content}
+      theme={theme}
     />
   );
 }

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

@@ -33,6 +33,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { createPublicClient, encodeFunctionData, http } from "viem";
 import { base } from "viem/chains";
 import { AnySpendCustom } from "./AnySpendCustom";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
 import {
   BUY_PACKS_FOR_ABI,
   BUY_PACKS_FOR_WITH_DISCOUNT_ABI,
@@ -123,6 +124,9 @@ export interface AnySpendCollectorClubPurchaseProps {
    * When provided, validates on-chain and adjusts the price accordingly.
    */
   discountCode?: string;
+  slots?: AnySpendSlots;
+  content?: AnySpendContent;
+  theme?: AnySpendTheme;
 }
 
 export function AnySpendCollectorClubPurchase({
@@ -143,6 +147,9 @@ export function AnySpendCollectorClubPurchase({
   packType,
   forceFiatPayment,
   discountCode,
+  slots,
+  content,
+  theme,
 }: AnySpendCollectorClubPurchaseProps) {
   const ccShopAddress = isStaging ? CC_SHOP_ADDRESS_STAGING : CC_SHOP_ADDRESS;
 
@@ -391,6 +398,9 @@ export function AnySpendCollectorClubPurchase({
       showRecipient={showRecipient}
       srcFiatAmount={srcFiatAmount}
       forceFiatPayment={forceFiatPayment}
+      slots={slots}
+      content={content}
+      theme={theme}
     />
   );
 }