@b3dotfun/sdk 0.0.67 → 0.0.68

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

@@ -21,7 +21,9 @@ const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
 const useAutoSelectCryptoPaymentMethod_1 = require("../hooks/useAutoSelectCryptoPaymentMethod");
 const useAutoSetActiveWalletFromWagmi_1 = require("../hooks/useAutoSetActiveWalletFromWagmi");
+const useConnectedWalletDisplay_1 = require("../hooks/useConnectedWalletDisplay");
 const useCryptoPaymentMethodState_1 = require("../hooks/useCryptoPaymentMethodState");
+const useRecipientAddressState_1 = require("../hooks/useRecipientAddressState");
 const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
 const CryptoPaymentMethod_1 = require("./common/CryptoPaymentMethod");
 const CryptoPaySection_1 = require("./common/CryptoPaySection");
@@ -311,13 +313,22 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     //       : isAddress(newRecipientAddress) || (resolvedAddress && isAddress(resolvedAddress)),
     //   [selectedDstChainId, newRecipientAddress, resolvedAddress]
     // );
-    // State for recipient selection
-    const [recipientAddress, setRecipientAddress] = (0, react_4.useState)();
     const { address: globalAddress, wallet: globalWallet, connectedEOAWallet } = (0, react_2.useAccountWallet)();
-    const recipientProfile = (0, react_2.useProfile)({ address: recipientAddress, fresh: true });
-    const recipientName = recipientProfile.data?.name;
     // Auto-set active wallet from wagmi
     (0, useAutoSetActiveWalletFromWagmi_1.useAutoSetActiveWalletFromWagmi)();
+    // Get wallet address based on selected payment method
+    const { walletAddress } = (0, useConnectedWalletDisplay_1.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
+     } = (0, useRecipientAddressState_1.useRecipientAddressState)({
+        recipientAddressFromProps,
+        walletAddress,
+        globalAddress,
+    });
+    const recipientProfile = (0, react_2.useProfile)({ address: effectiveRecipientAddress, fresh: true });
+    const recipientName = recipientProfile.data?.name;
     // Check token balance for crypto payments
     const { rawBalance, isLoading: isBalanceLoading } = (0, react_2.useTokenBalanceDirect)({
         token: selectedSrcToken,
@@ -375,7 +386,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             type: "swap",
             tradeType: isSrcInputDirty ? "EXACT_INPUT" : "EXACT_OUTPUT",
             amount: activeInputAmountInWei,
-            recipientAddress,
+            recipientAddress: effectiveRecipientAddress,
         }
         : {
             srcChain: chains_1.base.id,
@@ -385,7 +396,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
@@ -401,8 +412,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);
                 }
             }
         }
@@ -410,7 +421,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
     (0, react_4.useEffect)(() => {
         if (anyspendQuote?.data &&
@@ -513,7 +524,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_1.FiatPaymentMethod.NONE) {
@@ -529,7 +540,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 === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ||
@@ -545,7 +556,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         activeInputAmountInWei,
         isSameChainSameToken,
         isLoadingAnyspendQuote,
-        recipientAddress,
+        effectiveRecipientAddress,
         isCreatingOrder,
         isCreatingOnrampOrder,
         anyspendQuote,
@@ -561,11 +572,11 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
             if (activeTab === "fiat") {
                 // For fiat: check recipient first
-                if (!recipientAddress) {
+                if (!effectiveRecipientAddress) {
                     navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward");
                     return;
                 }
-                (0, invariant_1.default)(recipientAddress, "Recipient address is not found");
+                (0, invariant_1.default)(effectiveRecipientAddress, "Recipient address is not found");
                 // If no fiat payment method selected, show payment method selection
                 if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.NONE) {
                     navigateToPanel(PanelView.FIAT_PAYMENT_METHOD, "forward");
@@ -584,11 +595,11 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                     return;
                 }
                 // Check recipient after payment method
-                if (!recipientAddress) {
+                if (!effectiveRecipientAddress) {
                     navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward");
                     return;
                 }
-                (0, invariant_1.default)(recipientAddress, "Recipient address is not found");
+                (0, invariant_1.default)(effectiveRecipientAddress, "Recipient address is not found");
                 // If payment method is selected, create order with payment method info
                 if (effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ||
                     effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET ||
@@ -617,13 +628,13 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     const handleCryptoSwap = async (method) => {
         try {
             (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
-            (0, invariant_1.default)(recipientAddress, "Recipient address is not found");
+            (0, invariant_1.default)(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 = (0, viem_1.parseUnits)(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals);
             createOrder({
-                recipientAddress,
+                recipientAddress: effectiveRecipientAddress,
                 orderType: "swap",
                 srcChain: selectedSrcChainId,
                 dstChain: isBuyMode ? destinationTokenChainId : selectedDstChainId,
@@ -645,7 +656,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     const handleFiatOrder = async (paymentMethod) => {
         try {
             (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
-            (0, invariant_1.default)(recipientAddress, "Recipient address is not found");
+            (0, invariant_1.default)(effectiveRecipientAddress, "Recipient address is not found");
             if (!srcAmountOnRamp || parseFloat(srcAmountOnRamp) <= 0) {
                 sonner_1.toast.error("Please enter a valid amount");
                 return;
@@ -685,7 +696,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                 return selectedDstToken;
             };
             createOnrampOrder({
-                recipientAddress,
+                recipientAddress: effectiveRecipientAddress,
                 orderType: "swap",
                 dstChain: getDstToken().chainId,
                 dstToken: getDstToken(),
@@ -791,7 +802,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 }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.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 }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.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;
                             }
@@ -810,11 +821,11 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                             const tempDstAmount = dstAmount;
                             setSrcAmount(tempDstAmount);
                             setDstAmount(tempSrcAmount);
-                        }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.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: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.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 }))] }), (0, jsx_runtime_1.jsxs)(react_3.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: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [(0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
-    const onrampPaymentView = ((0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.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") }))] }), (0, jsx_runtime_1.jsxs)(react_3.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: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [(0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || effectiveRecipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
+    const onrampPaymentView = ((0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.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
@@ -829,8 +840,9 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             }
             router.push(`${window.location.pathname}?${params.toString()}`);
         }, onBack: navigateBack, recipientEnsName: globalWallet?.ensName, recipientImageUrl: globalWallet?.meta?.icon }));
-    const recipientSelectionView = ((0, jsx_runtime_1.jsx)(RecipientSelection_1.RecipientSelection, { initialValue: recipientAddress || "", onBack: navigateBack, onConfirm: address => {
-            setRecipientAddress(address);
+    const recipientSelectionView = ((0, jsx_runtime_1.jsx)(RecipientSelection_1.RecipientSelection, { initialValue: effectiveRecipientAddress || "", onBack: navigateBack, onConfirm: address => {
+            // User manually selected a recipient
+            setSelectedRecipientAddress(address);
             navigateBack();
         } }));
     const cryptoPaymentMethodView = ((0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: globalWallet, selectedPaymentMethod: effectiveCryptoPaymentMethod, setSelectedPaymentMethod: method => {

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

@@ -55,6 +55,7 @@ const chains_1 = require("viem/chains");
 const FeatureFlagsContext_1 = require("../contexts/FeatureFlagsContext");
 const useAutoSetActiveWalletFromWagmi_1 = require("../hooks/useAutoSetActiveWalletFromWagmi");
 const useCryptoPaymentMethodState_1 = require("../hooks/useCryptoPaymentMethodState");
+const useRecipientAddressState_1 = require("../hooks/useRecipientAddressState");
 const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
 const CryptoPaymentMethod_1 = require("./common/CryptoPaymentMethod");
 const FeeBreakDown_1 = require("./common/FeeBreakDown");
@@ -161,10 +162,12 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
     const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = (0, react_4.useState)(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
     // Get current user's wallet
     const currentWallet = (0, react_2.useAccountWallet)();
-    // Add state for custom recipient
-    const [customRecipientAddress, setCustomRecipientAddress] = (0, react_4.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 } = (0, useRecipientAddressState_1.useRecipientAddressState)({
+        recipientAddressFromProps: recipientAddressProps,
+        globalAddress: currentWallet.address,
+    });
     const [orderId, setOrderId] = (0, react_4.useState)(loadOrder);
     // Track if onSuccess has been called for the current order
     const onSuccessCalled = react_4.default.useRef(false);
@@ -558,8 +561,9 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                 }
                                             }, className: "relative w-full", children: isCreatingOrder ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Loading quote..." })] })) : !recipientAddress ? ("Select recipient") : selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.NONE ? ("Select payment method") : anyspendQuote ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Buy" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : ("No quote found") }) }) })] }) })] })] }));
     // Recipient selection view
-    const recipientSelectionView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(RecipientSelection_1.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 = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(RecipientSelection_1.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/cjs/anyspend/react/components/AnySpendCustomExactIn.js

@@ -174,7 +174,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         }
     };
     const headerContent = header ? (header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote })) : ((0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: actionLabel }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary text-sm", children: "Pay from any token to execute a custom exact-in transaction." })] }) }));
-    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : ((0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.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: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", className: (0, cn_1.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: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.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 = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : ((0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.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: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", className: (0, cn_1.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: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, effectiveRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.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(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL) }))] }) }), (0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }) }), mainFooter ? mainFooter : null] }));

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

@@ -98,13 +98,6 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
             description: "Connect using WalletConnect protocol",
             connector: availableConnectors.find(c => c.name === "WalletConnect"),
         },
-        {
-            id: "phantom",
-            name: "Phantom",
-            icon: (0, jsx_runtime_1.jsx)(react_2.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/cjs/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/cjs/anyspend/react/components/common/CryptoReceiveSection.js

@@ -8,26 +8,16 @@ const formatAddress_1 = require("../../../../shared/utils/formatAddress");
 const number_1 = require("../../../../shared/utils/number");
 const lucide_react_1 = require("lucide-react");
 const react_1 = require("motion/react");
-const react_2 = require("react");
 const FeatureFlagsContext_1 = require("../../contexts/FeatureFlagsContext");
-const useConnectedWalletDisplay_1 = require("../../hooks/useConnectedWalletDisplay");
 const OrderTokenAmount_1 = require("./OrderTokenAmount");
 const PointsBadge_1 = require("./PointsBadge");
-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, }) {
+function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false, effectiveRecipientAddress, recipientName, onSelectRecipient, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, isSrcInputDirty, onChangeDstAmount, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, onShowPointsDetail, onShowFeeDetail, }) {
     const featureFlags = (0, FeatureFlagsContext_1.useFeatureFlags)();
-    // Get wallet address based on selected payment method
-    const { walletAddress } = (0, useConnectedWalletDisplay_1.useConnectedWalletDisplay)(selectedCryptoPaymentMethod);
-    // Set default recipient address when wallet changes
-    (0, react_2.useEffect)(() => {
-        if (setRecipientAddress) {
-            setRecipientAddress(recipientAddressFromProps || walletAddress || globalAddress);
-        }
-    }, [recipientAddressFromProps, walletAddress, globalAddress, setRecipientAddress]);
-    return ((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between", children: [(0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }))] }), selectedRecipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: onSelectRecipient, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.shortenAddress)(selectedRecipientAddress || "") }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }) })) : ((0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: onSelectRecipient, children: (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode || isDepositMode ? (
+    return ((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between", children: [(0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }))] }), effectiveRecipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: onSelectRecipient, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.shortenAddress)(effectiveRecipientAddress || "") }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }) })) : ((0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: onSelectRecipient, children: (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode || isDepositMode ? (
             // Fixed destination token display for buy mode and deposit mode
             (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), (0, jsx_runtime_1.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) && ((0, jsx_runtime_1.jsx)("img", { src: dstTokenLogoURI || dstToken.metadata?.logoURI, alt: dstTokenSymbol || dstToken.symbol, className: "h-8 w-8 rounded-full" })), (0, jsx_runtime_1.jsx)("span", { className: "text-as-brand text-lg font-bold", children: dstTokenSymbol || dstToken.symbol })] })] })) : (
             // Token selection for regular swap mode
-            (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: selectedRecipientAddress, context: "to", inputValue: dstAmount, onChangeInput: onChangeDstAmount || (() => { }), chainId: selectedDstChainId || dstToken.chainId, setChainId: setSelectedDstChainId || (() => { }), token: dstToken, setToken: setSelectedDstToken || (() => { }) })), (0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/50 flex h-5 items-center justify-start gap-2 text-sm", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyOut?.amountUsd, {
+            (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: effectiveRecipientAddress, context: "to", inputValue: dstAmount, onChangeInput: onChangeDstAmount || (() => { }), chainId: selectedDstChainId || dstToken.chainId, setChainId: setSelectedDstChainId || (() => { }), token: dstToken, setToken: setSelectedDstToken || (() => { }) })), (0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/50 flex h-5 items-center justify-start gap-2 text-sm", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyOut?.amountUsd, {
                                 style: "currency",
                                 fallback: "",
                             }), anyspendQuote?.data?.currencyIn?.amountUsd &&

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

@@ -24,6 +24,7 @@ __exportStar(require("./useCoinbaseOnrampOptions"), exports);
 __exportStar(require("./useConnectedUserProfile"), exports);
 __exportStar(require("./useGeoOnrampOptions"), exports);
 __exportStar(require("./useGetGeo"), exports);
+__exportStar(require("./useRecipientAddressState"), exports);
 __exportStar(require("./useSigMint"), exports);
 __exportStar(require("./useStripeClientSecret"), exports);
 __exportStar(require("./useStripeSupport"), exports);

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

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

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

@@ -11,6 +11,7 @@ const CryptoPaymentMethod_1 = require("../components/common/CryptoPaymentMethod"
 function useConnectedWalletDisplay(selectedCryptoPaymentMethod) {
     const { connectedEOAWallet, connectedSmartWallet } = (0, react_1.useAccountWallet)();
     const { address: wagmiAddress, isConnected: wagmiWalletIsConnected } = (0, wagmi_1.useAccount)();
+    const globalWalletAddress = connectedSmartWallet?.getAccount()?.address;
     // Helper function to check if two addresses are the same
     const isSameAddress = (addr1, addr2) => {
         if (!addr1 || !addr2)
@@ -19,7 +20,7 @@ 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/cjs/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/cjs/anyspend/react/hooks/useRecipientAddressState.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRecipientAddressState = useRecipientAddressState;
+const react_1 = require("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
+ * ```
+ */
+function useRecipientAddressState({ recipientAddressFromProps, walletAddress, globalAddress, } = {}) {
+    // selectedRecipientAddress: explicitly selected by user (undefined means no explicit selection)
+    const [selectedRecipientAddress, setSelectedRecipientAddress] = (0, react_1.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,
+    };
+}