@b3dotfun/sdk 0.1.66 → 0.1.68

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

@@ -1,5 +1,6 @@
 import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { CreateOrderResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
 import { VisitorData } from "@b3dotfun/sdk/anyspend/types/fingerprint";
 import { normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
 import { useB3Config } from "@b3dotfun/sdk/global-account/react";
@@ -17,10 +18,11 @@ export type CreateDepositFirstOrderParams = {
   creatorAddress?: string;
   /** Optional contract config for custom execution after deposit */
   contractConfig?: DepositContractConfig;
+  callbackMetadata?: Record<string, unknown>;
 };
 
 export type UseCreateDepositFirstOrderProps = {
-  onSuccess?: (data: any) => void;
+  onSuccess?: (data: CreateOrderResponse) => void;
   onError?: (error: Error) => void;
 };
 
@@ -84,6 +86,7 @@ export function useCreateDepositFirstOrder({ onSuccess, onError }: UseCreateDepo
           creatorAddress: creatorAddress ? normalizeAddress(creatorAddress) : undefined,
           partnerId,
           visitorData,
+          callbackMetadata: params.callbackMetadata,
         });
       } catch (error: any) {
         if (error?.data) {
@@ -92,7 +95,7 @@ export function useCreateDepositFirstOrder({ onSuccess, onError }: UseCreateDepo
         throw error;
       }
     },
-    onSuccess: (data: any) => {
+    onSuccess: (data: CreateOrderResponse) => {
       onSuccess?.(data);
     },
     onError: (error: Error) => {

package/src/anyspend/services/anyspend.ts

@@ -20,7 +20,8 @@ import { VisitorData } from "../types/fingerprint";
 // Service functions
 export const anyspendService = {
   getTokenList: async (chainId: number, query: string): Promise<components["schemas"]["Token"][]> => {
-    const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/chains/${chainId}/tokens?limit=100&term=${query}`);
+    const params = new URLSearchParams({ limit: "100", term: query });
+    const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/chains/${chainId}/tokens?${params.toString()}`);
     const body: GetTokenListResponse = await response.json();
     invariant(response.status === 200, `Failed to fetch token list for chain ${chainId}`);
     return body.data;
@@ -123,6 +124,7 @@ export const anyspendService = {
     invariant(orderId, "orderId is required");
     const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/orders/${orderId}`);
     const data: GetOrderAndTxsResponse = await response.json();
+    invariant(response.status === 200, (data as any).message || `Failed to fetch order ${orderId}`);
     return data;
   },
 
@@ -140,6 +142,7 @@ export const anyspendService = {
     }
     const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/orders?${params.toString()}`);
     const data: GetOrderHistoryResponse = await response.json();
+    invariant(response.status === 200, (data as any).message || "Failed to fetch order history");
     return data;
   },
 
@@ -177,8 +180,22 @@ export const anyspendService = {
     return data.data;
   },
 
+  getCoinbaseOnrampUrl: async (
+    request: components["schemas"]["CoinbaseOnrampUrlRequest"],
+  ): Promise<components["schemas"]["CoinbaseOnrampUrlResponse"]> => {
+    const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/onramp/coinbase/onramp-url`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(request),
+    });
+    const data: components["schemas"]["CoinbaseOnrampUrlResponse"] = await response.json();
+    if (!response.ok) throw new Error((data as any).message || "Failed to get Coinbase onramp URL");
+    return data;
+  },
+
   getStripeClientSecret: async (paymentIntentId: string): Promise<string | null> => {
-    const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/stripe/clientSecret?paymentIntentId=${paymentIntentId}`);
+    const params = new URLSearchParams({ paymentIntentId });
+    const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/stripe/clientSecret?${params.toString()}`);
     const data: GetStripeClientSecret = await response.json();
     invariant(response.status === 200, "Failed to get Stripe client secret");
     return data.data;

package/src/anyspend/types/forms.ts

@@ -0,0 +1,97 @@
+/**
+ * Checkout form schema types
+ *
+ * Merchants define forms using a JSON schema to collect customer information
+ * during checkout (email, shipping address, discount codes, arbitrary fields).
+ */
+
+export interface CheckoutFormField {
+  /** Unique field identifier */
+  id: string;
+  /** Field type */
+  type: "text" | "email" | "phone" | "textarea" | "select" | "number" | "checkbox" | "address";
+  /** Display label */
+  label: string;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Whether the field is required. Default: false */
+  required?: boolean;
+  /** Default value */
+  defaultValue?: string;
+  /** Options for "select" type fields */
+  options?: { label: string; value: string }[];
+  /** Validation rules */
+  validation?: {
+    pattern?: string;
+    minLength?: number;
+    maxLength?: number;
+    min?: number;
+    max?: number;
+  };
+}
+
+export interface CheckoutFormSchema {
+  fields: CheckoutFormField[];
+}
+
+export interface ShippingOption {
+  id: string;
+  name: string;
+  description?: string;
+  /** Amount in wei */
+  amount: string;
+  /** e.g. "5-7 business days" */
+  estimated_days?: string;
+}
+
+export interface DiscountResult {
+  valid: boolean;
+  discount_type?: "percentage" | "fixed";
+  discount_value?: string;
+  /** Computed discount amount in wei */
+  discount_amount?: string;
+  /** Final amount after discount in wei */
+  final_amount?: string;
+  error?: string;
+}
+
+export interface AddressData {
+  street: string;
+  city: string;
+  state: string;
+  zip: string;
+  country: string;
+}
+
+/**
+ * Props passed to custom form components or the checkoutForm slot
+ */
+export interface CheckoutFormComponentProps {
+  /** Call this when the form is submitted / values change */
+  onSubmit: (data: Record<string, unknown>) => void;
+  /** Call to signal whether the form is currently valid */
+  onValidationChange: (isValid: boolean) => void;
+  /** Current form data */
+  formData: Record<string, unknown>;
+  /** Update form data */
+  setFormData: (data: Record<string, unknown>) => void;
+}
+
+/**
+ * Props for shipping selector slot
+ */
+export interface ShippingSelectorSlotProps {
+  options: ShippingOption[];
+  selectedId: string | null;
+  onSelect: (option: ShippingOption) => void;
+}
+
+/**
+ * Props for discount input slot
+ */
+export interface DiscountInputSlotProps {
+  onApply: (code: string) => Promise<DiscountResult>;
+  appliedDiscount: DiscountResult | null;
+  onRemove: () => void;
+  loading: boolean;
+}

package/src/anyspend/utils/format.ts

@@ -27,6 +27,7 @@ export const getStatusDisplay = (
       return {
         text: depositText,
         status: "processing",
+        description: "Waiting for your deposit to be confirmed on-chain",
       };
     }
     case "waiting_stripe_payment":
@@ -44,7 +45,7 @@ export const getStatusDisplay = (
       };
 
     case "sending_token_from_vault":
-      return { text: "Sending Token", status: "processing" };
+      return { text: "Sending Token", status: "processing", description: "Preparing your tokens for delivery" };
 
     case "relay":
     case "executing":
@@ -76,9 +77,17 @@ export const getStatusDisplay = (
     }
 
     case "refunding":
-      return { text: "Order Refunding", status: "processing" };
+      return {
+        text: "Refunding Order",
+        status: "processing",
+        description: "Your funds are being returned to your wallet",
+      };
     case "refunded":
-      return { text: "Order Refunded", status: "failure" };
+      return {
+        text: "Order Refunded",
+        status: "failure",
+        description: "Your funds have been returned to your wallet.",
+      };
 
     case "failure":
       return {

package/src/app.shared.ts

@@ -6,6 +6,8 @@ import { B3_AUTH_COOKIE_NAME } from "./shared/constants";
 export const B3_API_URL =
   process.env.EXPO_PUBLIC_B3_API || process.env.NEXT_PUBLIC_B3_API || process.env.PUBLIC_B3_API || "https://api.b3.fun";
 
+const DEV_USER_GROUP = 4;
+
 export const authenticate = async (
   app: ClientApplication,
   accessToken: string,
@@ -30,6 +32,15 @@ export const authenticate = async (
         query: params || {},
       },
     );
+
+    // Extend cookie expiration to 30 days for dev users
+    if (response?.user?.userGroups?.includes(DEV_USER_GROUP)) {
+      const token = Cookies.get(B3_AUTH_COOKIE_NAME);
+      if (token) {
+        Cookies.set(B3_AUTH_COOKIE_NAME, token, { expires: 30 });
+      }
+    }
+
     return response;
   } catch (error) {
     return null;

package/src/global-account/react/components/B3DynamicModal.tsx

@@ -12,6 +12,7 @@ import {
 } from "@b3dotfun/sdk/anyspend/react";
 import { AnySpendDeposit } from "@b3dotfun/sdk/anyspend/react/components/AnySpendDeposit";
 import { AnySpendDepositHype } from "@b3dotfun/sdk/anyspend/react/components/AnyspendDepositHype";
+import { AnySpendCheckoutTrigger } from "@b3dotfun/sdk/anyspend/react/components/checkout/AnySpendCheckoutTrigger";
 import { AnySpendWorkflowTrigger } from "@b3dotfun/sdk/anyspend/react/components/AnySpendWorkflowTrigger";
 import { AnySpendDepositUpside } from "@b3dotfun/sdk/anyspend/react/components/AnySpendDepositUpside";
 import { AnySpendStakeUpside } from "@b3dotfun/sdk/anyspend/react/components/AnySpendStakeUpside";
@@ -67,6 +68,7 @@ export function B3DynamicModal() {
     "notifications",
     "anySpendDeposit",
     "anySpendWorkflowTrigger",
+    "anySpendCheckoutTrigger",
   ];
 
   const freestyleTypes = [
@@ -82,6 +84,9 @@ export function B3DynamicModal() {
     "anySpendBondKit",
   ];
 
+  // AnySpend modal types should not show the "Global Account" branding footer
+  const isAnySpendType = contentType?.type?.toLowerCase().startsWith("anyspend") ?? false;
+
   // Check if current content type is in freestyle types
   const isFreestyleType = freestyleTypes.includes(contentType?.type as string);
   // Determine if modal should be closable - defaults to true unless explicitly set to false
@@ -100,6 +105,7 @@ export function B3DynamicModal() {
     contentType?.type === "send" && "p-0",
     contentType?.type === "manageAccount" && " md:p-0 md:pt-2",
     contentType?.type === "linkAccount" && "md:p-0",
+    contentType?.type === "anySpendCheckoutTrigger" && "p-0",
     // Add specific styles for avatar editor
     // contentType?.type === "avatarEditor_disabled" &&
     //   "h-[90dvh] w-[90vw] bg-black p-0 overflow-y-auto overflow-x-hidden max-md:-mt-8 max-md:rounded-t-xl",
@@ -156,6 +162,8 @@ export function B3DynamicModal() {
         return <AnySpendDeposit {...contentType} mode="modal" />;
       case "anySpendWorkflowTrigger":
         return <AnySpendWorkflowTrigger {...contentType} mode="modal" />;
+      case "anySpendCheckoutTrigger":
+        return <AnySpendCheckoutTrigger {...contentType} mode="modal" />;
       case "avatarEditor":
         return <AvatarEditor onSetAvatar={contentType.onSuccess} />;
       case "deposit":
@@ -189,8 +197,8 @@ export function B3DynamicModal() {
       <ModalContent
         className={cn(
           contentClass,
-          "rounded-2xl bg-white shadow-xl dark:bg-gray-900",
-          "border border-gray-200 dark:border-gray-800",
+          "rounded-2xl bg-white shadow-xl dark:bg-neutral-900",
+          "border border-gray-200 dark:border-neutral-800",
           (contentType?.type === "manageAccount" ||
             contentType?.type === "deposit" ||
             contentType?.type === "send" ||
@@ -200,6 +208,7 @@ export function B3DynamicModal() {
           "mx-auto w-full max-w-md sm:max-w-lg",
         )}
         hideCloseButton={hideCloseButton}
+        hideGABranding={isAnySpendType}
         onEscapeKeyDown={!isClosable ? e => e.preventDefault() : undefined}
         onPointerDownOutside={!isClosable ? e => e.preventDefault() : undefined}
         onInteractOutside={!isClosable ? e => e.preventDefault() : undefined}
@@ -246,7 +255,7 @@ export function B3DynamicModal() {
                 animate={{ height: "auto" }}
                 exit={{ height: 0 }}
                 transition={{ duration: 0.3, ease: "easeInOut" }}
-                className="toast-section relative z-10 overflow-hidden bg-white dark:border-gray-800 dark:bg-gray-900"
+                className="toast-section relative z-10 overflow-hidden bg-white dark:border-neutral-800 dark:bg-neutral-900"
               >
                 <motion.div
                   initial={{ opacity: 0, y: -10 }}
@@ -264,7 +273,7 @@ export function B3DynamicModal() {
       </ModalContent>
 
       {/* Animate inner container margin to cover branding when toasts appear */}
-      {isOpen && (
+      {isOpen && !isAnySpendType && (
         <style>{`
           .modal-inner-content {
             transition: margin-bottom 0.3s ease-in-out;

package/src/global-account/react/components/ui/dialog.tsx

@@ -38,11 +38,13 @@ type DialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
 type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
   hideCloseButton?: boolean;
   closeBtnClassName?: string;
+  /** Hide the "Global Account" branding footer below the modal */
+  hideGABranding?: boolean;
 };
 
 const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<DialogContentElement>> =
   React.forwardRef<DialogContentElement, DialogContentProps>(
-    ({ className, children, hideCloseButton = true, closeBtnClassName, ...props }, ref) => {
+    ({ className, children, hideCloseButton = true, closeBtnClassName, hideGABranding, ...props }, ref) => {
       const container = typeof window !== "undefined" ? document.getElementById("b3-root") : null;
       return (
         <DialogPortal container={container}>
@@ -60,7 +62,12 @@ const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.
             )}
             {...props}
           >
-            <div className="modal-inner-content mb-[23px] flex flex-1 flex-col overflow-hidden rounded-xl border border-[#D1D1D6] bg-white shadow-[0_20px_24px_-4px_rgba(10,13,18,0.08),0_8px_8px_-4px_rgba(10,13,18,0.03),0_3px_3px_-1.5px_rgba(10,13,18,0.04)]">
+            <div
+              className={cn(
+                "modal-inner-content flex flex-1 flex-col overflow-hidden rounded-xl border border-[#D1D1D6] bg-white shadow-[0_20px_24px_-4px_rgba(10,13,18,0.08),0_8px_8px_-4px_rgba(10,13,18,0.03),0_3px_3px_-1.5px_rgba(10,13,18,0.04)] dark:border-neutral-700 dark:bg-neutral-900",
+                !hideGABranding && "mb-[23px]",
+              )}
+            >
               {children}
               {!hideCloseButton && (
                 <DialogPrimitive.Close
@@ -75,12 +82,14 @@ const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.
               )}
             </div>
             {/* Global Account Footer - Absolutely positioned on outer grey layer */}
-            <div className="b3-modal-ga-branding absolute bottom-[10px] left-0 right-0 flex items-center justify-center gap-1.5 pt-[10px]">
-              <img src="https://cdn.b3.fun/b3_logo.svg" alt="B3" className="h-4 w-4" />
-              <span className="font-neue-montreal-semibold text-xs uppercase leading-none tracking-[0.72px] text-[#0B57C2]">
-                Global Account
-              </span>
-            </div>
+            {!hideGABranding && (
+              <div className="b3-modal-ga-branding absolute bottom-[10px] left-0 right-0 flex items-center justify-center gap-1.5 pt-[10px]">
+                <img src="https://cdn.b3.fun/b3_logo.svg" alt="B3" className="h-4 w-4" />
+                <span className="font-neue-montreal-semibold text-xs uppercase leading-none tracking-[0.72px] text-[#0B57C2]">
+                  Global Account
+                </span>
+              </div>
+            )}
           </DialogPrimitive.Content>
         </DialogPortal>
       );

package/src/global-account/react/components/ui/drawer.tsx

@@ -30,8 +30,8 @@ DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
 const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ className, children, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & { hideGABranding?: boolean }
+>(({ className, children, hideGABranding: _hideGABranding, ...props }, ref) => {
   const container = typeof window !== "undefined" ? document.getElementById("b3-root") : null;
   return (
     <DrawerPortal container={container}>

package/src/global-account/react/stores/useModalStore.ts

@@ -509,6 +509,56 @@ 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";
@@ -629,7 +679,8 @@ export type ModalContentType =
   | NotificationsModalProps
   | AnySpendCollectorClubPurchaseProps
   | AnySpendDepositModalProps
-  | AnySpendWorkflowTriggerModalProps;
+  | AnySpendWorkflowTriggerModalProps
+  | AnySpendCheckoutTriggerModalProps;
 
 /**
  * State interface for the modal store

package/src/shared/utils/number.ts

@@ -121,6 +121,18 @@ export const formatDisplayNumber = (
   return formatter.format(v);
 };
 
+/**
+ * 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 function safeBigInt(value: string): bigint {
+  try {
+    return BigInt(value);
+  } catch {
+    return BigInt(0);
+  }
+}
+
 export function formatUnits(value: string, decimals = 18) {
   const factor = BigInt(10) ** BigInt(decimals);
   const wholePart = BigInt(value) / factor;

package/src/styles/index.css

@@ -126,7 +126,7 @@
   --as-on-disabled: 0 0% 44%;
   --as-shadow-lg: 220 29% 5%;
   --as-quaternary: 240 6% 65%;
-  --as-tertiarry: 235 6% 34%;
+  --as-tertiary: 235 6% 50%;
   --as-success-secondary: 89 85% 89%;
   --as-content-icon-success: 95 85% 35%;
   --as-content-disabled: 220 6% 47%;
@@ -219,7 +219,7 @@ html[data-theme="dark"] .b3-root,
   --as-on-surface-disabled: 0 0% 78%;
   --as-on-disabled: 0 0% 44%;
   --as-quaternary: 240 6% 65%;
-  --as-tertiarry: 240 6% 65%;
+  --as-tertiary: 240 6% 65%;
   --as-success-secondary: 95 85% 35%;
   --as-content-icon-success: 89 85% 89%;
   --as-content-disabled: 220 6% 47%;
@@ -703,3 +703,49 @@ Dark version
 .tw-header {
   display: none !important; /* Hide the TW "BSMNT" header */
 }
+
+/* AnySpend Checkout: modal trigger overrides */
+.anyspend-checkout-trigger .anyspend-payment-methods {
+  border: none;
+  border-radius: 0;
+}
+.anyspend-checkout-trigger .anyspend-payment-title {
+  font-size: 0;
+  padding-left: 0.75rem;
+}
+.anyspend-checkout-trigger .anyspend-payment-title::before {
+  content: "Payment options";
+  font-size: 1.125rem;
+}
+.anyspend-checkout-trigger .anyspend-payment-panel {
+  gap: 0;
+}
+.anyspend-checkout-trigger .anyspend-payment-method-btn {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.anyspend-checkout-trigger .anyspend-payment-method-panel {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+/* AnySpend Checkout: 2-column grid layout */
+.anyspend-checkout-grid {
+  display: grid;
+  gap: 2rem;
+  grid-template-columns: 1fr;
+}
+@media (min-width: 768px) {
+  .anyspend-checkout-grid {
+    grid-template-columns: 1fr var(--anyspend-cart-width, 380px);
+  }
+  .anyspend-checkout-grid > .anyspend-payment-col {
+    order: 1;
+  }
+  .anyspend-checkout-grid > .anyspend-cart-col {
+    order: 2;
+    position: sticky;
+    top: 32px;
+    align-self: start;
+  }
+}