@b3dotfun/sdk 0.0.62 → 0.0.63-alpha.0

package/dist/cjs/anyspend/react/components/common/OrderDetails.js

@@ -12,8 +12,6 @@ const hooks_1 = require("../../../../shared/react/hooks");
 const utils_1 = require("../../../../shared/utils");
 const centerTruncate_1 = __importDefault(require("../../../../shared/utils/centerTruncate"));
 const number_1 = require("../../../../shared/utils/number");
-const spl_token_1 = require("@solana/spl-token");
-const web3_js_1 = require("@solana/web3.js");
 const react_2 = require("@web3icons/react");
 const lucide_react_1 = require("lucide-react");
 const react_3 = require("motion/react");
@@ -24,6 +22,7 @@ const sonner_1 = require("sonner");
 const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
 const wagmi_1 = require("wagmi");
+const usePhantomTransfer_1 = require("../../hooks/usePhantomTransfer");
 const Accordion_1 = require("./Accordion");
 const ConnectWalletPayment_1 = __importDefault(require("./ConnectWalletPayment"));
 const CryptoPaymentMethod_1 = require("./CryptoPaymentMethod");
@@ -55,6 +54,12 @@ function getOrderSuccessText({ order, tournament, formattedActualDstAmount, form
         case "custom":
             actionText = order.metadata.action || `executed contract`;
             return `Successfully ${actionText}`;
+        case "x402_swap":
+            actionText = `sent ${formattedActualDstAmount || "--"} ${dstToken.symbol}`;
+            return `Successfully ${actionText} to ${recipient}`;
+        case "custom_exact_in":
+            actionText = `executed contract`;
+            return `Successfully ${actionText}`;
         default:
             throw new Error("Invalid order type");
     }
@@ -155,6 +160,10 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
     const [showQRCode, setShowQRCode] = (0, react_4.useState)(false);
     const { isLoading: txLoading, isSuccess: txSuccess } = (0, wagmi_1.useWaitForTransactionReceipt)({ hash: txHash });
     const { switchChainAndExecuteWithEOA, switchChainAndExecute, isSwitchingOrExecuting } = (0, react_1.useUnifiedChainSwitchAndExecute)();
+    // Track if auto-payment was attempted to avoid re-triggering
+    const autoPaymentAttempted = (0, react_4.useRef)(false);
+    // Track if component is ready for auto-payment (all data loaded)
+    const [isComponentReady, setIsComponentReady] = (0, react_4.useState)(false);
     const roundedUpSrcAmount = (0, react_4.useMemo)(() => {
         // Display the full transfer amount without rounding since users need to see the exact value they're transferring.
         // Use 21 significant digits (max allowed by Intl.NumberFormat)
@@ -210,19 +219,25 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
             setTxHash(txHash);
         }
     }, [order, switchChainAndExecuteWithEOA, switchChainAndExecute, depositDeficit, effectiveCryptoPaymentMethod]);
+    // Use Phantom transfer hook for Solana payments
+    const { initiateTransfer: initiatePhantomTransfer, getConnectedAddress: getPhantomAddress } = (0, usePhantomTransfer_1.usePhantomTransfer)();
     // Main payment handler that triggers chain switch and payment
-    const handlePayment = async () => {
+    const handlePayment = (0, react_4.useCallback)(async () => {
         console.log("Initiating payment process. Target chain:", order.srcChain, "Current chain:", walletClient?.chain?.id);
         if (order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID) {
             // Use the existing depositDeficit calculation to determine amount to send
             const amountToSend = depositDeficit > BigInt(0) ? depositDeficit.toString() : order.srcAmount;
-            await initiatePhantomTransfer(amountToSend, order.srcTokenAddress, order.globalAddress);
+            await initiatePhantomTransfer({
+                amountLamports: amountToSend,
+                tokenAddress: order.srcTokenAddress,
+                recipientAddress: order.globalAddress,
+            });
         }
         else {
             // Use unified payment process for both EOA and AA wallets
             await handleUnifiedPaymentProcess();
         }
-    };
+    }, [order, walletClient?.chain?.id, depositDeficit, handleUnifiedPaymentProcess, initiatePhantomTransfer]);
     // When waitingForDeposit is true, we show a message to the user to wait for the deposit to be processed.
     const setWaitingForDeposit = (0, react_4.useCallback)(() => {
         if (disableUrlParamManagement)
@@ -260,16 +275,50 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
             setTxHash(undefined);
         }
     }, [setWaitingForDeposit, txSuccess]);
-    const isPhantomMobile = (0, react_4.useMemo)(() => navigator.userAgent.includes("Phantom"), []);
-    const isPhantomBrowser = (0, react_4.useMemo)(() => window.phantom?.solana?.isPhantom, []);
     // Get connected Phantom wallet address if available
-    const phantomWalletAddress = (0, react_4.useMemo)(() => {
-        const phantom = window.phantom?.solana;
-        if (phantom?.isConnected && phantom?.publicKey) {
-            return phantom.publicKey.toString();
+    const phantomWalletAddress = (0, react_4.useMemo)(() => getPhantomAddress(), [getPhantomAddress]);
+    // Calculate status display before using it
+    const { text: statusText, status: statusDisplay } = (0, anyspend_1.getStatusDisplay)(order);
+    // Memoize the payable state calculation to avoid recalculating on every render
+    const isPayableState = (0, react_4.useMemo)(() => {
+        const waitingForDeposit = new URLSearchParams(window.location.search).get("waitingForDeposit") === "true";
+        return (refundTxs.length === 0 &&
+            !executeTx &&
+            !(relayTxs.length > 0 && relayTxs.every(tx => tx.status === "success")) &&
+            !depositTxs?.length &&
+            !waitingForDeposit &&
+            statusDisplay === "processing" &&
+            !order.onrampMetadata &&
+            (effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ||
+                effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET));
+    }, [
+        refundTxs.length,
+        executeTx,
+        relayTxs,
+        depositTxs?.length,
+        statusDisplay,
+        order.onrampMetadata,
+        effectiveCryptoPaymentMethod,
+    ]);
+    // Mark component as ready once all critical data is available
+    // This ensures we don't trigger payment before the component has fully initialized
+    (0, react_4.useEffect)(() => {
+        if (!isComponentReady && srcToken && dstToken && statusDisplay) {
+            setIsComponentReady(true);
         }
-        return null;
-    }, []);
+    }, [isComponentReady, srcToken, dstToken, statusDisplay]);
+    // Auto-trigger payment when component is ready and order is in payable state
+    // This effect only runs when isPayableState or isComponentReady changes
+    (0, react_4.useEffect)(() => {
+        // Only trigger payment if:
+        // 1. We haven't attempted payment yet
+        // 2. Component is fully ready (all data loaded)
+        // 3. Order is in a payable state
+        if (!autoPaymentAttempted.current && isComponentReady && isPayableState) {
+            autoPaymentAttempted.current = true;
+            handlePayment();
+        }
+    }, [isPayableState, isComponentReady, handlePayment]);
     if (!srcToken || !dstToken) {
         return (0, jsx_runtime_1.jsx)("div", { children: "Loading..." });
     }
@@ -284,138 +333,6 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
     const formattedActualDstAmount = actualDstAmount
         ? (0, number_1.formatTokenAmount)(BigInt(actualDstAmount), dstToken.decimals)
         : undefined;
-    const { text: statusText, status: statusDisplay } = (0, anyspend_1.getStatusDisplay)(order);
-    const initiatePhantomTransfer = async (amountLamports, tokenAddress, recipientAddress) => {
-        try {
-            if (!isPhantomBrowser && !isPhantomMobile) {
-                sonner_1.toast.error("Phantom wallet not installed. Please install Phantom wallet to continue.");
-                return;
-            }
-            // Step 2: Ensure Phantom is connected/unlocked
-            const phantom = window.phantom?.solana;
-            if (!phantom) {
-                sonner_1.toast.error("Phantom wallet not accessible");
-                return;
-            }
-            // Connect and unlock wallet if needed
-            let publicKey;
-            try {
-                const connection = await phantom.connect();
-                publicKey = connection.publicKey;
-            }
-            catch (connectError) {
-                sonner_1.toast.error("Failed to connect to Phantom wallet");
-                return;
-            }
-            // Step 3: Create transaction with priority fees
-            const connection = new web3_js_1.Connection("https://mainnet.helius-rpc.com/?api-key=efafd9b3-1807-4cf8-8aa4-3d984f56d8fb");
-            const fromPubkey = new web3_js_1.PublicKey(publicKey.toString());
-            const toPubkey = new web3_js_1.PublicKey(recipientAddress);
-            const amount = BigInt(amountLamports);
-            // Step 4: Get recent priority fees to determine optimal pricing
-            let priorityFee = 10000; // Default fallback (10,000 micro-lamports)
-            try {
-                const recentFees = await connection.getRecentPrioritizationFees({
-                    lockedWritableAccounts: [fromPubkey],
-                });
-                if (recentFees && recentFees.length > 0) {
-                    // Use 75th percentile of recent fees for good priority
-                    const sortedFees = recentFees.map(fee => fee.prioritizationFee).sort((a, b) => a - b);
-                    const percentile75Index = Math.floor(sortedFees.length * 0.75);
-                    priorityFee = Math.max(sortedFees[percentile75Index] || 10000, 10000);
-                }
-            }
-            catch (feeError) {
-                console.warn("Failed to fetch recent priority fees, using default:", feeError);
-            }
-            let transaction;
-            // Check if this is native SOL transfer
-            if (tokenAddress === "11111111111111111111111111111111") {
-                // Native SOL transfer with priority fees
-                const computeUnitLimit = 1000; // SOL transfer + compute budget instructions need ~600-800 CU
-                const computeUnitPrice = Math.min(priorityFee, 100000); // Cap at 100k micro-lamports for safety
-                transaction = new web3_js_1.Transaction()
-                    .add(
-                // Set compute unit limit first (must come before other instructions)
-                web3_js_1.ComputeBudgetProgram.setComputeUnitLimit({
-                    units: computeUnitLimit,
-                }))
-                    .add(
-                // Set priority fee
-                web3_js_1.ComputeBudgetProgram.setComputeUnitPrice({
-                    microLamports: computeUnitPrice,
-                }))
-                    .add(
-                // Actual transfer instruction
-                web3_js_1.SystemProgram.transfer({
-                    fromPubkey,
-                    toPubkey,
-                    lamports: Number(amount),
-                }));
-                console.log(`Using priority fee: ${computeUnitPrice} micro-lamports per CU, limit: ${computeUnitLimit} CU`);
-            }
-            else {
-                // SPL Token transfer with priority fees
-                const mintPubkey = new web3_js_1.PublicKey(tokenAddress);
-                // Get associated token accounts
-                const fromTokenAccount = (0, spl_token_1.getAssociatedTokenAddressSync)(mintPubkey, fromPubkey);
-                const toTokenAccount = (0, spl_token_1.getAssociatedTokenAddressSync)(mintPubkey, toPubkey);
-                // Check if destination token account exists
-                const toTokenAccountInfo = await connection.getAccountInfo(toTokenAccount);
-                const needsDestinationAccount = !toTokenAccountInfo;
-                // Get mint info to determine decimals
-                const mintInfo = await connection.getParsedAccountInfo(mintPubkey);
-                const decimals = mintInfo.value?.data?.parsed?.info?.decimals || 9;
-                // SPL transfers need more compute units than SOL transfers
-                // Add extra CU if we need to create destination account
-                const computeUnitLimit = needsDestinationAccount ? 40000 : 20000;
-                const computeUnitPrice = Math.min(priorityFee, 100000);
-                // Create transfer instruction
-                const transferInstruction = (0, spl_token_1.createTransferCheckedInstruction)(fromTokenAccount, mintPubkey, toTokenAccount, fromPubkey, Number(amount), decimals);
-                transaction = new web3_js_1.Transaction()
-                    .add(web3_js_1.ComputeBudgetProgram.setComputeUnitLimit({
-                    units: computeUnitLimit,
-                }))
-                    .add(web3_js_1.ComputeBudgetProgram.setComputeUnitPrice({
-                    microLamports: computeUnitPrice,
-                }));
-                // Add create destination account instruction if needed
-                if (needsDestinationAccount) {
-                    transaction.add((0, spl_token_1.createAssociatedTokenAccountInstruction)(fromPubkey, // payer
-                    toTokenAccount, // ata
-                    toPubkey, // owner
-                    mintPubkey));
-                }
-                // Add the transfer instruction
-                transaction.add(transferInstruction);
-                console.log(`SPL Token transfer: ${computeUnitPrice} micro-lamports per CU, limit: ${computeUnitLimit} CU, creating destination: ${needsDestinationAccount}`);
-            }
-            // Step 5: Get latest blockhash and simulate transaction to verify
-            const { blockhash } = await connection.getLatestBlockhash("confirmed");
-            transaction.recentBlockhash = blockhash;
-            transaction.feePayer = fromPubkey;
-            // Step 6: Sign and send transaction with priority fees
-            const signedTransaction = await phantom.signAndSendTransaction(transaction);
-            sonner_1.toast.success(`Transaction successful! Signature: ${signedTransaction.signature}`);
-            console.log("Transaction sent with priority fees. Signature:", signedTransaction.signature);
-        }
-        catch (error) {
-            console.error("Transfer error:", error);
-            const errorMessage = error instanceof Error ? error.message : String(error);
-            if (errorMessage.includes("User rejected")) {
-                sonner_1.toast.error("Transaction was cancelled by user");
-            }
-            else if (errorMessage.includes("insufficient")) {
-                sonner_1.toast.error("Insufficient balance for this transaction");
-            }
-            else if (errorMessage.includes("blockhash not found")) {
-                sonner_1.toast.error("Network congestion detected. Please try again in a moment.");
-            }
-            else {
-                sonner_1.toast.error(`Transfer failed: ${errorMessage}`);
-            }
-        }
-    };
     if (refundTxs.length > 0) {
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), (0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "refund-details", className: "order-details-refund-item", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), (0, jsx_runtime_1.jsx)(Accordion_1.AccordionContent, { className: "accordion-content pl-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_3.motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
                                             ? depositTxs.map(dTx => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
@@ -455,7 +372,7 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
                                             ? depositTxs.map(dTxs => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                     ? `Received payment`
                                                     : `Received ${(0, number_1.formatTokenAmount)(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: false }, dTxs.txHash)))
-                                            : null, relayTxs.map(relayTx => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: "Processed Transaction", chainId: relayTx.chain, isProcessing: false, tx: relayTx, delay: 0.5 }))), order.status === "executing" && ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.type === "swap"
+                                            : null, relayTxs.map(relayTx => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: "Processed Transaction", chainId: relayTx.chain, isProcessing: false, tx: relayTx, delay: 0.5 }))), order.status === "executing" && ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.type === "swap" || order.type === "x402_swap"
                                                 ? "Processing Swap"
                                                 : order.type === "mint_nft"
                                                     ? "Minting NFT"
@@ -465,7 +382,9 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
                                                             ? "Funding Tournament"
                                                             : order.type === "hype_duel"
                                                                 ? "Depositing Hype Duel"
-                                                                : "Processing Bridge", chainId: order.dstChain, isProcessing: true, tx: null, delay: 1 }))] }) })] }) }), order.type === "join_tournament" && order.status === "executed" && ((0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4", children: "Continue to Tournament" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && ((0, jsx_runtime_1.jsx)("button", { className: "order-close-button order-details-close-btn bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
+                                                                : order.type === "custom" || order.type === "custom_exact_in"
+                                                                    ? "Executing Contract"
+                                                                    : "Processing Bridge", chainId: order.dstChain, isProcessing: true, tx: null, delay: 1 }))] }) })] }) }), order.type === "join_tournament" && order.status === "executed" && ((0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4", children: "Continue to Tournament" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && ((0, jsx_runtime_1.jsx)("button", { className: "order-close-button order-details-close-btn bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
     }
     // This boolean indicates that user finish payment, and waiting for the deposit to be confirmed. We get this from query params (waitingForDeposit=true)
     const waitingForDeposit = new URLSearchParams(window.location.search).get("waitingForDeposit") === "true";

package/dist/cjs/anyspend/react/components/common/OrderDetailsCollapsible.js

@@ -23,8 +23,7 @@ exports.OrderDetailsCollapsible = (0, react_3.memo)(function OrderDetailsCollaps
     const expectedDstAmount = order.type === "mint_nft" ||
         order.type === "join_tournament" ||
         order.type === "fund_tournament" ||
-        order.type === "custom" ||
-        order.type === "hype_duel"
+        order.type === "custom"
         ? "0"
         : order.payload.expectedDstAmount.toString();
     const finalFormattedExpectedDstAmount = formattedExpectedDstAmount || (0, number_1.formatTokenAmount)(BigInt(expectedDstAmount), dstToken.decimals);
@@ -36,7 +35,7 @@ exports.OrderDetailsCollapsible = (0, react_3.memo)(function OrderDetailsCollaps
                                         ? "Join tournament"
                                         : order.type === "fund_tournament"
                                             ? "Fund tournament"
-                                            : order.type === "custom"
+                                            : order.type === "custom" || order.type === "custom_exact_in"
                                                 ? order.metadata.action
                                                     ? (0, anyspend_1.capitalizeFirstLetter)(order.metadata.action)
                                                     : "Contract execution"

package/dist/cjs/anyspend/react/components/common/OrderTokenAmount.d.ts

@@ -1,5 +1,5 @@
 import { components } from "../../../../anyspend/types/api";
-export declare function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect, canEditAmount, className, innerClassName, amountClassName, tokenSelectClassName, onTokenSelect, }: {
+export declare function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect, canEditAmount, className, innerClassName, amountClassName, tokenSelectClassName, onTokenSelect, walletAddress, }: {
     disabled?: boolean;
     inputValue: string;
     onChangeInput: (value: string) => void;
@@ -18,4 +18,5 @@ export declare function OrderTokenAmount({ disabled, inputValue, onChangeInput,
     onTokenSelect?: (token: components["schemas"]["Token"], event: {
         preventDefault: () => void;
     }) => void;
+    walletAddress?: string | undefined;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -6,27 +6,55 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const react_1 = require("react");
 const react_number_format_1 = require("react-number-format");
+const viem_1 = require("viem");
 const anyspend_1 = require("../../../../anyspend");
+const chain_1 = require("../../../../anyspend/utils/chain");
+const token_1 = require("../../../../anyspend/utils/token");
 const react_2 = require("../../../../global-account/react");
 const utils_1 = require("../../../../shared/utils");
 const relay_kit_ui_1 = require("@relayprotocol/relay-kit-ui");
 const ChainTokenIcon_1 = require("./ChainTokenIcon");
-function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect = false, canEditAmount = true, className, innerClassName, amountClassName, tokenSelectClassName, onTokenSelect, }) {
+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 = (0, react_1.useRef)(token.address);
+    // Track if initial balance has been set
+    const initialBalanceSetRef = (0, react_1.useRef)(false);
+    // Only get token balance when context is "from" (for setting max amount)
+    const { rawBalance } = (0, react_2.useTokenBalance)({
+        token,
+        address: context === "from" && walletAddress ? walletAddress : undefined,
+    });
+    // Reset balance ref when token address or chain changes
     (0, react_1.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]);
+    (0, react_1.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 ((0, token_1.isNativeToken)(token.address)) {
+                const gasReserve = (0, chain_1.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((0, viem_1.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,
@@ -53,12 +81,8 @@ function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, addres
         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 ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("border-as-stroke flex w-full flex-col gap-2 rounded-xl", className), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center justify-between gap-3", innerClassName), children: [!canEditAmount ? ((0, jsx_runtime_1.jsx)("h2", { className: (0, utils_1.cn)("text-3xl font-medium text-white", amountClassName), children: inputValue || "--" })) : ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 30, spellCheck: "false", className: (0, utils_1.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 && ((0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { address: address, chainIdsFilter: Object.values(anyspend_1.ALL_CHAINS).map(chain => chain.id), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: Object.values(anyspend_1.ALL_CHAINS).map(chain => chain.id), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: (0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "outline", role: "combobox", className: (0, utils_1.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 ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[chainId].logoUrl, tokenUrl: token.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: token.symbol }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/70 text-xs", children: anyspend_1.ALL_CHAINS[chainId].name })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) }, `selector-${context}-${token.address}-${chainId}`))] }) }, `${context}-${token.address}-${chainId}`));
 }

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

@@ -42,7 +42,7 @@ function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedS
     (0, react_3.useEffect)(() => {
         appliedSrcMetadataRef.current = false;
     }, [selectedSrcToken.address, selectedSrcToken.chainId]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isConnected ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(connectedAddress || "") })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Global Account", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transfer crypto", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: connectedAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isConnected ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(connectedAddress || "") })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Global Account", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transfer crypto", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: connectedAddress, walletAddress: connectedAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
                     setIsSrcInputDirty(true);
                     setSrcAmount(value);
                 }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: (0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyIn?.amountUsd, {

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

@@ -7,7 +7,7 @@ const token_1 = require("../../../../anyspend/utils/token");
 const react_1 = require("../../../../global-account/react");
 const viem_1 = require("viem");
 function TokenBalance({ token, walletAddress, onChangeInput, }) {
-    const { rawBalance, formattedBalance, isLoading } = (0, react_1.useTokenBalance)({
+    const { rawBalance, formattedBalance, isLoading } = (0, react_1.useTokenBalanceDirect)({
         token,
         address: walletAddress,
     });

package/dist/cjs/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/cjs/anyspend/react/components/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebviewOnrampPayment = exports.WebviewOnrampOrderStatus = exports.TransferCryptoDetails = exports.TokenBalance = exports.StepProgress = exports.RecipientSelection = exports.OrderTokenAmount = exports.OrderToken = exports.OrderStatus = exports.OrderHistoryItem = exports.OrderHistory = exports.OrderDetailsCollapsible = exports.OrderDetails = exports.CryptoReceiveSection = exports.CryptoPaySection = exports.ChainTokenIcon = exports.AnySpendNFTButton = exports.AnyspendSignatureMint = exports.AnySpendTournament = exports.AnySpendStakeB3 = exports.AnySpendNFT = exports.AnySpendCustom = exports.AnySpendBuySpin = exports.AnySpendBondKit = exports.AnySpend = void 0;
+exports.WebviewOnrampPayment = exports.WebviewOnrampOrderStatus = exports.TransferCryptoDetails = exports.TokenBalance = exports.StepProgress = exports.RecipientSelection = exports.OrderTokenAmount = exports.OrderToken = exports.OrderStatus = exports.OrderHistoryItem = exports.OrderHistory = exports.OrderDetailsCollapsible = exports.OrderDetails = exports.CryptoReceiveSection = exports.CryptoPaySection = exports.ChainTokenIcon = exports.AnySpendNFTButton = exports.AnySpendTournament = exports.AnySpendStakeUpsideExactIn = exports.AnySpendStakeUpside = exports.AnySpendStakeB3ExactIn = exports.AnySpendStakeB3 = exports.AnyspendSignatureMint = exports.AnySpendNFT = exports.AnySpendCustomExactIn = exports.AnySpendCustom = exports.AnySpendBuySpin = exports.AnySpendBondKit = exports.AnySpend = void 0;
 // Components
 var AnySpend_1 = require("./AnySpend");
 Object.defineProperty(exports, "AnySpend", { enumerable: true, get: function () { return AnySpend_1.AnySpend; } });
@@ -24,15 +24,23 @@ var AnySpendBuySpin_1 = require("./AnySpendBuySpin");
 Object.defineProperty(exports, "AnySpendBuySpin", { enumerable: true, get: function () { return AnySpendBuySpin_1.AnySpendBuySpin; } });
 var AnySpendCustom_1 = require("./AnySpendCustom");
 Object.defineProperty(exports, "AnySpendCustom", { enumerable: true, get: function () { return AnySpendCustom_1.AnySpendCustom; } });
+var AnySpendCustomExactIn_1 = require("./AnySpendCustomExactIn");
+Object.defineProperty(exports, "AnySpendCustomExactIn", { enumerable: true, get: function () { return AnySpendCustomExactIn_1.AnySpendCustomExactIn; } });
 __exportStar(require("./AnySpendFingerprintWrapper"), exports);
 var AnySpendNFT_1 = require("./AnySpendNFT");
 Object.defineProperty(exports, "AnySpendNFT", { enumerable: true, get: function () { return AnySpendNFT_1.AnySpendNFT; } });
+var AnyspendSignatureMint_1 = require("./AnyspendSignatureMint");
+Object.defineProperty(exports, "AnyspendSignatureMint", { enumerable: true, get: function () { return AnyspendSignatureMint_1.AnyspendSignatureMint; } });
 var AnySpendStakeB3_1 = require("./AnySpendStakeB3");
 Object.defineProperty(exports, "AnySpendStakeB3", { enumerable: true, get: function () { return AnySpendStakeB3_1.AnySpendStakeB3; } });
+var AnySpendStakeB3ExactIn_1 = require("./AnySpendStakeB3ExactIn");
+Object.defineProperty(exports, "AnySpendStakeB3ExactIn", { enumerable: true, get: function () { return AnySpendStakeB3ExactIn_1.AnySpendStakeB3ExactIn; } });
+var AnySpendStakeUpside_1 = require("./AnySpendStakeUpside");
+Object.defineProperty(exports, "AnySpendStakeUpside", { enumerable: true, get: function () { return AnySpendStakeUpside_1.AnySpendStakeUpside; } });
+var AnySpendStakeUpsideExactIn_1 = require("./AnySpendStakeUpsideExactIn");
+Object.defineProperty(exports, "AnySpendStakeUpsideExactIn", { enumerable: true, get: function () { return AnySpendStakeUpsideExactIn_1.AnySpendStakeUpsideExactIn; } });
 var AnySpendTournament_1 = require("./AnySpendTournament");
 Object.defineProperty(exports, "AnySpendTournament", { enumerable: true, get: function () { return AnySpendTournament_1.AnySpendTournament; } });
-var AnyspendSignatureMint_1 = require("./AnyspendSignatureMint");
-Object.defineProperty(exports, "AnyspendSignatureMint", { enumerable: true, get: function () { return AnyspendSignatureMint_1.AnyspendSignatureMint; } });
 var AnySpendNFTButton_1 = require("./common/AnySpendNFTButton");
 Object.defineProperty(exports, "AnySpendNFTButton", { enumerable: true, get: function () { return AnySpendNFTButton_1.AnySpendNFTButton; } });
 // Common Components

package/dist/cjs/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;