@b3dotfun/sdk 0.0.20-alpha.0 → 0.0.20-alpha.2

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

@@ -18,9 +18,9 @@ const lucide_react_1 = require("lucide-react");
 const react_3 = require("motion/react");
 const react_4 = require("react");
 const sonner_1 = require("sonner");
+const react_5 = require("thirdweb/react");
 const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
-const wagmi_1 = require("wagmi");
 const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
 const CryptoPaymentMethod_1 = require("./common/CryptoPaymentMethod");
 const FiatPaymentMethod_1 = require("./common/FiatPaymentMethod");
@@ -51,7 +51,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
     const searchParams = (0, react_2.useSearchParamsSSR)();
     const router = (0, react_2.useRouter)();
     // Get wagmi account state for wallet connection
-    const wagmiAccount = (0, wagmi_1.useAccount)();
+    const connectedWallets = (0, react_5.useConnectedWallets)();
     // Determine if we're in "buy mode" based on whether destination token props are provided
     const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
     // Add refs to track URL state
@@ -343,6 +343,9 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
             amount: srcAmountOnrampInWei,
             onrampVendor: getOnrampVendor(selectedFiatPaymentMethod),
         });
+    const connectedAddress = globalAddress || connectedWallets?.[0]?.getAccount()?.address;
+    const connectedProfile = (0, react_2.useProfile)({ address: connectedAddress });
+    const connectedName = connectedProfile.data?.name?.replace(/\.b3\.fun/g, "");
     const recipientProfile = (0, react_2.useProfile)({ address: recipientAddress });
     const recipientName = recipientProfile.data?.name?.replace(/\.b3\.fun/g, "");
     // Load custom recipients from local storage on mount
@@ -807,7 +810,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
                                 setActiveTab("fiat");
                                 setSelectedPaymentMethod(CryptoPaymentMethod_1.PaymentMethod.NONE); // Reset crypto payment method when switching to fiat
                                 setSelectedFiatPaymentMethod(FiatPaymentMethod_1.FiatPaymentMethod.NONE); // Reset fiat payment method when switching to fiat
-                            }, children: "Pay with Fiat" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/50 hover:text-as-primary/70 flex h-7 items-center gap-1 text-sm transition-colors", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedPaymentMethod === CryptoPaymentMethod_1.PaymentMethod.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [globalAddress || wagmiAccount.address ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [globalWallet?.meta?.icon && ((0, jsx_runtime_1.jsx)("img", { src: globalWallet.meta.icon, alt: "Connected Wallet", className: "h-4 w-4 rounded-full" })), (0, jsx_runtime_1.jsx)("span", { children: (0, formatAddress_1.shortenAddress)(globalAddress || wagmiAccount.address || "") })] })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "h-4 w-4" })] })) : selectedPaymentMethod === CryptoPaymentMethod_1.PaymentMethod.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transfer crypto", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { 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.ChevronRightCircle, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
+                            }, children: "Pay with Fiat" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedPaymentMethod === CryptoPaymentMethod_1.PaymentMethod.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [globalWallet?.meta?.icon && ((0, jsx_runtime_1.jsx)("img", { src: globalWallet.meta.icon, alt: "Connected Wallet", className: "bg-as-primary h-6 w-6 rounded-full" })), (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry", children: connectedName || (0, formatAddress_1.shortenAddress)(connectedAddress || "") })] })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedPaymentMethod === CryptoPaymentMethod_1.PaymentMethod.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transfer crypto", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
                                     setIsSrcInputDirty(true);
                                     setSrcAmount(value);
                                 }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: (0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyIn?.amountUsd, { style: "currency", fallback: "" }) }), (0, jsx_runtime_1.jsx)(TokenBalance_1.TokenBalance, { token: selectedSrcToken, walletAddress: globalAddress, onChangeInput: value => {
@@ -832,7 +835,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
                             const tempDstAmount = dstAmount;
                             setSrcAmount(tempDstAmount);
                             setDstAmount(tempSrcAmount);
-                        }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab !== "fiat" && ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? ((0, jsx_runtime_1.jsxs)("button", { className: (0, cn_1.cn)("text-as-primary/70 flex h-7 items-center gap-2 rounded-lg px-2"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: [globalAddress && recipientAddress === globalAddress && globalWallet?.meta?.icon ? ((0, jsx_runtime_1.jsx)("img", { src: globalWallet?.meta?.icon, alt: "Current wallet", className: "bg-as-primary h-6 w-6 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-orange-500 text-xs text-white", children: "\uD83E\uDD8A" })), (0, jsx_runtime_1.jsx)("div", { className: "text-sm", children: recipientName ? recipientName : (0, formatAddress_1.shortenAddress)(recipientAddress) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Select recipient" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-3 w-3" })] }))] }), isBuyMode ? (
+                        }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab !== "fiat" && ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? ((0, jsx_runtime_1.jsxs)("button", { className: (0, cn_1.cn)("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: [globalAddress && recipientAddress === globalAddress && globalWallet?.meta?.icon ? ((0, jsx_runtime_1.jsx)("img", { src: globalWallet?.meta?.icon, alt: "Current wallet", className: "bg-as-primary h-6 w-6 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-orange-500 text-xs text-white", children: "\uD83E\uDD8A" })), (0, jsx_runtime_1.jsx)("div", { className: "text-sm", children: recipientName ? recipientName : (0, formatAddress_1.shortenAddress)(recipientAddress) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Select recipient" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-3 w-3" })] }))] }), isBuyMode ? (
                             // Fixed destination token display in buy mode
                             (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "h-8 w-8 rounded-full" })), (0, jsx_runtime_1.jsx)("span", { className: "text-as-brand text-lg font-bold", children: selectedDstToken.symbol })] })] })) : ((0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: recipientAddress, context: "to", inputValue: dstAmount, onChangeInput: value => {
                                     setIsSrcInputDirty(false);
@@ -891,26 +894,27 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
             setActivePanel(PanelView.MAIN); // Go back to main panel to show updated pricing
         }, srcAmountOnRamp: srcAmountOnRamp, isMainnet: isMainnet }));
     // Add tabs to the main component when no order is loaded
-    return ((0, jsx_runtime_1.jsx)(react_2.StyleRoot, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("mx-auto w-full max-w-[460px]", mode === "page" && "bg-as-surface-primary border-as-border-secondary rounded-2xl border p-6 shadow-xl"), children: (0, jsx_runtime_1.jsx)(react_2.TransitionPanel, { activeIndex: orderId
+    return ((0, jsx_runtime_1.jsx)(react_2.StyleRoot, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("mx-auto w-full max-w-[460px]", mode === "page" &&
+                "bg-as-surface-primary border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: (0, jsx_runtime_1.jsx)(react_2.TransitionPanel, { activeIndex: orderId
                     ? oat
                         ? PanelView.ORDER_DETAILS
                         : PanelView.LOADING
                     : activePanel === PanelView.ORDER_DETAILS
                         ? PanelView.MAIN
-                        : activePanel, className: (0, cn_1.cn)("overflow-hidden", {
+                        : activePanel, className: (0, cn_1.cn)("rounded-2xl", {
                     "mt-0": mode === "modal",
                 }), variants: {
                     enter: { x: 300, opacity: 0 },
                     center: { x: 0, opacity: 1 },
                     exit: { x: -300, opacity: 0 },
                 }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
-                    (0, jsx_runtime_1.jsx)("div", { children: mainView }, "main-view"),
-                    (0, jsx_runtime_1.jsx)("div", { children: historyView }, "history-view"),
-                    (0, jsx_runtime_1.jsx)("div", { children: orderDetailsView }, "order-details-view"),
-                    (0, jsx_runtime_1.jsx)("div", { children: OrderDetails_1.OrderDetailsLoadingView }, "loading-view"),
-                    (0, jsx_runtime_1.jsx)("div", { children: onrampPaymentView }, "fiat-payment-view"),
-                    (0, jsx_runtime_1.jsx)("div", { children: recipientSelectionView }, "recipient-selection-view"),
-                    (0, jsx_runtime_1.jsx)("div", { children: cryptoPaymentMethodView }, "crypto-payment-method-view"),
-                    (0, jsx_runtime_1.jsx)("div", { children: fiatPaymentMethodView }, "fiat-payment-method-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: mainView }, "main-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: historyView }, "history-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: orderDetailsView }, "order-details-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: OrderDetails_1.OrderDetailsLoadingView }, "loading-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: onrampPaymentView }, "fiat-payment-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: recipientSelectionView }, "recipient-selection-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: cryptoPaymentMethodView }, "crypto-payment-method-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: fiatPaymentMethodView }, "fiat-payment-method-view"),
                 ] }) }) }));
 }

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

@@ -13,5 +13,5 @@ interface AnySpendFingerprintWrapperProps {
  * This prevents unnecessary fingerprinting of users who don't interact with AnySpend.
  */
 export declare function AnySpendFingerprintWrapper({ children, fingerprint }: AnySpendFingerprintWrapperProps): import("react/jsx-runtime").JSX.Element;
-export declare function getFingerprintConfig(): FingerprintConfig | undefined;
+export declare function getFingerprintConfig(): FingerprintConfig;
 export {};

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

@@ -26,14 +26,11 @@ function AnySpendFingerprintWrapper({ children, fingerprint }) {
                 : undefined,
         }, children: children }));
 }
+const defaultApiKey = "80EnsS6POsxPAR9xGxmN";
 // Helper function to get fingerprint config from environment variables
 function getFingerprintConfig() {
-    const apiKey = process.env.NEXT_PUBLIC_FINGERPRINT_API_KEY;
-    if (!apiKey) {
-        return undefined;
-    }
     return {
-        apiKey,
+        apiKey: process.env.NEXT_PUBLIC_FINGERPRINT_API_KEY || defaultApiKey,
         endpoint: process.env.NEXT_PUBLIC_FINGERPRINT_ENDPOINT,
         scriptUrlPattern: process.env.NEXT_PUBLIC_FINGERPRINT_SCRIPT_URL,
     };

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

@@ -5,12 +5,16 @@ exports.PaymentMethod = void 0;
 exports.CryptoPaymentMethod = CryptoPaymentMethod;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../global-account/react");
+const b3Chain_1 = require("../../../../shared/constants/chains/b3Chain");
 const cn_1 = require("../../../../shared/utils/cn");
 const formatAddress_1 = require("../../../../shared/utils/formatAddress");
+const thirdweb_1 = require("../../../../shared/utils/thirdweb");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("react");
+const react_dom_1 = require("react-dom");
 const sonner_1 = require("sonner");
 const react_3 = require("thirdweb/react");
+const wallets_1 = require("thirdweb/wallets");
 const wagmi_1 = require("wagmi");
 var PaymentMethod;
 (function (PaymentMethod) {
@@ -19,100 +23,43 @@ var PaymentMethod;
     PaymentMethod["TRANSFER_CRYPTO"] = "transfer_crypto";
 })(PaymentMethod || (exports.PaymentMethod = PaymentMethod = {}));
 function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
-    const { connect, connectors, isPending: isConnecting, error: connectError } = (0, wagmi_1.useConnect)();
-    const wagmiAccount = (0, wagmi_1.useAccount)();
-    const { address: globalAddress, connectedEOAWallet, isActiveEOAWallet, wallet: globalWallet } = (0, react_1.useAccountWallet)();
+    const { address: globalAddress, wallet: globalWallet } = (0, react_1.useAccountWallet)();
     const { disconnect } = (0, wagmi_1.useDisconnect)();
-    const previousAddress = (0, react_2.useRef)(globalAddress);
-    const setActiveWallet = (0, react_3.useSetActiveWallet)();
-    // Automatically set EOA wallet as active when available
-    (0, react_2.useEffect)(() => {
-        if (connectedEOAWallet) {
-            console.log("Setting active wallet", connectedEOAWallet);
-            setActiveWallet(connectedEOAWallet);
-        }
-    }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet]);
-    // Handle wallet connection success
-    (0, react_2.useEffect)(() => {
-        if (globalAddress && previousAddress.current !== globalAddress) {
-            previousAddress.current = globalAddress;
-            sonner_1.toast.success("Wallet connected successfully");
-            // Automatically select connect wallet method and go back to main view
-            setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-            onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
-        }
-    }, [globalAddress, setSelectedPaymentMethod, onSelectPaymentMethod]);
-    // Handle connection errors
-    (0, react_2.useEffect)(() => {
-        if (connectError) {
-            // Handle specific error cases
-            if (connectError.message.includes("Connector already connected")) {
-                // If connector is already connected, just proceed with the flow
-                console.log("Connector already connected, proceeding with selection");
-                // Use wagmi account address or global address
-                if (wagmiAccount.address || globalAddress) {
-                    setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                    onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                }
-                else {
-                    // Fallback: proceed anyway as the connector reports it's connected
-                    setTimeout(() => {
-                        setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                        onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                    }, 100);
-                }
-            }
-            else {
-                sonner_1.toast.error(`Failed to connect wallet: ${connectError.message}`);
-            }
-        }
-    }, [connectError, globalAddress, wagmiAccount.address, setSelectedPaymentMethod, onSelectPaymentMethod]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("relative flex flex-col gap-10"), children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-around gap-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex-1 text-center", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Choose payment method" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [!globalAddress ? (
-                        // Not connected - show single connect button
-                        (0, jsx_runtime_1.jsxs)("button", { onClick: () => {
-                                // Prevent connecting if already connecting or if there's already a connection
-                                if (isConnecting)
-                                    return;
-                                try {
-                                    // Check if wagmi already has a connection
-                                    if (wagmiAccount.isConnected && wagmiAccount.address) {
-                                        // Already connected via wagmi, just proceed with selection
-                                        console.log("Wagmi already connected, proceeding with selection");
-                                        setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                                        onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                                        return;
-                                    }
-                                    // Check if global address exists (b3 account system)
-                                    if (globalAddress) {
-                                        // Already connected via global account, just proceed with selection
-                                        console.log("Global address already exists, proceeding with selection");
-                                        setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                                        onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                                        return;
-                                    }
-                                    // Use the first available connector or a preferred one
-                                    const preferredConnector = connectors.find(c => c.name.toLowerCase().includes("metamask")) || connectors[0];
-                                    if (preferredConnector) {
-                                        connect({ connector: preferredConnector });
-                                    }
-                                }
-                                catch (error) {
-                                    console.error("Connection error:", error);
-                                    sonner_1.toast.error("Failed to connect wallet. Please try again.");
-                                }
-                            }, disabled: isConnecting, className: "bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-blue-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-4 w-4 text-blue-600" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/60 text-sm", children: "Connect your wallet to continue" })] })] }), isConnecting ? ((0, jsx_runtime_1.jsx)("div", { className: "border-as-primary/20 border-t-as-primary h-5 w-5 animate-spin rounded-full border-2" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" }))] })) : (
-                        // Connected - show wallet info
-                        (0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-primary border-as-border-secondary rounded-xl border", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [globalWallet?.meta?.icon ? ((0, jsx_runtime_1.jsx)("img", { src: globalWallet.meta.icon, alt: "Connected Wallet", className: "h-8 w-8 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-green-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-4 w-4 text-green-600" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: "Connected Wallet" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(globalAddress) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => {
-                                                    setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                                                    onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                                                }, className: "bg-as-brand hover:bg-as-brand/90 rounded-lg px-3 py-1.5 text-sm font-medium text-white transition-colors", children: "Use Wallet" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
-                                                    disconnect();
-                                                    sonner_1.toast.success("Wallet disconnected");
-                                                    if (selectedPaymentMethod === PaymentMethod.CONNECT_WALLET) {
-                                                        setSelectedPaymentMethod(PaymentMethod.NONE);
-                                                    }
-                                                }, className: "text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) })] })] }) })), (0, jsx_runtime_1.jsxs)("button", { onClick: () => {
-                                setSelectedPaymentMethod(PaymentMethod.TRANSFER_CRYPTO);
-                                onSelectPaymentMethod(PaymentMethod.TRANSFER_CRYPTO);
-                            }, disabled: isCreatingOrder, className: "bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start text-left", children: (0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary font-semibold", children: "Transfer crypto" }) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] })] })] }) }));
+    const [showWalletModal, setShowWalletModal] = (0, react_2.useState)(false);
+    // Define available wallets for the modal
+    const availableWallets = [
+        (0, wallets_1.createWallet)("io.metamask"),
+        // createWallet("com.coinbase.wallet"),
+        (0, wallets_1.createWallet)("me.rainbow"),
+        (0, wallets_1.createWallet)("walletConnect"),
+        (0, wallets_1.createWallet)("io.rabby"),
+        (0, wallets_1.createWallet)("app.phantom"),
+    ];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto h-fit w-[460px] max-w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("relative flex flex-col gap-10"), children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-around gap-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex-1 text-center", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Choose payment method" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [!globalAddress ? (
+                            // Not connected - show single connect button
+                            (0, jsx_runtime_1.jsxs)("button", { onClick: () => setShowWalletModal(true), className: "bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-blue-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-4 w-4 text-blue-600" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/60 text-sm", children: "Choose from multiple wallet options" })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] })) : (
+                            // Connected - show wallet info
+                            (0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-primary border-as-border-secondary rounded-xl border", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [globalWallet?.meta?.icon ? ((0, jsx_runtime_1.jsx)("img", { src: globalWallet.meta.icon, alt: "Connected Wallet", className: "h-8 w-8 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-green-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-4 w-4 text-green-600" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: "Connected Wallet" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(globalAddress) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                                                        setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
+                                                        onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
+                                                    }, className: "bg-as-brand hover:bg-as-brand/90 rounded-lg px-3 py-1.5 text-sm font-medium text-white transition-colors", children: "Use Wallet" }), (0, jsx_runtime_1.jsx)("button", { onClick: async () => {
+                                                        disconnect();
+                                                        sonner_1.toast.success("Wallet disconnected");
+                                                        if (selectedPaymentMethod === PaymentMethod.CONNECT_WALLET) {
+                                                            setSelectedPaymentMethod(PaymentMethod.NONE);
+                                                        }
+                                                    }, className: "text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) })] })] }) })), (0, jsx_runtime_1.jsxs)("button", { onClick: () => {
+                                    setSelectedPaymentMethod(PaymentMethod.TRANSFER_CRYPTO);
+                                    onSelectPaymentMethod(PaymentMethod.TRANSFER_CRYPTO);
+                                }, disabled: isCreatingOrder, className: "bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start text-left", children: (0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary font-semibold", children: "Transfer crypto" }) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] })] })] }), showWalletModal &&
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: "pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50", children: (0, jsx_runtime_1.jsxs)("div", { className: "max-h-[80vh] w-[400px] max-w-[90vw] overflow-auto rounded-xl bg-white p-6 dark:bg-gray-900", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Connect Wallet" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowWalletModal(false), className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }) })] }), (0, jsx_runtime_1.jsx)(react_3.ConnectEmbed, { client: thirdweb_1.client, chain: b3Chain_1.thirdwebB3Mainnet, wallets: availableWallets, showThirdwebBranding: false, theme: (0, react_3.lightTheme)(), onConnect: async (wallet) => {
+                                    console.log("Wallet connected:", wallet);
+                                    // setShowWalletModal(false);
+                                    setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
+                                    onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
+                                    setShowWalletModal(false);
+                                }, style: {
+                                    width: "100%",
+                                    minHeight: "300px",
+                                } })] }) }), typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body)] }));
 }

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

@@ -18,7 +18,7 @@ export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
 export { useMediaQuery } from "./useMediaQuery";
 export { useNativeBalance, useNativeBalanceFromRPC } from "./useNativeBalance";
 export { useOneBalance } from "./useOneBalance";
-export { useProfile, useProfilePreference, type Profile, type CombinedProfile, type PreferenceRequestBody, } from "./useProfile";
+export { useProfile, useProfilePreference, type CombinedProfile, type PreferenceRequestBody, type Profile, } from "./useProfile";
 export { useQueryB3 } from "./useQueryB3";
 export { useQueryBSMNT } from "./useQueryBSMNT";
 export { useRemoveSessionKey } from "./useRemoveSessionKey";

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

@@ -7,13 +7,13 @@ import { cn } from "../../../shared/utils/cn.js";
 import { shortenAddress } from "../../../shared/utils/formatAddress.js";
 import { formatDisplayNumber, formatTokenAmount } from "../../../shared/utils/number.js";
 import invariant from "invariant";
-import { ArrowDown, ChevronLeft, ChevronRightCircle, ChevronsUpDown, CircleAlert, HistoryIcon } from "lucide-react";
+import { ArrowDown, ChevronLeft, ChevronRight, ChevronRightCircle, ChevronsUpDown, CircleAlert, HistoryIcon, } from "lucide-react";
 import { motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
+import { useConnectedWallets } from "thirdweb/react";
 import { parseUnits } from "viem";
 import { b3Sepolia, base, mainnet, sepolia } from "viem/chains";
-import { useAccount } from "wagmi";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
 import { CryptoPaymentMethod, PaymentMethod } from "./common/CryptoPaymentMethod.js";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
@@ -44,7 +44,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
     // Get wagmi account state for wallet connection
-    const wagmiAccount = useAccount();
+    const connectedWallets = useConnectedWallets();
     // Determine if we're in "buy mode" based on whether destination token props are provided
     const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
     // Add refs to track URL state
@@ -336,6 +336,9 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
             amount: srcAmountOnrampInWei,
             onrampVendor: getOnrampVendor(selectedFiatPaymentMethod),
         });
+    const connectedAddress = globalAddress || connectedWallets?.[0]?.getAccount()?.address;
+    const connectedProfile = useProfile({ address: connectedAddress });
+    const connectedName = connectedProfile.data?.name?.replace(/\.b3\.fun/g, "");
     const recipientProfile = useProfile({ address: recipientAddress });
     const recipientName = recipientProfile.data?.name?.replace(/\.b3\.fun/g, "");
     // Load custom recipients from local storage on mount
@@ -800,7 +803,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
                                 setActiveTab("fiat");
                                 setSelectedPaymentMethod(PaymentMethod.NONE); // Reset crypto payment method when switching to fiat
                                 setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE); // Reset fiat payment method when switching to fiat
-                            }, children: "Pay with Fiat" })] }) }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-primary/50 hover:text-as-primary/70 flex h-7 items-center gap-1 text-sm transition-colors", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedPaymentMethod === PaymentMethod.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [globalAddress || wagmiAccount.address ? (_jsxs(_Fragment, { children: [globalWallet?.meta?.icon && (_jsx("img", { src: globalWallet.meta.icon, alt: "Connected Wallet", className: "h-4 w-4 rounded-full" })), _jsx("span", { children: shortenAddress(globalAddress || wagmiAccount.address || "") })] })) : ("Connect wallet"), _jsx(ChevronRightCircle, { className: "h-4 w-4" })] })) : selectedPaymentMethod === PaymentMethod.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRightCircle, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRightCircle, { className: "h-4 w-4" })] })) })] }), _jsx(OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
+                            }, children: "Pay with Fiat" })] }) }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedPaymentMethod === PaymentMethod.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [connectedAddress ? (_jsxs(_Fragment, { children: [globalWallet?.meta?.icon && (_jsx("img", { src: globalWallet.meta.icon, alt: "Connected Wallet", className: "bg-as-primary h-6 w-6 rounded-full" })), _jsx("span", { className: "text-as-tertiarry", children: connectedName || shortenAddress(connectedAddress || "") })] })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedPaymentMethod === PaymentMethod.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx(OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
                                     setIsSrcInputDirty(true);
                                     setSrcAmount(value);
                                 }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, { style: "currency", fallback: "" }) }), _jsx(TokenBalance, { token: selectedSrcToken, walletAddress: globalAddress, onChangeInput: value => {
@@ -825,7 +828,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
                             const tempDstAmount = dstAmount;
                             setSrcAmount(tempDstAmount);
                             setDstAmount(tempSrcAmount);
-                        }, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab !== "fiat" && (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? (_jsxs("button", { className: cn("text-as-primary/70 flex h-7 items-center gap-2 rounded-lg px-2"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: [globalAddress && recipientAddress === globalAddress && globalWallet?.meta?.icon ? (_jsx("img", { src: globalWallet?.meta?.icon, alt: "Current wallet", className: "bg-as-primary h-6 w-6 rounded-full" })) : (_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-orange-500 text-xs text-white", children: "\uD83E\uDD8A" })), _jsx("div", { className: "text-sm", children: recipientName ? recipientName : shortenAddress(recipientAddress) }), _jsx(ChevronRightCircle, { className: "h-4 w-4" })] })) : (_jsxs("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: [_jsx("div", { className: "text-sm font-medium", children: "Select recipient" }), _jsx(ChevronsUpDown, { className: "h-3 w-3" })] }))] }), isBuyMode ? (
+                        }, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab !== "fiat" && (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? (_jsxs("button", { className: cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: [globalAddress && recipientAddress === globalAddress && globalWallet?.meta?.icon ? (_jsx("img", { src: globalWallet?.meta?.icon, alt: "Current wallet", className: "bg-as-primary h-6 w-6 rounded-full" })) : (_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-orange-500 text-xs text-white", children: "\uD83E\uDD8A" })), _jsx("div", { className: "text-sm", children: recipientName ? recipientName : shortenAddress(recipientAddress) }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: [_jsx("div", { className: "text-sm font-medium", children: "Select recipient" }), _jsx(ChevronsUpDown, { className: "h-3 w-3" })] }))] }), isBuyMode ? (
                             // Fixed destination token display in buy mode
                             _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), _jsxs("div", { className: "bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3", children: [selectedDstToken.metadata?.logoURI && (_jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "h-8 w-8 rounded-full" })), _jsx("span", { className: "text-as-brand text-lg font-bold", children: selectedDstToken.symbol })] })] })) : (_jsx(OrderTokenAmount, { address: recipientAddress, context: "to", inputValue: dstAmount, onChangeInput: value => {
                                     setIsSrcInputDirty(false);
@@ -884,26 +887,27 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
             setActivePanel(PanelView.MAIN); // Go back to main panel to show updated pricing
         }, srcAmountOnRamp: srcAmountOnRamp, isMainnet: isMainnet }));
     // Add tabs to the main component when no order is loaded
-    return (_jsx(StyleRoot, { children: _jsx("div", { className: cn("mx-auto w-full max-w-[460px]", mode === "page" && "bg-as-surface-primary border-as-border-secondary rounded-2xl border p-6 shadow-xl"), children: _jsx(TransitionPanel, { activeIndex: orderId
+    return (_jsx(StyleRoot, { children: _jsx("div", { className: cn("mx-auto w-full max-w-[460px]", mode === "page" &&
+                "bg-as-surface-primary border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: _jsx(TransitionPanel, { activeIndex: orderId
                     ? oat
                         ? PanelView.ORDER_DETAILS
                         : PanelView.LOADING
                     : activePanel === PanelView.ORDER_DETAILS
                         ? PanelView.MAIN
-                        : activePanel, className: cn("overflow-hidden", {
+                        : activePanel, className: cn("rounded-2xl", {
                     "mt-0": mode === "modal",
                 }), variants: {
                     enter: { x: 300, opacity: 0 },
                     center: { x: 0, opacity: 1 },
                     exit: { x: -300, opacity: 0 },
                 }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
-                    _jsx("div", { children: mainView }, "main-view"),
-                    _jsx("div", { children: historyView }, "history-view"),
-                    _jsx("div", { children: orderDetailsView }, "order-details-view"),
-                    _jsx("div", { children: OrderDetailsLoadingView }, "loading-view"),
-                    _jsx("div", { children: onrampPaymentView }, "fiat-payment-view"),
-                    _jsx("div", { children: recipientSelectionView }, "recipient-selection-view"),
-                    _jsx("div", { children: cryptoPaymentMethodView }, "crypto-payment-method-view"),
-                    _jsx("div", { children: fiatPaymentMethodView }, "fiat-payment-method-view"),
+                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: mainView }, "main-view"),
+                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: historyView }, "history-view"),
+                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: orderDetailsView }, "order-details-view"),
+                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: OrderDetailsLoadingView }, "loading-view"),
+                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: onrampPaymentView }, "fiat-payment-view"),
+                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: recipientSelectionView }, "recipient-selection-view"),
+                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: cryptoPaymentMethodView }, "crypto-payment-method-view"),
+                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: fiatPaymentMethodView }, "fiat-payment-method-view"),
                 ] }) }) }));
 }

package/dist/esm/anyspend/react/components/AnySpendFingerprintWrapper.d.ts

@@ -13,5 +13,5 @@ interface AnySpendFingerprintWrapperProps {
  * This prevents unnecessary fingerprinting of users who don't interact with AnySpend.
  */
 export declare function AnySpendFingerprintWrapper({ children, fingerprint }: AnySpendFingerprintWrapperProps): import("react/jsx-runtime").JSX.Element;
-export declare function getFingerprintConfig(): FingerprintConfig | undefined;
+export declare function getFingerprintConfig(): FingerprintConfig;
 export {};

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

@@ -22,14 +22,11 @@ export function AnySpendFingerprintWrapper({ children, fingerprint }) {
                 : undefined,
         }, children: children }));
 }
+const defaultApiKey = "80EnsS6POsxPAR9xGxmN";
 // Helper function to get fingerprint config from environment variables
 export function getFingerprintConfig() {
-    const apiKey = process.env.NEXT_PUBLIC_FINGERPRINT_API_KEY;
-    if (!apiKey) {
-        return undefined;
-    }
     return {
-        apiKey,
+        apiKey: process.env.NEXT_PUBLIC_FINGERPRINT_API_KEY || defaultApiKey,
         endpoint: process.env.NEXT_PUBLIC_FINGERPRINT_ENDPOINT,
         scriptUrlPattern: process.env.NEXT_PUBLIC_FINGERPRINT_SCRIPT_URL,
     };