@b3dotfun/sdk 0.0.87-alpha.0 → 0.0.87-alpha.2

package/dist/types/anyspend/react/components/AnySpendDeposit.d.ts

@@ -0,0 +1,122 @@
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
+export interface DepositContractConfig {
+    /** Custom function ABI JSON string */
+    functionAbi: string;
+    /** The function name to call */
+    functionName: string;
+    /** Custom function arguments. Use "{{amount_out}}" for the deposit amount placeholder */
+    functionArgs: string[];
+    /** The contract address to deposit to */
+    to: string;
+    /** Optional spender address if different from contract address */
+    spenderAddress?: string;
+    /** Custom action label */
+    action?: string;
+}
+export interface ChainConfig {
+    /** Chain ID */
+    id: number;
+    /** Display name */
+    name: string;
+    /** Optional icon URL */
+    iconUrl?: string;
+}
+export interface AnySpendDepositProps {
+    /** Order ID to load an existing order */
+    loadOrder?: string;
+    /** Display mode */
+    mode?: "modal" | "page";
+    /** The recipient address for the deposit */
+    recipientAddress: string;
+    /** Payment type - crypto or fiat. If not set, shows chain selection first */
+    paymentType?: "crypto" | "fiat";
+    /** Source token address to pre-select */
+    sourceTokenAddress?: string;
+    /** Source chain ID to pre-select. If not provided, shows chain selection */
+    sourceTokenChainId?: number;
+    /** The destination token to receive */
+    destinationToken: components["schemas"]["Token"];
+    /** The destination chain ID */
+    destinationChainId: number;
+    /** Callback when deposit succeeds */
+    onSuccess?: (amount: string) => void;
+    /** Callback for opening a custom modal (e.g., for special token handling) */
+    onOpenCustomModal?: () => void;
+    /** Custom footer content */
+    mainFooter?: React.ReactNode;
+    /** Called when a token is selected. Call event.preventDefault() to prevent default behavior */
+    onTokenSelect?: (token: components["schemas"]["Token"], event: {
+        preventDefault: () => void;
+    }) => void;
+    /** Custom USD input value presets for fiat payment */
+    customUsdInputValues?: string[];
+    /** Whether to prefer using connected EOA wallet */
+    preferEoa?: boolean;
+    /** Minimum destination amount required */
+    minDestinationAmount?: number;
+    /** Custom header component */
+    header?: ({ anyspendPrice, isLoadingAnyspendPrice, }: {
+        anyspendPrice: GetQuoteResponse | undefined;
+        isLoadingAnyspendPrice: boolean;
+    }) => React.JSX.Element;
+    /** Order type for the deposit */
+    orderType?: "hype_duel" | "custom_exact_in" | "swap";
+    /** Custom action label displayed on buttons */
+    actionLabel?: string;
+    /** Configuration for depositing to a custom contract.
+     * If provided, creates a custom_exact_in order that calls the contract.
+     * If not provided, creates a simple hype_duel order for direct deposits.
+     */
+    depositContractConfig?: DepositContractConfig;
+    /** Whether to show chain selection step. Defaults to true if sourceTokenChainId is not provided */
+    showChainSelection?: boolean;
+    /** Custom list of supported chains. If not provided, uses default chains */
+    supportedChains?: ChainConfig[];
+    /** Minimum pool size for filtering tokens (default: 1,000,000) */
+    minPoolSize?: number;
+    /** Custom title for chain selection step */
+    chainSelectionTitle?: string;
+    /** Custom description for chain selection step */
+    chainSelectionDescription?: string;
+    /** Number of top chains to show (default: 3) */
+    topChainsCount?: number;
+    /** Callback when close button is clicked */
+    onClose?: () => void;
+}
+/**
+ * A flexible deposit component that wraps AnySpendCustomExactIn with optional chain selection.
+ *
+ * @example
+ * // Simple deposit with chain selection
+ * <AnySpendDeposit
+ *   recipientAddress={userAddress}
+ *   destinationToken={myToken}
+ *   destinationChainId={base.id}
+ *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
+ * />
+ *
+ * @example
+ * // Skip chain selection by providing sourceTokenChainId
+ * <AnySpendDeposit
+ *   recipientAddress={userAddress}
+ *   destinationToken={myToken}
+ *   destinationChainId={base.id}
+ *   sourceTokenChainId={base.id}
+ *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
+ * />
+ *
+ * @example
+ * // Deposit with custom contract
+ * <AnySpendDeposit
+ *   recipientAddress={userAddress}
+ *   destinationToken={myToken}
+ *   destinationChainId={base.id}
+ *   depositContractConfig={{
+ *     contractAddress: "0x...",
+ *     functionName: "depositFor",
+ *   }}
+ *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
+ * />
+ */
+export declare function AnySpendDeposit({ loadOrder, mode, recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationToken, destinationChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains, minPoolSize, topChainsCount, onClose, }: AnySpendDepositProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/anyspend/react/components/QRDeposit.d.ts

@@ -0,0 +1,43 @@
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { DepositContractConfig } from "./AnySpendDeposit";
+export interface QRDepositProps {
+    /** Display mode */
+    mode?: "modal" | "page";
+    /** The recipient address (user's wallet) */
+    recipientAddress: string;
+    /** The source token to deposit (defaults to ETH on Base) */
+    sourceToken?: components["schemas"]["Token"];
+    /** The source chain ID (defaults to Base) */
+    sourceChainId?: number;
+    /** The destination token to receive */
+    destinationToken: components["schemas"]["Token"];
+    /** The destination chain ID */
+    destinationChainId: number;
+    /** Creator address (optional) */
+    creatorAddress?: string;
+    /** Contract config for custom execution after deposit */
+    depositContractConfig?: DepositContractConfig;
+    /** Callback when back button is clicked */
+    onBack?: () => void;
+    /** Callback when close button is clicked */
+    onClose?: () => void;
+    /** Callback when order is created successfully */
+    onOrderCreated?: (orderId: string) => void;
+    /** Callback when deposit is completed */
+    onSuccess?: (txHash?: string) => void;
+}
+/**
+ * A component for displaying QR code deposit functionality.
+ * Creates a deposit_first order on mount and shows a QR code that can be scanned to deposit tokens.
+ * Users can change the source token/chain using the TokenSelector.
+ *
+ * @example
+ * <QRDeposit
+ *   recipientAddress={userAddress}
+ *   destinationToken={usdcArbitrumToken}
+ *   destinationChainId={42161}
+ *   onBack={() => setStep("select-chain")}
+ *   onSuccess={(txHash) => console.log("Deposit complete:", txHash)}
+ * />
+ */
+export declare function QRDeposit({ mode, recipientAddress, sourceToken: sourceTokenProp, sourceChainId: sourceChainIdProp, destinationToken, destinationChainId, creatorAddress, depositContractConfig, onBack, onClose, onOrderCreated, onSuccess, }: QRDepositProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/anyspend/react/components/common/OrderDetailsCollapsible.d.ts

@@ -14,6 +14,8 @@ interface OrderDetailsCollapsibleProps {
     showTotal?: boolean;
     totalAmount?: string;
     points?: number;
+    isOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
 }
 export declare const OrderDetailsCollapsible: import("react").NamedExoticComponent<OrderDetailsCollapsibleProps>;
 export {};

package/dist/types/anyspend/react/components/common/WarningText.d.ts

@@ -0,0 +1,32 @@
+export interface WarningTextProps {
+    /** The warning message content */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * A generic warning text component with consistent styling.
+ *
+ * @example
+ * <WarningText>
+ *   Custom warning message
+ * </WarningText>
+ */
+export declare function WarningText({ children, className }: WarningTextProps): import("react/jsx-runtime").JSX.Element;
+export interface ChainWarningTextProps {
+    /** The chain ID to display warning for */
+    chainId: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * A chain-aware warning text component that displays chain-specific warnings.
+ * Returns null if there's no warning for the given chain.
+ *
+ * @example
+ * <ChainWarningText chainId={HYPERLIQUID_CHAIN_ID} />
+ *
+ * @example
+ * <ChainWarningText chainId={destinationChainId} className="mt-4" />
+ */
+export declare function ChainWarningText({ chainId, className }: ChainWarningTextProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/anyspend/react/components/icons/CreditCardIcon.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface CreditCardIconProps {
+    className?: string;
+}
+export declare const CreditCardIcon: React.FC<CreditCardIconProps>;
+export {};

package/dist/types/anyspend/react/components/icons/QrCodeIcon.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface QrCodeIconProps {
+    className?: string;
+}
+export declare const QrCodeIcon: React.FC<QrCodeIconProps>;
+export {};

package/dist/types/anyspend/react/components/index.d.ts

@@ -4,6 +4,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/dist/types/anyspend/react/hooks/index.d.ts

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

package/dist/types/anyspend/react/hooks/useAnyspendFlow.d.ts

@@ -24,9 +24,9 @@ interface UseAnyspendFlowProps {
     destinationTokenChainId?: number;
     slippage?: number;
     disableUrlParamManagement?: boolean;
-    orderType?: "hype_duel" | "custom_exact_in";
+    orderType?: "hype_duel" | "custom_exact_in" | "swap";
 }
-export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrder, isDepositMode, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, destinationTokenAddress, destinationTokenChainId, slippage, disableUrlParamManagement, orderType, }: UseAnyspendFlowProps): {
+export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrder, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, destinationTokenAddress, destinationTokenChainId, slippage, disableUrlParamManagement, orderType, }: UseAnyspendFlowProps): {
     activePanel: PanelView;
     setActivePanel: import("react").Dispatch<import("react").SetStateAction<PanelView>>;
     orderId: string | undefined;

package/dist/types/anyspend/react/hooks/useCreateDepositFirstOrder.d.ts

@@ -0,0 +1,24 @@
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+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 declare function useCreateDepositFirstOrder({ onSuccess, onError }?: UseCreateDepositFirstOrderProps): {
+    createOrder: import("@tanstack/react-query").UseMutateFunction<any, Error, CreateDepositFirstOrderParams, unknown>;
+    isCreatingOrder: boolean;
+};

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

@@ -144,6 +144,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;
 }
 /**
  * Props for the AnySpend NFT modal

package/package.json

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

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

@@ -90,6 +90,7 @@ const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
 export function AnySpend(props: {
   mode?: "page" | "modal";
   defaultActiveTab?: "crypto" | "fiat";
+  sourceChainId?: number;
   destinationTokenAddress?: string;
   destinationTokenChainId?: number;
   recipientAddress?: string;
@@ -102,6 +103,10 @@ export function AnySpend(props: {
   onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
   onSuccess?: (txHash?: string) => void;
   customUsdInputValues?: string[];
+  hideHeader?: boolean;
+  hideBottomNavigation?: boolean;
+  /** When true, disables URL parameter management for swap configuration */
+  disableUrlParamManagement?: boolean;
 }) {
   const fingerprintConfig = getFingerprintConfig();
 
@@ -113,6 +118,7 @@ export function AnySpend(props: {
 }
 
 function AnySpendInner({
+  sourceChainId,
   destinationTokenAddress,
   destinationTokenChainId,
   mode = "modal",
@@ -123,7 +129,11 @@ function AnySpendInner({
   onTokenSelect,
   onSuccess,
   customUsdInputValues,
+  hideHeader,
+  hideBottomNavigation = false,
+  disableUrlParamManagement = false,
 }: {
+  sourceChainId?: number;
   destinationTokenAddress?: string;
   destinationTokenChainId?: number;
   mode?: "page" | "modal";
@@ -134,6 +144,9 @@ function AnySpendInner({
   onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
   onSuccess?: (txHash?: string) => void;
   customUsdInputValues?: string[];
+  hideHeader?: boolean;
+  hideBottomNavigation?: boolean;
+  disableUrlParamManagement?: boolean;
 }) {
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
@@ -211,7 +224,7 @@ function AnySpendInner({
   // const recipientInputRef = useRef<HTMLInputElement>(null);
 
   // Get initial chain IDs from URL or defaults
-  const initialSrcChainId = parseInt(searchParams.get("fromChainId") || "0") || mainnet.id;
+  const initialSrcChainId = sourceChainId || parseInt(searchParams.get("fromChainId") || "0") || mainnet.id;
   const initialDstChainId =
     parseInt(searchParams.get("toChainId") || "0") || (isBuyMode ? destinationTokenChainId : base.id);
 
@@ -323,8 +336,8 @@ function AnySpendInner({
 
   // Load swap configuration from URL on initial render
   useEffect(() => {
-    // Skip if we've already processed the URL or if we have an order to load
-    if (initialUrlProcessed.current || loadOrder) return;
+    // Skip if we've already processed the URL, if we have an order to load, or if URL param management is disabled
+    if (initialUrlProcessed.current || loadOrder || disableUrlParamManagement) return;
 
     try {
       const tabParam = searchParams.get("tab");
@@ -357,7 +370,7 @@ function AnySpendInner({
 
     // Mark that we've processed the initial URL
     initialUrlProcessed.current = true;
-  }, [searchParams, loadOrder]);
+  }, [searchParams, loadOrder, disableUrlParamManagement]);
 
   // Update URL when swap configuration changes - but not on initial load
   const updateSwapParamsInURL = useCallback(() => {
@@ -370,7 +383,8 @@ function AnySpendInner({
       activePanel !== PanelView.MAIN ||
       !initialUrlProcessed.current ||
       searchParams.has("orderId") ||
-      mode === "modal"
+      mode === "modal" ||
+      disableUrlParamManagement
     )
       return;
 
@@ -441,6 +455,7 @@ function AnySpendInner({
     dstAmount,
     router,
     srcAmountOnRamp,
+    disableUrlParamManagement,
   ]);
 
   // Update URL when relevant state changes - but only after initial render
@@ -650,20 +665,20 @@ function AnySpendInner({
       // setNewRecipientAddress("");
       navigateToPanel(PanelView.ORDER_DETAILS, "forward");
 
-      // Debug: Check payment method before setting URL
-      console.log("Creating order - selectedCryptoPaymentMethod:", selectedCryptoPaymentMethod);
+      if (!disableUrlParamManagement) {
+        // Debug: Check payment method before setting URL
+        console.log("Creating order - selectedCryptoPaymentMethod:", selectedCryptoPaymentMethod);
 
-      // Add orderId and payment method to URL for persistence
-      const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
-      params.set("orderId", orderId);
-      if (effectiveCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
-        console.log("Setting cryptoPaymentMethod in URL:", effectiveCryptoPaymentMethod);
-        params.set("cryptoPaymentMethod", effectiveCryptoPaymentMethod);
-      } else {
-        console.log("Payment method is NONE, not setting in URL");
+        // Add orderId and payment method to URL for persistence
+        const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
+        params.set("orderId", orderId);
+        if (effectiveCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
+          params.set("cryptoPaymentMethod", effectiveCryptoPaymentMethod);
+        } else {
+          console.log("Payment method is NONE, not setting in URL");
+        }
+        router.push(`${window.location.pathname}?${params.toString()}`);
       }
-      console.log("Final URL params:", params.toString());
-      router.push(`${window.location.pathname}?${params.toString()}`);
     },
     onError: error => {
       console.error(error);
@@ -678,11 +693,13 @@ function AnySpendInner({
       setOrderId(orderId);
       navigateToPanel(PanelView.ORDER_DETAILS, "forward");
 
-      // Add orderId and payment method to URL for persistence
-      const params = new URLSearchParams(searchParams.toString());
-      params.set("orderId", orderId);
-      params.set("paymentMethod", "fiat");
-      router.push(`${window.location.pathname}?${params.toString()}`);
+      if (!disableUrlParamManagement) {
+        // Add orderId and payment method to URL for persistence
+        const params = new URLSearchParams(searchParams.toString());
+        params.set("orderId", orderId);
+        params.set("paymentMethod", "fiat");
+        router.push(`${window.location.pathname}?${params.toString()}`);
+      }
     },
     onError: error => {
       console.error(error);
@@ -831,11 +848,13 @@ function AnySpendInner({
       type: "anySpendOrderHistory",
       showBackButton: false,
     });
-    // Remove orderId and paymentMethod from URL when going back to history
-    const params = new URLSearchParams(searchParams.toString());
-    params.delete("orderId");
-    params.delete("paymentMethod");
-    router.push(`${window.location.pathname}?${params.toString()}`);
+    if (!disableUrlParamManagement) {
+      // Remove orderId and paymentMethod from URL when going back to history
+      const params = new URLSearchParams(searchParams.toString());
+      params.delete("orderId");
+      params.delete("paymentMethod");
+      router.push(`${window.location.pathname}?${params.toString()}`);
+    }
   };
 
   // Handle crypto swap creation
@@ -952,23 +971,25 @@ function AnySpendInner({
 
   // Update useEffect for URL parameter to not override loadOrder
   useEffect(() => {
-    if (loadOrder) return; // Skip if we have a loadOrder
+    if (loadOrder || disableUrlParamManagement) return; // Skip if we have a loadOrder or URL param management is disabled
 
     const orderIdParam = searchParams.get("orderId");
     if (orderIdParam) {
       setOrderId(orderIdParam);
       setActivePanel(PanelView.ORDER_DETAILS);
     }
-  }, [searchParams, loadOrder]);
+  }, [searchParams, loadOrder, disableUrlParamManagement]);
 
   const onSelectOrder = (selectedOrderId: string) => {
     setOrderId(selectedOrderId);
     navigateToPanel(PanelView.ORDER_DETAILS, "forward");
-    // Update URL with the new orderId and preserve existing parameters
-    const params = new URLSearchParams(searchParams.toString());
-    params.set("orderId", selectedOrderId);
-    // Keep existing paymentMethod if present
-    router.push(`${window.location.pathname}?${params.toString()}`);
+    if (!disableUrlParamManagement) {
+      // Update URL with the new orderId and preserve existing parameters
+      const params = new URLSearchParams(searchParams.toString());
+      params.set("orderId", selectedOrderId);
+      // Keep existing paymentMethod if present
+      router.push(`${window.location.pathname}?${params.toString()}`);
+    }
   };
 
   // Save custom recipients to local storage when they change
@@ -1056,7 +1077,7 @@ function AnySpendInner({
     <div className={"mx-auto flex w-[460px] max-w-full flex-col items-center gap-2 pt-5"}>
       <div className={"flex w-full max-w-full flex-col items-center gap-2 px-5"}>
         {/* Token Header - Show when in buy mode */}
-        {isBuyMode && (
+        {isBuyMode && !hideHeader && (
           <div className="mb-4 flex flex-col items-center gap-3 text-center">
             {selectedDstToken.metadata?.logoURI && (
               <div className="relative">
@@ -1141,47 +1162,44 @@ function AnySpendInner({
           )}
 
           {/* Reverse swap direction section */}
-          <Button
-            variant="ghost"
-            className={cn(
-              "border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl",
-              isBuyMode && "top-[calc(50%+56px)] cursor-default",
-              activeTab === "fiat" && "hidden",
-              selectedDstChainId === HYPERLIQUID_CHAIN_ID && "cursor-not-allowed opacity-50",
-            )}
-            onClick={() => {
-              if (activeTab === "fiat" || isBuyMode) {
-                return;
-              }
-
-              // Prevent swapping if destination is Hyperliquid (only supported as destination, not source)
-              if (selectedDstChainId === HYPERLIQUID_CHAIN_ID) {
-                return;
-              }
-
-              // Swap chain selections
-              const tempSrcChainId = selectedSrcChainId;
-              const tempDstChainId = selectedDstChainId;
-              setSelectedSrcChainId(tempDstChainId);
-              setSelectedDstChainId(tempSrcChainId);
-
-              // Swap token selections
-              const tempSrcToken = selectedSrcToken;
-              const tempDstToken = selectedDstToken;
-              setSelectedSrcToken(tempDstToken);
-              setSelectedDstToken(tempSrcToken);
-
-              // Swap amounts
-              const tempSrcAmount = srcAmount;
-              const tempDstAmount = dstAmount;
-              setSrcAmount(tempDstAmount);
-              setDstAmount(tempSrcAmount);
-            }}
-          >
-            <div className="relative flex items-center justify-center transition-opacity">
-              <ArrowDown className="text-as-primary/50 h-5 w-5" />
+          {activeTab === "crypto" && (
+            <div className="z-10 -my-6 flex justify-center">
+              <Button
+                variant="ghost"
+                className={cn(
+                  "border-as-stroke bg-as-surface-primary h-10 w-10 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl",
+                  isBuyMode && "cursor-default",
+                  selectedDstChainId === HYPERLIQUID_CHAIN_ID && "cursor-not-allowed opacity-50",
+                )}
+                onClick={() => {
+                  if (isBuyMode) {
+                    return;
+                  }
+
+                  // Prevent swapping if destination is Hyperliquid (only supported as destination, not source)
+                  if (selectedDstChainId === HYPERLIQUID_CHAIN_ID) {
+                    return;
+                  }
+
+                  // Swap chain selections
+                  setSelectedSrcChainId(selectedDstChainId);
+                  setSelectedDstChainId(selectedSrcChainId);
+
+                  // Swap token selections
+                  setSelectedSrcToken(selectedDstToken);
+                  setSelectedDstToken(selectedSrcToken);
+
+                  // Swap amounts
+                  setSrcAmount(dstAmount);
+                  setDstAmount(srcAmount);
+                }}
+              >
+                <div className="relative flex items-center justify-center transition-opacity">
+                  <ArrowDown className="text-as-primary/50 h-5 w-5" />
+                </div>
+              </Button>
             </div>
-          </Button>
+          )}
 
           {/* Receive section - Hidden when fiat tab is active */}
           {/* Receive section - Hidden when fiat tab is active */}
@@ -1262,7 +1280,7 @@ function AnySpendInner({
             }
           }}
         >
-          {mode !== "page" && <BottomNavigation />}
+          {mode !== "page" && !hideBottomNavigation && <BottomNavigation />}
         </TabsPrimitive>
       </div>
     </div>
@@ -1284,16 +1302,18 @@ function AnySpendInner({
       onOrderCreated={orderId => {
         setOrderId(orderId);
         navigateToPanel(PanelView.ORDER_DETAILS, "forward");
-        // Add orderId and payment method to URL for persistence
-        const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
-        params.set("orderId", orderId);
-        // For fiat payments, the payment method is always fiat (but we use the active tab context)
-        if (activeTab === "fiat") {
-          params.set("paymentMethod", "fiat");
-        } else if (selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
-          params.set("paymentMethod", selectedCryptoPaymentMethod);
+        if (!disableUrlParamManagement) {
+          // Add orderId and payment method to URL for persistence
+          const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
+          params.set("orderId", orderId);
+          // For fiat payments, the payment method is always fiat (but we use the active tab context)
+          if (activeTab === "fiat") {
+            params.set("paymentMethod", "fiat");
+          } else if (selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
+            params.set("paymentMethod", selectedCryptoPaymentMethod);
+          }
+          router.push(`${window.location.pathname}?${params.toString()}`);
         }
-        router.push(`${window.location.pathname}?${params.toString()}`);
       }}
       onBack={navigateBack}
       recipientEnsName={globalWallet?.ensName}

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

@@ -57,7 +57,7 @@ export interface AnySpendCustomExactInProps {
   customUsdInputValues?: string[];
   preferEoa?: boolean;
   customExactInConfig?: CustomExactInConfig;
-  orderType?: "hype_duel" | "custom_exact_in";
+  orderType?: "hype_duel" | "custom_exact_in" | "swap";
   minDestinationAmount?: number;
   header?: ({
     anyspendPrice,
@@ -147,7 +147,6 @@ function AnySpendCustomExactInInner({
     paymentType,
     recipientAddress,
     loadOrder,
-    isDepositMode: true,
     onTransactionSuccess: onSuccess,
     sourceTokenAddress,
     sourceTokenChainId,
@@ -314,7 +313,7 @@ function AnySpendCustomExactInInner({
   );
 
   const mainView = (
-    <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-2">
+    <div className="anyspend-custom-exact-in-container mx-auto flex w-[460px] max-w-full flex-col items-center gap-2">
       {headerContent}
 
       <div className="relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2">