@b3dotfun/sdk 0.0.86 → 0.0.87-alpha.1

package/src/anyspend/react/components/icons/qr-code.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0.5H32C36.1421 0.5 39.5 3.85786 39.5 8V32C39.5 36.1421 36.1421 39.5 32 39.5H8C3.85786 39.5 0.5 36.1421 0.5 32V8C0.5 3.85786 3.85786 0.5 8 0.5Z" fill="#F4F4F5"/>
+<path d="M8 0.5H32C36.1421 0.5 39.5 3.85786 39.5 8V32C39.5 36.1421 36.1421 39.5 32 39.5H8C3.85786 39.5 0.5 36.1421 0.5 32V8C0.5 3.85786 3.85786 0.5 8 0.5Z" stroke="#E4E4E7"/>
+<path d="M15 20H20V25M11.01 20H11M16.01 25H16M20.01 29H20M29.01 20H29M11 25H12.5M23.5 20H25.5M11 29H16M20 10V16M25.6 29H27.4C27.9601 29 28.2401 29 28.454 28.891C28.6422 28.7951 28.7951 28.6422 28.891 28.454C29 28.2401 29 27.9601 29 27.4V25.6C29 25.0399 29 24.7599 28.891 24.546C28.7951 24.3578 28.6422 24.2049 28.454 24.109C28.2401 24 27.9601 24 27.4 24H25.6C25.0399 24 24.7599 24 24.546 24.109C24.3578 24.2049 24.2049 24.3578 24.109 24.546C24 24.7599 24 25.0399 24 25.6V27.4C24 27.9601 24 28.2401 24.109 28.454C24.2049 28.6422 24.3578 28.7951 24.546 28.891C24.7599 29 25.0399 29 25.6 29ZM25.6 16H27.4C27.9601 16 28.2401 16 28.454 15.891C28.6422 15.7951 28.7951 15.6422 28.891 15.454C29 15.2401 29 14.9601 29 14.4V12.6C29 12.0399 29 11.7599 28.891 11.546C28.7951 11.3578 28.6422 11.2049 28.454 11.109C28.2401 11 27.9601 11 27.4 11H25.6C25.0399 11 24.7599 11 24.546 11.109C24.3578 11.2049 24.2049 11.3578 24.109 11.546C24 11.7599 24 12.0399 24 12.6V14.4C24 14.9601 24 15.2401 24.109 15.454C24.2049 15.6422 24.3578 15.7951 24.546 15.891C24.7599 16 25.0399 16 25.6 16ZM12.6 16H14.4C14.9601 16 15.2401 16 15.454 15.891C15.6422 15.7951 15.7951 15.6422 15.891 15.454C16 15.2401 16 14.9601 16 14.4V12.6C16 12.0399 16 11.7599 15.891 11.546C15.7951 11.3578 15.6422 11.2049 15.454 11.109C15.2401 11 14.9601 11 14.4 11H12.6C12.0399 11 11.7599 11 11.546 11.109C11.3578 11.2049 11.2049 11.3578 11.109 11.546C11 11.7599 11 12.0399 11 12.6V14.4C11 14.9601 11 15.2401 11.109 15.454C11.2049 15.6422 11.3578 15.7951 11.546 15.891C11.7599 16 12.0399 16 12.6 16Z" stroke="#51525C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -5,6 +5,8 @@ export { AnySpendBuySpin } from "./AnySpendBuySpin";
 export { AnySpendCollectorClubPurchase } from "./AnySpendCollectorClubPurchase";
 export { AnySpendCustom } from "./AnySpendCustom";
 export { AnySpendCustomExactIn } from "./AnySpendCustomExactIn";
+export { AnySpendDeposit } from "./AnySpendDeposit";
+export type { AnySpendDepositProps, ChainConfig, DepositContractConfig } from "./AnySpendDeposit";
 export { AnySpendDepositHype, HYPE_TOKEN_DETAILS } from "./AnyspendDepositHype";
 export * from "./AnySpendFingerprintWrapper";
 export { AnySpendNFT } from "./AnySpendNFT";

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

@@ -1,5 +1,6 @@
 export * from "./useAnyspendCreateOnrampOrder";
 export * from "./useAnyspendCreateOrder";
+export * from "./useCreateDepositFirstOrder";
 export * from "./useAnyspendOrderAndTransactions";
 export * from "./useAnyspendOrderHistory";
 export * from "./useAnyspendQuote";

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

@@ -21,6 +21,7 @@ import { useEffect, useMemo, useState } from "react";
 import { parseUnits } from "viem";
 import { base, mainnet } from "viem/chains";
 import { components } from "../../types/api";
+import { GetQuoteRequest } from "../../types/api_req_res";
 import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
 import { FiatPaymentMethod } from "../components/common/FiatPaymentMethod";
 import { useAutoSelectCryptoPaymentMethod } from "./useAutoSelectCryptoPaymentMethod";
@@ -52,7 +53,7 @@ interface UseAnyspendFlowProps {
   destinationTokenChainId?: number;
   slippage?: number;
   disableUrlParamManagement?: boolean;
-  orderType?: "hype_duel" | "custom_exact_in";
+  orderType?: "hype_duel" | "custom_exact_in" | "swap";
 }
 
 // This hook serves for order hype_duel and custom_exact_in
@@ -60,7 +61,6 @@ export function useAnyspendFlow({
   paymentType = "crypto",
   recipientAddress,
   loadOrder,
-  isDepositMode = false,
   onOrderSuccess,
   onTransactionSuccess,
   sourceTokenAddress,
@@ -199,16 +199,41 @@ export function useAnyspendFlow({
   // For fiat payments, always use USDC decimals (6) regardless of selectedSrcToken
   const effectiveDecimals = paymentType === "fiat" ? USDC_BASE.decimals : selectedSrcToken.decimals;
   const activeInputAmountInWei = parseUnits(srcAmount.replace(/,/g, ""), effectiveDecimals).toString();
-  const { anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError } = useAnyspendQuote({
-    srcChain: paymentType === "fiat" ? base.id : selectedSrcChainId,
-    dstChain: isDepositMode ? base.id : selectedDstChainId, // For deposits, always Base; for swaps, use selected destination
-    srcTokenAddress: paymentType === "fiat" ? USDC_BASE.address : selectedSrcToken.address,
-    dstTokenAddress: selectedDstToken.address,
-    type: orderType,
-    amount: activeInputAmountInWei,
-    recipientAddress: effectiveRecipientAddress,
-    onrampVendor: paymentType === "fiat" ? getOnrampVendor(selectedFiatPaymentMethod) : undefined,
-  });
+
+  // Build quote request based on order type
+  const quoteRequest: GetQuoteRequest = (() => {
+    const baseParams = {
+      srcChain: paymentType === "fiat" ? base.id : selectedSrcChainId,
+      dstChain: selectedDstChainId ?? base.id,
+      srcTokenAddress: paymentType === "fiat" ? USDC_BASE.address : selectedSrcToken.address,
+      dstTokenAddress: selectedDstToken.address,
+      recipientAddress: effectiveRecipientAddress,
+      onrampVendor: paymentType === "fiat" ? getOnrampVendor(selectedFiatPaymentMethod) : undefined,
+    };
+
+    if (orderType === "swap") {
+      return {
+        ...baseParams,
+        type: "swap" as const,
+        tradeType: "EXACT_INPUT" as const,
+        amount: activeInputAmountInWei,
+      };
+    } else if (orderType === "hype_duel") {
+      return {
+        ...baseParams,
+        type: "hype_duel" as const,
+        amount: activeInputAmountInWei,
+      };
+    } else {
+      return {
+        ...baseParams,
+        type: "custom_exact_in" as const,
+        amount: activeInputAmountInWei,
+      };
+    }
+  })();
+
+  const { anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError } = useAnyspendQuote(quoteRequest);
 
   // Get geo options for fiat
   const { geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support } = useGeoOnrampOptions(

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

@@ -0,0 +1,110 @@
+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 { 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 { DepositContractConfig } from "../components/AnySpendDeposit";
+
+export type CreateDepositFirstOrderParams = {
+  recipientAddress: string;
+  srcChain: number;
+  dstChain: number;
+  srcToken: components["schemas"]["Token"];
+  dstToken: components["schemas"]["Token"];
+  creatorAddress?: string;
+  /** Optional contract config for custom execution after deposit */
+  contractConfig?: DepositContractConfig;
+};
+
+export type UseCreateDepositFirstOrderProps = {
+  onSuccess?: (data: any) => void;
+  onError?: (error: Error) => void;
+};
+
+/**
+ * Hook for creating deposit_first orders in the Anyspend protocol.
+ * This order type doesn't require srcAmount - the user deposits tokens after the order is created.
+ */
+export function useCreateDepositFirstOrder({ onSuccess, onError }: UseCreateDepositFirstOrderProps = {}) {
+  const { partnerId } = useB3();
+
+  const { data: fpData } = useVisitorData({ extendedResult: true }, { immediate: true });
+  const visitorData: VisitorData | undefined = fpData && {
+    requestId: fpData.requestId,
+    visitorId: fpData.visitorId,
+  };
+
+  const { mutate: createOrder, isPending } = useMutation({
+    mutationFn: async (params: CreateDepositFirstOrderParams) => {
+      const { recipientAddress, srcChain, dstChain, srcToken, dstToken, creatorAddress, contractConfig } = params;
+
+      // Build payload based on whether we have a contract config
+      const payload = contractConfig
+        ? {
+            functionAbi: contractConfig.functionAbi,
+            functionName: contractConfig.functionName,
+            functionArgs: contractConfig.functionArgs,
+            to: normalizeAddress(contractConfig.to),
+            spenderAddress: contractConfig.spenderAddress ? normalizeAddress(contractConfig.spenderAddress) : undefined,
+            action: contractConfig.action,
+          }
+        : {};
+
+      try {
+        return await anyspendService.createOrder({
+          recipientAddress: normalizeAddress(recipientAddress),
+          type: "deposit_first",
+          srcChain,
+          dstChain,
+          srcTokenAddress: normalizeAddress(srcToken.address),
+          dstTokenAddress: normalizeAddress(dstToken.address),
+          srcAmount: "", // Not required for deposit_first
+          payload,
+          metadata: {
+            srcToken: {
+              chainId: srcToken.chainId,
+              address: srcToken.address,
+              symbol: srcToken.symbol,
+              name: srcToken.name,
+              decimals: srcToken.decimals,
+              metadata: srcToken.metadata || {},
+            },
+            dstToken: {
+              chainId: dstToken.chainId,
+              address: dstToken.address,
+              symbol: dstToken.symbol,
+              name: dstToken.name,
+              decimals: dstToken.decimals,
+              metadata: dstToken.metadata || {},
+            },
+          },
+          creatorAddress: creatorAddress ? normalizeAddress(creatorAddress) : undefined,
+          partnerId,
+          visitorData,
+        });
+      } catch (error: any) {
+        if (error?.data) {
+          throw error.data;
+        }
+        throw error;
+      }
+    },
+    onSuccess: (data: any) => {
+      onSuccess?.(data);
+    },
+    onError: (error: Error) => {
+      onError?.(error);
+    },
+  });
+
+  return useMemo(
+    () => ({
+      createOrder,
+      isCreatingOrder: isPending,
+    }),
+    [createOrder, isPending],
+  );
+}

package/src/anyspend/types/api.ts

@@ -1961,6 +1961,15 @@ export interface components {
        */
       fundAmount: string;
     };
+    /** @description DepositFirst payload - empty at creation time, details determined after deposit is detected */
+    DepositFirstPayload: Record<string, never>;
+    /** @description DepositFirst metadata for display purposes */
+    DepositFirstMetadata: {
+      /** @description Token accepted for deposit */
+      srcToken: components["schemas"]["Token"];
+      /** @description Token to swap to after deposit */
+      dstToken: components["schemas"]["Token"];
+    };
     /** @description Swap metadata for display purposes */
     SwapMetadata: {
       srcToken: components["schemas"]["Token"];
@@ -2051,6 +2060,7 @@ export interface components {
         | "waiting_stripe_payment"
         | "expired"
         | "sending_token_from_vault"
+        | "quoting_after_deposit"
         | "relay"
         | "executing"
         | "executed"
@@ -2186,6 +2196,15 @@ export interface components {
       payload: components["schemas"]["FundTournamentPayload"];
       metadata: components["schemas"]["TournamentMetadata"];
     };
+    DepositFirstOrder: components["schemas"]["BaseOrder"] & {
+      /**
+       * @description Order type for deposit-first flow where amount is determined after deposit
+       * @enum {string}
+       */
+      type: "deposit_first";
+      payload: components["schemas"]["DepositFirstPayload"];
+      metadata: components["schemas"]["DepositFirstMetadata"];
+    };
     Order:
       | components["schemas"]["SwapOrder"]
       | components["schemas"]["X402SwapOrder"]
@@ -2194,7 +2213,8 @@ export interface components {
       | components["schemas"]["CustomExactInOrder"]
       | components["schemas"]["MintNftOrder"]
       | components["schemas"]["JoinTournamentOrder"]
-      | components["schemas"]["FundTournamentOrder"];
+      | components["schemas"]["FundTournamentOrder"]
+      | components["schemas"]["DepositFirstOrder"];
     /** @description Swap order request */
     SwapOrderRequest: {
       /**
@@ -2595,6 +2615,50 @@ export interface components {
        */
       creatorAddress?: string;
     };
+    /** @description Deposit-first order request. The srcAmount is determined after deposit is detected, so it is not required at creation time. This flow does not support onramp - users deposit crypto directly. */
+    DepositFirstOrderRequest: {
+      /**
+       * @description Order type for deposit-first flow
+       * @enum {string}
+       */
+      type: "deposit_first";
+      /**
+       * @description Address to receive the destination tokens after swap
+       * @example 0x58241893EF1f86C9fBd8109Cd44Ea961fDb474e1
+       */
+      recipientAddress: string;
+      /**
+       * @description Source chain ID where deposit will be made
+       * @example 8453
+       */
+      srcChain: number;
+      /**
+       * @description Destination chain ID for the swap
+       * @example 8453
+       */
+      dstChain: number;
+      /**
+       * @description Token contract address that will be deposited
+       * @example 0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913
+       */
+      srcTokenAddress: string;
+      /**
+       * @description Token contract address to receive after swap
+       * @example 0x0000000000000000000000000000000000000000
+       */
+      dstTokenAddress: string;
+      payload: components["schemas"]["DepositFirstPayload"];
+      metadata: components["schemas"]["DepositFirstMetadata"];
+      /** @description Optional partner identifier */
+      partnerId?: string;
+      /** @description Optional client reference identifier for tracking purposes (alphanumeric, hyphens, and underscores only, max 255 chars) */
+      clientReferenceId?: string;
+      /**
+       * @description Optional address of the order creator
+       * @example 0x58241893EF1f86C9fBd8109Cd44Ea961fDb474e1
+       */
+      creatorAddress?: string;
+    };
     OrderRequest:
       | components["schemas"]["SwapOrderRequest"]
       | components["schemas"]["X402SwapOrderRequest"]
@@ -2603,7 +2667,8 @@ export interface components {
       | components["schemas"]["CustomExactInOrderRequest"]
       | components["schemas"]["MintNftOrderRequest"]
       | components["schemas"]["JoinTournamentOrderRequest"]
-      | components["schemas"]["FundTournamentOrderRequest"];
+      | components["schemas"]["FundTournamentOrderRequest"]
+      | components["schemas"]["DepositFirstOrderRequest"];
     /** @description Deposit transaction (payment from user) */
     DepositTx: {
       /**

package/src/anyspend/utils/format.ts

@@ -1,14 +1,29 @@
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 
 export const getStatusDisplay = (
   order: components["schemas"]["Order"],
 ): { text: string; status: "processing" | "success" | "failure"; description?: string } => {
+  const srcToken = order.metadata?.srcToken;
+  const dstToken = order.metadata?.dstToken;
+  const formattedSrcAmount = srcToken ? formatTokenAmount(BigInt(order.srcAmount), srcToken.decimals) : undefined;
+  const actualDstAmount = order.settlement?.actualDstAmount;
+  const formattedActualDstAmount =
+    actualDstAmount && dstToken ? formatTokenAmount(BigInt(actualDstAmount), dstToken.decimals) : undefined;
+
   switch (order.status) {
-    case "scanning_deposit_transaction":
+    case "scanning_deposit_transaction": {
+      const depositText =
+        formattedSrcAmount && srcToken
+          ? `Awaiting ${formattedSrcAmount} ${srcToken.symbol}`
+          : order.onrampMetadata
+            ? "Awaiting Payment"
+            : "Awaiting Deposit";
       return {
-        text: order.onrampMetadata ? "Awaiting Payment" : "Awaiting Deposit",
+        text: depositText,
         status: "processing",
       };
+    }
     case "waiting_stripe_payment":
       return {
         text: "Awaiting Payment",
@@ -34,16 +49,18 @@ export const getStatusDisplay = (
         description: "It will take approximately one minute to complete.",
       };
     case "executed": {
+      const receivedText =
+        formattedActualDstAmount && dstToken ? `Received ${formattedActualDstAmount} ${dstToken.symbol}` : undefined;
       const { text, description } =
         order.type === "swap"
-          ? { text: "Swap Complete", description: "Your swap has been completed successfully." }
+          ? { text: receivedText || "Swap Complete", description: "Your swap has been completed successfully." }
           : order.type === "mint_nft"
             ? { text: "NFT Minted", description: "Your NFT has been minted" }
             : order.type === "join_tournament"
               ? { text: "Tournament Joined", description: "You have joined the tournament" }
               : order.type === "fund_tournament"
                 ? { text: "Tournament Funded", description: "You have funded the tournament" }
-                : { text: "Order Complete", description: "Your order has been completed" };
+                : { text: receivedText || "Order Complete", description: "Your order has been completed" };
       return { text, status: "success", description };
     }
 
@@ -59,8 +76,19 @@ export const getStatusDisplay = (
         description: "This order has failed. Please try again or contact support.",
       };
 
+    case "quoting_after_deposit": {
+      return {
+        text: "Quoting After Deposit",
+        status: "processing",
+        description: "Getting quote for the order",
+      };
+    }
+
     default:
-      throw new Error("Invalid order status");
+      return {
+        text: order.status,
+        status: "processing",
+      };
   }
 };
 

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

@@ -151,6 +151,10 @@ export interface AnySpendModalProps extends BaseModalProps {
   customUsdInputValues?: string[];
   /** Client-provided reference ID for tracking orders */
   clientReferenceId?: string;
+  /** Whether to hide the header */
+  hideHeader?: boolean;
+  /** When true, disables URL parameter management for swap configuration */
+  disableUrlParamManagement?: boolean;
 }
 
 /**

package/src/styles/index.css

@@ -152,6 +152,7 @@
   --red-100: #fde6d7;
   --green-100: #dff9e8;
   --border-brand: #2a9fff;
+  --border-primary: #d1d1d6;
   --yellow-100: #fee6c7;
   --purple-100: #f5edfa;
   --purple-300: #ddc3ef;
@@ -249,6 +250,7 @@ html[data-theme="dark"] .b3-root,
   --red-100: #6a5550;
   --green-100: rgba(68, 90, 76, 0.57);
   --border-brand: #2a9fff;
+  --border-primary: #d1d1d6;
   --yellow-100: #957a6c;
   --purple-100: rgba(113, 88, 126, 0.38);
   --purple-300: #a375c3;