@b3dotfun/sdk 0.0.20-alpha.8 → 0.0.20-alpha.9

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

@@ -10,6 +10,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../anyspend");
 const react_1 = require("../../../anyspend/react");
 const react_2 = require("../../../global-account/react");
+const utils_1 = require("../../../shared/utils");
 const cn_1 = require("../../../shared/utils/cn");
 const formatAddress_1 = require("../../../shared/utils/formatAddress");
 const number_1 = require("../../../shared/utils/number");
@@ -18,7 +19,6 @@ 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 AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
@@ -30,6 +30,7 @@ const OrderStatus_1 = require("./common/OrderStatus");
 const OrderTokenAmount_1 = require("./common/OrderTokenAmount");
 const PanelOnramp_1 = require("./common/PanelOnramp");
 const PanelOnrampPayment_1 = require("./common/PanelOnrampPayment");
+const RecipientSelection_1 = require("./common/RecipientSelection");
 const TokenBalance_1 = require("./common/TokenBalance");
 var PanelView;
 (function (PanelView) {
@@ -50,8 +51,6 @@ function AnySpend(props) {
 function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMainnet = true, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, }) {
     const searchParams = (0, react_2.useSearchParamsSSR)();
     const router = (0, react_2.useRouter)();
-    // Get wagmi account state for wallet connection
-    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
@@ -64,7 +63,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
     const [activePanel, setActivePanel] = (0, react_4.useState)(loadOrder ? PanelView.ORDER_DETAILS : PanelView.MAIN);
     const [customRecipients, setCustomRecipients] = (0, react_4.useState)([]);
     // Add state for selected payment method
-    const [selectedPaymentMethod, setSelectedPaymentMethod] = (0, react_4.useState)(CryptoPaymentMethod_1.PaymentMethod.NONE);
+    const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = (0, react_4.useState)(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE);
     // Add state for selected fiat payment method
     const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = (0, react_4.useState)(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
     // const [newRecipientAddress, setNewRecipientAddress] = useState("");
@@ -343,11 +342,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 { address: connectedAddress, name: connectedName, profile: connectedProfile } = (0, react_1.useConnectedUserProfile)();
     const recipientProfile = (0, react_2.useProfile)({ address: recipientAddress });
-    const recipientName = recipientProfile.data?.name?.replace(/\.b3\.fun/g, "");
+    const recipientName = (0, utils_1.formatUsername)(recipientProfile.data?.name ?? "");
     // Load custom recipients from local storage on mount
     (0, react_4.useEffect)(() => {
         try {
@@ -513,13 +510,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 !== CryptoPaymentMethod_1.PaymentMethod.NONE) {
-                console.log("Setting paymentMethod in URL:", selectedPaymentMethod);
-                params.set("paymentMethod", selectedPaymentMethod);
+            if (selectedCryptoPaymentMethod !== CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
+                console.log("Setting cryptoPaymentMethod in URL:", selectedCryptoPaymentMethod);
+                params.set("cryptoPaymentMethod", selectedCryptoPaymentMethod);
             }
             else {
                 console.log("Payment method is NONE, not setting in URL");
@@ -563,14 +560,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 === CryptoPaymentMethod_1.PaymentMethod.NONE) {
+            if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
                 return { text: "Choose payment method", disable: false, error: false };
             }
             // If payment method selected, show appropriate action
-            if (selectedPaymentMethod === CryptoPaymentMethod_1.PaymentMethod.CONNECT_WALLET) {
+            if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET) {
                 return { text: "Swap", disable: false, error: false };
             }
-            if (selectedPaymentMethod === CryptoPaymentMethod_1.PaymentMethod.TRANSFER_CRYPTO) {
+            if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO) {
                 return { text: "Continue to payment", disable: false, error: false };
             }
         }
@@ -591,7 +588,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
         isCreatingOnrampOrder,
         anyspendQuote,
         activeTab,
-        selectedPaymentMethod,
+        selectedCryptoPaymentMethod,
         selectedFiatPaymentMethod,
     ]);
     // Handle main button click
@@ -617,16 +614,16 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
             }
             if (activeTab === "crypto") {
                 // If no payment method selected, show payment method selection
-                if (selectedPaymentMethod === CryptoPaymentMethod_1.PaymentMethod.NONE) {
+                if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.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 === CryptoPaymentMethod_1.PaymentMethod.CONNECT_WALLET ||
-                    selectedPaymentMethod === CryptoPaymentMethod_1.PaymentMethod.TRANSFER_CRYPTO) {
-                    console.log("Creating crypto order with payment method:", selectedPaymentMethod);
-                    await handleCryptoSwap(selectedPaymentMethod);
+                if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ||
+                    selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO) {
+                    console.log("Creating crypto order with payment method:", selectedCryptoPaymentMethod);
+                    await handleCryptoSwap(selectedCryptoPaymentMethod);
                     return;
                 }
             }
@@ -652,7 +649,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
             (0, invariant_1.default)(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 = (0, viem_1.parseUnits)(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals);
             createOrder({
                 isMainnet,
@@ -800,17 +797,17 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
     const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: oat.data.order }), (0, jsx_runtime_1.jsx)(OrderDetails_1.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(CryptoPaymentMethod_1.PaymentMethod.NONE); // Reset payment method when going back
+                            setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE); // Reset payment method when going back
                         } })] })) }) }));
     const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.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" } }), (0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.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(CryptoPaymentMethod_1.PaymentMethod.NONE); // Reset payment method when switching to crypto
+                                setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE); // Reset payment method when switching to crypto
                                 setSelectedFiatPaymentMethod(FiatPaymentMethod_1.FiatPaymentMethod.NONE); // Reset fiat payment method when switching to crypto
                             }, children: "Pay with crypto" }), (0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.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(CryptoPaymentMethod_1.PaymentMethod.NONE); // Reset crypto payment method when switching to fiat
+                                setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE); // Reset crypto payment method when switching to fiat
                                 setSelectedFiatPaymentMethod(FiatPaymentMethod_1.FiatPaymentMethod.NONE); // Reset fiat payment method when switching to fiat
-                            }, children: "Pay with Fiat" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: 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 => {
+                            }, children: "Pay with Fiat" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [recipientProfile && ((0, jsx_runtime_1.jsx)("img", { src: recipientProfile.data?.avatar || "", alt: recipientProfile.data?.name || "", className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [recipientName && (0, jsx_runtime_1.jsx)("span", { children: recipientName }), (0, jsx_runtime_1.jsx)("span", { children: (0, formatAddress_1.shortenAddress)(recipientAddress || "") })] })] })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transfer crypto", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
                                     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 => {
@@ -835,7 +832,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
                             const tempDstAmount = dstAmount;
                             setSrcAmount(tempDstAmount);
                             setDstAmount(tempSrcAmount);
-                        }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab !== "fiat" && ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? ((0, jsx_runtime_1.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 ? (
+                        }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab !== "fiat" && ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedProfile?.data?.avatar && ((0, jsx_runtime_1.jsx)("img", { src: connectedProfile.data?.avatar || "", alt: "Connected Wallet", className: "bg-as-primary h-6 w-6 rounded-full" })), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: [connectedName && (0, jsx_runtime_1.jsx)("span", { children: (0, utils_1.formatUsername)(connectedName) }), (0, jsx_runtime_1.jsx)("span", { children: (0, formatAddress_1.shortenAddress)(connectedAddress || "") })] })] })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }) })) : ((0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode ? (
                             // 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);
@@ -863,30 +860,17 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
             if (activeTab === "fiat") {
                 params.set("paymentMethod", "fiat");
             }
-            else if (selectedPaymentMethod !== CryptoPaymentMethod_1.PaymentMethod.NONE) {
-                params.set("paymentMethod", selectedPaymentMethod);
+            else if (selectedCryptoPaymentMethod !== CryptoPaymentMethod_1.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 = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-around", children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Add recipient address or ENS" }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/60 text-sm", children: "Swap and send tokens to another address" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-secondary border-as-border-secondary flex h-12 w-full overflow-hidden rounded-xl border", children: [(0, jsx_runtime_1.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 }), (0, jsx_runtime_1.jsx)("div", { className: "border-as-border-secondary border-l", children: (0, jsx_runtime_1.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" }) })] }), (0, jsx_runtime_1.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 = ((0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: globalWallet, selectedPaymentMethod: selectedPaymentMethod, setSelectedPaymentMethod: setSelectedPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {
-            setSelectedPaymentMethod(method);
+    const recipientSelectionView = ((0, jsx_runtime_1.jsx)(RecipientSelection_1.RecipientSelection, { initialValue: recipientAddress || "", onBack: () => setActivePanel(PanelView.MAIN), onConfirm: address => {
+            setRecipientAddress(address);
+            setActivePanel(PanelView.MAIN);
+        } }));
+    const cryptoPaymentMethodView = ((0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: globalWallet, selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {
+            setSelectedCryptoPaymentMethod(method);
             setActivePanel(PanelView.MAIN);
         } }));
     const fiatPaymentMethodView = ((0, jsx_runtime_1.jsx)(FiatPaymentMethod_1.FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {

package/dist/cjs/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";