@b3dotfun/sdk 0.0.83-alpha.2 → 0.0.83-alpha.4

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/anyspend/react/hooks/useHyperliquidTransfer.js

@@ -92,7 +92,7 @@ function useHyperliquidTransfer() {
                 signature: {
                     r,
                     s,
-                    v: Number(v ?? 0n),
+                    v: Number(v ?? BigInt(0)),
                 },
                 nonce: currentTime,
                 action: {

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/anyspend/react/hooks/useHyperliquidTransfer.js

@@ -86,7 +86,7 @@ export function useHyperliquidTransfer() {
                 signature: {
                     r,
                     s,
-                    v: Number(v ?? 0n),
+                    v: Number(v ?? BigInt(0)),
                 },
                 nonce: currentTime,
                 action: {

package/dist/types/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/types/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("@b3dotfun/sdk/global-account/react").CombinedProfile, Error>;
     name: string | null | undefined;

package/dist/types/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/package.json

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

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

@@ -48,6 +48,7 @@ import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodStat
 import { useRecipientAddressState } from "../hooks/useRecipientAddressState";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
+import { CryptoPaymentMethodDisplay } from "./common/CryptoPaymentMethodDisplay";
 import { FeeBreakDown } from "./common/FeeBreakDown";
 import { FIAT_PAYMENT_METHOD_DISPLAY, FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
 import { OrderDetails } from "./common/OrderDetails";
@@ -469,7 +470,7 @@ function AnySpendCustomInner({
 
   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;
 
@@ -951,28 +952,11 @@ function AnySpendCustomInner({
                   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)}
                 >
-                  {effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
-                    <>
-                      {connectedAddress ? (
-                        <span className="text-as-tertiarry whitespace-nowrap">
-                          {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "")}
-                        </span>
-                      ) : (
-                        <span className="whitespace-nowrap">Connect wallet</span>
-                      )}
-                      <ChevronRight className="h-4 w-4 shrink-0" />
-                    </>
-                  ) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
-                    <>
-                      <span className="whitespace-nowrap">Transfer crypto</span>
-                      <ChevronRight className="h-4 w-4 shrink-0" />
-                    </>
-                  ) : (
-                    <>
-                      <span className="whitespace-nowrap">Select payment method</span>
-                      <ChevronRight className="h-4 w-4 shrink-0" />
-                    </>
-                  )}
+                  <CryptoPaymentMethodDisplay
+                    paymentMethod={effectiveCryptoPaymentMethod}
+                    connectedAddress={connectedAddress}
+                    connectedName={connectedName}
+                  />
                 </button>
               </motion.div>
 

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

@@ -1,13 +1,12 @@
 import { useProfile, useTokenData } from "@b3dotfun/sdk/global-account/react";
-import { formatUsername } from "@b3dotfun/sdk/shared/utils";
-import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
-import { ChevronRight, Info } from "lucide-react";
+import { Info } from "lucide-react";
 import { motion } from "motion/react";
 import { useEffect, useRef } from "react";
 import { components } from "../../../types/api";
 import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
+import { CryptoPaymentMethodDisplay } from "./CryptoPaymentMethodDisplay";
 import { OrderTokenAmount } from "./OrderTokenAmount";
 import { TokenBalance } from "./TokenBalance";
 
@@ -103,33 +102,11 @@ export function CryptoPaySection({
           className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none"
           onClick={onSelectCryptoPaymentMethod}
         >
-          {selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
-            <>
-              {walletAddress ? (
-                <div className="flex items-center gap-1">
-                  {connectedName ? formatUsername(connectedName) : shortenAddress(walletAddress || "")}
-                </div>
-              ) : (
-                "Connect wallet"
-              )}
-              <ChevronRight className="h-4 w-4" />
-            </>
-          ) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? (
-            <>
-              Global Account
-              <ChevronRight className="h-4 w-4" />
-            </>
-          ) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
-            <>
-              Transfer crypto
-              <ChevronRight className="h-4 w-4" />
-            </>
-          ) : (
-            <>
-              Select payment method
-              <ChevronRight className="h-4 w-4" />
-            </>
-          )}
+          <CryptoPaymentMethodDisplay
+            paymentMethod={selectedCryptoPaymentMethod}
+            connectedAddress={walletAddress}
+            connectedName={connectedName}
+          />
         </button>
       </div>
       <OrderTokenAmount

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

@@ -0,0 +1,64 @@
+import { formatUsername } from "@b3dotfun/sdk/shared/utils";
+import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
+import { ChevronRight } from "lucide-react";
+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 function CryptoPaymentMethodDisplay({
+  paymentMethod,
+  connectedAddress,
+  connectedName,
+}: CryptoPaymentMethodDisplayProps) {
+  if (paymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
+    return (
+      <>
+        {connectedAddress ? (
+          <span className="text-as-tertiarry whitespace-nowrap">
+            {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress)}
+          </span>
+        ) : (
+          <span className="whitespace-nowrap">Connect wallet</span>
+        )}
+        <ChevronRight className="h-4 w-4 shrink-0" />
+      </>
+    );
+  }
+
+  if (paymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET) {
+    return (
+      <>
+        <span className="whitespace-nowrap">Global Account</span>
+        <ChevronRight className="h-4 w-4 shrink-0" />
+      </>
+    );
+  }
+
+  if (paymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO) {
+    return (
+      <>
+        <span className="whitespace-nowrap">Transfer crypto</span>
+        <ChevronRight className="h-4 w-4 shrink-0" />
+      </>
+    );
+  }
+
+  // NONE or any other case
+  return (
+    <>
+      <span className="whitespace-nowrap">Select payment method</span>
+      <ChevronRight className="h-4 w-4 shrink-0" />
+    </>
+  );
+}

package/src/anyspend/react/hooks/useConnectedUserProfile.ts

@@ -1,22 +1,19 @@
-import { useAccountWallet, useProfile } from "@b3dotfun/sdk/global-account/react";
-import { useConnectedWallets } from "thirdweb/react";
+import { useProfile } from "@b3dotfun/sdk/global-account/react";
+import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
+import { useConnectedWalletDisplay } from "./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
  */
-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?: CryptoPaymentMethodType) {
+  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/src/anyspend/react/hooks/useConnectedWalletDisplay.ts

@@ -5,8 +5,6 @@ import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMetho
 interface UseConnectedWalletDisplayResult {
   walletAddress: string | undefined;
   shouldShowConnectedEOA: boolean;
-  shouldShowWagmiWallet: boolean;
-  isWalletDuplicated: boolean;
   suggestedPaymentMethod: CryptoPaymentMethodType;
 }
 
@@ -22,27 +20,18 @@ export function useConnectedWalletDisplay(
 
   const globalWalletAddress = connectedSmartWallet?.getAccount()?.address;
 
-  // Helper function to check if two addresses are the same
-  const isSameAddress = (addr1?: string, addr2?: string): boolean => {
-    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: string | undefined;
 
   if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET) {
-    walletAddress = connectedSmartWallet?.getAccount()?.address;
+    walletAddress = globalWalletAddress;
   } else if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
     // Prefer connectedEOAWallet, fallback to wagmi wallet
     walletAddress = connectedEOAAddress || wagmiAddress;
@@ -58,7 +47,7 @@ export function useConnectedWalletDisplay(
   if (connectedEOAAddress || wagmiAddress) {
     // 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;
   }
@@ -66,8 +55,6 @@ export function useConnectedWalletDisplay(
   return {
     walletAddress,
     shouldShowConnectedEOA,
-    shouldShowWagmiWallet,
-    isWalletDuplicated,
     suggestedPaymentMethod,
   };
 }

package/src/anyspend/react/hooks/useHyperliquidTransfer.ts

@@ -105,7 +105,7 @@ export function useHyperliquidTransfer() {
           signature: {
             r,
             s,
-            v: Number(v ?? 0n),
+            v: Number(v ?? BigInt(0)),
           },
           nonce: currentTime,
           action: {