@b3dotfun/sdk 0.0.67 → 0.0.68-alpha.0

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

@@ -14,7 +14,9 @@ import { parseUnits } from "viem";
 import { base, mainnet } from "viem/chains";
 import { useAutoSelectCryptoPaymentMethod } from "../hooks/useAutoSelectCryptoPaymentMethod.js";
 import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi.js";
+import { useConnectedWalletDisplay } from "../hooks/useConnectedWalletDisplay.js";
 import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodState.js";
+import { useRecipientAddressState } from "../hooks/useRecipientAddressState.js";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
 import { CryptoPaySection } from "./common/CryptoPaySection.js";
@@ -304,13 +306,22 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     //       : isAddress(newRecipientAddress) || (resolvedAddress && isAddress(resolvedAddress)),
     //   [selectedDstChainId, newRecipientAddress, resolvedAddress]
     // );
-    // State for recipient selection
-    const [recipientAddress, setRecipientAddress] = useState();
     const { address: globalAddress, wallet: globalWallet, connectedEOAWallet } = useAccountWallet();
-    const recipientProfile = useProfile({ address: recipientAddress, fresh: true });
-    const recipientName = recipientProfile.data?.name;
     // Auto-set active wallet from wagmi
     useAutoSetActiveWalletFromWagmi();
+    // Get wallet address based on selected payment method
+    const { walletAddress } = useConnectedWalletDisplay(effectiveCryptoPaymentMethod);
+    // Recipient address state with dual-state system (auto + explicit user selection)
+    // The hook automatically manages priority: props > user selection > wallet/global
+    const { setSelectedRecipientAddress, effectiveRecipientAddress,
+    // resetRecipientAddress, // Not used yet, but available for future use
+     } = useRecipientAddressState({
+        recipientAddressFromProps,
+        walletAddress,
+        globalAddress,
+    });
+    const recipientProfile = useProfile({ address: effectiveRecipientAddress, fresh: true });
+    const recipientName = recipientProfile.data?.name;
     // Check token balance for crypto payments
     const { rawBalance, isLoading: isBalanceLoading } = useTokenBalanceDirect({
         token: selectedSrcToken,
@@ -368,7 +379,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             type: "swap",
             tradeType: isSrcInputDirty ? "EXACT_INPUT" : "EXACT_OUTPUT",
             amount: activeInputAmountInWei,
-            recipientAddress,
+            recipientAddress: effectiveRecipientAddress,
         }
         : {
             srcChain: base.id,
@@ -378,7 +389,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             type: "swap",
             tradeType: "EXACT_INPUT",
             amount: srcAmountOnrampInWei,
-            recipientAddress,
+            recipientAddress: effectiveRecipientAddress,
             onrampVendor: getOnrampVendor(selectedFiatPaymentMethod),
         });
     // Load custom recipients from local storage on mount
@@ -394,8 +405,8 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                 // Add custom recipients based on local storage
                 setCustomRecipients(parsedRecipients);
                 // If no wallet is connected and no recipient is selected, select the first recipient
-                if (!globalAddress && !recipientAddress && parsedRecipients.length > 0) {
-                    setRecipientAddress(parsedRecipients[0].address);
+                if (!globalAddress && !effectiveRecipientAddress && parsedRecipients.length > 0) {
+                    setSelectedRecipientAddress(parsedRecipients[0].address);
                 }
             }
         }
@@ -403,7 +414,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             console.error("Error loading recipients from local storage:", err);
         }
         // Only run this effect once on mount
-    }, [globalAddress, recipientAddress, customRecipients.length]);
+    }, [globalAddress, effectiveRecipientAddress, customRecipients.length, setSelectedRecipientAddress]);
     // Update dependent amount when relay price changes
     useEffect(() => {
         if (anyspendQuote?.data &&
@@ -506,7 +517,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             return { text: "No quote found", disable: true, error: false, loading: false };
         if (activeTab === "fiat") {
             // For fiat: check recipient first, then payment method
-            if (!recipientAddress)
+            if (!effectiveRecipientAddress)
                 return { text: "Select recipient", disable: false, error: false, loading: false };
             // If no fiat payment method selected, show "Select payment method"
             if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
@@ -522,7 +533,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                 return { text: "Choose payment method", disable: false, error: false, loading: false };
             }
             // Check recipient after payment method
-            if (!recipientAddress)
+            if (!effectiveRecipientAddress)
                 return { text: "Select recipient", disable: false, error: false, loading: false };
             // If payment method selected, show appropriate action
             if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
@@ -538,7 +549,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         activeInputAmountInWei,
         isSameChainSameToken,
         isLoadingAnyspendQuote,
-        recipientAddress,
+        effectiveRecipientAddress,
         isCreatingOrder,
         isCreatingOnrampOrder,
         anyspendQuote,
@@ -554,11 +565,11 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             invariant(anyspendQuote, "Relay price is not found");
             if (activeTab === "fiat") {
                 // For fiat: check recipient first
-                if (!recipientAddress) {
+                if (!effectiveRecipientAddress) {
                     navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward");
                     return;
                 }
-                invariant(recipientAddress, "Recipient address is not found");
+                invariant(effectiveRecipientAddress, "Recipient address is not found");
                 // If no fiat payment method selected, show payment method selection
                 if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
                     navigateToPanel(PanelView.FIAT_PAYMENT_METHOD, "forward");
@@ -577,11 +588,11 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                     return;
                 }
                 // Check recipient after payment method
-                if (!recipientAddress) {
+                if (!effectiveRecipientAddress) {
                     navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward");
                     return;
                 }
-                invariant(recipientAddress, "Recipient address is not found");
+                invariant(effectiveRecipientAddress, "Recipient address is not found");
                 // If payment method is selected, create order with payment method info
                 if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
                     effectiveCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ||
@@ -610,13 +621,13 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     const handleCryptoSwap = async (method) => {
         try {
             invariant(anyspendQuote, "Relay price is not found");
-            invariant(recipientAddress, "Recipient address is not found");
+            invariant(effectiveRecipientAddress, "Recipient address is not found");
             // Debug: Check payment method values
             console.log("handleCryptoSwap - method parameter:", method);
             console.log("handleCryptoSwap - selectedCryptoPaymentMethod state:", selectedCryptoPaymentMethod);
             const srcAmountBigInt = parseUnits(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals);
             createOrder({
-                recipientAddress,
+                recipientAddress: effectiveRecipientAddress,
                 orderType: "swap",
                 srcChain: selectedSrcChainId,
                 dstChain: isBuyMode ? destinationTokenChainId : selectedDstChainId,
@@ -638,7 +649,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     const handleFiatOrder = async (paymentMethod) => {
         try {
             invariant(anyspendQuote, "Relay price is not found");
-            invariant(recipientAddress, "Recipient address is not found");
+            invariant(effectiveRecipientAddress, "Recipient address is not found");
             if (!srcAmountOnRamp || parseFloat(srcAmountOnRamp) <= 0) {
                 toast.error("Please enter a valid amount");
                 return;
@@ -678,7 +689,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                 return selectedDstToken;
             };
             createOnrampOrder({
-                recipientAddress,
+                recipientAddress: effectiveRecipientAddress,
                 orderType: "swap",
                 dstChain: getDstToken().chainId,
                 dstToken: getDstToken(),
@@ -784,7 +795,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                                 else {
                                     setActivePanel(panelIndex);
                                 }
-                            }, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), customUsdInputValues: customUsdInputValues }) })), _jsx(Button, { variant: "ghost", className: cn("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
+                            }, _recipientAddress: effectiveRecipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), customUsdInputValues: customUsdInputValues }) })), _jsx(Button, { variant: "ghost", className: cn("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
                             if (activeTab === "fiat" || isBuyMode) {
                                 return;
                             }
@@ -803,11 +814,11 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                             const tempDstAmount = dstAmount;
                             setSrcAmount(tempDstAmount);
                             setDstAmount(tempSrcAmount);
-                        }, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), setRecipientAddress: setRecipientAddress, recipientAddressFromProps: recipientAddressFromProps, globalAddress: globalAddress, dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
+                        }, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, effectiveRecipientAddress: effectiveRecipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
                             setIsSrcInputDirty(false);
                             setDstAmount(value);
-                        }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }))] }), _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.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] }) }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
-    const onrampPaymentView = (_jsx(PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName || undefined, recipientAddress: recipientAddress, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
+                        }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward") }))] }), _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.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] }) }), !hideTransactionHistoryButton && (globalAddress || effectiveRecipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
+    const onrampPaymentView = (_jsx(PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName || undefined, recipientAddress: effectiveRecipientAddress, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
             setOrderId(orderId);
             navigateToPanel(PanelView.ORDER_DETAILS, "forward");
             // Add orderId and payment method to URL for persistence
@@ -822,8 +833,9 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             }
             router.push(`${window.location.pathname}?${params.toString()}`);
         }, onBack: navigateBack, recipientEnsName: globalWallet?.ensName, recipientImageUrl: globalWallet?.meta?.icon }));
-    const recipientSelectionView = (_jsx(RecipientSelection, { initialValue: recipientAddress || "", onBack: navigateBack, onConfirm: address => {
-            setRecipientAddress(address);
+    const recipientSelectionView = (_jsx(RecipientSelection, { initialValue: effectiveRecipientAddress || "", onBack: navigateBack, onConfirm: address => {
+            // User manually selected a recipient
+            setSelectedRecipientAddress(address);
             navigateBack();
         } }));
     const cryptoPaymentMethodView = (_jsx(CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: globalWallet, selectedPaymentMethod: effectiveCryptoPaymentMethod, setSelectedPaymentMethod: method => {

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

@@ -16,6 +16,7 @@ import { base } from "viem/chains";
 import { useFeatureFlags } from "../contexts/FeatureFlagsContext.js";
 import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi.js";
 import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodState.js";
+import { useRecipientAddressState } from "../hooks/useRecipientAddressState.js";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
 import { FeeBreakDown } from "./common/FeeBreakDown.js";
@@ -122,10 +123,12 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
     const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState(FiatPaymentMethod.NONE);
     // Get current user's wallet
     const currentWallet = useAccountWallet();
-    // Add state for custom recipient
-    const [customRecipientAddress, setCustomRecipientAddress] = useState(recipientAddressProps);
-    // Update recipient logic to use custom recipient
-    const recipientAddress = customRecipientAddress || currentWallet.address;
+    // Recipient address state with dual-state system (auto + explicit user selection)
+    // The hook automatically manages priority: props > user selection > global address
+    const { setSelectedRecipientAddress, effectiveRecipientAddress: recipientAddress } = useRecipientAddressState({
+        recipientAddressFromProps: recipientAddressProps,
+        globalAddress: currentWallet.address,
+    });
     const [orderId, setOrderId] = useState(loadOrder);
     // Track if onSuccess has been called for the current order
     const onSuccessCalled = React.useRef(false);
@@ -519,8 +522,9 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                 }
                                             }, className: "relative w-full", children: isCreatingOrder ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { children: "Loading quote..." })] })) : !recipientAddress ? ("Select recipient") : selectedFiatPaymentMethod === FiatPaymentMethod.NONE ? ("Select payment method") : anyspendQuote ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "Buy" }), _jsx(ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : ("No quote found") }) }) })] }) })] })] }));
     // Recipient selection view
-    const recipientSelectionView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(RecipientSelection, { initialValue: customRecipientAddress || "", title: "Add recipient address or ENS", description: "Send tokens to another address", onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onConfirm: address => {
-                setCustomRecipientAddress(address);
+    const recipientSelectionView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(RecipientSelection, { initialValue: recipientAddress || "", title: "Add recipient address or ENS", description: "Send tokens to another address", onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onConfirm: address => {
+                // User manually selected a recipient
+                setSelectedRecipientAddress(address);
                 setActivePanel(PanelView.CONFIRM_ORDER);
             } }) }));
     // Crypto payment method view

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

@@ -168,7 +168,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         }
     };
     const headerContent = header ? (header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote })) : (_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsxs("div", { children: [_jsx("h1", { className: "text-as-primary text-xl font-bold", children: actionLabel }), _jsx("p", { className: "text-as-secondary text-sm", children: "Pay from any token to execute a custom exact-in transaction." })] }) }));
-    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, _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: effectiveCryptoPaymentMethod, 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: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_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: selectedRecipientOrDefault, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, 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: [headerContent, _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: effectiveCryptoPaymentMethod, 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: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_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, effectiveRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, 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] }));

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

@@ -4,7 +4,7 @@ import { useAccountWallet } from "../../../../global-account/react/index.js";
 import { cn } from "../../../../shared/utils/cn.js";
 import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
 import { client } from "../../../../shared/utils/thirdweb.js";
-import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletRainbow, WalletWalletConnect } from "@web3icons/react";
+import { WalletCoinbase, WalletMetamask, WalletRainbow, WalletWalletConnect } from "@web3icons/react";
 import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-react";
 import { useState } from "react";
 import { createPortal } from "react-dom";
@@ -94,13 +94,6 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
             description: "Connect using WalletConnect protocol",
             connector: availableConnectors.find(c => c.name === "WalletConnect"),
         },
-        {
-            id: "phantom",
-            name: "Phantom",
-            icon: _jsx(WalletPhantom, { size: 48 }),
-            description: "Connect using Phantom wallet",
-            connector: availableConnectors.find(c => c.name === "Phantom"),
-        },
     ].filter(wallet => wallet.connector); // Only show wallets that have available connectors
     // Reset modal state when closing
     const handleCloseModal = () => {

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

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

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

@@ -5,26 +5,16 @@ 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, setRecipientAddress, recipientAddressFromProps, globalAddress, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, isSrcInputDirty, onChangeDstAmount, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, onShowPointsDetail, onShowFeeDetail, selectedCryptoPaymentMethod, }) {
+export function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false, effectiveRecipientAddress, recipientName, onSelectRecipient, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, isSrcInputDirty, onChangeDstAmount, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, onShowPointsDetail, onShowFeeDetail, }) {
     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 ? (
+    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" }) }))] }), effectiveRecipientAddress ? (_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(effectiveRecipientAddress || "") }), _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 })] })] })) : (
             // Token selection for regular swap mode
-            _jsx(OrderTokenAmount, { address: selectedRecipientAddress, context: "to", inputValue: dstAmount, onChangeInput: onChangeDstAmount || (() => { }), chainId: selectedDstChainId || dstToken.chainId, setChainId: setSelectedDstChainId || (() => { }), token: dstToken, setToken: setSelectedDstToken || (() => { }) })), _jsxs("div", { className: "text-as-primary/50 flex h-5 items-center justify-start gap-2 text-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: [formatDisplayNumber(anyspendQuote?.data?.currencyOut?.amountUsd, {
+            _jsx(OrderTokenAmount, { address: effectiveRecipientAddress, context: "to", inputValue: dstAmount, onChangeInput: onChangeDstAmount || (() => { }), chainId: selectedDstChainId || dstToken.chainId, setChainId: setSelectedDstChainId || (() => { }), token: dstToken, setToken: setSelectedDstToken || (() => { }) })), _jsxs("div", { className: "text-as-primary/50 flex h-5 items-center justify-start gap-2 text-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: [formatDisplayNumber(anyspendQuote?.data?.currencyOut?.amountUsd, {
                                 style: "currency",
                                 fallback: "",
                             }), anyspendQuote?.data?.currencyIn?.amountUsd &&

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

@@ -8,6 +8,7 @@ export * from "./useCoinbaseOnrampOptions";
 export * from "./useConnectedUserProfile";
 export * from "./useGeoOnrampOptions";
 export * from "./useGetGeo";
+export * from "./useRecipientAddressState";
 export * from "./useSigMint";
 export * from "./useStripeClientSecret";
 export * from "./useStripeSupport";

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

@@ -8,6 +8,7 @@ export * from "./useCoinbaseOnrampOptions.js";
 export * from "./useConnectedUserProfile.js";
 export * from "./useGeoOnrampOptions.js";
 export * from "./useGetGeo.js";
+export * from "./useRecipientAddressState.js";
 export * from "./useSigMint.js";
 export * from "./useStripeClientSecret.js";
 export * from "./useStripeSupport.js";

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

@@ -102,7 +102,7 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
     selectedFiatPaymentMethod: FiatPaymentMethod;
     setSelectedFiatPaymentMethod: import("react").Dispatch<import("react").SetStateAction<FiatPaymentMethod>>;
     selectedRecipientAddress: string | undefined;
-    setSelectedRecipientAddress: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    setSelectedRecipientAddress: (address: string | undefined) => void;
     recipientName: string | null | undefined;
     globalAddress: string | undefined;
     hasEnoughBalance: boolean;

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

@@ -13,6 +13,7 @@ import { useAutoSelectCryptoPaymentMethod } from "./useAutoSelectCryptoPaymentMe
 import { useAutoSetActiveWalletFromWagmi } from "./useAutoSetActiveWalletFromWagmi.js";
 import { useConnectedWalletDisplay } from "./useConnectedWalletDisplay.js";
 import { useCryptoPaymentMethodState } from "./useCryptoPaymentMethodState.js";
+import { useRecipientAddressState } from "./useRecipientAddressState.js";
 export var PanelView;
 (function (PanelView) {
     PanelView[PanelView["MAIN"] = 0] = "MAIN";
@@ -46,20 +47,19 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
     // Payment method state with dual-state system (auto + explicit user selection)
     const { cryptoPaymentMethod, setCryptoPaymentMethod, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, effectiveCryptoPaymentMethod, resetPaymentMethods, } = useCryptoPaymentMethodState();
     const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState(FiatPaymentMethod.NONE);
-    // Recipient state
+    // Recipient state with dual-state system (auto + explicit user selection)
     const { address: globalAddress } = useAccountWallet();
     const { walletAddress } = useConnectedWalletDisplay(effectiveCryptoPaymentMethod);
-    const [selectedRecipientAddress, setSelectedRecipientAddress] = useState(recipientAddress);
-    const recipientProfile = useProfile({ address: selectedRecipientAddress, fresh: true });
-    const recipientName = recipientProfile.data?.name;
     // Auto-set active wallet from wagmi
     useAutoSetActiveWalletFromWagmi();
-    // Set default recipient address when wallet changes
-    useEffect(() => {
-        if (!selectedRecipientAddress && globalAddress) {
-            setSelectedRecipientAddress(globalAddress);
-        }
-    }, [selectedRecipientAddress, globalAddress]);
+    // Recipient address state - hook automatically manages priority: props > user selection > wallet/global
+    const { setSelectedRecipientAddress, effectiveRecipientAddress } = useRecipientAddressState({
+        recipientAddressFromProps: recipientAddress,
+        walletAddress,
+        globalAddress,
+    });
+    const recipientProfile = useProfile({ address: effectiveRecipientAddress, fresh: true });
+    const recipientName = recipientProfile.data?.name;
     // Check token balance for crypto payments
     const { rawBalance, isLoading: isBalanceLoading } = useTokenBalance({
         token: selectedSrcToken,
@@ -142,7 +142,7 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
         dstTokenAddress: selectedDstToken.address,
         type: orderType,
         amount: activeInputAmountInWei,
-        recipientAddress: selectedRecipientAddress,
+        recipientAddress: effectiveRecipientAddress,
         onrampVendor: paymentType === "fiat" ? getOnrampVendor(selectedFiatPaymentMethod) : undefined,
     });
     // Get geo options for fiat
@@ -257,7 +257,7 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
         selectedFiatPaymentMethod,
         setSelectedFiatPaymentMethod,
         // Recipient
-        selectedRecipientAddress,
+        selectedRecipientAddress: effectiveRecipientAddress,
         setSelectedRecipientAddress,
         recipientName,
         globalAddress,

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

@@ -8,6 +8,7 @@ import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMetho
 export function useConnectedWalletDisplay(selectedCryptoPaymentMethod) {
     const { connectedEOAWallet, connectedSmartWallet } = useAccountWallet();
     const { address: wagmiAddress, isConnected: wagmiWalletIsConnected } = useAccount();
+    const globalWalletAddress = connectedSmartWallet?.getAccount()?.address;
     // Helper function to check if two addresses are the same
     const isSameAddress = (addr1, addr2) => {
         if (!addr1 || !addr2)
@@ -16,7 +17,7 @@ export function useConnectedWalletDisplay(selectedCryptoPaymentMethod) {
     };
     // Check if connectedEOAWallet and wagmi wallet represent the same wallet
     const connectedEOAAddress = connectedEOAWallet?.getAccount()?.address;
-    const isWalletDuplicated = isSameAddress(connectedEOAAddress, wagmiAddress);
+    const isWalletDuplicated = isSameAddress(connectedEOAAddress, wagmiAddress) || isSameAddress(globalWalletAddress, wagmiAddress);
     // Determine which wallet to show (prefer connectedEOAWallet if both exist and are the same)
     const shouldShowConnectedEOA = !!connectedEOAWallet;
     const shouldShowWagmiWallet = wagmiWalletIsConnected && (!isWalletDuplicated || !connectedEOAWallet);

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

@@ -0,0 +1,52 @@
+interface UseRecipientAddressStateProps {
+    /** Fixed recipient address from props (highest priority) */
+    recipientAddressFromProps?: string;
+    /** Connected wallet address from payment method */
+    walletAddress?: string;
+    /** Global account address */
+    globalAddress?: string;
+}
+interface UseRecipientAddressStateResult {
+    /** User explicitly selected recipient address (undefined means no explicit selection) */
+    selectedRecipientAddress: string | undefined;
+    /** Function to update the user-selected recipient address */
+    setSelectedRecipientAddress: (address: string | undefined) => void;
+    /** Effective recipient address (follows priority: props > user selection > wallet/global) */
+    effectiveRecipientAddress: string | undefined;
+    /** Reset recipient address state */
+    resetRecipientAddress: () => void;
+}
+/**
+ * Custom hook to manage recipient address state with automatic priority handling:
+ *
+ * **Priority System:**
+ * 1. `recipientAddressFromProps` - Fixed recipient from component props (highest priority)
+ * 2. `selectedRecipientAddress` - User's explicit manual selection
+ * 3. `walletAddress` or `globalAddress` - Auto-selected fallback
+ *
+ * **Key Features:**
+ * - Automatically manages recipient address based on priority
+ * - Preserves user's manual selections
+ * - Updates automatically when wallet/global address changes (if no manual selection)
+ * - Derived value approach - no useEffect needed, no stale state bugs
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   selectedRecipientAddress,
+ *   setSelectedRecipientAddress,
+ *   effectiveRecipientAddress,
+ *   resetRecipientAddress
+ * } = useRecipientAddressState({
+ *   recipientAddressFromProps,
+ *   walletAddress,
+ *   globalAddress,
+ * });
+ *
+ * // Use effectiveRecipientAddress for display and operations
+ * // Use setSelectedRecipientAddress when user explicitly selects
+ * // Call resetRecipientAddress when switching tabs or going back
+ * ```
+ */
+export declare function useRecipientAddressState({ recipientAddressFromProps, walletAddress, globalAddress, }?: UseRecipientAddressStateProps): UseRecipientAddressStateResult;
+export {};

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

@@ -0,0 +1,49 @@
+import { useState } from "react";
+/**
+ * Custom hook to manage recipient address state with automatic priority handling:
+ *
+ * **Priority System:**
+ * 1. `recipientAddressFromProps` - Fixed recipient from component props (highest priority)
+ * 2. `selectedRecipientAddress` - User's explicit manual selection
+ * 3. `walletAddress` or `globalAddress` - Auto-selected fallback
+ *
+ * **Key Features:**
+ * - Automatically manages recipient address based on priority
+ * - Preserves user's manual selections
+ * - Updates automatically when wallet/global address changes (if no manual selection)
+ * - Derived value approach - no useEffect needed, no stale state bugs
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   selectedRecipientAddress,
+ *   setSelectedRecipientAddress,
+ *   effectiveRecipientAddress,
+ *   resetRecipientAddress
+ * } = useRecipientAddressState({
+ *   recipientAddressFromProps,
+ *   walletAddress,
+ *   globalAddress,
+ * });
+ *
+ * // Use effectiveRecipientAddress for display and operations
+ * // Use setSelectedRecipientAddress when user explicitly selects
+ * // Call resetRecipientAddress when switching tabs or going back
+ * ```
+ */
+export function useRecipientAddressState({ recipientAddressFromProps, walletAddress, globalAddress, } = {}) {
+    // selectedRecipientAddress: explicitly selected by user (undefined means no explicit selection)
+    const [selectedRecipientAddress, setSelectedRecipientAddress] = useState(undefined);
+    // The effective recipient address, derived on each render, respecting priority.
+    const effectiveRecipientAddress = recipientAddressFromProps || selectedRecipientAddress || walletAddress || globalAddress;
+    // Helper function to reset user's manual selection.
+    const resetRecipientAddress = () => {
+        setSelectedRecipientAddress(undefined);
+    };
+    return {
+        selectedRecipientAddress,
+        setSelectedRecipientAddress,
+        effectiveRecipientAddress,
+        resetRecipientAddress,
+    };
+}

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

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

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

@@ -8,6 +8,7 @@ export * from "./useCoinbaseOnrampOptions";
 export * from "./useConnectedUserProfile";
 export * from "./useGeoOnrampOptions";
 export * from "./useGetGeo";
+export * from "./useRecipientAddressState";
 export * from "./useSigMint";
 export * from "./useStripeClientSecret";
 export * from "./useStripeSupport";

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

@@ -102,7 +102,7 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
     selectedFiatPaymentMethod: FiatPaymentMethod;
     setSelectedFiatPaymentMethod: import("react").Dispatch<import("react").SetStateAction<FiatPaymentMethod>>;
     selectedRecipientAddress: string | undefined;
-    setSelectedRecipientAddress: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    setSelectedRecipientAddress: (address: string | undefined) => void;
     recipientName: string | null | undefined;
     globalAddress: string | undefined;
     hasEnoughBalance: boolean;