@b3dotfun/sdk 0.0.21 → 0.0.22-alpha.1

package/README.md

@@ -418,3 +418,31 @@ try {
 ---
 
 For more detailed examples and advanced usage patterns, refer to the individual module documentation and type definitions.
+
+## Local dev
+
+If you are testing with one of the demos in this repo, simply make changes and they will reflect. If you are testing outside of this repo, follow the instructions below.
+
+Initial setup
+
+```
+yalc publish # run this in sdk folder
+yalc add @b3dotfun/sdk # run this in your other project
+```
+
+After making changes
+
+```
+yalc publish # run this in sdk folder
+yalc update # run this in your other project
+```
+
+## Debugging
+
+If you want to debug with existing logs that we provide, simply run this in your browser console, on the app you are debugging
+
+```
+localStorage.setItem('debug', '@@b3dotfun/sdk**')
+```
+
+Now, if you filter your console logs for `@@b3dotFun`, you will see several logs we provide.

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

@@ -292,7 +292,10 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
     // );
     // State for recipient selection
     const [recipientAddress, setRecipientAddress] = (0, react_4.useState)();
-    const { address: globalAddress, wallet: globalWallet } = (0, react_2.useAccountWallet)();
+    const { address: globalAddress, wallet: globalWallet, ensName: connectedName } = (0, react_2.useAccountWallet)();
+    const connectedAddress = globalWallet?.address;
+    const recipientProfile = (0, react_2.useProfile)({ address: recipientAddress, fresh: true });
+    const recipientName = recipientProfile.data?.name;
     // Set default recipient address when wallet changes
     (0, react_4.useEffect)(() => {
         setRecipientAddress(recipientAddressFromProps || globalAddress);
@@ -342,9 +345,6 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
             amount: srcAmountOnrampInWei,
             onrampVendor: getOnrampVendor(selectedFiatPaymentMethod),
         });
-    const { address: connectedAddress, name: connectedName, profile: connectedProfile } = (0, react_1.useConnectedUserProfile)();
-    const recipientProfile = (0, react_2.useProfile)({ address: recipientAddress });
-    const recipientName = (0, utils_1.formatUsername)(recipientProfile.data?.name ?? "");
     // Load custom recipients from local storage on mount
     (0, react_4.useEffect)(() => {
         try {
@@ -807,7 +807,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
                                 setActiveTab("fiat");
                                 setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE); // Reset crypto payment method when switching to fiat
                                 setSelectedFiatPaymentMethod(FiatPaymentMethod_1.FiatPaymentMethod.NONE); // Reset fiat payment method when switching to fiat
-                            }, children: "Pay with Fiat" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "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.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [recipientProfile && ((0, jsx_runtime_1.jsx)("img", { src: recipientProfile.data?.avatar || "", alt: recipientProfile.data?.name || "", className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [recipientName && (0, jsx_runtime_1.jsx)("span", { children: recipientName }), (0, jsx_runtime_1.jsx)("span", { children: (0, formatAddress_1.shortenAddress)(recipientAddress || "") })] })] })) : ("Connect wallet"), (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: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
+                            }, children: "Pay with Fiat" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "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.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [globalWallet?.meta?.icon && ((0, jsx_runtime_1.jsx)("img", { src: globalWallet.meta.icon || "", alt: globalWallet.ensName || "", className: "bg-b3-react-foreground size-6 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [connectedName && (0, jsx_runtime_1.jsx)("span", { children: (0, utils_1.formatUsername)(connectedName) }), (0, jsx_runtime_1.jsx)("span", { children: (0, formatAddress_1.shortenAddress)(connectedAddress || "") })] })] })) : ("Connect wallet"), (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: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
                                     setIsSrcInputDirty(true);
                                     setSrcAmount(value);
                                 }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), (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, { style: "currency", fallback: "" }) }), (0, jsx_runtime_1.jsx)(TokenBalance_1.TokenBalance, { token: selectedSrcToken, walletAddress: globalAddress, onChangeInput: value => {
@@ -832,7 +832,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
                             const tempDstAmount = dstAmount;
                             setSrcAmount(tempDstAmount);
                             setDstAmount(tempSrcAmount);
-                        }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab !== "fiat" && ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "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.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedProfile?.data?.avatar && ((0, jsx_runtime_1.jsx)("img", { src: connectedProfile.data?.avatar || "", alt: "Connected Wallet", className: "bg-as-primary h-6 w-6 rounded-full" })), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: [connectedName && (0, jsx_runtime_1.jsx)("span", { children: (0, utils_1.formatUsername)(connectedName) }), (0, jsx_runtime_1.jsx)("span", { children: (0, formatAddress_1.shortenAddress)(connectedAddress || "") })] })] })) : ("Connect wallet"), (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: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode ? (
+                        }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab !== "fiat" && ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "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.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [recipientAddress ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [recipientProfile?.data?.avatar && ((0, jsx_runtime_1.jsx)("img", { src: recipientProfile.data?.avatar || "", alt: "Connected Wallet", className: "bg-as-primary h-6 w-6 rounded-full" })), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: [recipientName && (0, jsx_runtime_1.jsx)("span", { children: (0, utils_1.formatUsername)(recipientName) }), (0, jsx_runtime_1.jsx)("span", { children: (0, formatAddress_1.shortenAddress)(recipientAddress || "") })] })] })) : ("Connect wallet"), (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: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode ? (
                             // Fixed destination token display in buy 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: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "h-8 w-8 rounded-full" })), (0, jsx_runtime_1.jsx)("span", { className: "text-as-brand text-lg font-bold", children: selectedDstToken.symbol })] })] })) : ((0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: recipientAddress, context: "to", inputValue: dstAmount, onChangeInput: value => {
                                     setIsSrcInputDirty(false);
@@ -849,8 +849,8 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
                                             }
                                             // Using inline style to ensure color displays
                                             return ((0, jsx_runtime_1.jsxs)("span", { className: "ml-2", style: { color: percentageNum >= 10 ? "red" : "#FFD700" }, children: ["(", isNegative ? "-" : "", percentage, "%)"] }));
-                                        })()] })] }))] }), getAnyspendQuoteError && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 flex w-full max-w-[460px] items-center gap-2 rounded-2xl p-4", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { className: "bg-as-red h-4 min-h-4 w-4 min-w-4 rounded-full p-0 text-sm font-medium text-white" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm", children: getAnyspendQuoteError.message })] })), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "mt-4 flex w-full max-w-[460px] flex-col gap-2 pb-2", children: [(0, jsx_runtime_1.jsxs)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("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: [btnInfo.text, !btnInfo.disable && !btnInfo.error && ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 h-6 w-6 -translate-y-1/2 opacity-70" }))] }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
-    const onrampPaymentView = ((0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName, recipientAddress: recipientAddress, isMainnet: isMainnet, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
+                                        })()] })] }))] }), getAnyspendQuoteError && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 flex w-full max-w-[460px] items-center gap-2 rounded-2xl px-4 py-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { className: "bg-as-red h-4 min-h-4 w-4 min-w-4 rounded-full p-0 text-sm font-medium text-white" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm", children: getAnyspendQuoteError.message })] })), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: [(0, jsx_runtime_1.jsxs)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("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: [btnInfo.text, !btnInfo.disable && !btnInfo.error && ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 h-6 w-6 -translate-y-1/2 opacity-70" }))] }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
+    const onrampPaymentView = ((0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName || undefined, recipientAddress: recipientAddress, isMainnet: isMainnet, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
             setOrderId(orderId);
             setActivePanel(PanelView.ORDER_DETAILS);
             // Add orderId and payment method to URL for persistence

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

@@ -26,6 +26,7 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
     const { wallet: globalWallet } = (0, react_1.useAccountWallet)();
     const activeWallet = (0, react_3.useActiveWallet)();
     const { disconnect } = (0, wagmi_1.useDisconnect)();
+    const { disconnect: disconnectThirdweb } = (0, react_3.useDisconnect)();
     const [showWalletModal, setShowWalletModal] = (0, react_2.useState)(false);
     // Define available wallets for the modal
     const availableWallets = [
@@ -45,6 +46,7 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
                                                         onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                                                     }, className: "bg-as-brand hover:bg-as-brand/90 rounded-lg px-3 py-1.5 text-sm font-medium text-white transition-colors", children: "Use Wallet" }), (0, jsx_runtime_1.jsx)("button", { onClick: async () => {
                                                         disconnect();
+                                                        disconnectThirdweb(activeWallet);
                                                         sonner_1.toast.success("Wallet disconnected");
                                                         if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
                                                             setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);

package/dist/cjs/global-account/react/components/SignInWithB3/SignInWithB3Flow.js

@@ -164,12 +164,14 @@ function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onE
         debug("Authenticating with B3 via SIWE");
         setIsConnected(true);
         if (loginWithSiwe) {
+            debug("@@setIsAuthenticating:true:1");
             setIsAuthenticating(true);
             const userAuth = await authenticate(account, partnerId);
             setUser(userAuth.user);
         }
         debug("handleLoginSuccess:account", account);
         onLoginSuccess?.(account);
+        debug("@@setIsAuthenticating:false:1");
         setIsAuthenticating(false);
     }, [loginWithSiwe, onLoginSuccess, setIsAuthenticating, authenticate, partnerId, setUser, setIsConnected]);
     (0, react_2.useEffect)(() => {

package/dist/cjs/global-account/react/components/SignInWithB3/SignInWithB3Privy.js

@@ -18,7 +18,6 @@ function SignInWithB3Privy({ onSuccess, onError, partnerId, chain }) {
     (0, react_2.useEffect)(() => {
         async function autoConnect() {
             try {
-                setIsAuthenticating(true);
                 const connectResult = await connectTw();
                 const account = connectResult?.getAccount();
                 if (!account) {
@@ -35,6 +34,7 @@ function SignInWithB3Privy({ onSuccess, onError, partnerId, chain }) {
                 setIsAuthenticated(false);
             }
             finally {
+                debug("@@setIsAuthenticating:false:7");
                 setIsAuthenticating(false);
             }
         }

package/dist/cjs/global-account/react/components/SignInWithB3/steps/LoginStep.js

@@ -5,6 +5,7 @@ exports.LoginStep = LoginStep;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../../global-account/react");
 const constants_1 = require("../../../../../shared/constants");
+const debug_1 = require("../../../../../shared/utils/debug");
 const thirdweb_1 = require("../../../../../shared/utils/thirdweb");
 const react_2 = require("thirdweb/react");
 const wallets_1 = require("thirdweb/wallets");
@@ -64,6 +65,7 @@ function LoginStep({ onSuccess, onError, partnerId, chain }) {
             }, onConnect: async (wallet) => {
                 try {
                     setIsAuthenticating(true);
+                    (0, debug_1.debug)("@@setIsAuthenticating:true:6");
                     const account = wallet.getAccount();
                     if (!account)
                         throw new Error("No account found");
@@ -77,6 +79,7 @@ function LoginStep({ onSuccess, onError, partnerId, chain }) {
                     setIsAuthenticated(false);
                 }
                 finally {
+                    (0, debug_1.debug)("@@setIsAuthenticating:false:6");
                     setIsAuthenticating(false);
                 }
             } }) }));

package/dist/cjs/global-account/react/components/SignInWithB3/steps/LoginStepCustom.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoginStepCustom = LoginStepCustom;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../../global-account/react");
+const debug_1 = require("../../../../../shared/utils/debug");
+const thirdweb_1 = require("../../../../../shared/utils/thirdweb");
 const react_2 = require("react");
 const react_3 = require("thirdweb/react");
 const wallets_1 = require("thirdweb/wallets");
-const thirdweb_1 = require("../../../../../shared/utils/thirdweb");
 function LoginStepCustom({ onSuccess, onError, partnerId, chain, strategies, maxInitialWallets = 2, automaticallySetFirstEoa, }) {
     const [isLoading, setIsLoading] = (0, react_2.useState)(false);
     const [showAllWallets, setShowAllWallets] = (0, react_2.useState)(false);
@@ -23,6 +24,7 @@ function LoginStepCustom({ onSuccess, onError, partnerId, chain, strategies, max
     const handleConnect = async (strategy) => {
         try {
             setIsLoading(true);
+            (0, debug_1.debug)("@@setIsAuthenticating:true:3");
             setIsAuthenticating(true);
             const options = (0, react_1.getConnectOptionsFromStrategy)(strategy);
             let connectResult;
@@ -56,6 +58,7 @@ function LoginStepCustom({ onSuccess, onError, partnerId, chain, strategies, max
         }
         finally {
             setIsLoading(false);
+            (0, debug_1.debug)("@@setIsAuthenticating:false:3");
             setIsAuthenticating(false);
         }
     };

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

@@ -46,6 +46,7 @@ function useAuthentication(partnerId, loginWithSiwe) {
                     setIsAuthenticated(true);
                     return;
                 }
+                debug("@@setIsAuthenticating:true:4");
                 setIsAuthenticating(true);
                 const account = await wallet.getAccount();
                 if (!account) {
@@ -70,6 +71,7 @@ function useAuthentication(partnerId, loginWithSiwe) {
             catch (error) {
                 debug("Auto-connect authentication failed", { error });
                 setIsAuthenticated(false);
+                debug("@@setIsAuthenticating:false:4");
                 setUser();
             }
         },
@@ -77,19 +79,20 @@ function useAuthentication(partnerId, loginWithSiwe) {
     // Ensure isAuthenticating stays true until we're fully ready
     (0, react_2.useEffect)(() => {
         if (useAutoConnectLoading) {
-            setIsAuthenticating(true);
             setIsConnecting(true);
         }
         else if (!isAuthenticated) {
             // Only set isAuthenticating to false if we're not authenticated
             // This prevents the flicker state where both isAuthenticating and isAuthenticated are false
             const timeout = setTimeout(() => {
+                debug("@@setIsAuthenticating:false:5a");
                 setIsAuthenticating(false);
                 setIsConnecting(false);
             }, 100); // Add a small delay to prevent quick flickers
             return () => clearTimeout(timeout);
         }
         else {
+            debug("@@setIsAuthenticating:false:5b");
             setIsAuthenticating(false);
             setIsConnecting(false);
         }

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getDefaultToken, USDC_BASE } from "../../../anyspend/index.js";
-import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useConnectedUserProfile, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
+import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
 import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet, useProfile, useRouter, useSearchParamsSSR, useTokenData, useTokenFromUrl, } from "../../../global-account/react/index.js";
 import { formatUsername } from "../../../shared/utils/index.js";
 import { cn } from "../../../shared/utils/cn.js";
@@ -285,7 +285,10 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
     // );
     // State for recipient selection
     const [recipientAddress, setRecipientAddress] = useState();
-    const { address: globalAddress, wallet: globalWallet } = useAccountWallet();
+    const { address: globalAddress, wallet: globalWallet, ensName: connectedName } = useAccountWallet();
+    const connectedAddress = globalWallet?.address;
+    const recipientProfile = useProfile({ address: recipientAddress, fresh: true });
+    const recipientName = recipientProfile.data?.name;
     // Set default recipient address when wallet changes
     useEffect(() => {
         setRecipientAddress(recipientAddressFromProps || globalAddress);
@@ -335,9 +338,6 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
             amount: srcAmountOnrampInWei,
             onrampVendor: getOnrampVendor(selectedFiatPaymentMethod),
         });
-    const { address: connectedAddress, name: connectedName, profile: connectedProfile } = useConnectedUserProfile();
-    const recipientProfile = useProfile({ address: recipientAddress });
-    const recipientName = formatUsername(recipientProfile.data?.name ?? "");
     // Load custom recipients from local storage on mount
     useEffect(() => {
         try {
@@ -800,7 +800,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
                                 setActiveTab("fiat");
                                 setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset crypto payment method when switching to fiat
                                 setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE); // Reset fiat payment method when switching to fiat
-                            }, children: "Pay with Fiat" })] }) }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [connectedAddress ? (_jsxs(_Fragment, { children: [recipientProfile && (_jsx("img", { src: recipientProfile.data?.avatar || "", alt: recipientProfile.data?.name || "", className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), _jsxs("div", { className: "flex items-center gap-1", children: [recipientName && _jsx("span", { children: recipientName }), _jsx("span", { children: shortenAddress(recipientAddress || "") })] })] })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx(OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
+                            }, children: "Pay with Fiat" })] }) }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [connectedAddress ? (_jsxs(_Fragment, { children: [globalWallet?.meta?.icon && (_jsx("img", { src: globalWallet.meta.icon || "", alt: globalWallet.ensName || "", className: "bg-b3-react-foreground size-6 rounded-full object-cover opacity-100" })), _jsxs("div", { className: "flex items-center gap-1", children: [connectedName && _jsx("span", { children: formatUsername(connectedName) }), _jsx("span", { children: shortenAddress(connectedAddress || "") })] })] })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx(OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
                                     setIsSrcInputDirty(true);
                                     setSrcAmount(value);
                                 }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, { style: "currency", fallback: "" }) }), _jsx(TokenBalance, { token: selectedSrcToken, walletAddress: globalAddress, onChangeInput: value => {
@@ -825,7 +825,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
                             const tempDstAmount = dstAmount;
                             setSrcAmount(tempDstAmount);
                             setDstAmount(tempSrcAmount);
-                        }, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab !== "fiat" && (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? (_jsx("button", { className: cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsxs(_Fragment, { children: [connectedAddress ? (_jsxs(_Fragment, { children: [connectedProfile?.data?.avatar && (_jsx("img", { src: connectedProfile.data?.avatar || "", alt: "Connected Wallet", className: "bg-as-primary h-6 w-6 rounded-full" })), _jsxs("span", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: [connectedName && _jsx("span", { children: formatUsername(connectedName) }), _jsx("span", { children: shortenAddress(connectedAddress || "") })] })] })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] }) })) : (_jsx("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode ? (
+                        }, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab !== "fiat" && (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? (_jsx("button", { className: cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsxs(_Fragment, { children: [recipientAddress ? (_jsxs(_Fragment, { children: [recipientProfile?.data?.avatar && (_jsx("img", { src: recipientProfile.data?.avatar || "", alt: "Connected Wallet", className: "bg-as-primary h-6 w-6 rounded-full" })), _jsxs("span", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: [recipientName && _jsx("span", { children: formatUsername(recipientName) }), _jsx("span", { children: shortenAddress(recipientAddress || "") })] })] })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] }) })) : (_jsx("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode ? (
                             // Fixed destination token display in buy mode
                             _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), _jsxs("div", { className: "bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3", children: [selectedDstToken.metadata?.logoURI && (_jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "h-8 w-8 rounded-full" })), _jsx("span", { className: "text-as-brand text-lg font-bold", children: selectedDstToken.symbol })] })] })) : (_jsx(OrderTokenAmount, { address: recipientAddress, context: "to", inputValue: dstAmount, onChangeInput: value => {
                                     setIsSrcInputDirty(false);
@@ -842,8 +842,8 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
                                             }
                                             // Using inline style to ensure color displays
                                             return (_jsxs("span", { className: "ml-2", style: { color: percentageNum >= 10 ? "red" : "#FFD700" }, children: ["(", isNegative ? "-" : "", percentage, "%)"] }));
-                                        })()] })] }))] }), getAnyspendQuoteError && (_jsxs("div", { className: "bg-as-on-surface-1 flex w-full max-w-[460px] items-center gap-2 rounded-2xl p-4", children: [_jsx(CircleAlert, { className: "bg-as-red h-4 min-h-4 w-4 min-w-4 rounded-full p-0 text-sm font-medium text-white" }), _jsx("div", { className: "text-as-red text-sm", children: getAnyspendQuoteError.message })] })), _jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "mt-4 flex w-full max-w-[460px] flex-col gap-2 pb-2", children: [_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("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: [btnInfo.text, !btnInfo.disable && !btnInfo.error && (_jsx(ChevronRightCircle, { className: "absolute right-0 top-1/2 h-6 w-6 -translate-y-1/2 opacity-70" }))] }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
-    const onrampPaymentView = (_jsx(PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName, recipientAddress: recipientAddress, isMainnet: isMainnet, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
+                                        })()] })] }))] }), getAnyspendQuoteError && (_jsxs("div", { className: "bg-as-on-surface-1 flex w-full max-w-[460px] items-center gap-2 rounded-2xl px-4 py-2", children: [_jsx(CircleAlert, { className: "bg-as-red h-4 min-h-4 w-4 min-w-4 rounded-full p-0 text-sm font-medium text-white" }), _jsx("div", { className: "text-as-red text-sm", children: getAnyspendQuoteError.message })] })), _jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: [_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("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: [btnInfo.text, !btnInfo.disable && !btnInfo.error && (_jsx(ChevronRightCircle, { className: "absolute right-0 top-1/2 h-6 w-6 -translate-y-1/2 opacity-70" }))] }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
+    const onrampPaymentView = (_jsx(PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName || undefined, recipientAddress: recipientAddress, isMainnet: isMainnet, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
             setOrderId(orderId);
             setActivePanel(PanelView.ORDER_DETAILS);
             // Add orderId and payment method to URL for persistence

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

@@ -9,7 +9,7 @@ import { ChevronLeft, ChevronRightCircle, Wallet, X } from "lucide-react";
 import { useState } from "react";
 import { createPortal } from "react-dom";
 import { toast } from "sonner";
-import { ConnectEmbed, lightTheme, useActiveWallet } from "thirdweb/react";
+import { ConnectEmbed, lightTheme, useActiveWallet, useDisconnect as useThirdwebDisconnect } from "thirdweb/react";
 import { createWallet } from "thirdweb/wallets";
 import { useDisconnect } from "wagmi";
 export var CryptoPaymentMethodType;
@@ -22,6 +22,7 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
     const { wallet: globalWallet } = useAccountWallet();
     const activeWallet = useActiveWallet();
     const { disconnect } = useDisconnect();
+    const { disconnect: disconnectThirdweb } = useThirdwebDisconnect();
     const [showWalletModal, setShowWalletModal] = useState(false);
     // Define available wallets for the modal
     const availableWallets = [
@@ -41,6 +42,7 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
                                                         onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                                                     }, className: "bg-as-brand hover:bg-as-brand/90 rounded-lg px-3 py-1.5 text-sm font-medium text-white transition-colors", children: "Use Wallet" }), _jsx("button", { onClick: async () => {
                                                         disconnect();
+                                                        disconnectThirdweb(activeWallet);
                                                         toast.success("Wallet disconnected");
                                                         if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
                                                             setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);

package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Flow.js

@@ -161,12 +161,14 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
         debug("Authenticating with B3 via SIWE");
         setIsConnected(true);
         if (loginWithSiwe) {
+            debug("@@setIsAuthenticating:true:1");
             setIsAuthenticating(true);
             const userAuth = await authenticate(account, partnerId);
             setUser(userAuth.user);
         }
         debug("handleLoginSuccess:account", account);
         onLoginSuccess?.(account);
+        debug("@@setIsAuthenticating:false:1");
         setIsAuthenticating(false);
     }, [loginWithSiwe, onLoginSuccess, setIsAuthenticating, authenticate, partnerId, setUser, setIsConnected]);
     useEffect(() => {

package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Privy.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Loading, useAuthentication, useHandleConnectWithPrivy, useAuthStore, } from "../../../../global-account/react/index.js";
+import { Loading, useAuthentication, useAuthStore, useHandleConnectWithPrivy, } from "../../../../global-account/react/index.js";
 import { debugB3React } from "../../../../shared/utils/debug.js";
 import { useEffect } from "react";
 const debug = debugB3React("SignInWithB3Privy");
@@ -15,7 +15,6 @@ export function SignInWithB3Privy({ onSuccess, onError, partnerId, chain }) {
     useEffect(() => {
         async function autoConnect() {
             try {
-                setIsAuthenticating(true);
                 const connectResult = await connectTw();
                 const account = connectResult?.getAccount();
                 if (!account) {
@@ -32,6 +31,7 @@ export function SignInWithB3Privy({ onSuccess, onError, partnerId, chain }) {
                 setIsAuthenticated(false);
             }
             finally {
+                debug("@@setIsAuthenticating:false:7");
                 setIsAuthenticating(false);
             }
         }

package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStep.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuthentication, useQueryB3, useAuthStore, useB3 } from "../../../../../global-account/react/index.js";
+import { useAuthentication, useAuthStore, useB3, useQueryB3 } from "../../../../../global-account/react/index.js";
 import { ecosystemWalletId } from "../../../../../shared/constants/index.js";
+import { debug } from "../../../../../shared/utils/debug.js";
 import { client } from "../../../../../shared/utils/thirdweb.js";
 import { ConnectEmbed, darkTheme, lightTheme } from "thirdweb/react";
 import { ecosystemWallet } from "thirdweb/wallets";
@@ -60,6 +61,7 @@ export function LoginStep({ onSuccess, onError, partnerId, chain }) {
             }, onConnect: async (wallet) => {
                 try {
                     setIsAuthenticating(true);
+                    debug("@@setIsAuthenticating:true:6");
                     const account = wallet.getAccount();
                     if (!account)
                         throw new Error("No account found");
@@ -73,6 +75,7 @@ export function LoginStep({ onSuccess, onError, partnerId, chain }) {
                     setIsAuthenticated(false);
                 }
                 finally {
+                    debug("@@setIsAuthenticating:false:6");
                     setIsAuthenticating(false);
                 }
             } }) }));

package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStepCustom.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AuthButton, Button, getConnectOptionsFromStrategy, isWalletType, LoginStepContainer, useAuthentication, useAuthStore, useConnect, WalletRow, } from "../../../../../global-account/react/index.js";
+import { debug } from "../../../../../shared/utils/debug.js";
+import { client } from "../../../../../shared/utils/thirdweb.js";
 import { useState } from "react";
 import { useConnect as useConnectTW } from "thirdweb/react";
 import { createWallet } from "thirdweb/wallets";
-import { client } from "../../../../../shared/utils/thirdweb.js";
 export function LoginStepCustom({ onSuccess, onError, partnerId, chain, strategies, maxInitialWallets = 2, automaticallySetFirstEoa, }) {
     const [isLoading, setIsLoading] = useState(false);
     const [showAllWallets, setShowAllWallets] = useState(false);
@@ -20,6 +21,7 @@ export function LoginStepCustom({ onSuccess, onError, partnerId, chain, strategi
     const handleConnect = async (strategy) => {
         try {
             setIsLoading(true);
+            debug("@@setIsAuthenticating:true:3");
             setIsAuthenticating(true);
             const options = getConnectOptionsFromStrategy(strategy);
             let connectResult;
@@ -53,6 +55,7 @@ export function LoginStepCustom({ onSuccess, onError, partnerId, chain, strategi
         }
         finally {
             setIsLoading(false);
+            debug("@@setIsAuthenticating:false:3");
             setIsAuthenticating(false);
         }
     };

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

@@ -40,6 +40,7 @@ export function useAuthentication(partnerId, loginWithSiwe) {
                     setIsAuthenticated(true);
                     return;
                 }
+                debug("@@setIsAuthenticating:true:4");
                 setIsAuthenticating(true);
                 const account = await wallet.getAccount();
                 if (!account) {
@@ -64,6 +65,7 @@ export function useAuthentication(partnerId, loginWithSiwe) {
             catch (error) {
                 debug("Auto-connect authentication failed", { error });
                 setIsAuthenticated(false);
+                debug("@@setIsAuthenticating:false:4");
                 setUser();
             }
         },
@@ -71,19 +73,20 @@ export function useAuthentication(partnerId, loginWithSiwe) {
     // Ensure isAuthenticating stays true until we're fully ready
     useEffect(() => {
         if (useAutoConnectLoading) {
-            setIsAuthenticating(true);
             setIsConnecting(true);
         }
         else if (!isAuthenticated) {
             // Only set isAuthenticating to false if we're not authenticated
             // This prevents the flicker state where both isAuthenticating and isAuthenticated are false
             const timeout = setTimeout(() => {
+                debug("@@setIsAuthenticating:false:5a");
                 setIsAuthenticating(false);
                 setIsConnecting(false);
             }, 100); // Add a small delay to prevent quick flickers
             return () => clearTimeout(timeout);
         }
         else {
+            debug("@@setIsAuthenticating:false:5b");
             setIsAuthenticating(false);
             setIsConnecting(false);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.21",
+  "version": "0.0.22-alpha.1",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

package/src/anyspend/react/components/AnySpend.tsx

@@ -6,7 +6,6 @@ import {
   useAnyspendCreateOrder,
   useAnyspendOrderAndTransactions,
   useAnyspendQuote,
-  useConnectedUserProfile,
   useGeoOnrampOptions,
 } from "@b3dotfun/sdk/anyspend/react";
 import {
@@ -405,7 +404,10 @@ function AnySpendInner({
   // State for recipient selection
   const [recipientAddress, setRecipientAddress] = useState<string | undefined>();
 
-  const { address: globalAddress, wallet: globalWallet } = useAccountWallet();
+  const { address: globalAddress, wallet: globalWallet, ensName: connectedName } = useAccountWallet();
+  const connectedAddress = globalWallet?.address;
+  const recipientProfile = useProfile({ address: recipientAddress, fresh: true });
+  const recipientName = recipientProfile.data?.name;
 
   // Set default recipient address when wallet changes
   useEffect(() => {
@@ -465,10 +467,6 @@ function AnySpendInner({
         },
   );
 
-  const { address: connectedAddress, name: connectedName, profile: connectedProfile } = useConnectedUserProfile();
-  const recipientProfile = useProfile({ address: recipientAddress });
-  const recipientName = formatUsername(recipientProfile.data?.name ?? "");
-
   // Load custom recipients from local storage on mount
   useEffect(() => {
     try {
@@ -1080,16 +1078,16 @@ function AnySpendInner({
                   <>
                     {connectedAddress ? (
                       <>
-                        {recipientProfile && (
+                        {globalWallet?.meta?.icon && (
                           <img
-                            src={recipientProfile.data?.avatar || ""}
-                            alt={recipientProfile.data?.name || ""}
-                            className="bg-b3-react-foreground size-7 rounded-full object-cover opacity-100"
+                            src={globalWallet.meta.icon || ""}
+                            alt={globalWallet.ensName || ""}
+                            className="bg-b3-react-foreground size-6 rounded-full object-cover opacity-100"
                           />
                         )}
                         <div className="flex items-center gap-1">
-                          {recipientName && <span>{recipientName}</span>}
-                          <span>{shortenAddress(recipientAddress || "")}</span>
+                          {connectedName && <span>{formatUsername(connectedName)}</span>}
+                          <span>{shortenAddress(connectedAddress || "")}</span>
                         </div>
                       </>
                     ) : (
@@ -1211,18 +1209,18 @@ function AnySpendInner({
                   onClick={() => setActivePanel(PanelView.RECIPIENT_SELECTION)}
                 >
                   <>
-                    {connectedAddress ? (
+                    {recipientAddress ? (
                       <>
-                        {connectedProfile?.data?.avatar && (
+                        {recipientProfile?.data?.avatar && (
                           <img
-                            src={connectedProfile.data?.avatar || ""}
+                            src={recipientProfile.data?.avatar || ""}
                             alt="Connected Wallet"
                             className="bg-as-primary h-6 w-6 rounded-full"
                           />
                         )}
                         <span className="text-as-tertiarry flex items-center gap-1 text-sm">
-                          {connectedName && <span>{formatUsername(connectedName)}</span>}
-                          <span>{shortenAddress(connectedAddress || "")}</span>
+                          {recipientName && <span>{formatUsername(recipientName)}</span>}
+                          <span>{shortenAddress(recipientAddress || "")}</span>
                         </span>
                       </>
                     ) : (
@@ -1324,7 +1322,7 @@ function AnySpendInner({
 
       {/* Error message section */}
       {getAnyspendQuoteError && (
-        <div className="bg-as-on-surface-1 flex w-full max-w-[460px] items-center gap-2 rounded-2xl p-4">
+        <div className="bg-as-on-surface-1 flex w-full max-w-[460px] items-center gap-2 rounded-2xl px-4 py-2">
           <CircleAlert className="bg-as-red h-4 min-h-4 w-4 min-w-4 rounded-full p-0 text-sm font-medium text-white" />
           <div className="text-as-red text-sm">{getAnyspendQuoteError.message}</div>
         </div>
@@ -1335,7 +1333,7 @@ function AnySpendInner({
         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="mt-4 flex w-full max-w-[460px] flex-col gap-2 pb-2"
+        className={cn("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0")}
       >
         <ShinyButton
           accentColor={"hsl(var(--as-brand))"}
@@ -1369,7 +1367,7 @@ function AnySpendInner({
   const onrampPaymentView = (
     <PanelOnrampPayment
       srcAmountOnRamp={srcAmountOnRamp}
-      recipientName={recipientName}
+      recipientName={recipientName || undefined}
       recipientAddress={recipientAddress}
       isMainnet={isMainnet}
       isBuyMode={isBuyMode}

package/src/anyspend/react/components/common/CryptoPaymentMethod.tsx

@@ -9,7 +9,7 @@ import { ChevronLeft, ChevronRightCircle, Wallet, X } from "lucide-react";
 import { useState } from "react";
 import { createPortal } from "react-dom";
 import { toast } from "sonner";
-import { ConnectEmbed, lightTheme, useActiveWallet } from "thirdweb/react";
+import { ConnectEmbed, lightTheme, useActiveWallet, useDisconnect as useThirdwebDisconnect } from "thirdweb/react";
 import { createWallet } from "thirdweb/wallets";
 import { useDisconnect } from "wagmi";
 
@@ -43,6 +43,7 @@ export function CryptoPaymentMethod({
   const { wallet: globalWallet } = useAccountWallet();
   const activeWallet = useActiveWallet();
   const { disconnect } = useDisconnect();
+  const { disconnect: disconnectThirdweb } = useThirdwebDisconnect();
   const [showWalletModal, setShowWalletModal] = useState(false);
 
   // Define available wallets for the modal
@@ -123,6 +124,7 @@ export function CryptoPaymentMethod({
                   <button
                     onClick={async () => {
                       disconnect();
+                      disconnectThirdweb(activeWallet);
                       toast.success("Wallet disconnected");
                       if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
                         setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);

package/src/global-account/react/components/SignInWithB3/SignInWithB3Flow.tsx

@@ -196,12 +196,14 @@ export function SignInWithB3Flow({
       debug("Authenticating with B3 via SIWE");
       setIsConnected(true);
       if (loginWithSiwe) {
+        debug("@@setIsAuthenticating:true:1");
         setIsAuthenticating(true);
         const userAuth = await authenticate(account, partnerId);
         setUser(userAuth.user);
       }
       debug("handleLoginSuccess:account", account);
       onLoginSuccess?.(account);
+      debug("@@setIsAuthenticating:false:1");
       setIsAuthenticating(false);
     },
     [loginWithSiwe, onLoginSuccess, setIsAuthenticating, authenticate, partnerId, setUser, setIsConnected],

package/src/global-account/react/components/SignInWithB3/SignInWithB3Privy.tsx

@@ -1,8 +1,8 @@
 import {
   Loading,
   useAuthentication,
-  useHandleConnectWithPrivy,
   useAuthStore,
+  useHandleConnectWithPrivy,
 } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useEffect } from "react";
@@ -32,7 +32,6 @@ export function SignInWithB3Privy({ onSuccess, onError, partnerId, chain }: Sign
   useEffect(() => {
     async function autoConnect() {
       try {
-        setIsAuthenticating(true);
         const connectResult = await connectTw();
         const account = connectResult?.getAccount();
         if (!account) {
@@ -47,6 +46,7 @@ export function SignInWithB3Privy({ onSuccess, onError, partnerId, chain }: Sign
         await logout();
         setIsAuthenticated(false);
       } finally {
+        debug("@@setIsAuthenticating:false:7");
         setIsAuthenticating(false);
       }
     }

package/src/global-account/react/components/SignInWithB3/steps/LoginStep.tsx

@@ -1,5 +1,6 @@
-import { useAuthentication, useQueryB3, useAuthStore, useB3 } from "@b3dotfun/sdk/global-account/react";
+import { useAuthentication, useAuthStore, useB3, useQueryB3 } from "@b3dotfun/sdk/global-account/react";
 import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
+import { debug } from "@b3dotfun/sdk/shared/utils/debug";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import { Chain } from "thirdweb";
 import { ConnectEmbed, darkTheme, lightTheme } from "thirdweb/react";
@@ -113,6 +114,7 @@ export function LoginStep({ onSuccess, onError, partnerId, chain }: LoginStepPro
         onConnect={async wallet => {
           try {
             setIsAuthenticating(true);
+            debug("@@setIsAuthenticating:true:6");
 
             const account = wallet.getAccount();
             if (!account) throw new Error("No account found");
@@ -126,6 +128,7 @@ export function LoginStep({ onSuccess, onError, partnerId, chain }: LoginStepPro
             await logout();
             setIsAuthenticated(false);
           } finally {
+            debug("@@setIsAuthenticating:false:6");
             setIsAuthenticating(false);
           }
         }}

package/src/global-account/react/components/SignInWithB3/steps/LoginStepCustom.tsx

@@ -10,11 +10,12 @@ import {
   useConnect,
   WalletRow,
 } from "@b3dotfun/sdk/global-account/react";
+import { debug } from "@b3dotfun/sdk/shared/utils/debug";
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import { useState } from "react";
 import { Chain } from "thirdweb";
 import { useConnect as useConnectTW } from "thirdweb/react";
 import { Account, createWallet, Wallet, WalletId } from "thirdweb/wallets";
-import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 
 interface LoginStepCustomProps {
   automaticallySetFirstEoa: boolean;
@@ -52,6 +53,7 @@ export function LoginStepCustom({
   const handleConnect = async (strategy: AllowedStrategy) => {
     try {
       setIsLoading(true);
+      debug("@@setIsAuthenticating:true:3");
       setIsAuthenticating(true);
       const options = getConnectOptionsFromStrategy(strategy);
       let connectResult: Wallet | null;
@@ -84,6 +86,7 @@ export function LoginStepCustom({
       setIsAuthenticated(false);
     } finally {
       setIsLoading(false);
+      debug("@@setIsAuthenticating:false:3");
       setIsAuthenticating(false);
     }
   };

package/src/global-account/react/hooks/useAuthentication.ts

@@ -44,7 +44,7 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
           setIsAuthenticated(true);
           return;
         }
-
+        debug("@@setIsAuthenticating:true:4");
         setIsAuthenticating(true);
         const account = await wallet.getAccount();
         if (!account) {
@@ -68,6 +68,7 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
       } catch (error) {
         debug("Auto-connect authentication failed", { error });
         setIsAuthenticated(false);
+        debug("@@setIsAuthenticating:false:4");
         setUser();
       }
     },
@@ -76,17 +77,18 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
   // Ensure isAuthenticating stays true until we're fully ready
   useEffect(() => {
     if (useAutoConnectLoading) {
-      setIsAuthenticating(true);
       setIsConnecting(true);
     } else if (!isAuthenticated) {
       // Only set isAuthenticating to false if we're not authenticated
       // This prevents the flicker state where both isAuthenticating and isAuthenticated are false
       const timeout = setTimeout(() => {
+        debug("@@setIsAuthenticating:false:5a");
         setIsAuthenticating(false);
         setIsConnecting(false);
       }, 100); // Add a small delay to prevent quick flickers
       return () => clearTimeout(timeout);
     } else {
+      debug("@@setIsAuthenticating:false:5b");
       setIsAuthenticating(false);
       setIsConnecting(false);
     }