@b3dotfun/sdk 0.0.62 → 0.0.63-test.0

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

@@ -19,17 +19,19 @@ const react_4 = require("react");
 const sonner_1 = require("sonner");
 const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
+const useAutoSelectCryptoPaymentMethod_1 = require("../hooks/useAutoSelectCryptoPaymentMethod");
+const useAutoSetActiveWalletFromWagmi_1 = require("../hooks/useAutoSetActiveWalletFromWagmi");
 const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
 const CryptoPaymentMethod_1 = require("./common/CryptoPaymentMethod");
 const CryptoPaySection_1 = require("./common/CryptoPaySection");
 const CryptoReceiveSection_1 = require("./common/CryptoReceiveSection");
+const FeeDetailPanel_1 = require("./common/FeeDetailPanel");
 const FiatPaymentMethod_1 = require("./common/FiatPaymentMethod");
 const OrderDetails_1 = require("./common/OrderDetails");
 const OrderHistory_1 = require("./common/OrderHistory");
 const PanelOnramp_1 = require("./common/PanelOnramp");
 const PanelOnrampPayment_1 = require("./common/PanelOnrampPayment");
 const PointsDetailPanel_1 = require("./common/PointsDetailPanel");
-const FeeDetailPanel_1 = require("./common/FeeDetailPanel");
 const RecipientSelection_1 = require("./common/RecipientSelection");
 const TabSection_1 = require("./common/TabSection");
 var PanelView;
@@ -311,13 +313,36 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     // );
     // State for recipient selection
     const [recipientAddress, setRecipientAddress] = (0, react_4.useState)();
-    const { address: globalAddress, wallet: globalWallet } = (0, react_2.useAccountWallet)();
+    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;
-    // Set default recipient address when wallet changes
-    (0, react_4.useEffect)(() => {
-        setRecipientAddress(recipientAddressFromProps || globalAddress);
-    }, [recipientAddressFromProps, globalAddress]);
+    // Auto-set active wallet from wagmi
+    (0, useAutoSetActiveWalletFromWagmi_1.useAutoSetActiveWalletFromWagmi)();
+    // Check token balance for crypto payments
+    const { rawBalance, isLoading: isBalanceLoading } = (0, react_2.useTokenBalanceDirect)({
+        token: selectedSrcToken,
+        address: connectedEOAWallet?.getAccount()?.address,
+    });
+    // Check if user has enough balanceuseAutoSetActiveWalletFromWagmi
+    const hasEnoughBalance = (0, react_4.useMemo)(() => {
+        if (!rawBalance || isBalanceLoading || activeTab !== "crypto")
+            return false;
+        try {
+            const requiredAmount = (0, viem_1.parseUnits)(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals);
+            return rawBalance >= requiredAmount;
+        }
+        catch {
+            return false;
+        }
+    }, [rawBalance, srcAmount, selectedSrcToken.decimals, isBalanceLoading, activeTab]);
+    // Auto-select crypto payment method based on available wallets and balance
+    (0, useAutoSelectCryptoPaymentMethod_1.useAutoSelectCryptoPaymentMethod)({
+        paymentType: activeTab,
+        selectedCryptoPaymentMethod,
+        setSelectedCryptoPaymentMethod,
+        hasEnoughBalance,
+        isBalanceLoading,
+    });
     // Get geo-based onramp options for fiat payments
     const { geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support } = (0, react_1.useGeoOnrampOptions)(srcAmountOnRamp);
     // Helper function to map payment method to onramp vendor
@@ -481,17 +506,30 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             return { text: "Select a different token or chain", disable: true, error: false, loading: false };
         if (isLoadingAnyspendQuote)
             return { text: "Loading quote...", disable: true, error: false, loading: true };
-        if (!recipientAddress)
-            return { text: "Select recipient", disable: false, error: false, loading: false };
         if (isCreatingOrder || isCreatingOnrampOrder)
             return { text: "Creating order...", disable: true, error: false, loading: true };
         if (!anyspendQuote || !anyspendQuote.success)
             return { text: "No quote found", disable: true, error: false, loading: false };
+        if (activeTab === "fiat") {
+            // For fiat: check recipient first, then payment method
+            if (!recipientAddress)
+                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) {
+                return { text: "Select payment method", disable: false, error: false, loading: false };
+            }
+            // If payment method is selected, show "Buy"
+            return { text: "Buy", disable: false, error: false, loading: false };
+        }
         if (activeTab === "crypto") {
+            // For crypto: check payment method first, then recipient
             // If no payment method selected, show "Choose payment method"
             if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
                 return { text: "Choose payment method", disable: false, error: false, loading: false };
             }
+            // Check recipient after payment method
+            if (!recipientAddress)
+                return { text: "Select recipient", disable: false, error: false, loading: false };
             // If payment method selected, show appropriate action
             if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ||
                 selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET) {
@@ -501,14 +539,6 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                 return { text: "Continue to payment", disable: false, error: false, loading: false };
             }
         }
-        if (activeTab === "fiat") {
-            // If no fiat payment method selected, show "Select payment method"
-            if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.NONE) {
-                return { text: "Select payment method", disable: false, error: false, loading: false };
-            }
-            // If payment method is selected, show "Buy"
-            return { text: "Buy", disable: false, error: false, loading: false };
-        }
         return { text: "Buy", disable: false, error: false, loading: false };
     }, [
         activeInputAmountInWei,
@@ -526,14 +556,15 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     const onMainButtonClick = async () => {
         if (btnInfo.disable)
             return;
-        if (!recipientAddress) {
-            navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward");
-            return;
-        }
         try {
             (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
-            (0, invariant_1.default)(recipientAddress, "Recipient address is not found");
             if (activeTab === "fiat") {
+                // For fiat: check recipient first
+                if (!recipientAddress) {
+                    navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward");
+                    return;
+                }
+                (0, invariant_1.default)(recipientAddress, "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");
@@ -544,12 +575,19 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                 return;
             }
             if (activeTab === "crypto") {
+                // For crypto: check payment method first, then recipient
                 // If no payment method selected, show payment method selection
                 if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
                     console.log("No payment method selected, showing selection panel");
                     navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward");
                     return;
                 }
+                // Check recipient after payment method
+                if (!recipientAddress) {
+                    navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward");
+                    return;
+                }
+                (0, invariant_1.default)(recipientAddress, "Recipient address is not found");
                 // If payment method is selected, create order with payment method info
                 if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ||
                     selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET ||
@@ -762,10 +800,10 @@ 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"), 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, 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 => {
                             setIsSrcInputDirty(false);
                             setDstAmount(value);
-                        }, 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 || 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] })] }));
+                        }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }))] }), (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 => {
             setOrderId(orderId);
             navigateToPanel(PanelView.ORDER_DETAILS, "forward");

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

@@ -53,6 +53,7 @@ const react_4 = __importStar(require("react"));
 const sonner_1 = require("sonner");
 const chains_1 = require("viem/chains");
 const FeatureFlagsContext_1 = require("../contexts/FeatureFlagsContext");
+const useAutoSetActiveWalletFromWagmi_1 = require("../hooks/useAutoSetActiveWalletFromWagmi");
 const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
 const CryptoPaymentMethod_1 = require("./common/CryptoPaymentMethod");
 const FeeBreakDown_1 = require("./common/FeeBreakDown");
@@ -149,6 +150,8 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
     const featureFlags = (0, FeatureFlagsContext_1.useFeatureFlags)();
     const searchParams = (0, react_2.useSearchParamsSSR)();
     const router = (0, react_2.useRouter)();
+    // Auto-set active wallet from wagmi
+    (0, useAutoSetActiveWalletFromWagmi_1.useAutoSetActiveWalletFromWagmi)();
     const [activePanel, setActivePanel] = (0, react_4.useState)(loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER);
     const [activeTab, setActiveTab] = (0, react_4.useState)(activeTabProps);
     // Add state for selected payment methods

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

@@ -38,13 +38,14 @@ function generateEncodedDataForStakingB3(amount, beneficiary) {
 function AnySpendStakeB3({ loadOrder, mode = "modal", recipientAddress, stakeAmount, onSuccess, }) {
     const hasMounted = (0, react_1.useHasMounted)();
     const { setB3ModalOpen } = (0, react_1.useModalStore)();
-    // Fetch B3 token balance
-    const { formattedBalance: b3Balance, isLoading: isBalanceLoading, rawBalance: b3RawBalance, } = (0, react_1.useTokenBalance)({
-        token: anyspend_1.B3_TOKEN,
-    });
     // Wagmi hooks for direct staking
     const { address } = (0, wagmi_1.useAccount)();
     const { switchChainAndExecute, isSwitchingOrExecuting } = (0, react_1.useUnifiedChainSwitchAndExecute)();
+    // Fetch B3 token balance
+    const { data: simBalance, isLoading: isBalanceLoading } = (0, react_1.useSimBalance)(address, [chains_1.base.id]);
+    const b3RawBalanceStr = simBalance?.balances.find(b => (0, anyspend_1.eqci)(b.address, anyspend_1.B3_TOKEN.address))?.amount || "0";
+    const b3RawBalance = BigInt(b3RawBalanceStr);
+    const b3Balance = (0, number_1.formatTokenAmount)(b3RawBalance, anyspend_1.B3_TOKEN.decimals);
     // State for direct staking flow
     const [isStaking, setIsStaking] = (0, react_3.useState)(false);
     const [stakingTxHash, setStakingTxHash] = (0, react_3.useState)("");

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

@@ -13,6 +13,7 @@ const invariant_1 = __importDefault(require("invariant"));
 const react_2 = require("motion/react");
 const react_3 = require("react");
 const sonner_1 = require("sonner");
+const react_4 = require("thirdweb/react");
 const chains_1 = require("viem/chains");
 const useAnyspendFlow_1 = require("../hooks/useAnyspendFlow");
 const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
@@ -24,10 +25,9 @@ const FiatPaymentMethod_1 = require("./common/FiatPaymentMethod");
 const OrderDetails_1 = require("./common/OrderDetails");
 const PointsDetailPanel_1 = require("./common/PointsDetailPanel");
 const RecipientSelection_1 = require("./common/RecipientSelection");
-const react_4 = require("thirdweb/react");
 const lucide_react_1 = require("lucide-react");
-const PanelOnramp_1 = require("./common/PanelOnramp");
 const utils_1 = require("../../utils");
+const PanelOnramp_1 = require("./common/PanelOnramp");
 const SLIPPAGE_PERCENT = 3;
 exports.HYPE_TOKEN_DETAILS = {
     SYMBOL: "HYPE",
@@ -135,10 +135,10 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
             await handleFiatOrder();
         }
     };
-    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), (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: selectedCryptoPaymentMethod, 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: recipientAddress, destinationToken: anyspend_1.B3_TOKEN, destinationChainId: chains_1.base.id, dstTokenSymbol: exports.HYPE_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: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: anyspend_1.B3_TOKEN, dstTokenSymbol: exports.HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: exports.HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: chains_1.base.id, 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: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), (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: selectedCryptoPaymentMethod, 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: recipientAddress, destinationToken: anyspend_1.B3_TOKEN, destinationChainId: chains_1.base.id, dstTokenSymbol: exports.HYPE_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: selectedRecipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), setRecipientAddress: setSelectedRecipientAddress, recipientAddressFromProps: recipientAddress, globalAddress: globalAddress, dstAmount: dstAmount, dstToken: anyspend_1.B3_TOKEN, dstTokenSymbol: exports.HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: exports.HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: chains_1.base.id, 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] }));
+                            }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL), selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }))] }) }), (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] }));
     // Handle crypto order creation
     const handleCryptoOrder = async () => {
         try {

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

@@ -9,16 +9,14 @@ const number_1 = require("../../../../shared/utils/number");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("motion/react");
 const react_3 = require("react");
+const useConnectedWalletDisplay_1 = require("../../hooks/useConnectedWalletDisplay");
 const CryptoPaymentMethod_1 = require("./CryptoPaymentMethod");
 const OrderTokenAmount_1 = require("./OrderTokenAmount");
 const TokenBalance_1 = require("./TokenBalance");
 function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, isSrcInputDirty, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, onTokenSelect, onShowFeeDetail, }) {
-    const { connectedSmartWallet, connectedEOAWallet } = (0, react_1.useAccountWallet)();
     const { data: srcTokenMetadata } = (0, react_1.useTokenData)(selectedSrcToken?.chainId, selectedSrcToken?.address);
-    // Determine which address to use based on payment method
-    const walletAddress = selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET
-        ? connectedSmartWallet?.getAccount()?.address
-        : connectedEOAWallet?.getAccount()?.address;
+    // Use custom hook to determine wallet address based on payment method
+    const { walletAddress } = (0, useConnectedWalletDisplay_1.useConnectedWalletDisplay)(selectedCryptoPaymentMethod);
     const { data: profileData } = (0, react_1.useProfile)({ address: walletAddress });
     const connectedName = profileData?.displayName;
     // Add ref to track if we've applied metadata
@@ -45,7 +43,7 @@ function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedS
     (0, react_3.useEffect)(() => {
         appliedSrcMetadataRef.current = false;
     }, [selectedSrcToken.address, selectedSrcToken.chainId]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/50 flex h-7 items-center gap-1.5 text-sm", children: ["Pay", !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" }) }))] }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [walletAddress ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(walletAddress || "") })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Global Account", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transfer crypto", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: walletAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/50 flex h-7 items-center gap-1.5 text-sm", children: ["Pay", !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" }) }))] }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [walletAddress ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(walletAddress || "") })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Global Account", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transfer crypto", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: walletAddress, walletAddress: walletAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
                     setIsSrcInputDirty(true);
                     setSrcAmount(value);
                 }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken, onTokenSelect: onTokenSelect }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: (0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyIn?.amountUsd, {

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

@@ -17,6 +17,7 @@ const sonner_1 = require("sonner");
 const react_4 = require("thirdweb/react");
 const wallets_1 = require("thirdweb/wallets");
 const wagmi_1 = require("wagmi");
+const useConnectedWalletDisplay_1 = require("../../hooks/useConnectedWalletDisplay");
 var CryptoPaymentMethodType;
 (function (CryptoPaymentMethodType) {
     CryptoPaymentMethodType["NONE"] = "none";
@@ -26,7 +27,7 @@ var CryptoPaymentMethodType;
 })(CryptoPaymentMethodType || (exports.CryptoPaymentMethodType = CryptoPaymentMethodType = {}));
 function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
     const { wallet: globalWallet, connectedEOAWallet: connectedEOAWallet, connectedSmartWallet: connectedSmartWallet, } = (0, react_1.useAccountWallet)();
-    const { connector, address, isConnected: wagmiWalletIsConnected } = (0, wagmi_1.useAccount)();
+    const { connector, address } = (0, wagmi_1.useAccount)();
     const { connect, connectors, isPending } = (0, wagmi_1.useConnect)();
     const { disconnect } = (0, wagmi_1.useDisconnect)();
     const { data: walletClient } = (0, wagmi_1.useWalletClient)();
@@ -37,19 +38,8 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
     const setGlobalAccountWallet = (0, utils_1.useGlobalWalletState)(state => state.setGlobalAccountWallet);
     const isConnected = !!connectedEOAWallet;
     const globalAddress = connectedSmartWallet?.getAccount()?.address;
-    // Helper function to check if two addresses are the same
-    const isSameAddress = (addr1, addr2) => {
-        if (!addr1 || !addr2)
-            return false;
-        return addr1.toLowerCase() === addr2.toLowerCase();
-    };
-    // Check if connectedEOAWallet and wagmi wallet represent the same wallet
-    const connectedEOAAddress = connectedEOAWallet?.getAccount()?.address;
-    const wagmiAddress = address;
-    const isWalletDuplicated = isSameAddress(connectedEOAAddress, wagmiAddress);
-    // Determine which wallet to show (prefer connectedEOAWallet if both exist and are the same)
-    const shouldShowConnectedEOA = !!connectedEOAWallet;
-    const shouldShowWagmiWallet = wagmiWalletIsConnected && (!isWalletDuplicated || !connectedEOAWallet);
+    // Use custom hook to determine wallet display logic
+    const { shouldShowConnectedEOA, shouldShowWagmiWallet } = (0, useConnectedWalletDisplay_1.useConnectedWalletDisplay)(selectedPaymentMethod);
     // Map wagmi connector names to thirdweb wallet IDs
     const getThirdwebWalletId = (connectorName) => {
         const walletMap = {
@@ -177,9 +167,11 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
                                                     setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                                                     onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                                                     setGlobalAccountWallet(activeWallet);
-                                                    setActiveWallet(connectedEOAWallet);
+                                                    if (connectedEOAWallet) {
+                                                        setActiveWallet(connectedEOAWallet);
+                                                    }
                                                     sonner_1.toast.success(`Selected ${eoaWalletInfo?.name || connector?.name || "wallet"}`);
-                                                }, className: (0, cn_1.cn)("crypto-payment-method-connect-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
+                                                }, className: (0, cn_1.cn)("crypto-payment-method-connect-wallet eoa-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
                                                     ? "connected-wallet border-as-brand bg-as-brand/5"
                                                     : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-blue-600" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: eoaWalletInfo?.name || connector?.name || "Connected Wallet" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(connectedEOAWallet?.getAccount()?.address || "") })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 rounded-full bg-green-500" })), (0, jsx_runtime_1.jsx)("button", { onClick: e => {
                                                                         e.stopPropagation();
@@ -199,7 +191,7 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
                                                         }
                                                     }
                                                     sonner_1.toast.success(`Selected ${connector?.name || "wallet"}`);
-                                                }, className: (0, cn_1.cn)("crypto-payment-method-connect-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
+                                                }, className: (0, cn_1.cn)("crypto-payment-method-connect-wallet wagmi-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
                                                     ? "connected-wallet border-as-brand bg-as-brand/5"
                                                     : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-blue-600" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: connector?.name || "Connected Wallet" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(address || "") })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 rounded-full bg-green-500" })), (0, jsx_runtime_1.jsx)("button", { onClick: e => {
                                                                         e.stopPropagation();

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

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

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

@@ -8,11 +8,21 @@ 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, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, isSrcInputDirty, onChangeDstAmount, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, onShowPointsDetail, onShowFeeDetail, }) {
+function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false, selectedRecipientAddress, recipientName, onSelectRecipient, setRecipientAddress, recipientAddressFromProps, globalAddress, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, isSrcInputDirty, onChangeDstAmount, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, onShowPointsDetail, onShowFeeDetail, selectedCryptoPaymentMethod, }) {
     const featureFlags = (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 ? (
             // 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 })] })] })) : (