@b3dotfun/sdk 0.0.70 → 0.0.71-alpha.1

package/dist/types/anyspend/utils/validation.d.ts

@@ -0,0 +1,67 @@
+export interface ValidationResult {
+    isValid: boolean;
+    error?: string;
+    cleaned?: string;
+}
+export interface StringValidationOptions {
+    required?: boolean;
+    defaultValue?: () => string;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: RegExp;
+    patternErrorMessage?: string;
+    trim?: boolean;
+    toLowerCase?: boolean;
+    toUpperCase?: boolean;
+    customValidator?: (value: string) => {
+        valid: boolean;
+        error?: string;
+    };
+}
+/**
+ * Generic string validator with configurable rules
+ */
+export declare function validateString(value: string | undefined, options: StringValidationOptions): ValidationResult;
+/**
+ * Common validation patterns
+ */
+export declare const ValidationPatterns: {
+    readonly ALPHANUMERIC: RegExp;
+    readonly ALPHANUMERIC_WITH_DASH_UNDERSCORE: RegExp;
+    readonly ALPHANUMERIC_WITH_SAFE_CHARS: RegExp;
+    readonly SAFE_IDENTIFIER: RegExp;
+    readonly NO_CONTROL_CHARS: RegExp;
+    readonly URL_SAFE: RegExp;
+    readonly NUMERIC: RegExp;
+    readonly HEX: RegExp;
+};
+/**
+ * Pre-configured validators for common use cases
+ */
+export declare const Validators: {
+    /**
+     * Validates client reference IDs (alphanumeric + safe chars)
+     * Returns undefined if not provided
+     */
+    clientReferenceId: (value?: string) => ValidationResult;
+    /**
+     * Validates alphanumeric strings (letters and numbers only)
+     */
+    alphanumeric: (value?: string, required?: boolean) => ValidationResult;
+    /**
+     * Validates wallet addresses (hex format)
+     */
+    walletAddress: (value?: string, required?: boolean) => ValidationResult;
+    /**
+     * Validates order IDs (UUID format)
+     */
+    orderId: (value?: string) => ValidationResult;
+    /**
+     * Validates URL-safe strings
+     */
+    urlSafe: (value?: string, maxLength?: number) => ValidationResult;
+    /**
+     * Validates safe identifiers (no injection risks)
+     */
+    safeIdentifier: (value?: string, required?: boolean) => ValidationResult;
+};

package/dist/types/global-account/react/components/B3Provider/B3Provider.d.ts

@@ -7,7 +7,7 @@ import { B3ContextType } from "./types";
 /**
  * Main B3Provider component
  */
-export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType, rpcUrls, partnerId, onConnect, connectors, overrideDefaultConnectors, }: {
+export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType, rpcUrls, partnerId, onConnect, connectors, overrideDefaultConnectors, createClientReferenceId, }: {
     theme: "light" | "dark";
     children: React.ReactNode;
     accountOverride?: Account;
@@ -24,11 +24,12 @@ export declare function B3Provider({ theme, children, accountOverride, environme
     onConnect?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
     connectors?: CreateConnectorFn[];
     overrideDefaultConnectors?: boolean;
+    createClientReferenceId?: () => string;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * Inner provider component that provides the actual B3Context
  */
-export declare function InnerProvider({ children, accountOverride, environment, defaultPermissions, automaticallySetFirstEoa, theme, clientType, partnerId, }: {
+export declare function InnerProvider({ children, accountOverride, environment, defaultPermissions, automaticallySetFirstEoa, theme, clientType, partnerId, createClientReferenceId, }: {
     children: React.ReactNode;
     accountOverride?: Account;
     environment: B3ContextType["environment"];
@@ -37,4 +38,5 @@ export declare function InnerProvider({ children, accountOverride, environment,
     theme: "light" | "dark";
     clientType?: ClientType;
     partnerId: string;
+    createClientReferenceId?: () => string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/types/global-account/react/components/B3Provider/types.d.ts

@@ -20,6 +20,7 @@ export interface B3ContextType {
     theme: "light" | "dark";
     clientType: ClientType;
     partnerId: string;
+    createClientReferenceId?: () => string;
 }
 /**
  * Context for B3 provider

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

@@ -13,8 +13,8 @@ export declare function useAuthentication(partnerId: string): {
     onConnect: (_walleAutoConnectedWith: Wallet, allConnectedWallets: Wallet[]) => Promise<void>;
     user: {
         email?: string | undefined;
-        username?: string | undefined;
         telNumber?: string | undefined;
+        username?: string | undefined;
         ens?: string | undefined;
         avatar?: string | undefined;
         preferences?: {} | undefined;

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

@@ -8,8 +8,8 @@ import { Users } from "@b3dotfun/b3-api";
 export declare function useUserQuery(): {
     user: {
         email?: string | undefined;
-        username?: string | undefined;
         telNumber?: string | undefined;
+        username?: string | undefined;
         ens?: string | undefined;
         avatar?: string | undefined;
         preferences?: {} | undefined;

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

@@ -122,6 +122,8 @@ export interface AnySpendModalProps extends BaseModalProps {
     destinationTokenChainId?: number;
     /** Custom USD input values for quick amount buttons in fiat onramp */
     customUsdInputValues?: string[];
+    /** Client-provided reference ID for tracking orders */
+    clientReferenceId?: string;
 }
 /**
  * Props for the AnySpend NFT modal
@@ -136,6 +138,8 @@ export interface AnySpendNftProps extends BaseModalProps {
     recipientAddress?: string;
     /** Callback function called when the NFT is successfully transferred */
     onSuccess?: (txHash?: string) => void;
+    /** Client-provided reference ID for tracking orders */
+    clientReferenceId?: string;
 }
 /**
  * Props for the AnySpend tournament modal
@@ -377,10 +381,32 @@ export interface ProfileEditorModalProps extends BaseModalProps {
     /** Callback function called when profile is successfully updated */
     onSuccess?: () => void;
 }
+/**
+ * Props for the AnySpend Collector Club Purchase modal
+ * Handles Collector Club pack purchases
+ */
+export interface AnySpendCollectorClubPurchaseProps extends BaseModalProps {
+    /** Modal type identifier */
+    type: "anySpendCollectorClubPurchase";
+    /** The pack ID to purchase */
+    packId: number;
+    /** The number of packs to purchase */
+    packAmount: number;
+    /** Price per pack in wei (e.g., "10000" for 0.01 USDC with 6 decimals) */
+    pricePerPack: string;
+    /** Recipient address to receive the packs */
+    recipientAddress: string;
+    /** Payment type - crypto or fiat */
+    paymentType?: "crypto" | "fiat";
+    /** Callback function called when the purchase is successful */
+    onSuccess?: (txHash?: string) => void;
+    /** Client-provided reference ID for tracking orders */
+    clientReferenceId?: string;
+}
 /**
  * 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 | AnySpendDepositHypeProps | AvatarEditorModalProps | ProfileEditorModalProps;
+export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendDepositUpsideProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps | ProfileEditorModalProps | AnySpendCollectorClubPurchaseProps;
 /**
  * State interface for the modal store
  */

package/package.json

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

package/src/anyspend/index.ts

@@ -9,6 +9,7 @@ export * from "./utils/json";
 export * from "./utils/number";
 export * from "./utils/string";
 export * from "./utils/token";
+export * from "./utils/validation";
 
 // Constants
 export * from "./constants";

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

@@ -0,0 +1,178 @@
+/**
+ * AnySpend component for Collector Club pack purchases
+ *
+ * This component enables users to purchase Collector Club packs using any token via AnySpend.
+ * It calls the `buyPacksFor` function on the Collector Club Shop contract on Base.
+ * Uses exact-out flow to ensure the contract receives exactly the required USDC amount.
+ *
+ * @example
+ * ```tsx
+ * import { AnySpendCollectorClubPurchase } from "@b3dotfun/sdk";
+ * import { USDC_BASE } from "@b3dotfun/sdk/anyspend/constants";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <AnySpendCollectorClubPurchase
+ *       packId={1}
+ *       packAmount={5}
+ *       pricePerPack="10000" // 0.01 USDC in wei (6 decimals)
+ *       paymentToken={USDC_BASE}
+ *       recipientAddress="0x123..."
+ *       onSuccess={(txHash) => console.log("Purchase successful!", txHash)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+import { USDC_BASE } from "@b3dotfun/sdk/anyspend/constants";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
+import React, { useMemo } from "react";
+import { encodeFunctionData } from "viem";
+import { AnySpendCustom } from "./AnySpendCustom";
+
+// Collector Club Shop contract on Base
+const CC_SHOP_ADDRESS = "0x68B32D594E3c7E5B8cd8046BD66AfB0DB5b9BF9c";
+const BASE_CHAIN_ID = 8453;
+
+// ABI for buyPacksFor function only
+const BUY_PACKS_FOR_ABI = {
+  inputs: [
+    { internalType: "address", name: "user", type: "address" },
+    { internalType: "uint256", name: "packId", type: "uint256" },
+    { internalType: "uint256", name: "amount", type: "uint256" },
+  ],
+  name: "buyPacksFor",
+  outputs: [],
+  stateMutability: "nonpayable",
+  type: "function",
+} as const;
+
+export interface AnySpendCollectorClubPurchaseProps {
+  /**
+   * Optional order ID to load existing order
+   */
+  loadOrder?: string;
+  /**
+   * Display mode
+   */
+  mode?: "modal" | "page";
+  /**
+   * Active tab (crypto or fiat payment)
+   */
+  activeTab?: "crypto" | "fiat";
+  /**
+   * The pack ID to purchase
+   */
+  packId: number;
+  /**
+   * The number of packs to purchase
+   */
+  packAmount: number;
+  /**
+   * Price per pack in wei (e.g., "10000" for 0.01 USDC with 6 decimals)
+   */
+  pricePerPack: string;
+  /**
+   * The payment token (defaults to USDC on Base)
+   */
+  paymentToken?: components["schemas"]["Token"];
+  /**
+   * Address that will receive the packs
+   */
+  recipientAddress: string;
+  /**
+   * Optional spender address (defaults to contract address)
+   */
+  spenderAddress?: string;
+  /**
+   * Success callback
+   */
+  onSuccess?: (txHash?: string) => void;
+  /**
+   * Optional custom header component
+   */
+  header?: (props: {
+    anyspendPrice: GetQuoteResponse | undefined;
+    isLoadingAnyspendPrice: boolean;
+  }) => React.JSX.Element;
+  /**
+   * Show recipient selection (default: true)
+   */
+  showRecipient?: boolean;
+}
+
+export function AnySpendCollectorClubPurchase({
+  loadOrder,
+  mode = "modal",
+  activeTab = "crypto",
+  packId,
+  packAmount,
+  pricePerPack,
+  paymentToken = USDC_BASE,
+  recipientAddress,
+  spenderAddress = CC_SHOP_ADDRESS,
+  onSuccess,
+  header,
+  showRecipient = true,
+}: AnySpendCollectorClubPurchaseProps) {
+  // Calculate total amount needed (pricePerPack * packAmount)
+  const totalAmount = useMemo(() => {
+    try {
+      return (BigInt(pricePerPack) * BigInt(packAmount)).toString();
+    } catch (error) {
+      console.error("Failed to calculate total amount from props", { pricePerPack, packAmount, error });
+      return "0";
+    }
+  }, [pricePerPack, packAmount]);
+
+  // Encode the buyPacksFor function call
+  const encodedData = useMemo(() => {
+    try {
+      return encodeFunctionData({
+        abi: [BUY_PACKS_FOR_ABI],
+        functionName: "buyPacksFor",
+        args: [recipientAddress as `0x${string}`, BigInt(packId), BigInt(packAmount)],
+      });
+    } catch (error) {
+      console.error("Failed to encode function data", { recipientAddress, packId, packAmount, error });
+      return "0x";
+    }
+  }, [recipientAddress, packId, packAmount]);
+
+  // Default header if not provided
+  const defaultHeader = () => (
+    <div className="mb-4 flex flex-col items-center gap-3 text-center">
+      <div>
+        <h1 className="text-as-primary text-xl font-bold">Buy Collector Club Packs</h1>
+        <p className="text-as-secondary text-sm">
+          Purchase {packAmount} pack{packAmount !== 1 ? "s" : ""} using any token
+        </p>
+      </div>
+    </div>
+  );
+
+  return (
+    <AnySpendCustom
+      loadOrder={loadOrder}
+      mode={mode}
+      activeTab={activeTab}
+      recipientAddress={recipientAddress}
+      spenderAddress={spenderAddress}
+      orderType="custom"
+      dstChainId={BASE_CHAIN_ID}
+      dstToken={paymentToken}
+      dstAmount={totalAmount}
+      contractAddress={CC_SHOP_ADDRESS}
+      encodedData={encodedData}
+      metadata={{
+        packId,
+        packAmount,
+        pricePerPack,
+      }}
+      header={header || defaultHeader}
+      onSuccess={onSuccess}
+      showRecipient={showRecipient}
+    />
+  );
+}

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

@@ -534,7 +534,9 @@ function AnySpendCustomInner({
           expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0",
         });
       } else {
-        void createRegularOrder(createOrderParams);
+        void createRegularOrder({
+          ...createOrderParams,
+        });
       }
     } catch (err) {
       console.error(err);

package/src/anyspend/react/components/index.ts

@@ -2,6 +2,7 @@
 export { AnySpend } from "./AnySpend";
 export { AnySpendBondKit } from "./AnySpendBondKit";
 export { AnySpendBuySpin } from "./AnySpendBuySpin";
+export { AnySpendCollectorClubPurchase } from "./AnySpendCollectorClubPurchase";
 export { AnySpendCustom } from "./AnySpendCustom";
 export { AnySpendCustomExactIn } from "./AnySpendCustomExactIn";
 export { AnySpendDepositHype, HYPE_TOKEN_DETAILS } from "./AnyspendDepositHype";

package/src/anyspend/react/components/webview/WebviewOnrampPayment.tsx

@@ -157,7 +157,6 @@ function WebviewOnrampPaymentInner({
   anyspendQuote,
   onPaymentSuccess,
   userId,
-  partnerId,
 }: WebviewOnrampPaymentProps) {
   const [createdOrder, setCreatedOrder] = useState<components["schemas"]["Order"] | null>(null);
   const orderCreationAttempted = useRef(false);
@@ -214,7 +213,6 @@ function WebviewOnrampPaymentInner({
               redirectUrl: `${window.location.origin}${userId ? `?userId=${userId}` : ""}`,
             },
             expectedDstAmount: anyspendQuote.data?.currencyOut?.amount?.toString() || "0",
-            partnerId,
           });
         } catch (err: any) {
           console.error(err);
@@ -232,7 +230,6 @@ function WebviewOnrampPaymentInner({
     createOrder,
     destinationToken,
     userId,
-    partnerId,
     stripeWeb2Support.isSupport,
   ]);
 

package/src/anyspend/react/hooks/useAnyspendCreateOnrampOrder.ts

@@ -3,6 +3,7 @@ import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { VisitorData } from "@b3dotfun/sdk/anyspend/types/fingerprint";
 import { buildMetadata, buildPayload, normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
+import { useB3 } from "@b3dotfun/sdk/global-account/react";
 import { useVisitorData } from "@fingerprintjs/fingerprintjs-pro-react";
 import { useMutation } from "@tanstack/react-query";
 import { useMemo } from "react";
@@ -10,6 +11,7 @@ import { useMemo } from "react";
 import { parseUnits } from "viem";
 import { base } from "viem/chains";
 import { CreateOrderParams } from "./useAnyspendCreateOrder";
+import { useValidatedClientReferenceId } from "./useValidatedClientReferenceId";
 
 export type OnrampOptions = {
   vendor: components["schemas"]["OnrampMetadata"]["vendor"];
@@ -33,6 +35,12 @@ export type UseAnyspendCreateOnrampOrderProps = {
  * Specifically handles orders that involve fiat-to-crypto onramp functionality
  */
 export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspendCreateOnrampOrderProps = {}) {
+  // Get B3 context values
+  const { partnerId } = useB3();
+
+  // Get validated client reference ID from B3 context
+  const validatedClientReferenceId = useValidatedClientReferenceId();
+
   // Get fingerprint data
   const { data: fpData } = useVisitorData({ extendedResult: true }, { immediate: true });
   const visitorData: VisitorData | undefined = fpData && {
@@ -54,7 +62,6 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspend
         nft,
         tournament,
         payload,
-        partnerId,
       } = params;
 
       try {
@@ -102,6 +109,7 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspend
           }),
           creatorAddress: creatorAddress ? normalizeAddress(creatorAddress) : undefined,
           partnerId,
+          clientReferenceId: validatedClientReferenceId,
           visitorData,
         });
       } catch (error: any) {

package/src/anyspend/react/hooks/useAnyspendCreateOrder.ts

@@ -2,9 +2,11 @@ import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { VisitorData } from "@b3dotfun/sdk/anyspend/types/fingerprint";
 import { buildMetadata, buildPayload, normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
+import { useB3 } from "@b3dotfun/sdk/global-account/react";
 import { useVisitorData } from "@fingerprintjs/fingerprintjs-pro-react";
 import { useMutation } from "@tanstack/react-query";
 import { useMemo } from "react";
+import { useValidatedClientReferenceId } from "./useValidatedClientReferenceId";
 
 export type CreateOrderParams = {
   recipientAddress: string;
@@ -19,7 +21,6 @@ export type CreateOrderParams = {
   tournament?: components["schemas"]["Tournament"] & { contractAddress: string; entryPriceOrFundAmount: string };
   creatorAddress?: string;
   payload?: any;
-  partnerId?: string;
 };
 
 export type UseAnyspendCreateOrderProps = {
@@ -33,6 +34,12 @@ export type UseAnyspendCreateOrderProps = {
  * For onramp orders, use useAnyspendCreateOnrampOrder instead.
  */
 export function useAnyspendCreateOrder({ onSuccess, onError }: UseAnyspendCreateOrderProps = {}) {
+  // Get B3 context values
+  const { partnerId } = useB3();
+
+  // Get validated client reference ID from B3 context
+  const validatedClientReferenceId = useValidatedClientReferenceId();
+
   // Get fingerprint data
   const { data: fpData } = useVisitorData({ extendedResult: true }, { immediate: true });
   const visitorData: VisitorData | undefined = fpData && {
@@ -75,6 +82,8 @@ export function useAnyspendCreateOrder({ onSuccess, onError }: UseAnyspendCreate
             },
           }),
           creatorAddress: creatorAddress ? normalizeAddress(creatorAddress) : undefined,
+          partnerId,
+          clientReferenceId: validatedClientReferenceId,
           visitorData,
         });
       } catch (error: any) {

package/src/anyspend/react/hooks/useValidatedClientReferenceId.ts

@@ -0,0 +1,40 @@
+import { Validators } from "@b3dotfun/sdk/anyspend/utils/validation";
+import { useB3 } from "@b3dotfun/sdk/global-account/react";
+import { useMemo } from "react";
+
+/**
+ * Hook that provides a validated client reference ID
+ * Gets the createClientReferenceId function from B3 context and validates the result
+ */
+export function useValidatedClientReferenceId() {
+  const { createClientReferenceId } = useB3();
+
+  const validatedClientReferenceId = useMemo(() => {
+    // If no function provided, return undefined
+    if (!createClientReferenceId) {
+      return undefined;
+    }
+
+    try {
+      // Call the function to generate the ID
+      const generatedId = createClientReferenceId();
+
+      // Validate the generated ID
+      const validation = Validators.clientReferenceId(generatedId);
+
+      if (!validation.isValid) {
+        console.error(
+          `[AnySpend] Invalid clientReferenceId generated: ${validation.error || "Validation failed"}. Will be set to undefined.`,
+        );
+        return undefined;
+      }
+
+      return validation.cleaned;
+    } catch (error) {
+      console.error("[AnySpend] Error generating clientReferenceId:", error);
+      return undefined;
+    }
+  }, [createClientReferenceId]);
+
+  return validatedClientReferenceId;
+}

package/src/anyspend/services/anyspend.ts

@@ -1,6 +1,7 @@
 import { ANYSPEND_MAINNET_BASE_URL } from "@b3dotfun/sdk/anyspend/constants";
 import { OnrampOptions } from "@b3dotfun/sdk/anyspend/react";
 import { getNativeToken, isNativeToken } from "@b3dotfun/sdk/anyspend/utils";
+import app from "@b3dotfun/sdk/global-account/app";
 import invariant from "invariant";
 import { components } from "../types/api";
 import {
@@ -67,6 +68,7 @@ export const anyspendService = {
     metadata,
     creatorAddress,
     partnerId,
+    clientReferenceId,
     visitorData,
   }: {
     recipientAddress: string;
@@ -81,14 +83,17 @@ export const anyspendService = {
     metadata: Record<string, any>;
     creatorAddress?: string;
     partnerId?: string;
+    clientReferenceId?: string;
     visitorData?: VisitorData;
   }) => {
+    const accessToken = await app.authentication.getAccessToken();
     const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/orders`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
         ...(visitorData?.requestId && { "X-Fingerprint-Request-Id": visitorData.requestId }),
         ...(visitorData?.visitorId && { "X-Fingerprint-Visitor-Id": visitorData.visitorId }),
+        ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
       },
       body: JSON.stringify({
         recipientAddress,
@@ -103,6 +108,7 @@ export const anyspendService = {
         metadata,
         creatorAddress,
         partnerId,
+        ...(clientReferenceId && { clientReferenceId }),
       }),
     });
     const data: CreateOrderResponse = await response.json();