@b3dotfun/sdk 0.0.62 → 0.0.63-alpha.1

package/src/anyspend/react/components/common/CryptoPaymentMethod.tsx

@@ -13,6 +13,7 @@ import { toast } from "sonner";
 import { useActiveWallet, useSetActiveWallet, useWalletInfo } from "thirdweb/react";
 import { WalletId, createWallet } from "thirdweb/wallets";
 import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
+import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay";
 
 export enum CryptoPaymentMethodType {
   NONE = "none",
@@ -47,7 +48,7 @@ export function CryptoPaymentMethod({
     connectedEOAWallet: connectedEOAWallet,
     connectedSmartWallet: connectedSmartWallet,
   } = useAccountWallet();
-  const { connector, address, isConnected: wagmiWalletIsConnected } = useAccount();
+  const { connector, address } = useAccount();
   const { connect, connectors, isPending } = useConnect();
   const { disconnect } = useDisconnect();
   const { data: walletClient } = useWalletClient();
@@ -61,20 +62,8 @@ export function CryptoPaymentMethod({
   const isConnected = !!connectedEOAWallet;
   const globalAddress = connectedSmartWallet?.getAccount()?.address;
 
-  // Helper function to check if two addresses are the same
-  const isSameAddress = (addr1?: string, addr2?: string): boolean => {
-    if (!addr1 || !addr2) return false;
-    return addr1.toLowerCase() === addr2.toLowerCase();
-  };
-
-  // Check if connectedEOAWallet and wagmi wallet represent the same wallet
-  const connectedEOAAddress = connectedEOAWallet?.getAccount()?.address;
-  const wagmiAddress = address;
-  const isWalletDuplicated = isSameAddress(connectedEOAAddress, wagmiAddress);
-
-  // Determine which wallet to show (prefer connectedEOAWallet if both exist and are the same)
-  const shouldShowConnectedEOA = !!connectedEOAWallet;
-  const shouldShowWagmiWallet = wagmiWalletIsConnected && (!isWalletDuplicated || !connectedEOAWallet);
+  // Use custom hook to determine wallet display logic
+  const { shouldShowConnectedEOA, shouldShowWagmiWallet } = useConnectedWalletDisplay(selectedPaymentMethod);
 
   // Map wagmi connector names to thirdweb wallet IDs
   const getThirdwebWalletId = (connectorName: string): WalletId | null => {
@@ -237,11 +226,13 @@ export function CryptoPaymentMethod({
                       setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                       onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                       setGlobalAccountWallet(activeWallet);
-                      setActiveWallet(connectedEOAWallet);
+                      if (connectedEOAWallet) {
+                        setActiveWallet(connectedEOAWallet);
+                      }
                       toast.success(`Selected ${eoaWalletInfo?.name || connector?.name || "wallet"}`);
                     }}
                     className={cn(
-                      "crypto-payment-method-connect-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md",
+                      "crypto-payment-method-connect-wallet eoa-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md",
                       selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
                         ? "connected-wallet border-as-brand bg-as-brand/5"
                         : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80",
@@ -300,7 +291,7 @@ export function CryptoPaymentMethod({
                       toast.success(`Selected ${connector?.name || "wallet"}`);
                     }}
                     className={cn(
-                      "crypto-payment-method-connect-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md",
+                      "crypto-payment-method-connect-wallet wagmi-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md",
                       selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
                         ? "connected-wallet border-as-brand bg-as-brand/5"
                         : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80",

package/src/anyspend/react/components/common/CryptoReceiveSection.tsx

@@ -4,8 +4,11 @@ import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
 import { ChevronRight, Info } from "lucide-react";
 import { motion } from "motion/react";
+import { useEffect } from "react";
 import { components } from "../../../types/api";
 import { useFeatureFlags } from "../../contexts/FeatureFlagsContext";
+import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { OrderTokenAmount } from "./OrderTokenAmount";
 import { PointsBadge } from "./PointsBadge";
 
@@ -16,6 +19,9 @@ interface CryptoReceiveSectionProps {
   selectedRecipientAddress?: string;
   recipientName?: string;
   onSelectRecipient: () => void;
+  setRecipientAddress?: (address: string | undefined) => void;
+  recipientAddressFromProps?: string;
+  globalAddress?: string;
   // Token data
   dstAmount: string;
   dstToken: components["schemas"]["Token"];
@@ -34,6 +40,8 @@ interface CryptoReceiveSectionProps {
   onShowPointsDetail?: () => void;
   // Fee detail navigation
   onShowFeeDetail?: () => void;
+  // Payment method for wallet tracking
+  selectedCryptoPaymentMethod?: CryptoPaymentMethodType;
 }
 
 export function CryptoReceiveSection({
@@ -42,6 +50,9 @@ export function CryptoReceiveSection({
   selectedRecipientAddress,
   recipientName,
   onSelectRecipient,
+  setRecipientAddress,
+  recipientAddressFromProps,
+  globalAddress,
   dstAmount,
   dstToken,
   selectedDstChainId,
@@ -54,9 +65,20 @@ export function CryptoReceiveSection({
   dstTokenLogoURI,
   onShowPointsDetail,
   onShowFeeDetail,
+  selectedCryptoPaymentMethod,
 }: CryptoReceiveSectionProps) {
   const featureFlags = useFeatureFlags();
 
+  // Get wallet address based on selected payment method
+  const { walletAddress } = useConnectedWalletDisplay(selectedCryptoPaymentMethod);
+
+  // Set default recipient address when wallet changes
+  useEffect(() => {
+    if (setRecipientAddress) {
+      setRecipientAddress(recipientAddressFromProps || walletAddress || globalAddress);
+    }
+  }, [recipientAddressFromProps, walletAddress, globalAddress, setRecipientAddress]);
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}

package/src/anyspend/react/components/common/OrderDetails.tsx

@@ -31,22 +31,17 @@ import { cn } from "@b3dotfun/sdk/shared/utils";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 
-import {
-  createAssociatedTokenAccountInstruction,
-  createTransferCheckedInstruction,
-  getAssociatedTokenAddressSync,
-} from "@solana/spl-token";
-import { ComputeBudgetProgram, Connection, PublicKey, SystemProgram, Transaction } from "@solana/web3.js";
 import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletTrust, WalletWalletConnect } from "@web3icons/react";
 import { CheckIcon, ChevronRight, Copy, ExternalLink, Home, Loader2, RefreshCcw } from "lucide-react";
 import { motion } from "motion/react";
 import { QRCodeSVG } from "qrcode.react";
-import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import TimeAgo from "react-timeago";
 import { toast } from "sonner";
 import { encodeFunctionData, erc20Abi } from "viem";
 import { b3 } from "viem/chains";
 import { useWaitForTransactionReceipt, useWalletClient } from "wagmi";
+import { usePhantomTransfer } from "../../hooks/usePhantomTransfer";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./Accordion";
 import ConnectWalletPayment from "./ConnectWalletPayment";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
@@ -111,6 +106,12 @@ function getOrderSuccessText({
     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");
   }
@@ -250,6 +251,11 @@ export const OrderDetails = memo(function OrderDetails({
   const { switchChainAndExecuteWithEOA, switchChainAndExecute, isSwitchingOrExecuting } =
     useUnifiedChainSwitchAndExecute();
 
+  // Track if auto-payment was attempted to avoid re-triggering
+  const autoPaymentAttempted = useRef(false);
+  // Track if component is ready for auto-payment (all data loaded)
+  const [isComponentReady, setIsComponentReady] = useState(false);
+
   const roundedUpSrcAmount = 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)
@@ -314,18 +320,25 @@ export const OrderDetails = memo(function OrderDetails({
     }
   }, [order, switchChainAndExecuteWithEOA, switchChainAndExecute, depositDeficit, effectiveCryptoPaymentMethod]);
 
+  // Use Phantom transfer hook for Solana payments
+  const { initiateTransfer: initiatePhantomTransfer, getConnectedAddress: getPhantomAddress } = usePhantomTransfer();
+
   // Main payment handler that triggers chain switch and payment
-  const handlePayment = async () => {
+  const handlePayment = useCallback(async () => {
     console.log("Initiating payment process. Target chain:", order.srcChain, "Current chain:", walletClient?.chain?.id);
     if (order.srcChain === 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 = useCallback(() => {
@@ -368,17 +381,57 @@ export const OrderDetails = memo(function OrderDetails({
     }
   }, [setWaitingForDeposit, txSuccess]);
 
-  const isPhantomMobile = useMemo(() => navigator.userAgent.includes("Phantom"), []);
-  const isPhantomBrowser = useMemo(() => (window as any).phantom?.solana?.isPhantom, []);
-
   // Get connected Phantom wallet address if available
-  const phantomWalletAddress = useMemo(() => {
-    const phantom = (window as any).phantom?.solana;
-    if (phantom?.isConnected && phantom?.publicKey) {
-      return phantom.publicKey.toString();
+  const phantomWalletAddress = useMemo(() => getPhantomAddress(), [getPhantomAddress]);
+
+  // Calculate status display before using it
+  const { text: statusText, status: statusDisplay } = getStatusDisplay(order);
+
+  // Memoize the payable state calculation to avoid recalculating on every render
+  const isPayableState = 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 === CryptoPaymentMethodType.CONNECT_WALLET ||
+        effectiveCryptoPaymentMethod === 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
+  useEffect(() => {
+    if (!isComponentReady && srcToken && dstToken && statusDisplay) {
+      setIsComponentReady(true);
+    }
+  }, [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
+  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();
     }
-    return null;
-  }, []);
+  }, [isPayableState, isComponentReady, handlePayment]);
 
   if (!srcToken || !dstToken) {
     return <div>Loading...</div>;
@@ -398,175 +451,6 @@ export const OrderDetails = memo(function OrderDetails({
     ? formatTokenAmount(BigInt(actualDstAmount), dstToken.decimals)
     : undefined;
 
-  const { text: statusText, status: statusDisplay } = getStatusDisplay(order);
-
-  const initiatePhantomTransfer = async (amountLamports: string, tokenAddress: string, recipientAddress: string) => {
-    try {
-      if (!isPhantomBrowser && !isPhantomMobile) {
-        toast.error("Phantom wallet not installed. Please install Phantom wallet to continue.");
-        return;
-      }
-
-      // Step 2: Ensure Phantom is connected/unlocked
-      const phantom = (window as any).phantom?.solana;
-      if (!phantom) {
-        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) {
-        toast.error("Failed to connect to Phantom wallet");
-        return;
-      }
-
-      // Step 3: Create transaction with priority fees
-      const connection = new Connection("https://mainnet.helius-rpc.com/?api-key=efafd9b3-1807-4cf8-8aa4-3d984f56d8fb");
-
-      const fromPubkey = new PublicKey(publicKey.toString());
-      const toPubkey = new 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: any;
-
-      // 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 Transaction()
-          .add(
-            // Set compute unit limit first (must come before other instructions)
-            ComputeBudgetProgram.setComputeUnitLimit({
-              units: computeUnitLimit,
-            }),
-          )
-          .add(
-            // Set priority fee
-            ComputeBudgetProgram.setComputeUnitPrice({
-              microLamports: computeUnitPrice,
-            }),
-          )
-          .add(
-            // Actual transfer instruction
-            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 PublicKey(tokenAddress);
-
-        // Get associated token accounts
-        const fromTokenAccount = getAssociatedTokenAddressSync(mintPubkey, fromPubkey);
-        const toTokenAccount = 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 as any)?.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 = createTransferCheckedInstruction(
-          fromTokenAccount,
-          mintPubkey,
-          toTokenAccount,
-          fromPubkey,
-          Number(amount),
-          decimals,
-        );
-
-        transaction = new Transaction()
-          .add(
-            ComputeBudgetProgram.setComputeUnitLimit({
-              units: computeUnitLimit,
-            }),
-          )
-          .add(
-            ComputeBudgetProgram.setComputeUnitPrice({
-              microLamports: computeUnitPrice,
-            }),
-          );
-
-        // Add create destination account instruction if needed
-        if (needsDestinationAccount) {
-          transaction.add(
-            createAssociatedTokenAccountInstruction(
-              fromPubkey, // payer
-              toTokenAccount, // ata
-              toPubkey, // owner
-              mintPubkey, // mint
-            ),
-          );
-        }
-
-        // 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);
-
-      toast.success(`Transaction successful! Signature: ${signedTransaction.signature}`);
-      console.log("Transaction sent with priority fees. Signature:", signedTransaction.signature);
-    } catch (error: unknown) {
-      console.error("Transfer error:", error);
-      const errorMessage = error instanceof Error ? error.message : String(error);
-      if (errorMessage.includes("User rejected")) {
-        toast.error("Transaction was cancelled by user");
-      } else if (errorMessage.includes("insufficient")) {
-        toast.error("Insufficient balance for this transaction");
-      } else if (errorMessage.includes("blockhash not found")) {
-        toast.error("Network congestion detected. Please try again in a moment.");
-      } else {
-        toast.error(`Transfer failed: ${errorMessage}`);
-      }
-    }
-  };
-
   if (refundTxs.length > 0) {
     return (
       <>
@@ -827,7 +711,7 @@ export const OrderDetails = memo(function OrderDetails({
                 {order.status === "executing" && (
                   <TransactionDetails
                     title={
-                      order.type === "swap"
+                      order.type === "swap" || order.type === "x402_swap"
                         ? "Processing Swap"
                         : order.type === "mint_nft"
                           ? "Minting NFT"
@@ -837,7 +721,9 @@ export const OrderDetails = memo(function OrderDetails({
                               ? "Funding Tournament"
                               : order.type === "hype_duel"
                                 ? "Depositing Hype Duel"
-                                : "Processing Bridge"
+                                : order.type === "custom" || order.type === "custom_exact_in"
+                                  ? "Executing Contract"
+                                  : "Processing Bridge"
                     }
                     chainId={order.dstChain}
                     isProcessing={true}

package/src/anyspend/react/components/common/OrderDetailsCollapsible.tsx

@@ -50,8 +50,7 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
     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();
 
@@ -104,7 +103,7 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
                     ? "Join tournament"
                     : order.type === "fund_tournament"
                       ? "Fund tournament"
-                      : order.type === "custom"
+                      : order.type === "custom" || order.type === "custom_exact_in"
                         ? order.metadata.action
                           ? capitalizeFirstLetter(order.metadata.action)
                           : "Contract execution"

package/src/anyspend/react/components/common/OrderTokenAmount.tsx

@@ -3,10 +3,13 @@
 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 "@b3dotfun/sdk/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
-import { Button } from "@b3dotfun/sdk/global-account/react";
+import { getNativeRequired } from "@b3dotfun/sdk/anyspend/utils/chain";
+import { isNativeToken } from "@b3dotfun/sdk/anyspend/utils/token";
+import { Button, useTokenBalance } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import { TokenSelector } from "@relayprotocol/relay-kit-ui";
 import { ChainTokenIcon } from "./ChainTokenIcon";
@@ -28,6 +31,7 @@ export function OrderTokenAmount({
   amountClassName,
   tokenSelectClassName,
   onTokenSelect,
+  walletAddress,
 }: {
   disabled?: boolean;
   inputValue: string;
@@ -45,25 +49,57 @@ export function OrderTokenAmount({
   amountClassName?: string;
   tokenSelectClassName?: string;
   onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
+  walletAddress?: string | undefined;
 }) {
   // Track previous token to detect changes
   const prevTokenRef = useRef<string>(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(() => {
+    initialBalanceSetRef.current = false;
+  }, [token.address, token.chainId]);
 
   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");
+    // 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: bigint;
+
+      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: any) => {
     const token: components["schemas"]["Token"] = {
@@ -97,13 +133,8 @@ export function OrderTokenAmount({
     // 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 (

package/src/anyspend/react/components/common/PaySection.tsx

@@ -116,6 +116,7 @@ export function CryptoPaySection({
       </div>
       <OrderTokenAmount
         address={connectedAddress}
+        walletAddress={connectedAddress}
         context="from"
         inputValue={srcAmount}
         onChangeInput={value => {

package/src/anyspend/react/components/common/TokenBalance.tsx

@@ -1,7 +1,7 @@
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { getNativeRequired } from "@b3dotfun/sdk/anyspend/utils/chain";
 import { isNativeToken } from "@b3dotfun/sdk/anyspend/utils/token";
-import { useTokenBalance } from "@b3dotfun/sdk/global-account/react";
+import { useTokenBalanceDirect } from "@b3dotfun/sdk/global-account/react";
 import { formatUnits } from "viem";
 
 export function TokenBalance({
@@ -13,7 +13,7 @@ export function TokenBalance({
   walletAddress: string | undefined;
   onChangeInput: (value: string) => void;
 }) {
-  const { rawBalance, formattedBalance, isLoading } = useTokenBalance({
+  const { rawBalance, formattedBalance, isLoading } = useTokenBalanceDirect({
     token,
     address: walletAddress,
   });

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

@@ -3,11 +3,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";
 
 // Common Components