@b3dotfun/sdk 0.0.83-alpha.3 → 0.0.83-alpha.5

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

@@ -56,6 +56,7 @@ const useCryptoPaymentMethodState_1 = require("../hooks/useCryptoPaymentMethodSt
 const useRecipientAddressState_1 = require("../hooks/useRecipientAddressState");
 const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
 const CryptoPaymentMethod_1 = require("./common/CryptoPaymentMethod");
+const CryptoPaymentMethodDisplay_1 = require("./common/CryptoPaymentMethodDisplay");
 const FeeBreakDown_1 = require("./common/FeeBreakDown");
 const FiatPaymentMethod_1 = require("./common/FiatPaymentMethod");
 const OrderDetails_1 = require("./common/OrderDetails");
@@ -337,7 +338,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         },
     });
     const isCreatingOrder = isCreatingRegularOrder || isCreatingOnrampOrder;
-    const { address: connectedAddress, name: connectedName } = (0, react_1.useConnectedUserProfile)();
+    const { address: connectedAddress, name: connectedName } = (0, react_1.useConnectedUserProfile)(effectiveCryptoPaymentMethod);
     const recipientProfile = (0, react_2.useProfile)({ address: recipientAddress });
     const recipientName = recipientProfile.data?.name;
     const handleCreateOrder = async (recipientAddress, onramp) => {
@@ -559,7 +560,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry whitespace-nowrap", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(connectedAddress || "") })) : ((0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Connect wallet" })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Transfer crypto" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Select payment method" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)(react_4.motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: (0, jsx_runtime_1.jsx)(CryptoPaymentMethodDisplay_1.CryptoPaymentMethodDisplay, { paymentMethod: effectiveCryptoPaymentMethod, connectedAddress: connectedAddress, connectedName: connectedName }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)(react_4.motion.div, { initial: false, animate: {
                                                         opacity: hasMounted ? 1 : 0,
                                                         y: hasMounted ? 0 : 20,
                                                         filter: hasMounted ? "blur(0px)" : "blur(10px)",

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

@@ -3,14 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CryptoPaySection = CryptoPaySection;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../global-account/react");
-const utils_1 = require("../../../../shared/utils");
-const formatAddress_1 = require("../../../../shared/utils/formatAddress");
 const number_1 = require("../../../../shared/utils/number");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("motion/react");
 const react_3 = require("react");
 const useConnectedWalletDisplay_1 = require("../../hooks/useConnectedWalletDisplay");
-const CryptoPaymentMethod_1 = require("./CryptoPaymentMethod");
+const CryptoPaymentMethodDisplay_1 = require("./CryptoPaymentMethodDisplay");
 const OrderTokenAmount_1 = require("./OrderTokenAmount");
 const TokenBalance_1 = require("./TokenBalance");
 function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, isSrcInputDirty, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, onTokenSelect, onShowFeeDetail, }) {
@@ -43,7 +41,7 @@ function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedS
     (0, react_3.useEffect)(() => {
         appliedSrcMetadataRef.current = false;
     }, [selectedSrcToken.address, selectedSrcToken.chainId]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/50 flex h-7 items-center gap-1.5 text-sm", children: ["Pay", !isSrcInputDirty && anyspendQuote?.data?.fee && onShowFeeDetail && ((0, jsx_runtime_1.jsx)("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }))] }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [walletAddress ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(walletAddress || "") })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Global Account", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transfer crypto", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: walletAddress, walletAddress: walletAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/50 flex h-7 items-center gap-1.5 text-sm", children: ["Pay", !isSrcInputDirty && anyspendQuote?.data?.fee && onShowFeeDetail && ((0, jsx_runtime_1.jsx)("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }))] }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: (0, jsx_runtime_1.jsx)(CryptoPaymentMethodDisplay_1.CryptoPaymentMethodDisplay, { paymentMethod: selectedCryptoPaymentMethod, connectedAddress: walletAddress, connectedName: connectedName }) })] }), (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: walletAddress, walletAddress: walletAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
                     setIsSrcInputDirty(true);
                     setSrcAmount(value);
                 }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken, onTokenSelect: onTokenSelect }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: (0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyIn?.amountUsd, {

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

@@ -0,0 +1,15 @@
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
+interface CryptoPaymentMethodDisplayProps {
+    paymentMethod: CryptoPaymentMethodType;
+    connectedAddress?: string | null;
+    connectedName?: string | null;
+}
+/**
+ * Displays the selected crypto payment method with appropriate label
+ * - CONNECT_WALLET: Shows wallet address/name or "Connect wallet"
+ * - GLOBAL_WALLET: Shows "Global Account"
+ * - TRANSFER_CRYPTO: Shows "Transfer crypto"
+ * - NONE: Shows "Select payment method"
+ */
+export declare function CryptoPaymentMethodDisplay({ paymentMethod, connectedAddress, connectedName, }: CryptoPaymentMethodDisplayProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CryptoPaymentMethodDisplay = CryptoPaymentMethodDisplay;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../../../shared/utils");
+const formatAddress_1 = require("../../../../shared/utils/formatAddress");
+const lucide_react_1 = require("lucide-react");
+const CryptoPaymentMethod_1 = require("./CryptoPaymentMethod");
+/**
+ * Displays the selected crypto payment method with appropriate label
+ * - CONNECT_WALLET: Shows wallet address/name or "Connect wallet"
+ * - GLOBAL_WALLET: Shows "Global Account"
+ * - TRANSFER_CRYPTO: Shows "Transfer crypto"
+ * - NONE: Shows "Select payment method"
+ */
+function CryptoPaymentMethodDisplay({ paymentMethod, connectedAddress, connectedName, }) {
+    if (paymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry whitespace-nowrap", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(connectedAddress) })) : ((0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Connect wallet" })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+    }
+    if (paymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Global Account" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+    }
+    if (paymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Transfer crypto" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+    }
+    // NONE or any other case
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Select payment method" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+}

package/dist/cjs/anyspend/react/hooks/useConnectedUserProfile.d.ts

@@ -1,8 +1,9 @@
+import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
 /**
  * Hook that provides connected user's address, profile, and cleaned display name
  * Combines logic for getting connected address from either global account or thirdweb wallets
  */
-export declare function useConnectedUserProfile(): {
+export declare function useConnectedUserProfile(selectedCryptoPaymentMethod?: CryptoPaymentMethodType): {
     address: string | undefined;
     profile: import("@tanstack/react-query").UseQueryResult<import("../../../global-account/react").CombinedProfile, Error>;
     name: string | null | undefined;

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

@@ -2,20 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useConnectedUserProfile = useConnectedUserProfile;
 const react_1 = require("../../../global-account/react");
-const react_2 = require("thirdweb/react");
+const useConnectedWalletDisplay_1 = require("./useConnectedWalletDisplay");
 /**
  * Hook that provides connected user's address, profile, and cleaned display name
  * Combines logic for getting connected address from either global account or thirdweb wallets
  */
-function useConnectedUserProfile() {
-    const { address: globalAddress } = (0, react_1.useAccountWallet)();
-    const connectedWallets = (0, react_2.useConnectedWallets)();
-    // Get connected address from global account or first connected wallet
-    const connectedAddress = globalAddress || connectedWallets?.[0]?.getAccount()?.address;
+function useConnectedUserProfile(selectedCryptoPaymentMethod) {
+    const { walletAddress } = (0, useConnectedWalletDisplay_1.useConnectedWalletDisplay)(selectedCryptoPaymentMethod);
     // Fetch profile data for the connected address with cleaned name
-    const connectedProfile = (0, react_1.useProfile)({ address: connectedAddress });
+    const connectedProfile = (0, react_1.useProfile)({ address: walletAddress });
     return {
-        address: connectedAddress,
+        address: walletAddress,
         profile: connectedProfile,
         name: connectedProfile.data?.name,
         isLoading: connectedProfile.isLoading,

package/dist/cjs/anyspend/react/hooks/useConnectedWalletDisplay.d.ts

@@ -2,8 +2,6 @@ import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMetho
 interface UseConnectedWalletDisplayResult {
     walletAddress: string | undefined;
     shouldShowConnectedEOA: boolean;
-    shouldShowWagmiWallet: boolean;
-    isWalletDuplicated: boolean;
     suggestedPaymentMethod: CryptoPaymentMethodType;
 }
 /**

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

@@ -12,23 +12,15 @@ function useConnectedWalletDisplay(selectedCryptoPaymentMethod) {
     const { connectedEOAWallet, connectedSmartWallet } = (0, react_1.useAccountWallet)();
     const { address: wagmiAddress } = (0, wagmi_1.useAccount)();
     const globalWalletAddress = connectedSmartWallet?.getAccount()?.address;
-    // Helper function to check if two addresses are the same
-    const isSameAddress = (addr1, addr2) => {
-        if (!addr1 || !addr2)
-            return false;
-        return addr1.toLowerCase() === addr2.toLowerCase();
-    };
     // Check if connectedEOAWallet and wagmi wallet represent the same wallet
     const connectedEOAAddress = connectedEOAWallet?.getAccount()?.address;
-    const isWalletDuplicated = isSameAddress(connectedEOAAddress, wagmiAddress) || isSameAddress(globalWalletAddress, wagmiAddress);
     // Determine which wallet to show (prefer connectedEOAWallet if both exist and are the same)
     const shouldShowConnectedEOA = !!connectedEOAWallet;
     // this is disabled because we don't want to display In-App Wallet as a payment method
-    const shouldShowWagmiWallet = false; // wagmiWalletIsConnected && (!isWalletDuplicated || !connectedEOAWallet);
     // Determine which address to use based on payment method
     let walletAddress;
     if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET) {
-        walletAddress = connectedSmartWallet?.getAccount()?.address;
+        walletAddress = globalWalletAddress;
     }
     else if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET) {
         // Prefer connectedEOAWallet, fallback to wagmi wallet
@@ -45,15 +37,13 @@ function useConnectedWalletDisplay(selectedCryptoPaymentMethod) {
         // If there's a connected EOA or wagmi wallet, suggest CONNECT_WALLET
         suggestedPaymentMethod = CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET;
     }
-    else if (connectedSmartWallet?.getAccount()?.address) {
+    else if (globalWalletAddress) {
         // If only global wallet is available, suggest that
         suggestedPaymentMethod = CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET;
     }
     return {
         walletAddress,
         shouldShowConnectedEOA,
-        shouldShowWagmiWallet,
-        isWalletDuplicated,
         suggestedPaymentMethod,
     };
 }

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

@@ -12,12 +12,12 @@ const utils_1 = require("../../../../shared/utils");
 const react_2 = require("@headlessui/react");
 const react_3 = require("react");
 const react_4 = require("thirdweb/react");
-const useAccountWallet_1 = require("../../hooks/useAccountWallet");
 const ManageAccountButton_1 = require("../custom/ManageAccountButton");
 function SignIn(props) {
     const { className } = props;
     const { automaticallySetFirstEoa, partnerId } = (0, react_1.useB3)();
-    const { address: globalAddress, ensName, connectedSmartWallet, connectedEOAWallet, isActiveSmartWallet, isActiveEOAWallet, smartWalletIcon, eoaWalletIcon, } = (0, react_1.useAccountWallet)();
+    const { address: globalAddress, ensName, connectedSmartWallet, connectedEOAWallet, isActiveSmartWallet, isActiveEOAWallet, smartWalletIcon, } = (0, react_1.useAccountWallet)();
+    const { data: walletImage } = (0, react_4.useWalletImage)(connectedEOAWallet?.id);
     const isMobile = (0, react_1.useIsMobile)();
     const { logout } = (0, react_1.useAuthentication)(partnerId);
     const onDisconnect = async () => {
@@ -40,11 +40,10 @@ function SignIn(props) {
             setActiveWallet(connectedEOAWallet);
         }
     }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet, automaticallySetFirstEoa]);
-    const walletImage = (0, useAccountWallet_1.useAccountWalletImage)();
     // Desktop version - original dropdown menu
     return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsx)(react_2.Menu, { className: `relative flex items-center ${className || ""}`, as: "div", children: globalAddress ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.MenuButton, { className: "bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none", children: [!!walletImage && ((0, jsx_runtime_1.jsx)(react_1.IPFSMediaRenderer, { src: walletImage, alt: "Wallet Image", className: "bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary", children: ensName ? ensName : (0, utils_1.truncateAddress)(globalAddress) })] }), (0, jsx_runtime_1.jsx)(react_2.Transition, { enter: "duration-200 ease-out", enterFrom: "scale-95 opacity-0", enterTo: "scale-100 opacity-100", leave: "duration-300 ease-out", leaveFrom: "scale-100 opacity-100", leaveTo: "scale-95 opacity-0", children: (0, jsx_runtime_1.jsx)(react_2.MenuItems, { className: "b3-root absolute -right-4 top-full min-w-64 rounded-2xl border focus:outline-none lg:right-0", modal: false, 
                             // TODO: Figure out why setting anchor on mobile causes z-index issues where it appears under elements
-                            anchor: isMobile ? "top end" : undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background", children: [connectedEOAWallet ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3"), onClick: () => handleSetActiveAccount(connectedEOAWallet?.id), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: eoaWalletIcon, alt: connectedEOAWallet?.id }), (0, jsx_runtime_1.jsxs)("div", { className: "ml-4 grow", children: [ensName && (0, jsx_runtime_1.jsx)("div", { children: ensName }), (0, jsx_runtime_1.jsx)("div", { children: (0, utils_1.truncateAddress)(globalAddress) })] })] }), isActiveEOAWallet && (0, jsx_runtime_1.jsx)(Icon_1.default, { className: "fill-b3-react-primary", name: "check" })] })) : (connectedSmartWallet && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3", isActiveSmartWallet
+                            anchor: isMobile ? "top end" : undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background", children: [connectedEOAWallet ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3"), onClick: () => handleSetActiveAccount(connectedEOAWallet?.id), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: walletImage, alt: connectedEOAWallet?.id }), (0, jsx_runtime_1.jsxs)("div", { className: "ml-4 grow", children: [ensName && (0, jsx_runtime_1.jsx)("div", { children: ensName }), (0, jsx_runtime_1.jsx)("div", { children: (0, utils_1.truncateAddress)(globalAddress) })] })] }), isActiveEOAWallet && (0, jsx_runtime_1.jsx)(Icon_1.default, { className: "fill-b3-react-primary", name: "check" })] })) : (connectedSmartWallet && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3", isActiveSmartWallet
                                             ? "bg-b3-react-background"
                                             : "bg-b3-react-background hover:bg-b3-react-background"), onClick: () => handleSetActiveAccount(connectedSmartWallet?.id), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: smartWalletIcon, alt: connectedSmartWallet?.id }), (0, jsx_runtime_1.jsxs)("div", { className: "grow pl-4", children: [ensName && (0, jsx_runtime_1.jsx)("div", { children: ensName }), (0, jsx_runtime_1.jsx)("div", { children: (0, utils_1.truncateAddress)(globalAddress) }), (0, jsx_runtime_1.jsx)("div", { children: "Smart wallet" })] })] }), isActiveSmartWallet && (0, jsx_runtime_1.jsx)(Icon_1.default, { className: "fill-b3-react-primary", name: "check" })] }))), (0, jsx_runtime_1.jsx)("div", { className: "ml-3", children: (0, jsx_runtime_1.jsx)(ManageAccountButton_1.ManageAccountButton, { ...props, className: "w-[calc(100%-12px)]" }) }), (0, jsx_runtime_1.jsx)("button", { className: "mb-2 w-full space-y-1", onClick: onDisconnect, children: (0, jsx_runtime_1.jsxs)("div", { className: "hover:bg-b3-react-background group flex h-12 items-center rounded-xl px-4 transition-colors", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { className: "fill-b3-react-primary mr-4 shrink-0 transition-colors", name: "logout" }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-react-primary mr-auto transition-colors", children: "Disconnect" })] }) })] }) }) })] })) : ((0, jsx_runtime_1.jsx)(react_1.SignInWithB3, { closeAfterLogin: true, onLoginSuccess: async (globalAccount) => {
                     console.log("User authenticated with Global Account!", globalAccount);

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

@@ -16,7 +16,7 @@ function LoginStepContainer({ children, partnerId }) {
         },
     }, !!partnerId);
     const partnerLogo = partner?.data?.[0]?.loginCustomization?.logoUrl;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center pt-6", children: [partnerLogo && ((0, jsx_runtime_1.jsx)("img", { src: partnerLogo, alt: "Partner Logo", className: "partner-logo mb-6 h-12 w-auto object-contain" })), children] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background flex flex-col items-center justify-center pt-6", children: [partnerLogo && ((0, jsx_runtime_1.jsx)("img", { src: partnerLogo, alt: "Partner Logo", className: "partner-logo mb-6 h-12 w-auto object-contain" })), children] }));
 }
 function LoginStep({ onSuccess, chain }) {
     const { partnerId, theme } = (0, react_1.useB3)();

package/dist/cjs/global-account/react/hooks/index.d.ts

@@ -6,7 +6,6 @@ export { useAnalytics } from "./useAnalytics";
 export { useAuthentication } from "./useAuthentication";
 export { useB3BalanceFromAddresses } from "./useB3BalanceFromAddresses";
 export { useB3EnsName } from "./useB3EnsName";
-export { useBestTransactionPath } from "./useBestTransactionPath";
 export { useChainSwitchWithAction } from "./useChainSwitchWithAction";
 export * from "./useClaim";
 export { useClient } from "./useClient";

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

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useURLParams = exports.useUnifiedChainSwitchAndExecute = exports.useTurnkeyAuth = exports.useTokensFromAddress = exports.useTokenPriceWithFallback = exports.useTokenPrice = exports.useTokenFromUrl = exports.useTokenData = exports.useTokenBalancesByChain = exports.useTokenBalanceDirect = exports.useTokenBalance = exports.useSiwe = exports.useSimSvmBalance = exports.useSimBalance = exports.useSearchParamsSSR = exports.useRouter = exports.useRemoveSessionKey = exports.useQueryBSMNT = exports.useQueryB3 = exports.useProfileSettings = exports.useProfilePreference = exports.useProfile = exports.useDisplayName = exports.useOneBalance = exports.useNotifications = exports.useNativeBalanceFromRPC = exports.useNativeBalance = exports.useMediaQuery = exports.useIsomorphicLayoutEffect = exports.useIsMobile = exports.useHasMounted = exports.useHandleConnectWithPrivy = exports.useGlobalAccount = exports.useGetGeo = exports.useGetAllTWSigners = exports.useFirstEOA = exports.useExchangeRate = exports.useConnect = exports.useClient = exports.useChainSwitchWithAction = exports.useBestTransactionPath = exports.useB3EnsName = exports.useB3BalanceFromAddresses = exports.useAuthentication = exports.useAnalytics = exports.useAddTWSessionKey = exports.useAccountWallet = exports.useAccountAssets = exports.createWagmiConfig = void 0;
+exports.useURLParams = exports.useUnifiedChainSwitchAndExecute = exports.useTurnkeyAuth = exports.useTokensFromAddress = exports.useTokenPriceWithFallback = exports.useTokenPrice = exports.useTokenFromUrl = exports.useTokenData = exports.useTokenBalancesByChain = exports.useTokenBalanceDirect = exports.useTokenBalance = exports.useSiwe = exports.useSimSvmBalance = exports.useSimBalance = exports.useSearchParamsSSR = exports.useRouter = exports.useRemoveSessionKey = exports.useQueryBSMNT = exports.useQueryB3 = exports.useProfileSettings = exports.useProfilePreference = exports.useProfile = exports.useDisplayName = exports.useOneBalance = exports.useNotifications = exports.useNativeBalanceFromRPC = exports.useNativeBalance = exports.useMediaQuery = exports.useIsomorphicLayoutEffect = exports.useIsMobile = exports.useHasMounted = exports.useHandleConnectWithPrivy = exports.useGlobalAccount = exports.useGetGeo = exports.useGetAllTWSigners = exports.useFirstEOA = exports.useExchangeRate = exports.useConnect = exports.useClient = exports.useChainSwitchWithAction = exports.useB3EnsName = exports.useB3BalanceFromAddresses = exports.useAuthentication = exports.useAnalytics = exports.useAddTWSessionKey = exports.useAccountWallet = exports.useAccountAssets = exports.createWagmiConfig = void 0;
 var createWagmiConfig_1 = require("../utils/createWagmiConfig");
 Object.defineProperty(exports, "createWagmiConfig", { enumerable: true, get: function () { return createWagmiConfig_1.createWagmiConfig; } });
 var useAccountAssets_1 = require("./useAccountAssets");
@@ -31,8 +31,6 @@ var useB3BalanceFromAddresses_1 = require("./useB3BalanceFromAddresses");
 Object.defineProperty(exports, "useB3BalanceFromAddresses", { enumerable: true, get: function () { return useB3BalanceFromAddresses_1.useB3BalanceFromAddresses; } });
 var useB3EnsName_1 = require("./useB3EnsName");
 Object.defineProperty(exports, "useB3EnsName", { enumerable: true, get: function () { return useB3EnsName_1.useB3EnsName; } });
-var useBestTransactionPath_1 = require("./useBestTransactionPath");
-Object.defineProperty(exports, "useBestTransactionPath", { enumerable: true, get: function () { return useBestTransactionPath_1.useBestTransactionPath; } });
 var useChainSwitchWithAction_1 = require("./useChainSwitchWithAction");
 Object.defineProperty(exports, "useChainSwitchWithAction", { enumerable: true, get: function () { return useChainSwitchWithAction_1.useChainSwitchWithAction; } });
 __exportStar(require("./useClaim"), exports);

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

@@ -5,7 +5,6 @@ exports.useAccountWalletImage = useAccountWalletImage;
 const react_1 = require("../../../global-account/react");
 const constants_1 = require("../../../shared/constants");
 const debug_1 = require("../../../shared/utils/debug");
-const ipfs_1 = require("../../../shared/utils/ipfs");
 const react_2 = require("react");
 const react_3 = require("thirdweb/react");
 const in_app_1 = require("thirdweb/wallets/in-app");
@@ -22,7 +21,13 @@ function useLastAuthProvider() {
     return lastAuthProvider;
 }
 function useAccountWallet() {
-    const { account, user } = (0, react_1.useB3)();
+    // WOJ: --------------------
+    //  values from in useB3:
+    //  const activeAccount = useActiveAccount();
+    // const effectiveAccount = isAuthenticated ? accountOverride || activeAccount : undefined;
+    // can we possibly just use useActiveAccount here?
+    // --------------------
+    const { account } = (0, react_1.useB3)();
     const activeWallet = (0, react_3.useActiveWallet)();
     const connectedWallets = (0, react_3.useConnectedWallets)();
     const connectedSmartWallet = connectedWallets.find(wallet => wallet.id === constants_1.ecosystemWalletId);
@@ -35,7 +40,6 @@ function useAccountWallet() {
     debug("connectedEOAWallet", connectedEOAWallet);
     debug("isActiveSmartWallet", isActiveSmartWallet);
     debug("isActiveEOAWallet", isActiveEOAWallet);
-    const { data: walletImage } = (0, react_3.useWalletImage)(connectedEOAWallet?.id);
     // If not EOA sign in, then we need to show the smart wallet icon
     const lastAuthProvider = useLastAuthProvider();
     const smartWalletIcon = lastAuthProvider && !connectedEOAWallet
@@ -43,13 +47,12 @@ function useAccountWallet() {
         : "https://gradvatar.com/0x0000000000000000000000000000000000000000"; // show smart wallet of eoa wallet is gradvatar
     const { data: profileData } = (0, react_1.useProfile)({ address: account?.address });
     const ensName = profileData?.displayName?.replace(/\.b3\.fun/g, "");
-    const avatarUrl = user?.avatar ? (0, ipfs_1.getIpfsUrl)(user?.avatar) : profileData?.avatar;
     const res = (0, react_2.useMemo)(() => ({
         wallet: {
             ...account,
             ensName,
             meta: {
-                icon: avatarUrl || (isActiveSmartWallet ? smartWalletIcon : walletImage) || "",
+                icon: "", // deprecated
             },
         },
         address: account?.address,
@@ -59,22 +62,20 @@ function useAccountWallet() {
         isActiveSmartWallet: isActiveSmartWallet,
         isActiveEOAWallet: isActiveEOAWallet,
         smartWalletIcon: smartWalletIcon,
-        eoaWalletIcon: walletImage,
+        eoaWalletIcon: "", // deprecated
     }), [
         account,
-        avatarUrl,
         connectedEOAWallet,
         connectedSmartWallet,
         ensName,
         isActiveEOAWallet,
         isActiveSmartWallet,
         smartWalletIcon,
-        walletImage,
     ]);
     return res;
 }
 function useAccountWalletImage() {
-    const { account, user } = (0, react_1.useB3)();
+    const { account } = (0, react_1.useB3)();
     const activeWallet = (0, react_3.useActiveWallet)();
     const connectedWallets = (0, react_3.useConnectedWallets)();
     const connectedSmartWallet = connectedWallets.find(wallet => wallet.id === constants_1.ecosystemWalletId);
@@ -87,6 +88,6 @@ function useAccountWalletImage() {
         ? in_app_1.socialIcons[lastAuthProvider]
         : "https://gradvatar.com/0x0000000000000000000000000000000000000000"; // show smart wallet of eoa wallet is gradvatar
     const { data: profileData } = (0, react_1.useProfile)({ address: account?.address });
-    const avatarUrl = user?.avatar || profileData?.avatar;
+    const avatarUrl = profileData?.avatar;
     return avatarUrl || (isActiveSmartWallet ? smartWalletIcon : walletImage) || "";
 }

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

@@ -17,6 +17,7 @@ import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodStat
 import { useRecipientAddressState } from "../hooks/useRecipientAddressState.js";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
+import { CryptoPaymentMethodDisplay } from "./common/CryptoPaymentMethodDisplay.js";
 import { FeeBreakDown } from "./common/FeeBreakDown.js";
 import { FIAT_PAYMENT_METHOD_DISPLAY, FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
 import { OrderDetails } from "./common/OrderDetails.js";
@@ -298,7 +299,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         },
     });
     const isCreatingOrder = isCreatingRegularOrder || isCreatingOnrampOrder;
-    const { address: connectedAddress, name: connectedName } = useConnectedUserProfile();
+    const { address: connectedAddress, name: connectedName } = useConnectedUserProfile(effectiveCryptoPaymentMethod);
     const recipientProfile = useProfile({ address: recipientAddress });
     const recipientName = recipientProfile.data?.name;
     const handleCreateOrder = async (recipientAddress, onramp) => {
@@ -520,7 +521,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [connectedAddress ? (_jsx("span", { className: "text-as-tertiarry whitespace-nowrap", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") })) : (_jsx("span", { className: "whitespace-nowrap", children: "Connect wallet" })), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Transfer crypto" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Select payment method" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: _jsx(CryptoPaymentMethodDisplay, { paymentMethod: effectiveCryptoPaymentMethod, connectedAddress: connectedAddress, connectedName: connectedName }) })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(motion.div, { initial: false, animate: {
                                                         opacity: hasMounted ? 1 : 0,
                                                         y: hasMounted ? 0 : 20,
                                                         filter: hasMounted ? "blur(0px)" : "blur(10px)",

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

@@ -1,13 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useProfile, useTokenData } from "../../../../global-account/react/index.js";
-import { formatUsername } from "../../../../shared/utils/index.js";
-import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
 import { formatDisplayNumber } from "../../../../shared/utils/number.js";
-import { ChevronRight, Info } from "lucide-react";
+import { Info } from "lucide-react";
 import { motion } from "motion/react";
 import { useEffect, useRef } from "react";
 import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay.js";
-import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
+import { CryptoPaymentMethodDisplay } from "./CryptoPaymentMethodDisplay.js";
 import { OrderTokenAmount } from "./OrderTokenAmount.js";
 import { TokenBalance } from "./TokenBalance.js";
 export function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, isSrcInputDirty, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, onTokenSelect, onShowFeeDetail, }) {
@@ -40,7 +38,7 @@ export function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, se
     useEffect(() => {
         appliedSrcMetadataRef.current = false;
     }, [selectedSrcToken.address, selectedSrcToken.chainId]);
-    return (_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: "pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "text-as-primary/50 flex h-7 items-center gap-1.5 text-sm", children: ["Pay", !isSrcInputDirty && anyspendQuote?.data?.fee && onShowFeeDetail && (_jsx("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }))] }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [walletAddress ? (_jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(walletAddress || "") })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? (_jsxs(_Fragment, { children: ["Global Account", _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: walletAddress, walletAddress: walletAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
+    return (_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: "pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "text-as-primary/50 flex h-7 items-center gap-1.5 text-sm", children: ["Pay", !isSrcInputDirty && anyspendQuote?.data?.fee && onShowFeeDetail && (_jsx("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }))] }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: _jsx(CryptoPaymentMethodDisplay, { paymentMethod: selectedCryptoPaymentMethod, connectedAddress: walletAddress, connectedName: connectedName }) })] }), _jsx(OrderTokenAmount, { address: walletAddress, walletAddress: walletAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
                     setIsSrcInputDirty(true);
                     setSrcAmount(value);
                 }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken, onTokenSelect: onTokenSelect }), _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, {

package/dist/esm/anyspend/react/components/common/CryptoPaymentMethodDisplay.d.ts

@@ -0,0 +1,15 @@
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
+interface CryptoPaymentMethodDisplayProps {
+    paymentMethod: CryptoPaymentMethodType;
+    connectedAddress?: string | null;
+    connectedName?: string | null;
+}
+/**
+ * Displays the selected crypto payment method with appropriate label
+ * - CONNECT_WALLET: Shows wallet address/name or "Connect wallet"
+ * - GLOBAL_WALLET: Shows "Global Account"
+ * - TRANSFER_CRYPTO: Shows "Transfer crypto"
+ * - NONE: Shows "Select payment method"
+ */
+export declare function CryptoPaymentMethodDisplay({ paymentMethod, connectedAddress, connectedName, }: CryptoPaymentMethodDisplayProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatUsername } from "../../../../shared/utils/index.js";
+import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
+import { ChevronRight } from "lucide-react";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
+/**
+ * Displays the selected crypto payment method with appropriate label
+ * - CONNECT_WALLET: Shows wallet address/name or "Connect wallet"
+ * - GLOBAL_WALLET: Shows "Global Account"
+ * - TRANSFER_CRYPTO: Shows "Transfer crypto"
+ * - NONE: Shows "Select payment method"
+ */
+export function CryptoPaymentMethodDisplay({ paymentMethod, connectedAddress, connectedName, }) {
+    if (paymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
+        return (_jsxs(_Fragment, { children: [connectedAddress ? (_jsx("span", { className: "text-as-tertiarry whitespace-nowrap", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress) })) : (_jsx("span", { className: "whitespace-nowrap", children: "Connect wallet" })), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+    }
+    if (paymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET) {
+        return (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Global Account" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+    }
+    if (paymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO) {
+        return (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Transfer crypto" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+    }
+    // NONE or any other case
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Select payment method" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+}

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

@@ -1,8 +1,9 @@
+import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
 /**
  * Hook that provides connected user's address, profile, and cleaned display name
  * Combines logic for getting connected address from either global account or thirdweb wallets
  */
-export declare function useConnectedUserProfile(): {
+export declare function useConnectedUserProfile(selectedCryptoPaymentMethod?: CryptoPaymentMethodType): {
     address: string | undefined;
     profile: import("@tanstack/react-query").UseQueryResult<import("../../../global-account/react").CombinedProfile, Error>;
     name: string | null | undefined;

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

@@ -1,18 +1,15 @@
-import { useAccountWallet, useProfile } from "../../../global-account/react/index.js";
-import { useConnectedWallets } from "thirdweb/react";
+import { useProfile } from "../../../global-account/react/index.js";
+import { useConnectedWalletDisplay } from "./useConnectedWalletDisplay.js";
 /**
  * Hook that provides connected user's address, profile, and cleaned display name
  * Combines logic for getting connected address from either global account or thirdweb wallets
  */
-export function useConnectedUserProfile() {
-    const { address: globalAddress } = useAccountWallet();
-    const connectedWallets = useConnectedWallets();
-    // Get connected address from global account or first connected wallet
-    const connectedAddress = globalAddress || connectedWallets?.[0]?.getAccount()?.address;
+export function useConnectedUserProfile(selectedCryptoPaymentMethod) {
+    const { walletAddress } = useConnectedWalletDisplay(selectedCryptoPaymentMethod);
     // Fetch profile data for the connected address with cleaned name
-    const connectedProfile = useProfile({ address: connectedAddress });
+    const connectedProfile = useProfile({ address: walletAddress });
     return {
-        address: connectedAddress,
+        address: walletAddress,
         profile: connectedProfile,
         name: connectedProfile.data?.name,
         isLoading: connectedProfile.isLoading,

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

@@ -2,8 +2,6 @@ import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMetho
 interface UseConnectedWalletDisplayResult {
     walletAddress: string | undefined;
     shouldShowConnectedEOA: boolean;
-    shouldShowWagmiWallet: boolean;
-    isWalletDuplicated: boolean;
     suggestedPaymentMethod: CryptoPaymentMethodType;
 }
 /**

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

@@ -9,23 +9,15 @@ export function useConnectedWalletDisplay(selectedCryptoPaymentMethod) {
     const { connectedEOAWallet, connectedSmartWallet } = useAccountWallet();
     const { address: wagmiAddress } = useAccount();
     const globalWalletAddress = connectedSmartWallet?.getAccount()?.address;
-    // Helper function to check if two addresses are the same
-    const isSameAddress = (addr1, addr2) => {
-        if (!addr1 || !addr2)
-            return false;
-        return addr1.toLowerCase() === addr2.toLowerCase();
-    };
     // Check if connectedEOAWallet and wagmi wallet represent the same wallet
     const connectedEOAAddress = connectedEOAWallet?.getAccount()?.address;
-    const isWalletDuplicated = isSameAddress(connectedEOAAddress, wagmiAddress) || isSameAddress(globalWalletAddress, wagmiAddress);
     // Determine which wallet to show (prefer connectedEOAWallet if both exist and are the same)
     const shouldShowConnectedEOA = !!connectedEOAWallet;
     // this is disabled because we don't want to display In-App Wallet as a payment method
-    const shouldShowWagmiWallet = false; // wagmiWalletIsConnected && (!isWalletDuplicated || !connectedEOAWallet);
     // Determine which address to use based on payment method
     let walletAddress;
     if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET) {
-        walletAddress = connectedSmartWallet?.getAccount()?.address;
+        walletAddress = globalWalletAddress;
     }
     else if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
         // Prefer connectedEOAWallet, fallback to wagmi wallet
@@ -42,15 +34,13 @@ export function useConnectedWalletDisplay(selectedCryptoPaymentMethod) {
         // If there's a connected EOA or wagmi wallet, suggest CONNECT_WALLET
         suggestedPaymentMethod = CryptoPaymentMethodType.CONNECT_WALLET;
     }
-    else if (connectedSmartWallet?.getAccount()?.address) {
+    else if (globalWalletAddress) {
         // If only global wallet is available, suggest that
         suggestedPaymentMethod = CryptoPaymentMethodType.GLOBAL_WALLET;
     }
     return {
         walletAddress,
         shouldShowConnectedEOA,
-        shouldShowWagmiWallet,
-        isWalletDuplicated,
         suggestedPaymentMethod,
     };
 }

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

@@ -5,13 +5,13 @@ import { ecosystemWalletId } from "../../../../shared/constants/index.js";
 import { cn, truncateAddress } from "../../../../shared/utils/index.js";
 import { Menu, MenuButton, MenuItems, Transition } from "@headlessui/react";
 import { useEffect } from "react";
-import { useConnectedWallets, useSetActiveWallet } from "thirdweb/react";
-import { useAccountWalletImage } from "../../hooks/useAccountWallet.js";
+import { useConnectedWallets, useSetActiveWallet, useWalletImage } from "thirdweb/react";
 import { ManageAccountButton } from "../custom/ManageAccountButton.js";
 export function SignIn(props) {
     const { className } = props;
     const { automaticallySetFirstEoa, partnerId } = useB3();
-    const { address: globalAddress, ensName, connectedSmartWallet, connectedEOAWallet, isActiveSmartWallet, isActiveEOAWallet, smartWalletIcon, eoaWalletIcon, } = useAccountWallet();
+    const { address: globalAddress, ensName, connectedSmartWallet, connectedEOAWallet, isActiveSmartWallet, isActiveEOAWallet, smartWalletIcon, } = useAccountWallet();
+    const { data: walletImage } = useWalletImage(connectedEOAWallet?.id);
     const isMobile = useIsMobile();
     const { logout } = useAuthentication(partnerId);
     const onDisconnect = async () => {
@@ -34,11 +34,10 @@ export function SignIn(props) {
             setActiveWallet(connectedEOAWallet);
         }
     }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet, automaticallySetFirstEoa]);
-    const walletImage = useAccountWalletImage();
     // Desktop version - original dropdown menu
     return (_jsx(StyleRoot, { children: _jsx(Menu, { className: `relative flex items-center ${className || ""}`, as: "div", children: globalAddress ? (_jsxs(_Fragment, { children: [_jsxs(MenuButton, { className: "bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none", children: [!!walletImage && (_jsx(IPFSMediaRenderer, { src: walletImage, alt: "Wallet Image", className: "bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100" })), _jsx("div", { className: "text-as-primary", children: ensName ? ensName : truncateAddress(globalAddress) })] }), _jsx(Transition, { enter: "duration-200 ease-out", enterFrom: "scale-95 opacity-0", enterTo: "scale-100 opacity-100", leave: "duration-300 ease-out", leaveFrom: "scale-100 opacity-100", leaveTo: "scale-95 opacity-0", children: _jsx(MenuItems, { className: "b3-root absolute -right-4 top-full min-w-64 rounded-2xl border focus:outline-none lg:right-0", modal: false, 
                             // TODO: Figure out why setting anchor on mobile causes z-index issues where it appears under elements
-                            anchor: isMobile ? "top end" : undefined, children: _jsxs("div", { className: "bg-b3-react-background", children: [connectedEOAWallet ? (_jsxs("div", { className: cn("border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3"), onClick: () => handleSetActiveAccount(connectedEOAWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: eoaWalletIcon, alt: connectedEOAWallet?.id }), _jsxs("div", { className: "ml-4 grow", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress) })] })] }), isActiveEOAWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] })) : (connectedSmartWallet && (_jsxs("div", { className: cn("mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3", isActiveSmartWallet
+                            anchor: isMobile ? "top end" : undefined, children: _jsxs("div", { className: "bg-b3-react-background", children: [connectedEOAWallet ? (_jsxs("div", { className: cn("border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3"), onClick: () => handleSetActiveAccount(connectedEOAWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: walletImage, alt: connectedEOAWallet?.id }), _jsxs("div", { className: "ml-4 grow", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress) })] })] }), isActiveEOAWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] })) : (connectedSmartWallet && (_jsxs("div", { className: cn("mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3", isActiveSmartWallet
                                             ? "bg-b3-react-background"
                                             : "bg-b3-react-background hover:bg-b3-react-background"), onClick: () => handleSetActiveAccount(connectedSmartWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: smartWalletIcon, alt: connectedSmartWallet?.id }), _jsxs("div", { className: "grow pl-4", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress) }), _jsx("div", { children: "Smart wallet" })] })] }), isActiveSmartWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] }))), _jsx("div", { className: "ml-3", children: _jsx(ManageAccountButton, { ...props, className: "w-[calc(100%-12px)]" }) }), _jsx("button", { className: "mb-2 w-full space-y-1", onClick: onDisconnect, children: _jsxs("div", { className: "hover:bg-b3-react-background group flex h-12 items-center rounded-xl px-4 transition-colors", children: [_jsx(Icon, { className: "fill-b3-react-primary mr-4 shrink-0 transition-colors", name: "logout" }), _jsx("div", { className: "text-b3-react-primary mr-auto transition-colors", children: "Disconnect" })] }) })] }) }) })] })) : (_jsx(SignInWithB3, { closeAfterLogin: true, onLoginSuccess: async (globalAccount) => {
                     console.log("User authenticated with Global Account!", globalAccount);