@b3dotfun/sdk 0.0.62-alpha.2 → 0.0.62-alpha.3

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

@@ -6,6 +6,7 @@ import invariant from "invariant";
 import { motion } from "motion/react";
 import { useEffect, useMemo, useRef } from "react";
 import { toast } from "sonner";
+import { useActiveWallet, useSetActiveWallet } from "thirdweb/react";
 import { base } from "viem/chains";
 import { PanelView, useAnyspendFlow } from "../hooks/useAnyspendFlow.js";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
@@ -17,10 +18,9 @@ import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaym
 import { OrderDetails } from "./common/OrderDetails.js";
 import { PointsDetailPanel } from "./common/PointsDetailPanel.js";
 import { RecipientSelection } from "./common/RecipientSelection.js";
-import { useActiveWallet, useSetActiveWallet } from "thirdweb/react";
 import { ArrowDown, Loader2 } from "lucide-react";
-import { PanelOnramp } from "./common/PanelOnramp.js";
 import { useGlobalWalletState } from "../../utils/index.js";
+import { PanelOnramp } from "./common/PanelOnramp.js";
 const SLIPPAGE_PERCENT = 3;
 export const HYPE_TOKEN_DETAILS = {
     SYMBOL: "HYPE",
@@ -128,10 +128,10 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
             await handleFiatOrder();
         }
     };
-    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsx("div", { children: _jsx("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : (_jsx(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" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: B3_TOKEN, destinationChainId: base.id, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: cn("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: B3_TOKEN, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
+    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsx("div", { children: _jsx("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : (_jsx(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" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: B3_TOKEN, destinationChainId: base.id, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: cn("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: selectedRecipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), setRecipientAddress: setSelectedRecipientAddress, recipientAddressFromProps: recipientAddress, globalAddress: globalAddress, dstAmount: dstAmount, dstToken: B3_TOKEN, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
                                 setIsSrcInputDirty(false);
                                 setSrcAmount(value);
-                            }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL) }))] }) }), _jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && _jsx(Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }) }), mainFooter ? mainFooter : null] }));
+                            }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL), selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }))] }) }), _jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && _jsx(Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }) }), mainFooter ? mainFooter : null] }));
     // Handle crypto order creation
     const handleCryptoOrder = async () => {
         try {

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

@@ -1,21 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useAccountWallet, useProfile, useTokenData } from "../../../../global-account/react/index.js";
+import { useProfile, useTokenData } from "../../../../global-account/react/index.js";
 import { formatUsername } from "../../../../shared/utils/index.js";
 import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
 import { formatDisplayNumber } from "../../../../shared/utils/number.js";
 import { ChevronRight, Info } from "lucide-react";
 import { motion } from "motion/react";
 import { useEffect, useRef } from "react";
+import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay.js";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
 import { OrderTokenAmount } from "./OrderTokenAmount.js";
 import { TokenBalance } from "./TokenBalance.js";
 export function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, isSrcInputDirty, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, onTokenSelect, onShowFeeDetail, }) {
-    const { connectedSmartWallet, connectedEOAWallet } = useAccountWallet();
     const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
-    // Determine which address to use based on payment method
-    const walletAddress = selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
-        ? connectedSmartWallet?.getAccount()?.address
-        : connectedEOAWallet?.getAccount()?.address;
+    // Use custom hook to determine wallet address based on payment method
+    const { walletAddress } = useConnectedWalletDisplay(selectedCryptoPaymentMethod);
     const { data: profileData } = useProfile({ address: walletAddress });
     const connectedName = profileData?.displayName;
     // Add ref to track if we've applied metadata
@@ -42,7 +40,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: [_jsxs("div", { className: "text-as-primary/50 flex h-7 items-center gap-1.5 text-sm", children: ["Pay", !isSrcInputDirty && anyspendQuote?.data?.fee && onShowFeeDetail && (_jsx("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }))] }), _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: [walletAddress ? (_jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(walletAddress || "") })) : ("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: walletAddress, 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: [_jsxs("div", { className: "text-as-primary/50 flex h-7 items-center gap-1.5 text-sm", children: ["Pay", !isSrcInputDirty && anyspendQuote?.data?.fee && onShowFeeDetail && (_jsx("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }))] }), _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: [walletAddress ? (_jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(walletAddress || "") })) : ("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: walletAddress, walletAddress: walletAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
                     setIsSrcInputDirty(true);
                     setSrcAmount(value);
                 }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken, onTokenSelect: onTokenSelect }), _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/CryptoPaymentMethod.js

@@ -13,6 +13,7 @@ import { toast } from "sonner";
 import { useActiveWallet, useSetActiveWallet, useWalletInfo } from "thirdweb/react";
 import { createWallet } from "thirdweb/wallets";
 import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
+import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay.js";
 export var CryptoPaymentMethodType;
 (function (CryptoPaymentMethodType) {
     CryptoPaymentMethodType["NONE"] = "none";
@@ -22,7 +23,7 @@ export var CryptoPaymentMethodType;
 })(CryptoPaymentMethodType || (CryptoPaymentMethodType = {}));
 export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
     const { wallet: globalWallet, 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();
@@ -33,19 +34,8 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
     const setGlobalAccountWallet = useGlobalWalletState(state => state.setGlobalAccountWallet);
     const isConnected = !!connectedEOAWallet;
     const globalAddress = connectedSmartWallet?.getAccount()?.address;
-    // Helper function to check if two addresses are the same
-    const isSameAddress = (addr1, addr2) => {
-        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) => {
         const walletMap = {
@@ -173,9 +163,11 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
                                                     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", selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
+                                                }, className: cn("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"), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-5 w-5 text-blue-600" }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: eoaWalletInfo?.name || connector?.name || "Connected Wallet" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(connectedEOAWallet?.getAccount()?.address || "") })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && (_jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" })), _jsx("button", { onClick: e => {
                                                                         e.stopPropagation();
@@ -195,7 +187,7 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
                                                         }
                                                     }
                                                     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", selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
+                                                }, className: cn("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"), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-5 w-5 text-blue-600" }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: connector?.name || "Connected Wallet" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(address || "") })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && (_jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" })), _jsx("button", { onClick: e => {
                                                                         e.stopPropagation();

package/dist/esm/anyspend/react/components/common/CryptoReceiveSection.d.ts

@@ -1,10 +1,14 @@
 import { components } from "../../../types/api";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 interface CryptoReceiveSectionProps {
     isDepositMode?: boolean;
     isBuyMode?: boolean;
     selectedRecipientAddress?: string;
     recipientName?: string;
     onSelectRecipient: () => void;
+    setRecipientAddress?: (address: string | undefined) => void;
+    recipientAddressFromProps?: string;
+    globalAddress?: string;
     dstAmount: string;
     dstToken: components["schemas"]["Token"];
     selectedDstChainId?: number;
@@ -17,6 +21,7 @@ interface CryptoReceiveSectionProps {
     dstTokenLogoURI?: string;
     onShowPointsDetail?: () => void;
     onShowFeeDetail?: () => void;
+    selectedCryptoPaymentMethod?: CryptoPaymentMethodType;
 }
-export declare function CryptoReceiveSection({ isDepositMode, isBuyMode, selectedRecipientAddress, recipientName, onSelectRecipient, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, isSrcInputDirty, onChangeDstAmount, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, onShowPointsDetail, onShowFeeDetail, }: CryptoReceiveSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function CryptoReceiveSection({ isDepositMode, isBuyMode, selectedRecipientAddress, recipientName, onSelectRecipient, setRecipientAddress, recipientAddressFromProps, globalAddress, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, isSrcInputDirty, onChangeDstAmount, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, onShowPointsDetail, onShowFeeDetail, selectedCryptoPaymentMethod, }: CryptoReceiveSectionProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,11 +5,21 @@ import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
 import { formatDisplayNumber } from "../../../../shared/utils/number.js";
 import { ChevronRight, Info } from "lucide-react";
 import { motion } from "motion/react";
+import { useEffect } from "react";
 import { useFeatureFlags } from "../../contexts/FeatureFlagsContext.js";
+import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay.js";
 import { OrderTokenAmount } from "./OrderTokenAmount.js";
 import { PointsBadge } from "./PointsBadge.js";
-export function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false, selectedRecipientAddress, recipientName, onSelectRecipient, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, isSrcInputDirty, onChangeDstAmount, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, onShowPointsDetail, onShowFeeDetail, }) {
+export function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false, selectedRecipientAddress, recipientName, onSelectRecipient, setRecipientAddress, recipientAddressFromProps, globalAddress, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, isSrcInputDirty, onChangeDstAmount, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, onShowPointsDetail, onShowFeeDetail, selectedCryptoPaymentMethod, }) {
     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 (_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.1, ease: "easeInOut" }, className: "receive-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 w-full items-center justify-between", children: [_jsxs("div", { className: "text-as-primary/50 flex h-7 items-center gap-1.5 text-sm", children: [isDepositMode ? "Deposit" : "Receive", isSrcInputDirty && anyspendQuote?.data?.fee && onShowFeeDetail && (_jsx("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }))] }), selectedRecipientAddress ? (_jsx("button", { className: cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: onSelectRecipient, children: _jsxs(_Fragment, { children: [_jsx("span", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: recipientName ? formatUsername(recipientName) : shortenAddress(selectedRecipientAddress || "") }), _jsx(ChevronRight, { className: "h-4 w-4" })] }) })) : (_jsx("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: onSelectRecipient, children: _jsx("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode || isDepositMode ? (
             // Fixed destination token display for buy mode and deposit mode
             _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), _jsxs("div", { className: "bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3", children: [(dstTokenLogoURI || dstToken.metadata?.logoURI) && (_jsx("img", { src: dstTokenLogoURI || dstToken.metadata?.logoURI, alt: dstTokenSymbol || dstToken.symbol, className: "h-8 w-8 rounded-full" })), _jsx("span", { className: "text-as-brand text-lg font-bold", children: dstTokenSymbol || dstToken.symbol })] })] })) : (

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

@@ -6,18 +6,17 @@ import { useRouter, useSearchParams } from "../../../../shared/react/hooks/index
 import { cn } from "../../../../shared/utils/index.js";
 import centerTruncate from "../../../../shared/utils/centerTruncate.js";
 import { formatTokenAmount } from "../../../../shared/utils/number.js";
-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.js";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./Accordion.js";
 import ConnectWalletPayment from "./ConnectWalletPayment.js";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
@@ -149,6 +148,10 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
     const [showQRCode, setShowQRCode] = useState(false);
     const { isLoading: txLoading, isSuccess: txSuccess } = useWaitForTransactionReceipt({ hash: txHash });
     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)
@@ -204,19 +207,25 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
             setTxHash(txHash);
         }
     }, [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(() => {
         if (disableUrlParamManagement)
@@ -254,16 +263,50 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
             setTxHash(undefined);
         }
     }, [setWaitingForDeposit, txSuccess]);
-    const isPhantomMobile = useMemo(() => navigator.userAgent.includes("Phantom"), []);
-    const isPhantomBrowser = useMemo(() => window.phantom?.solana?.isPhantom, []);
     // Get connected Phantom wallet address if available
-    const phantomWalletAddress = useMemo(() => {
-        const phantom = window.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);
         }
-        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
+    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 _jsx("div", { children: "Loading..." });
     }
@@ -278,138 +321,6 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
     const formattedActualDstAmount = actualDstAmount
         ? formatTokenAmount(BigInt(actualDstAmount), dstToken.decimals)
         : undefined;
-    const { text: statusText, status: statusDisplay } = getStatusDisplay(order);
-    const initiatePhantomTransfer = async (amountLamports, tokenAddress, recipientAddress) => {
-        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.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;
-            // 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?.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));
-                }
-                // 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) {
-            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 (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: order, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount, points: points }), _jsx(Accordion, { type: "single", collapsible: true, className: "order-details-accordion w-full", children: _jsxs(AccordionItem, { value: "refund-details", className: "order-details-refund-item", children: [_jsx(AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), _jsx(AccordionContent, { className: "accordion-content pl-2", children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(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 => (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"

package/dist/esm/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/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,
     });