@b3dotfun/sdk 0.0.64 → 0.0.65-alpha.1

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

@@ -7,8 +7,7 @@ import { ArrowDown, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import { useEffect, useMemo, useRef } from "react";
 import { toast } from "sonner";
-import { useActiveWallet, useSetActiveWallet } from "thirdweb/react";
-import { useGlobalWalletState } from "../../utils/index.js";
+import { useSetActiveWallet } from "thirdweb/react";
 import { PanelView, useAnyspendFlow } from "../hooks/useAnyspendFlow.js";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
 import { CryptoPaySection } from "./common/CryptoPaySection.js";
@@ -31,7 +30,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         SYMBOL: destinationToken.symbol ?? "TOKEN",
         LOGO_URI: destinationToken.metadata?.logoURI ?? "",
     };
-    const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, selectedDstToken, selectedDstChainId, srcAmount, setSrcAmount, dstAmount, isSrcInputDirty, setIsSrcInputDirty, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, hasEnoughBalance, isBalanceLoading, anyspendQuote, isLoadingAnyspendQuote, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = useAnyspendFlow({
+    const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, selectedDstToken, selectedDstChainId, srcAmount, setSrcAmount, dstAmount, isSrcInputDirty, setIsSrcInputDirty, selectedCryptoPaymentMethod, effectiveCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, hasEnoughBalance, isBalanceLoading, anyspendQuote, isLoadingAnyspendQuote, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = useAnyspendFlow({
         paymentType,
         recipientAddress,
         loadOrder,
@@ -47,18 +46,15 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
     });
     const { connectedEOAWallet } = useAccountWallet();
     const setActiveWallet = useSetActiveWallet();
-    const activeWallet = useActiveWallet();
-    const setGlobalAccountWallet = useGlobalWalletState(state => state.setGlobalAccountWallet);
     const appliedPreferEoa = useRef(false);
     useEffect(() => {
         if (preferEoa && !appliedPreferEoa.current) {
             if (connectedEOAWallet) {
                 appliedPreferEoa.current = true;
-                setGlobalAccountWallet(activeWallet);
                 setActiveWallet(connectedEOAWallet);
             }
         }
-    }, [preferEoa, connectedEOAWallet, setActiveWallet, activeWallet, setGlobalAccountWallet]);
+    }, [preferEoa, connectedEOAWallet, setActiveWallet]);
     const selectedRecipientOrDefault = selectedRecipientAddress ?? recipientAddress;
     const expectedDstAmountRaw = anyspendQuote?.data?.currencyOut?.amount ?? "0";
     const buildCustomPayload = (_recipient) => {
@@ -87,12 +83,12 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         if (!anyspendQuote || !anyspendQuote.success)
             return { text: "Get quote error", disable: true, error: true, loading: false };
         if (paymentType === "crypto") {
-            if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
+            if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
                 return { text: "Choose payment method", disable: false, error: false, loading: false };
             }
             if (!hasEnoughBalance &&
                 !isBalanceLoading &&
-                selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
+                effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
                 return { text: "Insufficient balance", disable: true, error: true, loading: false };
             }
             return { text: `Execute ${actionLabel}`, disable: false, error: false, loading: false };
@@ -112,7 +108,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         selectedRecipientOrDefault,
         anyspendQuote,
         paymentType,
-        selectedCryptoPaymentMethod,
+        effectiveCryptoPaymentMethod,
         selectedFiatPaymentMethod,
         hasEnoughBalance,
         isBalanceLoading,
@@ -141,7 +137,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         }
     };
     const headerContent = header ? (header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote })) : (_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsxs("div", { children: [_jsx("h1", { className: "text-as-primary text-xl font-bold", children: actionLabel }), _jsx("p", { className: "text-as-secondary text-sm", children: "Pay from any token to execute a custom exact-in transaction." })] }) }));
-    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: cn("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
+    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: cn("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
                                 setIsSrcInputDirty(false);
                                 setSrcAmount(value);
                             }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL) }))] }) }), _jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && _jsx(Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }) }), mainFooter ? mainFooter : null] }));
@@ -221,7 +217,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
             toast.error("Failed to create order: " + err.message);
         }
     };
-    const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: paymentType === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
+    const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: paymentType === "fiat" ? CryptoPaymentMethodType.NONE : effectiveCryptoPaymentMethod, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
                     setOrderId(undefined);
                     setActivePanel(PanelView.MAIN);
                 }, disableUrlParamManagement: true, points: oat.data.points || undefined })) }) }));

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

@@ -6,7 +6,7 @@ import invariant from "invariant";
 import { motion } from "motion/react";
 import { useEffect, useMemo, useRef } from "react";
 import { toast } from "sonner";
-import { useActiveWallet, useSetActiveWallet } from "thirdweb/react";
+import { useSetActiveWallet } from "thirdweb/react";
 import { base } from "viem/chains";
 import { PanelView, useAnyspendFlow } from "../hooks/useAnyspendFlow.js";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
@@ -19,7 +19,6 @@ import { OrderDetails } from "./common/OrderDetails.js";
 import { PointsDetailPanel } from "./common/PointsDetailPanel.js";
 import { RecipientSelection } from "./common/RecipientSelection.js";
 import { ArrowDown, Loader2 } from "lucide-react";
-import { useGlobalWalletState } from "../../utils/index.js";
 import { PanelOnramp } from "./common/PanelOnramp.js";
 const SLIPPAGE_PERCENT = 3;
 export const HYPE_TOKEN_DETAILS = {
@@ -45,18 +44,15 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
     });
     const { connectedEOAWallet: connectedEOAWallet } = useAccountWallet();
     const setActiveWallet = useSetActiveWallet();
-    const activeWallet = useActiveWallet();
-    const setGlobalAccountWallet = useGlobalWalletState(state => state.setGlobalAccountWallet);
     const appliedPreferEoa = useRef(false);
     useEffect(() => {
         if (preferEoa && !appliedPreferEoa.current) {
             if (connectedEOAWallet) {
                 appliedPreferEoa.current = true;
-                setGlobalAccountWallet(activeWallet);
                 setActiveWallet(connectedEOAWallet);
             }
         }
-    }, [preferEoa, connectedEOAWallet, setActiveWallet, activeWallet, setGlobalAccountWallet]);
+    }, [preferEoa, connectedEOAWallet, setActiveWallet]);
     // Button state logic
     const btnInfo = useMemo(() => {
         if (activeInputAmountInWei === "0")

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

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useGlobalWalletState } from "../../../../anyspend/utils/index.js";
 import { useAccountWallet } from "../../../../global-account/react/index.js";
 import { cn } from "../../../../shared/utils/cn.js";
 import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
@@ -10,7 +9,7 @@ import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-reac
 import { useState } from "react";
 import { createPortal } from "react-dom";
 import { toast } from "sonner";
-import { useActiveWallet, useSetActiveWallet, useWalletInfo } from "thirdweb/react";
+import { useSetActiveWallet, useWalletInfo } from "thirdweb/react";
 import { createWallet } from "thirdweb/wallets";
 import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
 import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay.js";
@@ -30,8 +29,6 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
     const [showWalletModal, setShowWalletModal] = useState(false);
     const setActiveWallet = useSetActiveWallet();
     const { data: eoaWalletInfo } = useWalletInfo(connectedEOAWallet?.id);
-    const activeWallet = useActiveWallet();
-    const setGlobalAccountWallet = useGlobalWalletState(state => state.setGlobalAccountWallet);
     const isConnected = !!connectedEOAWallet;
     const globalAddress = connectedSmartWallet?.getAccount()?.address;
     // Use custom hook to determine wallet display logic
@@ -162,7 +159,6 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
     return (_jsxs("div", { className: "crypto-payment-method mx-auto h-fit w-[460px] max-w-full", children: [_jsxs("div", { className: cn("relative flex flex-col gap-10"), children: [_jsx("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: _jsx(ChevronLeft, { className: "h-6 w-6" }) }), _jsx("div", { className: "flex items-center justify-around gap-4", children: _jsx("div", { className: "flex-1 text-center", children: _jsx("h2", { className: "text-as-primary text-lg font-semibold", children: "Select a payment method" }) }) }), _jsxs("div", { className: "crypto-payment-methods flex flex-col gap-4", children: [(shouldShowConnectedEOA || shouldShowWagmiWallet || globalAddress) && (_jsxs("div", { className: "installed-wallets", children: [_jsx("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Connected wallets" }), _jsxs("div", { className: "space-y-2", children: [shouldShowConnectedEOA && (_jsx("button", { onClick: () => {
                                                     setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                                                     onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                                                    setGlobalAccountWallet(activeWallet);
                                                     if (connectedEOAWallet) {
                                                         setActiveWallet(connectedEOAWallet);
                                                     }

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

@@ -93,8 +93,12 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
     setDstAmount: import("react").Dispatch<import("react").SetStateAction<string>>;
     isSrcInputDirty: boolean;
     setIsSrcInputDirty: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    cryptoPaymentMethod: CryptoPaymentMethodType;
+    setCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
     selectedCryptoPaymentMethod: CryptoPaymentMethodType;
-    setSelectedCryptoPaymentMethod: import("react").Dispatch<import("react").SetStateAction<CryptoPaymentMethodType>>;
+    setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
+    effectiveCryptoPaymentMethod: CryptoPaymentMethodType;
+    resetPaymentMethods: () => void;
     selectedFiatPaymentMethod: FiatPaymentMethod;
     setSelectedFiatPaymentMethod: import("react").Dispatch<import("react").SetStateAction<FiatPaymentMethod>>;
     selectedRecipientAddress: string | undefined;

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

@@ -7,11 +7,12 @@ import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { parseUnits } from "viem";
 import { base, mainnet } from "viem/chains";
-import { useAccount } from "wagmi";
 import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod.js";
 import { FiatPaymentMethod } from "../components/common/FiatPaymentMethod.js";
 import { useAutoSelectCryptoPaymentMethod } from "./useAutoSelectCryptoPaymentMethod.js";
 import { useAutoSetActiveWalletFromWagmi } from "./useAutoSetActiveWalletFromWagmi.js";
+import { useConnectedWalletDisplay } from "./useConnectedWalletDisplay.js";
+import { useCryptoPaymentMethodState } from "./useCryptoPaymentMethodState.js";
 export var PanelView;
 (function (PanelView) {
     PanelView[PanelView["MAIN"] = 0] = "MAIN";
@@ -42,12 +43,12 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
     const [isSrcInputDirty, setIsSrcInputDirty] = useState(true);
     // Derive destination chain ID from token or prop (cannot change)
     const selectedDstChainId = destinationTokenChainId || selectedDstToken.chainId;
-    // Payment method state
-    const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState(CryptoPaymentMethodType.NONE);
+    // Payment method state with dual-state system (auto + explicit user selection)
+    const { cryptoPaymentMethod, setCryptoPaymentMethod, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, effectiveCryptoPaymentMethod, resetPaymentMethods, } = useCryptoPaymentMethodState();
     const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState(FiatPaymentMethod.NONE);
     // Recipient state
     const { address: globalAddress } = useAccountWallet();
-    const { address: wagmiAddress } = useAccount();
+    const { walletAddress } = useConnectedWalletDisplay(effectiveCryptoPaymentMethod);
     const [selectedRecipientAddress, setSelectedRecipientAddress] = useState(recipientAddress);
     const recipientProfile = useProfile({ address: selectedRecipientAddress, fresh: true });
     const recipientName = recipientProfile.data?.name;
@@ -62,7 +63,7 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
     // Check token balance for crypto payments
     const { rawBalance, isLoading: isBalanceLoading } = useTokenBalance({
         token: selectedSrcToken,
-        address: wagmiAddress,
+        address: walletAddress,
     });
     // Check if user has enough balance
     const hasEnoughBalance = useMemo(() => {
@@ -79,8 +80,9 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
     // Auto-select crypto payment method based on available wallets and balance
     useAutoSelectCryptoPaymentMethod({
         paymentType,
+        cryptoPaymentMethod,
+        setCryptoPaymentMethod,
         selectedCryptoPaymentMethod,
-        setSelectedCryptoPaymentMethod,
         hasEnoughBalance,
         isBalanceLoading,
     });
@@ -180,9 +182,9 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
             if (!disableUrlParamManagement) {
                 const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
                 params.set("orderId", newOrderId);
-                if (selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
-                    console.log("Setting cryptoPaymentMethod in URL:", selectedCryptoPaymentMethod);
-                    params.set("cryptoPaymentMethod", selectedCryptoPaymentMethod);
+                if (effectiveCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
+                    console.log("Setting cryptoPaymentMethod in URL:", effectiveCryptoPaymentMethod);
+                    params.set("cryptoPaymentMethod", effectiveCryptoPaymentMethod);
                 }
                 else {
                     console.log("Payment method is NONE, not setting in URL");
@@ -246,8 +248,12 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
         isSrcInputDirty,
         setIsSrcInputDirty,
         // Payment methods
+        cryptoPaymentMethod,
+        setCryptoPaymentMethod,
         selectedCryptoPaymentMethod,
         setSelectedCryptoPaymentMethod,
+        effectiveCryptoPaymentMethod,
+        resetPaymentMethods,
         selectedFiatPaymentMethod,
         setSelectedFiatPaymentMethod,
         // Recipient

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

@@ -2,10 +2,12 @@ import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMetho
 interface UseAutoSelectCryptoPaymentMethodParams {
     /** Current payment type (crypto or fiat) */
     paymentType?: "crypto" | "fiat";
-    /** Currently selected payment method */
+    /** Auto-selected payment method based on balance (not used in hook logic, but part of state management) */
+    cryptoPaymentMethod: CryptoPaymentMethodType;
+    /** Function to update the auto-selected payment method */
+    setCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
+    /** User explicitly selected payment method (NONE means no explicit selection) */
     selectedCryptoPaymentMethod: CryptoPaymentMethodType;
-    /** Function to update the selected payment method */
-    setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
     /** Whether user has enough balance to pay */
     hasEnoughBalance: boolean;
     /** Whether balance is still loading */
@@ -16,11 +18,11 @@ interface UseAutoSelectCryptoPaymentMethodParams {
  * based on available wallets and balance.
  *
  * Auto-selection logic:
- * - Only auto-selects when payment method is NONE (doesn't override user choices)
+ * - Only auto-selects when selectedCryptoPaymentMethod is NONE (user hasn't explicitly chosen)
  * - If EOA/Wagmi wallet connected + has balance → CONNECT_WALLET
  * - If EOA/Wagmi wallet connected + insufficient balance → TRANSFER_CRYPTO
  * - If only Global wallet available → GLOBAL_WALLET
  * - If no wallets → remains NONE
  */
-export declare function useAutoSelectCryptoPaymentMethod({ paymentType, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, hasEnoughBalance, isBalanceLoading, }: UseAutoSelectCryptoPaymentMethodParams): void;
+export declare function useAutoSelectCryptoPaymentMethod({ paymentType, cryptoPaymentMethod: _cryptoPaymentMethod, setCryptoPaymentMethod, selectedCryptoPaymentMethod, hasEnoughBalance, isBalanceLoading, }: UseAutoSelectCryptoPaymentMethodParams): void;
 export {};

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

@@ -6,18 +6,22 @@ import { useConnectedWalletDisplay } from "./useConnectedWalletDisplay.js";
  * based on available wallets and balance.
  *
  * Auto-selection logic:
- * - Only auto-selects when payment method is NONE (doesn't override user choices)
+ * - Only auto-selects when selectedCryptoPaymentMethod is NONE (user hasn't explicitly chosen)
  * - If EOA/Wagmi wallet connected + has balance → CONNECT_WALLET
  * - If EOA/Wagmi wallet connected + insufficient balance → TRANSFER_CRYPTO
  * - If only Global wallet available → GLOBAL_WALLET
  * - If no wallets → remains NONE
  */
-export function useAutoSelectCryptoPaymentMethod({ paymentType = "crypto", selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, hasEnoughBalance, isBalanceLoading, }) {
+export function useAutoSelectCryptoPaymentMethod({ paymentType = "crypto", cryptoPaymentMethod: _cryptoPaymentMethod, setCryptoPaymentMethod, selectedCryptoPaymentMethod, hasEnoughBalance, isBalanceLoading, }) {
     // Get suggested payment method based on available wallets
     const { suggestedPaymentMethod } = useConnectedWalletDisplay(selectedCryptoPaymentMethod);
     useEffect(() => {
-        // Only auto-select when on crypto payment type and payment method is NONE
-        if (paymentType !== "crypto" || selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
+        // Only auto-select when on crypto payment type
+        if (paymentType !== "crypto") {
+            return;
+        }
+        // Only auto-switch if user hasn't explicitly selected a payment method
+        if (selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
             return;
         }
         // If we have a suggested payment method (wallet is connected), use it
@@ -26,28 +30,28 @@ export function useAutoSelectCryptoPaymentMethod({ paymentType = "crypto", selec
             // Otherwise, default to TRANSFER_CRYPTO if balance is insufficient
             if (!isBalanceLoading) {
                 if (hasEnoughBalance && suggestedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
-                    setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                    setCryptoPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                 }
                 else if (!hasEnoughBalance && suggestedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
                     // Wallet connected but insufficient balance - suggest transfer
-                    setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
+                    setCryptoPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
                 }
                 else {
                     // Use suggested method (e.g., GLOBAL_WALLET)
-                    setSelectedCryptoPaymentMethod(suggestedPaymentMethod);
+                    setCryptoPaymentMethod(suggestedPaymentMethod);
                 }
             }
             else {
                 // Balance still loading, use suggested method
-                setSelectedCryptoPaymentMethod(suggestedPaymentMethod);
+                setCryptoPaymentMethod(suggestedPaymentMethod);
             }
         }
     }, [
         paymentType,
+        setCryptoPaymentMethod,
         selectedCryptoPaymentMethod,
         suggestedPaymentMethod,
         hasEnoughBalance,
         isBalanceLoading,
-        setSelectedCryptoPaymentMethod,
     ]);
 }

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

@@ -0,0 +1,42 @@
+import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
+interface UseCryptoPaymentMethodStateResult {
+    /** Auto-selected payment method based on balance */
+    cryptoPaymentMethod: CryptoPaymentMethodType;
+    /** Function to update the auto-selected payment method */
+    setCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
+    /** User explicitly selected payment method (NONE means no explicit selection) */
+    selectedCryptoPaymentMethod: CryptoPaymentMethodType;
+    /** Function to update the user-selected payment method */
+    setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
+    /** Effective payment method (user selection takes priority over auto-selection) */
+    effectiveCryptoPaymentMethod: CryptoPaymentMethodType;
+    /** Reset both payment method states to NONE */
+    resetPaymentMethods: () => void;
+}
+/**
+ * Custom hook to manage crypto payment method state with dual-state system:
+ *
+ * - `cryptoPaymentMethod`: Auto-selected based on wallet availability and balance
+ * - `selectedCryptoPaymentMethod`: Explicitly selected by user
+ * - `effectiveCryptoPaymentMethod`: User selection takes priority over auto-selection
+ *
+ * This allows automatic payment method suggestions while respecting explicit user choices.
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   cryptoPaymentMethod,
+ *   setCryptoPaymentMethod,
+ *   selectedCryptoPaymentMethod,
+ *   setSelectedCryptoPaymentMethod,
+ *   effectiveCryptoPaymentMethod,
+ *   resetPaymentMethods
+ * } = useCryptoPaymentMethodState();
+ *
+ * // Use effectiveCryptoPaymentMethod for display
+ * // Use setSelectedCryptoPaymentMethod when user explicitly selects
+ * // Call resetPaymentMethods when switching tabs or going back
+ * ```
+ */
+export declare function useCryptoPaymentMethodState(): UseCryptoPaymentMethodStateResult;
+export {};

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

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod.js";
+/**
+ * Custom hook to manage crypto payment method state with dual-state system:
+ *
+ * - `cryptoPaymentMethod`: Auto-selected based on wallet availability and balance
+ * - `selectedCryptoPaymentMethod`: Explicitly selected by user
+ * - `effectiveCryptoPaymentMethod`: User selection takes priority over auto-selection
+ *
+ * This allows automatic payment method suggestions while respecting explicit user choices.
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   cryptoPaymentMethod,
+ *   setCryptoPaymentMethod,
+ *   selectedCryptoPaymentMethod,
+ *   setSelectedCryptoPaymentMethod,
+ *   effectiveCryptoPaymentMethod,
+ *   resetPaymentMethods
+ * } = useCryptoPaymentMethodState();
+ *
+ * // Use effectiveCryptoPaymentMethod for display
+ * // Use setSelectedCryptoPaymentMethod when user explicitly selects
+ * // Call resetPaymentMethods when switching tabs or going back
+ * ```
+ */
+export function useCryptoPaymentMethodState() {
+    // cryptoPaymentMethod: auto-selected based on balance
+    const [cryptoPaymentMethod, setCryptoPaymentMethod] = useState(CryptoPaymentMethodType.NONE);
+    // selectedCryptoPaymentMethod: explicitly selected by user (NONE means no explicit selection)
+    const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState(CryptoPaymentMethodType.NONE);
+    // The effective payment method (user selection takes priority over auto-selection)
+    const effectiveCryptoPaymentMethod = selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE ? selectedCryptoPaymentMethod : cryptoPaymentMethod;
+    // Helper function to reset both states
+    const resetPaymentMethods = () => {
+        setCryptoPaymentMethod(CryptoPaymentMethodType.NONE);
+        setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE);
+    };
+    return {
+        cryptoPaymentMethod,
+        setCryptoPaymentMethod,
+        selectedCryptoPaymentMethod,
+        setSelectedCryptoPaymentMethod,
+        effectiveCryptoPaymentMethod,
+        resetPaymentMethods,
+    };
+}

package/dist/esm/anyspend/utils/index.d.ts

@@ -1,4 +1,3 @@
-export * from "./accountStore";
 export * from "./address";
 export * from "./chain";
 export * from "./format";

package/dist/esm/anyspend/utils/index.js

@@ -1,4 +1,3 @@
-export * from "./accountStore.js";
 export * from "./address.js";
 export * from "./chain.js";
 export * from "./format.js";

package/dist/esm/global-account/react/components/B3DynamicModal.js

@@ -3,8 +3,7 @@ import { AnySpend, AnySpendBondKit, AnySpendBuySpin, AnySpendNFT, AnyspendSignat
 import { AnySpendDepositHype } from "../../../anyspend/react/components/AnyspendDepositHype.js";
 import { AnySpendStakeUpside } from "../../../anyspend/react/components/AnySpendStakeUpside.js";
 import { AnySpendStakeUpsideExactIn } from "../../../anyspend/react/components/AnySpendStakeUpsideExactIn.js";
-import { useGlobalWalletState } from "../../../anyspend/utils/index.js";
-import { useIsMobile, useModalStore } from "../../../global-account/react/index.js";
+import { useGlobalAccount, useIsMobile, useModalStore } from "../../../global-account/react/index.js";
 import { cn } from "../../../shared/utils/cn.js";
 import { debugB3React } from "../../../shared/utils/debug.js";
 import { useEffect, useRef } from "react";
@@ -24,19 +23,17 @@ export function B3DynamicModal() {
     const { theme } = useB3();
     const isMobile = useIsMobile();
     const prevIsOpenRef = useRef(isOpen);
-    const globalAccountWallet = useGlobalWalletState(state => state.globalAccountWallet);
-    const setGlobalAccountWallet = useGlobalWalletState(state => state.setGlobalAccountWallet);
+    const { wallet } = useGlobalAccount();
     const setActiveWallet = useSetActiveWallet();
     // anyspend cleanup global account chnages by setting account back
     useEffect(() => {
         if (prevIsOpenRef.current && !isOpen) {
-            if (globalAccountWallet) {
-                setActiveWallet(globalAccountWallet);
-                setGlobalAccountWallet(undefined);
+            if (wallet) {
+                setActiveWallet(wallet);
             }
         }
         prevIsOpenRef.current = isOpen;
-    }, [isOpen, globalAccountWallet, setActiveWallet, setGlobalAccountWallet]);
+    }, [isOpen, wallet, setActiveWallet]);
     // Define arrays for different modal type groups
     const fullWidthTypes = [
         "anySpend",

package/dist/esm/global-account/react/hooks/useAuthentication.js

@@ -38,17 +38,6 @@ export function useAuthentication(partnerId) {
     const activeWagmiAccount = useAccount();
     const { switchAccount } = useSwitchAccount();
     debug("@@activeWagmiAccount", activeWagmiAccount);
-    // Check localStorage version and clear if not found or mismatched
-    useEffect(() => {
-        if (typeof localStorage !== "undefined") {
-            const version = localStorage.getItem("version");
-            if (version !== "1") {
-                debug("@@localStorage:clearing due to version mismatch", { version });
-                localStorage.clear();
-                localStorage.setItem("version", "1");
-            }
-        }
-    }, []);
     const wallet = ecosystemWallet(ecosystemWalletId, {
         partnerId: partnerId,
     });

package/dist/esm/global-account/react/hooks/useGlobalAccount.d.ts

@@ -3,4 +3,5 @@ export declare function useGlobalAccount(): {
     account: Wallet | undefined;
     address: string | undefined;
     info: import("@tanstack/react-query").UseQueryResult<import("thirdweb/wallets").WalletInfo, Error>;
+    wallet: Wallet | undefined;
 };

package/dist/esm/global-account/react/hooks/useGlobalAccount.js

@@ -7,6 +7,7 @@ export function useGlobalAccount() {
     const wallets = useConnectedWallets();
     const isConnected = useAuthStore(state => state.isConnected);
     const [globalAccount, setGlobalAccount] = useState(undefined);
+    const [globalAccountWallet, setGlobalAccountWallet] = useState(undefined);
     const [address, setAddress] = useState(undefined);
     const walletInfo = useWalletInfo(globalAccount?.id);
     useEffect(() => {
@@ -17,6 +18,7 @@ export function useGlobalAccount() {
             return;
         }
         const globalAccountWallet = wallets.find(wallet => wallet.id.startsWith("ecosystem."));
+        setGlobalAccountWallet(globalAccountWallet);
         const account = globalAccountWallet?.getAccount();
         setGlobalAccount(globalAccountWallet);
         setAddress(account?.address);
@@ -25,5 +27,6 @@ export function useGlobalAccount() {
         account: globalAccount,
         address,
         info: walletInfo,
+        wallet: globalAccountWallet,
     };
 }

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

@@ -93,8 +93,12 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
     setDstAmount: import("react").Dispatch<import("react").SetStateAction<string>>;
     isSrcInputDirty: boolean;
     setIsSrcInputDirty: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    cryptoPaymentMethod: CryptoPaymentMethodType;
+    setCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
     selectedCryptoPaymentMethod: CryptoPaymentMethodType;
-    setSelectedCryptoPaymentMethod: import("react").Dispatch<import("react").SetStateAction<CryptoPaymentMethodType>>;
+    setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
+    effectiveCryptoPaymentMethod: CryptoPaymentMethodType;
+    resetPaymentMethods: () => void;
     selectedFiatPaymentMethod: FiatPaymentMethod;
     setSelectedFiatPaymentMethod: import("react").Dispatch<import("react").SetStateAction<FiatPaymentMethod>>;
     selectedRecipientAddress: string | undefined;

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

@@ -2,10 +2,12 @@ import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMetho
 interface UseAutoSelectCryptoPaymentMethodParams {
     /** Current payment type (crypto or fiat) */
     paymentType?: "crypto" | "fiat";
-    /** Currently selected payment method */
+    /** Auto-selected payment method based on balance (not used in hook logic, but part of state management) */
+    cryptoPaymentMethod: CryptoPaymentMethodType;
+    /** Function to update the auto-selected payment method */
+    setCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
+    /** User explicitly selected payment method (NONE means no explicit selection) */
     selectedCryptoPaymentMethod: CryptoPaymentMethodType;
-    /** Function to update the selected payment method */
-    setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
     /** Whether user has enough balance to pay */
     hasEnoughBalance: boolean;
     /** Whether balance is still loading */
@@ -16,11 +18,11 @@ interface UseAutoSelectCryptoPaymentMethodParams {
  * based on available wallets and balance.
  *
  * Auto-selection logic:
- * - Only auto-selects when payment method is NONE (doesn't override user choices)
+ * - Only auto-selects when selectedCryptoPaymentMethod is NONE (user hasn't explicitly chosen)
  * - If EOA/Wagmi wallet connected + has balance → CONNECT_WALLET
  * - If EOA/Wagmi wallet connected + insufficient balance → TRANSFER_CRYPTO
  * - If only Global wallet available → GLOBAL_WALLET
  * - If no wallets → remains NONE
  */
-export declare function useAutoSelectCryptoPaymentMethod({ paymentType, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, hasEnoughBalance, isBalanceLoading, }: UseAutoSelectCryptoPaymentMethodParams): void;
+export declare function useAutoSelectCryptoPaymentMethod({ paymentType, cryptoPaymentMethod: _cryptoPaymentMethod, setCryptoPaymentMethod, selectedCryptoPaymentMethod, hasEnoughBalance, isBalanceLoading, }: UseAutoSelectCryptoPaymentMethodParams): void;
 export {};

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

@@ -0,0 +1,42 @@
+import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
+interface UseCryptoPaymentMethodStateResult {
+    /** Auto-selected payment method based on balance */
+    cryptoPaymentMethod: CryptoPaymentMethodType;
+    /** Function to update the auto-selected payment method */
+    setCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
+    /** User explicitly selected payment method (NONE means no explicit selection) */
+    selectedCryptoPaymentMethod: CryptoPaymentMethodType;
+    /** Function to update the user-selected payment method */
+    setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
+    /** Effective payment method (user selection takes priority over auto-selection) */
+    effectiveCryptoPaymentMethod: CryptoPaymentMethodType;
+    /** Reset both payment method states to NONE */
+    resetPaymentMethods: () => void;
+}
+/**
+ * Custom hook to manage crypto payment method state with dual-state system:
+ *
+ * - `cryptoPaymentMethod`: Auto-selected based on wallet availability and balance
+ * - `selectedCryptoPaymentMethod`: Explicitly selected by user
+ * - `effectiveCryptoPaymentMethod`: User selection takes priority over auto-selection
+ *
+ * This allows automatic payment method suggestions while respecting explicit user choices.
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   cryptoPaymentMethod,
+ *   setCryptoPaymentMethod,
+ *   selectedCryptoPaymentMethod,
+ *   setSelectedCryptoPaymentMethod,
+ *   effectiveCryptoPaymentMethod,
+ *   resetPaymentMethods
+ * } = useCryptoPaymentMethodState();
+ *
+ * // Use effectiveCryptoPaymentMethod for display
+ * // Use setSelectedCryptoPaymentMethod when user explicitly selects
+ * // Call resetPaymentMethods when switching tabs or going back
+ * ```
+ */
+export declare function useCryptoPaymentMethodState(): UseCryptoPaymentMethodStateResult;
+export {};