@b3dotfun/sdk 0.0.20 → 0.0.21-alpha.1

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

@@ -15,12 +15,12 @@ export declare enum PanelView {
     FIAT_PAYMENT_METHOD = 7
 }
 export declare function AnySpend(props: {
-    destinationTokenAddress?: string;
-    destinationTokenChainId?: number;
     isMainnet?: boolean;
     mode?: "page" | "modal";
     defaultActiveTab?: "crypto" | "fiat";
+    destinationTokenAddress?: string;
+    destinationTokenChainId?: number;
+    recipientAddress?: string;
     loadOrder?: string;
     hideTransactionHistoryButton?: boolean;
-    recipientAddress?: string;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,21 +1,21 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getDefaultToken, USDC_BASE } from "../../../anyspend/index.js";
-import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
+import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useConnectedUserProfile, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
 import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet, useProfile, useRouter, useSearchParamsSSR, useTokenData, useTokenFromUrl, } from "../../../global-account/react/index.js";
+import { formatUsername } from "../../../shared/utils/index.js";
 import { cn } from "../../../shared/utils/cn.js";
 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, ChevronRight, ChevronRightCircle, CircleAlert, HistoryIcon } from "lucide-react";
 import { motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 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 { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
 import { OrderDetails, OrderDetailsLoadingView } from "./common/OrderDetails.js";
 import { OrderHistory } from "./common/OrderHistory.js";
@@ -23,6 +23,7 @@ import { OrderStatus } from "./common/OrderStatus.js";
 import { OrderTokenAmount } from "./common/OrderTokenAmount.js";
 import { PanelOnramp } from "./common/PanelOnramp.js";
 import { PanelOnrampPayment } from "./common/PanelOnrampPayment.js";
+import { RecipientSelection } from "./common/RecipientSelection.js";
 import { TokenBalance } from "./common/TokenBalance.js";
 export var PanelView;
 (function (PanelView) {
@@ -43,8 +44,6 @@ export function AnySpend(props) {
 function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMainnet = true, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, }) {
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
-    // Get wagmi account state for wallet connection
-    const wagmiAccount = useAccount();
     // 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
@@ -57,7 +56,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
     const [activePanel, setActivePanel] = useState(loadOrder ? PanelView.ORDER_DETAILS : PanelView.MAIN);
     const [customRecipients, setCustomRecipients] = useState([]);
     // Add state for selected payment method
-    const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(PaymentMethod.NONE);
+    const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState(CryptoPaymentMethodType.NONE);
     // Add state for selected fiat payment method
     const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState(FiatPaymentMethod.NONE);
     // const [newRecipientAddress, setNewRecipientAddress] = useState("");
@@ -336,8 +335,9 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
             amount: srcAmountOnrampInWei,
             onrampVendor: getOnrampVendor(selectedFiatPaymentMethod),
         });
+    const { address: connectedAddress, name: connectedName, profile: connectedProfile } = useConnectedUserProfile();
     const recipientProfile = useProfile({ address: recipientAddress });
-    const recipientName = recipientProfile.data?.name?.replace(/\.b3\.fun/g, "");
+    const recipientName = formatUsername(recipientProfile.data?.name ?? "");
     // Load custom recipients from local storage on mount
     useEffect(() => {
         try {
@@ -503,13 +503,13 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
             // setNewRecipientAddress("");
             setActivePanel(PanelView.ORDER_DETAILS);
             // Debug: Check payment method before setting URL
-            console.log("Creating order - selectedPaymentMethod:", selectedPaymentMethod);
+            console.log("Creating order - selectedCryptoPaymentMethod:", selectedCryptoPaymentMethod);
             // Add orderId and payment method to URL for persistence
             const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
             params.set("orderId", orderId);
-            if (selectedPaymentMethod !== PaymentMethod.NONE) {
-                console.log("Setting paymentMethod in URL:", selectedPaymentMethod);
-                params.set("paymentMethod", selectedPaymentMethod);
+            if (selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
+                console.log("Setting cryptoPaymentMethod in URL:", selectedCryptoPaymentMethod);
+                params.set("cryptoPaymentMethod", selectedCryptoPaymentMethod);
             }
             else {
                 console.log("Payment method is NONE, not setting in URL");
@@ -553,14 +553,14 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
             return { text: "Get rate error", disable: true, error: true };
         if (activeTab === "crypto") {
             // If no payment method selected, show "Choose payment method"
-            if (selectedPaymentMethod === PaymentMethod.NONE) {
+            if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
                 return { text: "Choose payment method", disable: false, error: false };
             }
             // If payment method selected, show appropriate action
-            if (selectedPaymentMethod === PaymentMethod.CONNECT_WALLET) {
+            if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
                 return { text: "Swap", disable: false, error: false };
             }
-            if (selectedPaymentMethod === PaymentMethod.TRANSFER_CRYPTO) {
+            if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO) {
                 return { text: "Continue to payment", disable: false, error: false };
             }
         }
@@ -581,7 +581,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
         isCreatingOnrampOrder,
         anyspendQuote,
         activeTab,
-        selectedPaymentMethod,
+        selectedCryptoPaymentMethod,
         selectedFiatPaymentMethod,
     ]);
     // Handle main button click
@@ -607,16 +607,16 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
             }
             if (activeTab === "crypto") {
                 // If no payment method selected, show payment method selection
-                if (selectedPaymentMethod === PaymentMethod.NONE) {
+                if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
                     console.log("No payment method selected, showing selection panel");
                     setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD);
                     return;
                 }
                 // If payment method is selected, create order with payment method info
-                if (selectedPaymentMethod === PaymentMethod.CONNECT_WALLET ||
-                    selectedPaymentMethod === PaymentMethod.TRANSFER_CRYPTO) {
-                    console.log("Creating crypto order with payment method:", selectedPaymentMethod);
-                    await handleCryptoSwap(selectedPaymentMethod);
+                if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
+                    selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO) {
+                    console.log("Creating crypto order with payment method:", selectedCryptoPaymentMethod);
+                    await handleCryptoSwap(selectedCryptoPaymentMethod);
                     return;
                 }
             }
@@ -642,7 +642,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
             invariant(recipientAddress, "Recipient address is not found");
             // Debug: Check payment method values
             console.log("handleCryptoSwap - method parameter:", method);
-            console.log("handleCryptoSwap - selectedPaymentMethod state:", selectedPaymentMethod);
+            console.log("handleCryptoSwap - selectedCryptoPaymentMethod state:", selectedCryptoPaymentMethod);
             const srcAmountBigInt = parseUnits(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals);
             createOrder({
                 isMainnet,
@@ -790,17 +790,17 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
     const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: oat.data.order }), _jsx(OrderDetails, { isMainnet: isMainnet, mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, onBack: () => {
                             setOrderId(undefined);
                             setActivePanel(PanelView.MAIN);
-                            setSelectedPaymentMethod(PaymentMethod.NONE); // Reset payment method when going back
+                            setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when going back
                         } })] })) }) }));
     const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && (_jsxs("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx("div", { className: "w-full", children: _jsxs("div", { className: "bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl", children: [_jsx("div", { className: cn("bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100", "h-full w-1/2", activeTab === "fiat" ? "translate-x-full" : "translate-x-0"), style: { willChange: "transform" } }), _jsx("button", { className: cn("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
                                 setActiveTab("crypto");
-                                setSelectedPaymentMethod(PaymentMethod.NONE); // Reset payment method when switching to crypto
+                                setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when switching to crypto
                                 setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE); // Reset fiat payment method when switching to crypto
                             }, children: "Pay with crypto" }), _jsx("button", { className: cn("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "fiat" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
                                 setActiveTab("fiat");
-                                setSelectedPaymentMethod(PaymentMethod.NONE); // Reset crypto payment method when switching to fiat
+                                setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset crypto payment method when switching to fiat
                                 setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE); // Reset fiat payment method when switching to fiat
-                            }, children: "Pay with Fiat" })] }) }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-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: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [connectedAddress ? (_jsxs(_Fragment, { children: [recipientProfile && (_jsx("img", { src: recipientProfile.data?.avatar || "", alt: recipientProfile.data?.name || "", className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), _jsxs("div", { className: "flex items-center gap-1", children: [recipientName && _jsx("span", { children: recipientName }), _jsx("span", { children: shortenAddress(recipientAddress || "") })] })] })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx(OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
                                     setIsSrcInputDirty(true);
                                     setSrcAmount(value);
                                 }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, { style: "currency", fallback: "" }) }), _jsx(TokenBalance, { token: selectedSrcToken, walletAddress: globalAddress, onChangeInput: value => {
@@ -825,7 +825,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
                             const tempDstAmount = dstAmount;
                             setSrcAmount(tempDstAmount);
                             setDstAmount(tempSrcAmount);
-                        }, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab !== "fiat" && (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? (_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 ? (_jsx("button", { className: cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsxs(_Fragment, { children: [connectedAddress ? (_jsxs(_Fragment, { children: [connectedProfile?.data?.avatar && (_jsx("img", { src: connectedProfile.data?.avatar || "", alt: "Connected Wallet", className: "bg-as-primary h-6 w-6 rounded-full" })), _jsxs("span", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: [connectedName && _jsx("span", { children: formatUsername(connectedName) }), _jsx("span", { children: shortenAddress(connectedAddress || "") })] })] })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] }) })) : (_jsx("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode ? (
                             // 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);
@@ -853,30 +853,17 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
             if (activeTab === "fiat") {
                 params.set("paymentMethod", "fiat");
             }
-            else if (selectedPaymentMethod !== PaymentMethod.NONE) {
-                params.set("paymentMethod", selectedPaymentMethod);
+            else if (selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
+                params.set("paymentMethod", selectedCryptoPaymentMethod);
             }
             router.push(`${window.location.pathname}?${params.toString()}`);
         }, onBack: () => setActivePanel(PanelView.MAIN), recipientEnsName: globalWallet?.ensName, recipientImageUrl: globalWallet?.meta?.icon }));
-    const recipientSelectionView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex justify-around", children: [_jsx("button", { onClick: () => setActivePanel(PanelView.MAIN), className: "text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: _jsx(ChevronLeft, { className: "h-6 w-6" }) }), _jsxs("div", { className: "flex-1 text-center", children: [_jsx("h2", { className: "text-as-primary text-lg font-semibold", children: "Add recipient address or ENS" }), _jsx("p", { className: "text-as-primary/60 text-sm", children: "Swap and send tokens to another address" })] })] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "bg-as-surface-secondary border-as-border-secondary flex h-12 w-full overflow-hidden rounded-xl border", children: [_jsx("input", { type: "text", placeholder: "Enter recipient address", value: recipientAddress || "", onChange: e => setRecipientAddress(e.target.value), onKeyDown: e => {
-                                        if (e.key === "Enter" && recipientAddress) {
-                                            setActivePanel(PanelView.MAIN);
-                                        }
-                                    }, className: "text-as-primary placeholder:text-as-primary/50 flex-1 bg-transparent px-4 text-base focus:outline-none", autoFocus: true }), _jsx("div", { className: "border-as-border-secondary border-l", children: _jsx("button", { onClick: async () => {
-                                            try {
-                                                const text = await navigator.clipboard.readText();
-                                                setRecipientAddress(text);
-                                            }
-                                            catch (err) {
-                                                console.error("Failed to read clipboard:", err);
-                                            }
-                                        }, className: "text-as-primary/70 hover:text-as-primary hover:bg-as-surface-primary h-full px-4 font-semibold transition-colors", children: "Paste" }) })] }), _jsx("button", { onClick: () => {
-                                if (recipientAddress) {
-                                    setActivePanel(PanelView.MAIN);
-                                }
-                            }, disabled: !recipientAddress, className: "bg-as-brand hover:bg-as-brand/90 disabled:bg-as-on-surface-2 disabled:text-as-secondary h-12 w-full rounded-xl font-medium text-white transition-colors disabled:cursor-not-allowed", children: "Confirm recipient address" })] })] }) }));
-    const cryptoPaymentMethodView = (_jsx(CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: globalWallet, selectedPaymentMethod: selectedPaymentMethod, setSelectedPaymentMethod: setSelectedPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {
-            setSelectedPaymentMethod(method);
+    const recipientSelectionView = (_jsx(RecipientSelection, { initialValue: recipientAddress || "", onBack: () => setActivePanel(PanelView.MAIN), onConfirm: address => {
+            setRecipientAddress(address);
+            setActivePanel(PanelView.MAIN);
+        } }));
+    const cryptoPaymentMethodView = (_jsx(CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: globalWallet, selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {
+            setSelectedCryptoPaymentMethod(method);
             setActivePanel(PanelView.MAIN);
         } }));
     const fiatPaymentMethodView = (_jsx(FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {
@@ -884,26 +871,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/AnySpendCustom.d.ts

@@ -1,7 +1,7 @@
 import { components } from "../../../anyspend/types/api";
 import { GetQuoteResponse } from "../../../anyspend/types/api_req_res";
 import React from "react";
-export declare function AnySpendCustom({ isMainnet, loadOrder, mode, recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient, }: {
+export declare function AnySpendCustom(props: {
     isMainnet?: boolean;
     loadOrder?: string;
     mode?: "modal" | "page";