@b3dotfun/sdk 0.0.62 → 0.0.63-alpha.0

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

@@ -0,0 +1,288 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnySpendStakeB3ExactIn = AnySpendStakeB3ExactIn;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const anyspend_1 = require("../../../anyspend");
+const utils_1 = require("../../../anyspend/utils");
+const react_1 = require("../../../global-account/react");
+const constants_1 = require("../../../shared/constants");
+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 sonner_1 = require("sonner");
+const viem_1 = require("viem");
+const chains_1 = require("viem/chains");
+const wagmi_1 = require("wagmi");
+const AnySpendCustomExactIn_1 = require("./AnySpendCustomExactIn");
+const EthIcon_1 = require("./icons/EthIcon");
+const SolIcon_1 = require("./icons/SolIcon");
+const USDCIcon_1 = require("./icons/USDCIcon");
+const basePublicClient = (0, viem_1.createPublicClient)({
+    chain: chains_1.base,
+    transport: (0, viem_1.http)(constants_1.PUBLIC_BASE_RPC_URL),
+});
+const ERC20Staking = "0xbf04200be3cbf371467a539706393c81c470f523";
+const STAKE_FUNCTION_ABI = JSON.stringify([
+    {
+        name: "stake",
+        type: "function",
+        stateMutability: "nonpayable",
+        inputs: [
+            { name: "amount", type: "uint256" },
+            { name: "beneficiary", type: "address" },
+        ],
+        outputs: [],
+    },
+]);
+function AnySpendStakeB3ExactIn({ loadOrder, mode = "modal", sourceTokenAddress, sourceTokenChainId, recipientAddress, stakeAmount, onSuccess, }) {
+    const hasMounted = (0, react_1.useHasMounted)();
+    const { setB3ModalOpen } = (0, react_1.useModalStore)();
+    // 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)("");
+    const [showSuccessModal, setShowSuccessModal] = (0, react_3.useState)(false);
+    // Wait for transaction confirmation
+    const { isLoading: isTxPending, isSuccess: isTxSuccess } = (0, wagmi_1.useWaitForTransactionReceipt)({
+        hash: stakingTxHash,
+        query: {
+            structuralSharing: false, // Disable to avoid BigInt serialization issues
+        },
+    });
+    // Show success modal when transaction is confirmed
+    (0, react_3.useEffect)(() => {
+        if (isTxSuccess && stakingTxHash) {
+            setShowAmountPrompt(false);
+            setShowSuccessModal(true);
+            setIsStaking(false);
+        }
+    }, [isTxSuccess, stakingTxHash]);
+    const [userStakeAmount, setUserStakeAmount] = (0, react_3.useState)(stakeAmount || "");
+    const [showAmountPrompt, setShowAmountPrompt] = (0, react_3.useState)(!stakeAmount);
+    const [isAmountValid, setIsAmountValid] = (0, react_3.useState)(!!stakeAmount);
+    const [validationError, setValidationError] = (0, react_3.useState)("");
+    // Store display amount for UI
+    const [displayAmount, setDisplayAmount] = (0, react_3.useState)("");
+    // Debounced state for balance checks and messaging
+    const [debouncedAmount, setDebouncedAmount] = (0, react_3.useState)("");
+    const [debouncedUserStakeAmount, setDebouncedUserStakeAmount] = (0, react_3.useState)("");
+    // Debounce the amount for balance checks
+    (0, react_3.useEffect)(() => {
+        const timer = setTimeout(() => {
+            setDebouncedAmount(displayAmount);
+            setDebouncedUserStakeAmount(userStakeAmount);
+        }, 500);
+        return () => clearTimeout(timer);
+    }, [displayAmount, userStakeAmount]);
+    (0, react_3.useEffect)(() => {
+        if (stakeAmount) {
+            setUserStakeAmount(stakeAmount);
+            setShowAmountPrompt(false);
+            setIsAmountValid(true);
+        }
+    }, [stakeAmount]);
+    if (!recipientAddress)
+        return null;
+    const validateAndSetAmount = (value) => {
+        // Allow decimal input by validating against a pattern
+        // This regex allows numbers with up to 18 decimal places
+        const isValidFormat = /^(\d+\.?\d{0,18}|\.\d{1,18})$/.test(value) || value === "";
+        if (!isValidFormat && value !== "") {
+            return;
+        }
+        setDisplayAmount(value);
+        try {
+            if (value === "" || value === ".") {
+                setUserStakeAmount("");
+                setIsAmountValid(false);
+                setValidationError("");
+                return;
+            }
+            // For UI validation - check if it's a positive number
+            const numValue = parseFloat(value);
+            if (isNaN(numValue) || numValue <= 0) {
+                setIsAmountValid(false);
+                setUserStakeAmount("");
+                setValidationError("Please enter a valid positive number");
+                return;
+            }
+            // Check minimum stake amount (50 B3)
+            if (numValue < 50) {
+                setIsAmountValid(false);
+                setUserStakeAmount("");
+                setValidationError("Minimum stake amount is 50 B3");
+                return;
+            }
+            // Convert to wei (multiply by 10^18)
+            // Handle decimal places correctly by removing the decimal point
+            let fullAmount;
+            if (value.includes(".")) {
+                const [whole, fraction = ""] = value.split(".");
+                // Pad with zeros to 18 decimal places
+                const paddedFraction = fraction.padEnd(18, "0");
+                fullAmount = whole + paddedFraction;
+            }
+            else {
+                fullAmount = value + "000000000000000000"; // Add 18 zeros
+            }
+            // Remove leading zeros
+            fullAmount = fullAmount.replace(/^0+/, "") || "0";
+            // Set the full amount for the actual transaction
+            setUserStakeAmount(fullAmount);
+            setIsAmountValid(true);
+            setValidationError("");
+        }
+        catch (error) {
+            setIsAmountValid(false);
+            setUserStakeAmount("");
+            setValidationError("Please enter a valid amount");
+        }
+    };
+    const handleDirectStaking = async () => {
+        if (!address || !basePublicClient || !userStakeAmount)
+            return;
+        try {
+            setIsStaking(true);
+            // Check current allowance
+            const allowance = await basePublicClient.readContract({
+                address: anyspend_1.B3_TOKEN.address,
+                abi: viem_1.erc20Abi,
+                functionName: "allowance",
+                args: [address, ERC20Staking],
+            });
+            // If allowance is insufficient, request approval first
+            if (allowance < BigInt(userStakeAmount)) {
+                sonner_1.toast.info("Approving B3 spending...");
+                const approvalData = (0, viem_1.encodeFunctionData)({
+                    abi: viem_1.erc20Abi,
+                    functionName: "approve",
+                    args: [ERC20Staking, BigInt(userStakeAmount)],
+                });
+                const approvalHash = await switchChainAndExecute(chains_1.base.id, {
+                    to: anyspend_1.B3_TOKEN.address,
+                    data: approvalData,
+                    value: BigInt(0),
+                });
+                if (!approvalHash) {
+                    sonner_1.toast.error("Approval failed. Please try again.");
+                    return;
+                }
+                const approvalReceipt = await basePublicClient.waitForTransactionReceipt({
+                    hash: approvalHash,
+                    confirmations: 1,
+                });
+                if (approvalReceipt?.status !== "success") {
+                    sonner_1.toast.error("Approval failed. Please try again.");
+                    return;
+                }
+            }
+            // Execute the stake
+            sonner_1.toast.info("Staking B3...");
+            const stakeData = (0, viem_1.encodeFunctionData)({
+                abi: anyspend_1.ABI_ERC20_STAKING,
+                functionName: "stake",
+                args: [BigInt(userStakeAmount), recipientAddress],
+            });
+            const stakeHash = await switchChainAndExecute(chains_1.base.id, {
+                to: ERC20Staking,
+                data: stakeData,
+                value: BigInt(0),
+            });
+            if (stakeHash) {
+                setStakingTxHash(stakeHash);
+                sonner_1.toast.success("Staking transaction submitted!");
+            }
+        }
+        catch (error) {
+            console.error("@@b3-stake-custom-exact-in:error:", error);
+            sonner_1.toast.error("Staking failed. Please try again.");
+            setShowSuccessModal(false); // Ensure modal doesn't show on error
+        }
+        finally {
+            setIsStaking(false);
+        }
+    };
+    const confirmAmount = () => {
+        if (!isAmountValid) {
+            sonner_1.toast.error("Please enter a valid amount to stake");
+            return;
+        }
+        // Check if user has sufficient B3 balance for direct staking
+        const hasEnoughBalance = b3RawBalance && BigInt(userStakeAmount) <= b3RawBalance;
+        if (hasEnoughBalance) {
+            // User has enough B3, proceed with direct staking
+            handleDirectStaking();
+        }
+        else {
+            // User needs more B3, proceed to AnySpend conversion flow
+            setShowAmountPrompt(false);
+        }
+    };
+    const header = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "relative mx-auto size-32", children: (0, jsx_runtime_1.jsx)("img", { alt: "b3 coin", className: "size-full", src: "https://cdn.b3.fun/b3-coin-3d.png" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "from-b3-react-background to-as-on-surface-1 mt-[-60px] w-full rounded-t-lg bg-gradient-to-t", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-[60px] w-full" }), (0, jsx_runtime_1.jsx)("div", { className: "mb-1 flex w-full flex-col items-center gap-2 p-5", children: (0, jsx_runtime_1.jsxs)("span", { className: "font-sf-rounded text-2xl font-semibold", children: ["Swap & Stake ", userStakeAmount ? (0, number_1.formatTokenAmount)(BigInt(userStakeAmount), 18) : "", " B3 (Exact In)"] }) })] })] }));
+    const onFocusStakeAmountInput = () => {
+        window.scrollTo(0, 0);
+        document.body.scrollTop = 0;
+    };
+    const customExactInConfig = {
+        functionAbi: STAKE_FUNCTION_ABI,
+        functionName: "stake",
+        functionArgs: ["{{amount_out}}", (0, utils_1.normalizeAddress)(recipientAddress)],
+        to: ERC20Staking,
+        spenderAddress: ERC20Staking,
+        action: "stake B3",
+    };
+    // Render amount input prompt if no stake amount is provided
+    if (showAmountPrompt) {
+        return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background flex w-full flex-col items-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: "w-full px-4", children: [(0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: false, animate: {
+                                    opacity: hasMounted ? 1 : 0,
+                                    y: hasMounted ? 0 : 20,
+                                    filter: hasMounted ? "blur(0px)" : "blur(10px)",
+                                }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative mx-auto size-48", children: (0, jsx_runtime_1.jsx)("video", { autoPlay: true, muted: true, playsInline: true, className: "size-full", src: "https://cdn.b3.fun/b3-sphere-to-coin.mp4" }) }), (0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: false, animate: {
+                                    opacity: hasMounted ? 1 : 0,
+                                    y: hasMounted ? 0 : 20,
+                                    filter: hasMounted ? "blur(0px)" : "blur(10px)",
+                                }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)("h2", { className: "font-sf-rounded font-neue-montreal-medium mb-1 text-center text-2xl font-semibold", children: (() => {
+                                        const hasEnoughBalance = b3RawBalance && BigInt(debouncedUserStakeAmount || "0") <= b3RawBalance;
+                                        return hasEnoughBalance || !debouncedAmount ? "Stake B3" : "Swap & Stake B3";
+                                    })() }) })] }), (0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: false, animate: {
+                            opacity: hasMounted ? 1 : 0,
+                            y: hasMounted ? 0 : 20,
+                            filter: hasMounted ? "blur(0px)" : "blur(10px)",
+                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/70 text-sm font-medium", children: "I want to stake" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary/50 flex items-center gap-1 text-sm", children: ["Available: ", isBalanceLoading ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-3 w-3 animate-spin" }) : `${b3Balance} B3`] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Input, { onFocus: onFocusStakeAmountInput, type: "text", placeholder: "0.00", value: displayAmount, onChange: e => validateAndSetAmount(e.target.value), className: `h-14 px-4 text-lg ${!isAmountValid && displayAmount ? "border-as-red" : "border-b3-react-border"}` }), (0, jsx_runtime_1.jsx)("div", { className: "font-pack absolute right-4 top-1/2 -translate-y-1/2 text-lg font-medium text-blue-500/70", children: "B3" })] }), !isAmountValid && displayAmount && (0, jsx_runtime_1.jsx)("p", { className: "text-as-red mt-2 text-sm", children: validationError }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (() => {
+                                    const hasEnoughBalance = b3RawBalance && BigInt(debouncedUserStakeAmount || "0") <= b3RawBalance;
+                                    if (!hasEnoughBalance || !debouncedAmount) {
+                                        return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-brand/10 flex flex-col items-center gap-2 rounded-lg p-4 pb-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary text-sm font-semibold", children: "Swap & stake from any token" }), (0, jsx_runtime_1.jsxs)(react_1.TextLoop, { children: [(0, jsx_runtime_1.jsx)(EthIcon_1.EthIcon, { className: "h-8 w-8" }), (0, jsx_runtime_1.jsx)(SolIcon_1.SolIcon, { className: "h-8 w-8" }), (0, jsx_runtime_1.jsx)(USDCIcon_1.UsdcIcon, { className: "h-8 w-8" })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { className: "text-as-primary h-4 w-4" }), (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3-coin-3d.png", className: "h-7 w-7", alt: "B3 Token" })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/50 text-sm font-medium", children: debouncedAmount
+                                                        ? `No problem, we'll help you swap to ${debouncedAmount} B3!`
+                                                        : "Not enough B3? We'll help you swap from other coins." })] }));
+                                    }
+                                })() }), (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: confirmAmount, disabled: !isAmountValid || !displayAmount || isStaking || isTxPending || isSwitchingOrExecuting, className: "bg-as-brand hover:bg-as-brand/90 text-as-primary mt-4 h-14 w-full rounded-xl text-lg font-medium", children: isStaking || isSwitchingOrExecuting ? "Staking..." : isTxPending ? "Confirming..." : "Continue" })] })] }) }));
+    }
+    // Success Modal for Direct Staking
+    if (showSuccessModal) {
+        return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background flex w-full flex-col items-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: "w-full p-4", children: [(0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: false, animate: {
+                                    opacity: hasMounted ? 1 : 0,
+                                    y: hasMounted ? 0 : 20,
+                                    filter: hasMounted ? "blur(0px)" : "blur(10px)",
+                                }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative mx-auto mb-4 size-[120px]", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 scale-95 rounded-[50%] bg-black/30 blur-md" }), (0, jsx_runtime_1.jsxs)(react_1.GlareCardRounded, { className: "overflow-hidden rounded-full border-none", children: [(0, jsx_runtime_1.jsx)("img", { alt: "b3 coin", loading: "lazy", width: "64", height: "64", decoding: "async", "data-nimg": "1", className: "size-full shrink-0 bg-transparent text-transparent", src: "https://cdn.b3.fun/b3-coin-3d.png" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 rounded-[50%] border border-white/10" })] })] }), (0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: false, animate: {
+                                    opacity: hasMounted ? 1 : 0,
+                                    y: hasMounted ? 0 : 20,
+                                    filter: hasMounted ? "blur(0px)" : "blur(10px)",
+                                }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsxs)("h2", { className: "font-sf-rounded mb-1 text-center text-2xl font-semibold", children: ["Staked ", (0, number_1.formatTokenAmount)(BigInt(userStakeAmount), 18), " B3"] }) })] }), (0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: false, animate: {
+                            opacity: hasMounted ? 1 : 0,
+                            y: hasMounted ? 0 : 20,
+                            filter: hasMounted ? "blur(0px)" : "blur(10px)",
+                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-6", children: (0, jsx_runtime_1.jsx)("a", { href: `https://basescan.org/tx/${stakingTxHash}`, target: "_blank", rel: "noopener noreferrer", className: "text-as-primary/70 hover:text-as-primary block break-all text-center font-mono text-sm underline transition-colors", children: "View transaction" }) }), (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => {
+                                    setB3ModalOpen(false);
+                                    onSuccess?.((0, number_1.formatTokenAmount)(BigInt(userStakeAmount), 18) ?? "");
+                                }, className: "bg-as-brand hover:bg-as-brand/90 text-as-primary h-14 w-full rounded-xl text-lg font-medium", children: "Done" })] })] }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(AnySpendCustomExactIn_1.AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: anyspend_1.B3_TOKEN, destinationChainId: chains_1.base.id, customExactInConfig: customExactInConfig, header: header, onSuccess: onSuccess }));
+}

package/dist/cjs/anyspend/react/components/AnySpendStakeUpsideExactIn.d.ts

@@ -0,0 +1,11 @@
+import { components } from "../../../anyspend/types/api";
+export declare function AnySpendStakeUpsideExactIn({ loadOrder, mode, recipientAddress, sourceTokenAddress, sourceTokenChainId, stakingContractAddress, token, onSuccess, }: {
+    loadOrder?: string;
+    mode?: "modal" | "page";
+    recipientAddress: string;
+    sourceTokenAddress?: string;
+    sourceTokenChainId?: number;
+    stakingContractAddress: string;
+    token: components["schemas"]["Token"];
+    onSuccess?: (amount: string) => void;
+}): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnySpendStakeUpsideExactIn = AnySpendStakeUpsideExactIn;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../../anyspend/utils");
+const chains_1 = require("viem/chains");
+const AnySpendCustomExactIn_1 = require("./AnySpendCustomExactIn");
+const STAKE_FOR_FUNCTION_ABI = JSON.stringify([
+    {
+        name: "stakeFor",
+        type: "function",
+        stateMutability: "nonpayable",
+        inputs: [
+            { name: "user", type: "address" },
+            { name: "amount", type: "uint256" },
+        ],
+        outputs: [],
+    },
+]);
+function AnySpendStakeUpsideExactIn({ loadOrder, mode = "modal", recipientAddress, sourceTokenAddress, sourceTokenChainId, stakingContractAddress, token, onSuccess, }) {
+    if (!recipientAddress)
+        return null;
+    const header = () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "from-b3-react-background to-as-on-surface-1 w-full rounded-t-lg bg-gradient-to-t", children: (0, jsx_runtime_1.jsx)("div", { className: "mb-1 flex w-full flex-col items-center gap-2", children: (0, jsx_runtime_1.jsxs)("span", { className: "font-sf-rounded text-2xl font-semibold", children: ["Swap & Stake ", token.symbol, " (Exact In)"] }) }) }) }));
+    const customExactInConfig = {
+        functionAbi: STAKE_FOR_FUNCTION_ABI,
+        functionName: "stakeFor",
+        functionArgs: [(0, utils_1.normalizeAddress)(recipientAddress), "{{amount_out}}"],
+        to: stakingContractAddress,
+        spenderAddress: stakingContractAddress,
+        action: `stake ${token.symbol}`,
+    };
+    return ((0, jsx_runtime_1.jsx)(AnySpendCustomExactIn_1.AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: token, destinationChainId: chains_1.base.id, customExactInConfig: customExactInConfig, header: header, onSuccess: onSuccess }));
+}

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 })] })] })) : (