@b3dotfun/sdk 0.0.62 → 0.0.63-alpha.1

package/dist/esm/anyspend/react/components/common/OrderTokenAmount.js

@@ -3,27 +3,55 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronsUpDown } from "lucide-react";
 import { useEffect, useRef } from "react";
 import { NumericFormat } from "react-number-format";
+import { formatUnits } from "viem";
 import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID } from "../../../../anyspend/index.js";
-import { Button } from "../../../../global-account/react/index.js";
+import { getNativeRequired } from "../../../../anyspend/utils/chain.js";
+import { isNativeToken } from "../../../../anyspend/utils/token.js";
+import { Button, useTokenBalance } from "../../../../global-account/react/index.js";
 import { cn } from "../../../../shared/utils/index.js";
 import { TokenSelector } from "@relayprotocol/relay-kit-ui";
 import { ChainTokenIcon } from "./ChainTokenIcon.js";
-export function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect = false, canEditAmount = true, className, innerClassName, amountClassName, tokenSelectClassName, onTokenSelect, }) {
+export function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect = false, canEditAmount = true, className, innerClassName, amountClassName, tokenSelectClassName, onTokenSelect, walletAddress, }) {
     // Track previous token to detect changes
     const prevTokenRef = useRef(token.address);
+    // Track if initial balance has been set
+    const initialBalanceSetRef = useRef(false);
+    // Only get token balance when context is "from" (for setting max amount)
+    const { rawBalance } = useTokenBalance({
+        token,
+        address: context === "from" && walletAddress ? walletAddress : undefined,
+    });
+    // Reset balance ref when token address or chain changes
     useEffect(() => {
-        // Only trigger when token actually changes
-        if (prevTokenRef.current !== token.address) {
-            console.log(`Token changed from ${prevTokenRef.current} to ${token.address}`);
-            // For "from" context, reset to default value when token changes
-            if (context === "from") {
-                // Reset input to default for new token
-                onChangeInput("0.01");
+        initialBalanceSetRef.current = false;
+    }, [token.address, token.chainId]);
+    useEffect(() => {
+        // Only handle "from" context
+        if (context !== "from")
+            return;
+        // Check if token changed or if this is the initial load with balance
+        const isTokenChanged = prevTokenRef.current !== token.address;
+        const isInitialLoad = !initialBalanceSetRef.current && rawBalance;
+        if ((isTokenChanged || isInitialLoad) && rawBalance) {
+            console.log(`Setting max balance - Token: ${token.address}, Changed: ${isTokenChanged}, Initial: ${isInitialLoad}`);
+            // Calculate max amount with gas reserve for native tokens
+            let maxAmount;
+            if (isNativeToken(token.address)) {
+                const gasReserve = getNativeRequired(token.chainId);
+                // Ensure we don't go negative
+                maxAmount = rawBalance > gasReserve ? rawBalance - gasReserve : BigInt(0);
+            }
+            else {
+                // For ERC20 tokens, use full balance
+                maxAmount = rawBalance;
             }
-            // Update ref to current token
+            // Set the max amount as input value
+            onChangeInput(formatUnits(maxAmount, token.decimals));
+            // Update refs
             prevTokenRef.current = token.address;
+            initialBalanceSetRef.current = true;
         }
-    }, [token.address, chainId, context, onChangeInput]);
+    }, [token.address, token.chainId, token.decimals, chainId, context, onChangeInput, rawBalance]);
     const handleTokenSelect = (newToken) => {
         const token = {
             address: newToken.address,
@@ -50,12 +78,8 @@ export function OrderTokenAmount({ disabled, inputValue, onChangeInput, context,
         prevTokenRef.current = "changing"; // Temporary value to force effect
         // Set the chain ID first
         setChainId(newToken.chainId);
-        // Then set the new token
+        // Then set the new token - the useEffect will handle setting the max balance
         setToken(token);
-        // If this is the source token, reset the amount immediately
-        if (context === "from") {
-            onChangeInput("0.01");
-        }
     };
     return (_jsx("div", { className: cn("border-as-stroke flex w-full flex-col gap-2 rounded-xl", className), children: _jsxs("div", { className: cn("flex items-center justify-between gap-3", innerClassName), children: [!canEditAmount ? (_jsx("h2", { className: cn("text-3xl font-medium text-white", amountClassName), children: inputValue || "--" })) : (_jsx(NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 30, spellCheck: "false", className: cn("placeholder:text-as-primary/70 disabled:text-as-primary/70 text-as-primary w-full bg-transparent text-4xl font-semibold leading-[42px] outline-none sm:text-[30px]", amountClassName), pattern: "^[0-9]*[.,]?[0-9]*$", disabled: disabled, value: inputValue, allowNegative: false, onChange: e => onChangeInput(e.currentTarget.value) }, `input-${token.address}-${chainId}`)), !hideTokenSelect && (_jsx(TokenSelector, { address: address, chainIdsFilter: Object.values(ALL_CHAINS).map(chain => chain.id), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: Object.values(ALL_CHAINS).map(chain => chain.id), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: _jsxs(Button, { variant: "outline", role: "combobox", className: cn("token-selector-button bg-b3-react-background border-as-stroke flex h-auto w-fit shrink-0 items-center justify-center gap-2 rounded-xl border-2 px-2 py-1 pr-2 text-center", tokenSelectClassName), children: [token.metadata.logoURI ? (_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[chainId].logoUrl, tokenUrl: token.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : (_jsx("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), _jsxs("div", { className: "flex flex-col items-start gap-0", children: [_jsx("div", { className: "text-as-primary font-semibold", children: token.symbol }), _jsx("div", { className: "text-as-primary/70 text-xs", children: ALL_CHAINS[chainId].name })] }), _jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) }, `selector-${context}-${token.address}-${chainId}`))] }) }, `${context}-${token.address}-${chainId}`));
 }

package/dist/esm/anyspend/react/components/common/PaySection.js

@@ -39,7 +39,7 @@ export function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, se
     useEffect(() => {
         appliedSrcMetadataRef.current = false;
     }, [selectedSrcToken.address, selectedSrcToken.chainId]);
-    return (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [isConnected ? (_jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? (_jsxs(_Fragment, { children: ["Global Account", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx(OrderTokenAmount, { address: connectedAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
+    return (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [isConnected ? (_jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? (_jsxs(_Fragment, { children: ["Global Account", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx(OrderTokenAmount, { address: connectedAddress, walletAddress: connectedAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
                     setIsSrcInputDirty(true);
                     setSrcAmount(value);
                 }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, {

package/dist/esm/anyspend/react/components/common/TokenBalance.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getNativeRequired } from "../../../../anyspend/utils/chain.js";
 import { isNativeToken } from "../../../../anyspend/utils/token.js";
-import { useTokenBalance } from "../../../../global-account/react/index.js";
+import { useTokenBalanceDirect } from "../../../../global-account/react/index.js";
 import { formatUnits } from "viem";
 export function TokenBalance({ token, walletAddress, onChangeInput, }) {
-    const { rawBalance, formattedBalance, isLoading } = useTokenBalance({
+    const { rawBalance, formattedBalance, isLoading } = useTokenBalanceDirect({
         token,
         address: walletAddress,
     });

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

@@ -2,11 +2,15 @@ export { AnySpend } from "./AnySpend";
 export { AnySpendBondKit } from "./AnySpendBondKit";
 export { AnySpendBuySpin } from "./AnySpendBuySpin";
 export { AnySpendCustom } from "./AnySpendCustom";
+export { AnySpendCustomExactIn } from "./AnySpendCustomExactIn";
 export * from "./AnySpendFingerprintWrapper";
 export { AnySpendNFT } from "./AnySpendNFT";
+export { AnyspendSignatureMint } from "./AnyspendSignatureMint";
 export { AnySpendStakeB3 } from "./AnySpendStakeB3";
+export { AnySpendStakeB3ExactIn } from "./AnySpendStakeB3ExactIn";
+export { AnySpendStakeUpside } from "./AnySpendStakeUpside";
+export { AnySpendStakeUpsideExactIn } from "./AnySpendStakeUpsideExactIn";
 export { AnySpendTournament } from "./AnySpendTournament";
-export { AnyspendSignatureMint } from "./AnyspendSignatureMint";
 export { AnySpendNFTButton } from "./common/AnySpendNFTButton";
 export { ChainTokenIcon } from "./common/ChainTokenIcon";
 export { CryptoPaySection } from "./common/CryptoPaySection";

package/dist/esm/anyspend/react/components/index.js

@@ -3,11 +3,15 @@ export { AnySpend } from "./AnySpend.js";
 export { AnySpendBondKit } from "./AnySpendBondKit.js";
 export { AnySpendBuySpin } from "./AnySpendBuySpin.js";
 export { AnySpendCustom } from "./AnySpendCustom.js";
+export { AnySpendCustomExactIn } from "./AnySpendCustomExactIn.js";
 export * from "./AnySpendFingerprintWrapper.js";
 export { AnySpendNFT } from "./AnySpendNFT.js";
+export { AnyspendSignatureMint } from "./AnyspendSignatureMint.js";
 export { AnySpendStakeB3 } from "./AnySpendStakeB3.js";
+export { AnySpendStakeB3ExactIn } from "./AnySpendStakeB3ExactIn.js";
+export { AnySpendStakeUpside } from "./AnySpendStakeUpside.js";
+export { AnySpendStakeUpsideExactIn } from "./AnySpendStakeUpsideExactIn.js";
 export { AnySpendTournament } from "./AnySpendTournament.js";
-export { AnyspendSignatureMint } from "./AnyspendSignatureMint.js";
 export { AnySpendNFTButton } from "./common/AnySpendNFTButton.js";
 // Common Components
 export { ChainTokenIcon } from "./common/ChainTokenIcon.js";

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

@@ -17,13 +17,16 @@ interface UseAnyspendFlowProps {
     loadOrder?: string;
     isDepositMode?: boolean;
     onOrderSuccess?: (orderId: string) => void;
-    onTransactionSuccess?: (amount?: string) => void;
+    onTransactionSuccess?: (amount: string) => void;
     sourceTokenAddress?: string;
     sourceTokenChainId?: number;
+    destinationTokenAddress?: string;
+    destinationTokenChainId?: number;
     slippage?: number;
     disableUrlParamManagement?: boolean;
+    orderType?: "hype_duel" | "custom_exact_in";
 }
-export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrder, isDepositMode, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, slippage, disableUrlParamManagement, }: UseAnyspendFlowProps): {
+export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrder, isDepositMode, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, destinationTokenAddress, destinationTokenChainId, slippage, disableUrlParamManagement, orderType, }: UseAnyspendFlowProps): {
     activePanel: PanelView;
     setActivePanel: import("react").Dispatch<import("react").SetStateAction<PanelView>>;
     orderId: string | undefined;
@@ -44,7 +47,6 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
     selectedSrcChainId: number;
     setSelectedSrcChainId: import("react").Dispatch<import("react").SetStateAction<number>>;
     selectedDstChainId: number;
-    setSelectedDstChainId: import("react").Dispatch<import("react").SetStateAction<number>>;
     selectedSrcToken: {
         chainId: number;
         address: string;
@@ -65,6 +67,26 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
             logoURI?: string;
         };
     }>>;
+    selectedDstToken: {
+        chainId: number;
+        address: string;
+        symbol: string;
+        name: string;
+        decimals: number;
+        metadata: {
+            logoURI?: string;
+        };
+    };
+    setSelectedDstToken: import("react").Dispatch<import("react").SetStateAction<{
+        chainId: number;
+        address: string;
+        symbol: string;
+        name: string;
+        decimals: number;
+        metadata: {
+            logoURI?: string;
+        };
+    }>>;
     srcAmount: string;
     setSrcAmount: import("react").Dispatch<import("react").SetStateAction<string>>;
     dstAmount: string;

package/dist/esm/anyspend/react/hooks/useAnyspendFlow.js

@@ -10,6 +10,8 @@ import { base, mainnet } from "viem/chains";
 import { useAccount } from "wagmi";
 import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod.js";
 import { FiatPaymentMethod } from "../components/common/FiatPaymentMethod.js";
+import { useAutoSelectCryptoPaymentMethod } from "./useAutoSelectCryptoPaymentMethod.js";
+import { useAutoSetActiveWalletFromWagmi } from "./useAutoSetActiveWalletFromWagmi.js";
 export var PanelView;
 (function (PanelView) {
     PanelView[PanelView["MAIN"] = 0] = "MAIN";
@@ -21,21 +23,25 @@ export var PanelView;
     PanelView[PanelView["POINTS_DETAIL"] = 6] = "POINTS_DETAIL";
     PanelView[PanelView["FEE_DETAIL"] = 7] = "FEE_DETAIL";
 })(PanelView || (PanelView = {}));
-export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder, isDepositMode = false, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, slippage = 0, disableUrlParamManagement = false, }) {
+// This hook serves for order hype_duel and custom_exact_in
+export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder, isDepositMode = false, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, destinationTokenAddress, destinationTokenChainId, slippage = 0, disableUrlParamManagement = false, orderType = "hype_duel", }) {
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
     // Panel and order state
     const [activePanel, setActivePanel] = useState(loadOrder ? PanelView.ORDER_DETAILS : PanelView.MAIN);
     const [orderId, setOrderId] = useState(loadOrder);
     const { orderAndTransactions: oat } = useAnyspendOrderAndTransactions(orderId);
-    // Token selection state - use provided sourceTokenChainId if available
+    // Token selection state - use provided sourceTokenChainId and destinationTokenChainId if available
     const [selectedSrcChainId, setSelectedSrcChainId] = useState(sourceTokenChainId || (paymentType === "fiat" ? base.id : mainnet.id));
-    const [selectedDstChainId, setSelectedDstChainId] = useState(base.id); // Default to Base for cross-chain swaps
     const defaultSrcToken = paymentType === "fiat" ? USDC_BASE : getDefaultToken(selectedSrcChainId);
+    const defaultDstToken = B3_TOKEN; // Default destination token
     const [selectedSrcToken, setSelectedSrcToken] = useState(defaultSrcToken);
+    const [selectedDstToken, setSelectedDstToken] = useState(defaultDstToken);
     const [srcAmount, setSrcAmount] = useState(paymentType === "fiat" ? "5" : "0.1");
     const [dstAmount, setDstAmount] = useState("");
     const [isSrcInputDirty, setIsSrcInputDirty] = useState(true);
+    // Derive destination chain ID from token or prop (cannot change)
+    const selectedDstChainId = destinationTokenChainId || selectedDstToken.chainId;
     // Payment method state
     const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState(CryptoPaymentMethodType.NONE);
     const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState(FiatPaymentMethod.NONE);
@@ -45,6 +51,8 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
     const [selectedRecipientAddress, setSelectedRecipientAddress] = useState(recipientAddress);
     const recipientProfile = useProfile({ address: selectedRecipientAddress, fresh: true });
     const recipientName = recipientProfile.data?.name;
+    // Auto-set active wallet from wagmi
+    useAutoSetActiveWalletFromWagmi();
     // Set default recipient address when wallet changes
     useEffect(() => {
         if (!selectedRecipientAddress && globalAddress) {
@@ -68,17 +76,14 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
             return false;
         }
     }, [rawBalance, srcAmount, selectedSrcToken.decimals, isBalanceLoading, paymentType]);
-    // Auto-set crypto payment method based on balance
-    useEffect(() => {
-        if (paymentType === "crypto" && !isBalanceLoading) {
-            if (hasEnoughBalance) {
-                setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-            }
-            else {
-                setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
-            }
-        }
-    }, [paymentType, hasEnoughBalance, isBalanceLoading]);
+    // Auto-select crypto payment method based on available wallets and balance
+    useAutoSelectCryptoPaymentMethod({
+        paymentType,
+        selectedCryptoPaymentMethod,
+        setSelectedCryptoPaymentMethod,
+        hasEnoughBalance,
+        isBalanceLoading,
+    });
     // Fetch specific token when sourceTokenAddress and sourceTokenChainId are provided
     useEffect(() => {
         const fetchSourceToken = async () => {
@@ -96,6 +101,23 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
         };
         fetchSourceToken();
     }, [sourceTokenAddress, sourceTokenChainId]);
+    // Fetch specific token when destinationTokenAddress and destinationTokenChainId are provided
+    useEffect(() => {
+        const fetchDestinationToken = async () => {
+            if (destinationTokenAddress && destinationTokenChainId) {
+                try {
+                    const token = await anyspendService.getToken(destinationTokenChainId, destinationTokenAddress);
+                    setSelectedDstToken(token);
+                }
+                catch (error) {
+                    console.error("Failed to fetch destination token:", error);
+                    toast.error(`Failed to load token ${destinationTokenAddress} on chain ${destinationTokenChainId}`);
+                    // Keep the default token on error
+                }
+            }
+        };
+        fetchDestinationToken();
+    }, [destinationTokenAddress, destinationTokenChainId]);
     // Helper function for onramp vendor mapping
     const getOnrampVendor = (paymentMethod) => {
         switch (paymentMethod) {
@@ -115,8 +137,8 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
         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: isDepositMode ? B3_TOKEN.address : selectedSrcToken.address, // For deposits, always B3
-        type: "hype_duel",
+        dstTokenAddress: selectedDstToken.address,
+        type: orderType,
         amount: activeInputAmountInWei,
         recipientAddress: selectedRecipientAddress,
         onrampVendor: paymentType === "fiat" ? getOnrampVendor(selectedFiatPaymentMethod) : undefined,
@@ -194,7 +216,7 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
             const formattedActualDstAmount = amount
                 ? formatTokenAmount(BigInt(amount), oat.data.order.metadata.dstToken.decimals)
                 : undefined;
-            onTransactionSuccess?.(formattedActualDstAmount);
+            onTransactionSuccess?.(formattedActualDstAmount ?? "");
         }
     }, [
         oat?.data?.order.status,
@@ -212,10 +234,11 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
         // Token state
         selectedSrcChainId,
         setSelectedSrcChainId,
-        selectedDstChainId,
-        setSelectedDstChainId,
+        selectedDstChainId, // Derived, not stateful
         selectedSrcToken,
         setSelectedSrcToken,
+        selectedDstToken,
+        setSelectedDstToken,
         srcAmount,
         setSrcAmount,
         dstAmount,

package/dist/esm/anyspend/react/hooks/useAnyspendOrderHistory.d.ts

@@ -53,6 +53,35 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
             relay?: Record<string, never>;
         } | null;
         fee?: Omit<import("../..").components["schemas"]["Fee"], "type"> | null;
+    } & {
+        type: "x402_swap";
+        payload: import("../..").components["schemas"]["X402SwapPayload"];
+        metadata: import("../..").components["schemas"]["X402SwapMetadata"];
+    }) | ({
+        id: string;
+        recipientAddress: string;
+        globalAddress: string;
+        srcChain: number;
+        dstChain: number;
+        srcTokenAddress: string;
+        dstTokenAddress: string;
+        srcAmount: string;
+        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executing" | "executed" | "refunding" | "refunded" | "failure";
+        errorDetails: string | null;
+        createdAt: number;
+        expiredAt: number;
+        filledAt: number | null;
+        receivedDepositAt: number | null;
+        creatorAddress: string | null;
+        partnerId: string | null;
+        onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
+        oneClickBuyUrl: string | null;
+        stripePaymentIntentId: string | null;
+        settlement: {
+            actualDstAmount?: string;
+            relay?: Record<string, never>;
+        } | null;
+        fee?: Omit<import("../..").components["schemas"]["Fee"], "type"> | null;
     } & {
         type: "hype_duel";
         payload: import("../..").components["schemas"]["HypeDuelPayload"];
@@ -111,6 +140,35 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
             relay?: Record<string, never>;
         } | null;
         fee?: Omit<import("../..").components["schemas"]["Fee"], "type"> | null;
+    } & {
+        type: "custom_exact_in";
+        payload: import("../..").components["schemas"]["CustomExactInPayload"];
+        metadata: import("../..").components["schemas"]["CustomMetadata"];
+    }) | ({
+        id: string;
+        recipientAddress: string;
+        globalAddress: string;
+        srcChain: number;
+        dstChain: number;
+        srcTokenAddress: string;
+        dstTokenAddress: string;
+        srcAmount: string;
+        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executing" | "executed" | "refunding" | "refunded" | "failure";
+        errorDetails: string | null;
+        createdAt: number;
+        expiredAt: number;
+        filledAt: number | null;
+        receivedDepositAt: number | null;
+        creatorAddress: string | null;
+        partnerId: string | null;
+        onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
+        oneClickBuyUrl: string | null;
+        stripePaymentIntentId: string | null;
+        settlement: {
+            actualDstAmount?: string;
+            relay?: Record<string, never>;
+        } | null;
+        fee?: Omit<import("../..").components["schemas"]["Fee"], "type"> | null;
     } & {
         type: "mint_nft";
         payload: import("../..").components["schemas"]["MintNftPayload"];
@@ -230,6 +288,35 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
             relay?: Record<string, never>;
         } | null;
         fee?: Omit<import("../..").components["schemas"]["Fee"], "type"> | null;
+    } & {
+        type: "x402_swap";
+        payload: import("../..").components["schemas"]["X402SwapPayload"];
+        metadata: import("../..").components["schemas"]["X402SwapMetadata"];
+    }) | ({
+        id: string;
+        recipientAddress: string;
+        globalAddress: string;
+        srcChain: number;
+        dstChain: number;
+        srcTokenAddress: string;
+        dstTokenAddress: string;
+        srcAmount: string;
+        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executing" | "executed" | "refunding" | "refunded" | "failure";
+        errorDetails: string | null;
+        createdAt: number;
+        expiredAt: number;
+        filledAt: number | null;
+        receivedDepositAt: number | null;
+        creatorAddress: string | null;
+        partnerId: string | null;
+        onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
+        oneClickBuyUrl: string | null;
+        stripePaymentIntentId: string | null;
+        settlement: {
+            actualDstAmount?: string;
+            relay?: Record<string, never>;
+        } | null;
+        fee?: Omit<import("../..").components["schemas"]["Fee"], "type"> | null;
     } & {
         type: "hype_duel";
         payload: import("../..").components["schemas"]["HypeDuelPayload"];
@@ -288,6 +375,35 @@ export declare function useAnyspendOrderHistory(creatorAddress: string | undefin
             relay?: Record<string, never>;
         } | null;
         fee?: Omit<import("../..").components["schemas"]["Fee"], "type"> | null;
+    } & {
+        type: "custom_exact_in";
+        payload: import("../..").components["schemas"]["CustomExactInPayload"];
+        metadata: import("../..").components["schemas"]["CustomMetadata"];
+    }) | ({
+        id: string;
+        recipientAddress: string;
+        globalAddress: string;
+        srcChain: number;
+        dstChain: number;
+        srcTokenAddress: string;
+        dstTokenAddress: string;
+        srcAmount: string;
+        status: "scanning_deposit_transaction" | "waiting_stripe_payment" | "expired" | "sending_token_from_vault" | "relay" | "executing" | "executed" | "refunding" | "refunded" | "failure";
+        errorDetails: string | null;
+        createdAt: number;
+        expiredAt: number;
+        filledAt: number | null;
+        receivedDepositAt: number | null;
+        creatorAddress: string | null;
+        partnerId: string | null;
+        onrampMetadata: import("../..").components["schemas"]["OnrampMetadata"] | null;
+        oneClickBuyUrl: string | null;
+        stripePaymentIntentId: string | null;
+        settlement: {
+            actualDstAmount?: string;
+            relay?: Record<string, never>;
+        } | null;
+        fee?: Omit<import("../..").components["schemas"]["Fee"], "type"> | null;
     } & {
         type: "mint_nft";
         payload: import("../..").components["schemas"]["MintNftPayload"];

package/dist/esm/anyspend/react/hooks/useAnyspendQuote.js

@@ -11,7 +11,7 @@ export function useAnyspendQuote(req) {
             req.dstChain &&
             req.srcTokenAddress &&
             req.dstTokenAddress &&
-            BigInt(req.type === "swap" || req.type === "hype_duel"
+            BigInt(req.type === "swap" || req.type === "hype_duel" || req.type === "x402_swap" || req.type === "custom_exact_in"
                 ? req.amount
                 : req.type === "mint_nft"
                     ? req.price

package/dist/esm/anyspend/react/hooks/useAutoSelectCryptoPaymentMethod.d.ts

@@ -0,0 +1,26 @@
+import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
+interface UseAutoSelectCryptoPaymentMethodParams {
+    /** Current payment type (crypto or fiat) */
+    paymentType?: "crypto" | "fiat";
+    /** Currently selected payment method */
+    selectedCryptoPaymentMethod: CryptoPaymentMethodType;
+    /** Function to update the selected payment method */
+    setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
+    /** Whether user has enough balance to pay */
+    hasEnoughBalance: boolean;
+    /** Whether balance is still loading */
+    isBalanceLoading: boolean;
+}
+/**
+ * Custom hook to automatically select appropriate crypto payment method
+ * based on available wallets and balance.
+ *
+ * Auto-selection logic:
+ * - Only auto-selects when payment method is NONE (doesn't override user choices)
+ * - If EOA/Wagmi wallet connected + has balance → CONNECT_WALLET
+ * - If EOA/Wagmi wallet connected + insufficient balance → TRANSFER_CRYPTO
+ * - If only Global wallet available → GLOBAL_WALLET
+ * - If no wallets → remains NONE
+ */
+export declare function useAutoSelectCryptoPaymentMethod({ paymentType, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, hasEnoughBalance, isBalanceLoading, }: UseAutoSelectCryptoPaymentMethodParams): void;
+export {};

package/dist/esm/anyspend/react/hooks/useAutoSelectCryptoPaymentMethod.js

@@ -0,0 +1,53 @@
+import { useEffect } from "react";
+import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod.js";
+import { useConnectedWalletDisplay } from "./useConnectedWalletDisplay.js";
+/**
+ * Custom hook to automatically select appropriate crypto payment method
+ * based on available wallets and balance.
+ *
+ * Auto-selection logic:
+ * - Only auto-selects when payment method is NONE (doesn't override user choices)
+ * - If EOA/Wagmi wallet connected + has balance → CONNECT_WALLET
+ * - If EOA/Wagmi wallet connected + insufficient balance → TRANSFER_CRYPTO
+ * - If only Global wallet available → GLOBAL_WALLET
+ * - If no wallets → remains NONE
+ */
+export function useAutoSelectCryptoPaymentMethod({ paymentType = "crypto", selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, hasEnoughBalance, isBalanceLoading, }) {
+    // Get suggested payment method based on available wallets
+    const { suggestedPaymentMethod } = useConnectedWalletDisplay(selectedCryptoPaymentMethod);
+    useEffect(() => {
+        // Only auto-select when on crypto payment type and payment method is NONE
+        if (paymentType !== "crypto" || selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
+            return;
+        }
+        // If we have a suggested payment method (wallet is connected), use it
+        if (suggestedPaymentMethod !== CryptoPaymentMethodType.NONE) {
+            // If we have balance info and enough balance, use CONNECT_WALLET
+            // Otherwise, default to TRANSFER_CRYPTO if balance is insufficient
+            if (!isBalanceLoading) {
+                if (hasEnoughBalance && suggestedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
+                    setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                }
+                else if (!hasEnoughBalance && suggestedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
+                    // Wallet connected but insufficient balance - suggest transfer
+                    setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
+                }
+                else {
+                    // Use suggested method (e.g., GLOBAL_WALLET)
+                    setSelectedCryptoPaymentMethod(suggestedPaymentMethod);
+                }
+            }
+            else {
+                // Balance still loading, use suggested method
+                setSelectedCryptoPaymentMethod(suggestedPaymentMethod);
+            }
+        }
+    }, [
+        paymentType,
+        selectedCryptoPaymentMethod,
+        suggestedPaymentMethod,
+        hasEnoughBalance,
+        isBalanceLoading,
+        setSelectedCryptoPaymentMethod,
+    ]);
+}

package/dist/esm/anyspend/react/hooks/useAutoSetActiveWalletFromWagmi.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Hook that automatically sets the active thirdweb wallet when a wagmi wallet connects.
+ *
+ * This is useful for syncing wagmi wallet connections with thirdweb's wallet system,
+ * ensuring that when users connect via wagmi, the active wallet is properly set.
+ *
+ * Place this hook in components that stay mounted throughout the user flow
+ * (not in components that unmount during navigation).
+ */
+export declare function useAutoSetActiveWalletFromWagmi(): void;