@b3dotfun/sdk 0.0.16 → 0.0.17-alpha.1

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

@@ -9,9 +9,12 @@ export declare enum PanelView {
     HISTORY = 1,
     ORDER_DETAILS = 2,
     LOADING = 3,
-    FIAT_PAYMENT = 4
+    FIAT_PAYMENT = 4,
+    RECIPIENT_SELECTION = 5,
+    CRYPTO_PAYMENT_METHOD = 6,
+    FIAT_PAYMENT_METHOD = 7
 }
-export declare function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet, mode, defaultActiveTab, loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, }: {
+export declare function AnySpend(props: {
     destinationTokenAddress?: string;
     destinationTokenChainId?: number;
     isMainnet?: boolean;

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

@@ -20,6 +20,10 @@ const react_4 = require("react");
 const sonner_1 = require("sonner");
 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");
 const OrderDetails_1 = require("./common/OrderDetails");
 const OrderHistory_1 = require("./common/OrderHistory");
 const OrderStatus_1 = require("./common/OrderStatus");
@@ -27,7 +31,6 @@ const OrderTokenAmount_1 = require("./common/OrderTokenAmount");
 const PanelOnramp_1 = require("./common/PanelOnramp");
 const PanelOnrampPayment_1 = require("./common/PanelOnrampPayment");
 const TokenBalance_1 = require("./common/TokenBalance");
-const EnterRecipientModal_1 = require("./modals/EnterRecipientModal");
 var PanelView;
 (function (PanelView) {
     PanelView[PanelView["MAIN"] = 0] = "MAIN";
@@ -35,11 +38,20 @@ var PanelView;
     PanelView[PanelView["ORDER_DETAILS"] = 2] = "ORDER_DETAILS";
     PanelView[PanelView["LOADING"] = 3] = "LOADING";
     PanelView[PanelView["FIAT_PAYMENT"] = 4] = "FIAT_PAYMENT";
+    PanelView[PanelView["RECIPIENT_SELECTION"] = 5] = "RECIPIENT_SELECTION";
+    PanelView[PanelView["CRYPTO_PAYMENT_METHOD"] = 6] = "CRYPTO_PAYMENT_METHOD";
+    PanelView[PanelView["FIAT_PAYMENT_METHOD"] = 7] = "FIAT_PAYMENT_METHOD";
 })(PanelView || (exports.PanelView = PanelView = {}));
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
-function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet = true, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, }) {
+function AnySpend(props) {
+    const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
+    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendInner, { ...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 wagmiAccount = (0, wagmi_1.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
@@ -51,6 +63,10 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
     !!getOrderAndTransactionsError && console.log("getOrderAndTransactionsError", getOrderAndTransactionsError);
     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);
+    // Add state for selected fiat payment method
+    const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = (0, react_4.useState)(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
     // const [newRecipientAddress, setNewRecipientAddress] = useState("");
     // const recipientInputRef = useRef<HTMLInputElement>(null);
     // Get initial chain IDs from URL or defaults
@@ -472,9 +488,36 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
             setOrderId(orderId);
             // setNewRecipientAddress("");
             setActivePanel(PanelView.ORDER_DETAILS);
-            // Add orderId to URL for persistence
-            const params = new URLSearchParams();
+            // Debug: Check payment method before setting URL
+            console.log("Creating order - selectedPaymentMethod:", selectedPaymentMethod);
+            // 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);
+            }
+            else {
+                console.log("Payment method is NONE, not setting in URL");
+            }
+            console.log("Final URL params:", params.toString());
+            router.push(`${window.location.pathname}?${params.toString()}`);
+        },
+        onError: error => {
+            console.error(error);
+            sonner_1.toast.error("Failed to create order: " + error.message);
+        },
+    });
+    // Add onramp order creation hook
+    const { createOrder: createOnrampOrder, isCreatingOrder: isCreatingOnrampOrder } = (0, react_1.useAnyspendCreateOnrampOrder)({
+        onSuccess: data => {
+            const orderId = data.data.id;
+            setOrderId(orderId);
+            setActivePanel(PanelView.ORDER_DETAILS);
+            // Add orderId and payment method to URL for persistence
+            const params = new URLSearchParams(searchParams.toString());
             params.set("orderId", orderId);
+            params.set("paymentMethod", "fiat");
             router.push(`${window.location.pathname}?${params.toString()}`);
         },
         onError: error => {
@@ -482,6 +525,8 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
             sonner_1.toast.error("Failed to create order: " + error.message);
         },
     });
+    // Get geo-based onramp options for fiat payments
+    const { geoData, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, stripeWeb2Support } = (0, react_1.useGeoOnrampOptions)(isMainnet, srcAmountOnRamp);
     // Determine button state and text
     const btnInfo = (0, react_4.useMemo)(() => {
         if (activeInputAmountInWei === "0")
@@ -490,38 +535,102 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
             return { text: "Loading...", disable: true, error: false };
         if (!recipientAddress)
             return { text: "Select recipient", disable: false, error: false };
-        if (isCreatingOrder)
+        if (isCreatingOrder || isCreatingOnrampOrder)
             return { text: "Creating order...", disable: true, error: false };
         if (!anyspendQuote || !anyspendQuote.success)
             return { text: "Get rate error", disable: true, error: true };
-        if (activeTab === "fiat")
-            return { text: "Continue to payment", disable: false, error: false };
-        return { text: isBuyMode ? `Buy ${selectedDstToken.symbol}` : "Swap", disable: false, error: false };
+        if (activeTab === "crypto") {
+            // If no payment method selected, show "Choose payment method"
+            if (selectedPaymentMethod === CryptoPaymentMethod_1.PaymentMethod.NONE) {
+                return { text: "Choose payment method", disable: false, error: false };
+            }
+            // If payment method selected, show appropriate action
+            if (selectedPaymentMethod === CryptoPaymentMethod_1.PaymentMethod.CONNECT_WALLET) {
+                return { text: "Swap", disable: false, error: false };
+            }
+            if (selectedPaymentMethod === CryptoPaymentMethod_1.PaymentMethod.TRANSFER_CRYPTO) {
+                return { text: "Continue to payment", disable: false, error: false };
+            }
+        }
+        if (activeTab === "fiat") {
+            // If no fiat payment method selected, show "Select payment method"
+            if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.NONE) {
+                return { text: "Select payment method", disable: false, error: false };
+            }
+            // If payment method is selected, show "Buy"
+            return { text: "Buy", disable: false, error: false };
+        }
+        return { text: "Buy", disable: false, error: false };
     }, [
         activeInputAmountInWei,
         isLoadingAnyspendQuote,
         recipientAddress,
         isCreatingOrder,
+        isCreatingOnrampOrder,
         anyspendQuote,
         activeTab,
-        isBuyMode,
-        selectedDstToken.symbol,
+        selectedPaymentMethod,
+        selectedFiatPaymentMethod,
     ]);
     // Handle main button click
     const onMainButtonClick = async () => {
         if (btnInfo.disable)
             return;
         if (!recipientAddress) {
-            setIsOpenPasteRecipientAddressModal(true);
+            setActivePanel(PanelView.RECIPIENT_SELECTION);
             return;
         }
         try {
             (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
             (0, invariant_1.default)(recipientAddress, "Recipient address is not found");
             if (activeTab === "fiat") {
-                setActivePanel(PanelView.FIAT_PAYMENT);
+                // If no fiat payment method selected, show payment method selection
+                if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.NONE) {
+                    setActivePanel(PanelView.FIAT_PAYMENT_METHOD);
+                    return;
+                }
+                // If payment method is selected, create order directly
+                await handleFiatOrder(selectedFiatPaymentMethod);
                 return;
             }
+            if (activeTab === "crypto") {
+                // If no payment method selected, show payment method selection
+                if (selectedPaymentMethod === CryptoPaymentMethod_1.PaymentMethod.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);
+                    return;
+                }
+            }
+        }
+        catch (err) {
+            console.error(err);
+            sonner_1.toast.error("Failed to create order: " + err.message);
+        }
+    };
+    const onClickHistory = () => {
+        setOrderId(undefined);
+        setActivePanel(PanelView.HISTORY);
+        // Remove orderId and paymentMethod from URL when going back to history
+        const params = new URLSearchParams(searchParams.toString());
+        params.delete("orderId");
+        params.delete("paymentMethod");
+        router.push(`${window.location.pathname}?${params.toString()}`);
+    };
+    // Handle crypto swap creation
+    const handleCryptoSwap = async (method) => {
+        try {
+            (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
+            (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);
             const srcAmountBigInt = (0, viem_1.parseUnits)(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals);
             createOrder({
                 isMainnet,
@@ -543,13 +652,71 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
             sonner_1.toast.error("Failed to create order: " + err.message);
         }
     };
-    const onClickHistory = () => {
-        setOrderId(undefined);
-        setActivePanel(PanelView.HISTORY);
-        // Remove orderId from URL when going back to history
-        const params = new URLSearchParams(searchParams.toString());
-        params.delete("orderId");
-        router.push(`${window.location.pathname}?${params.toString()}`);
+    // Handle fiat onramp order creation
+    const handleFiatOrder = async (paymentMethod) => {
+        try {
+            (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
+            (0, invariant_1.default)(recipientAddress, "Recipient address is not found");
+            if (!srcAmountOnRamp || parseFloat(srcAmountOnRamp) <= 0) {
+                sonner_1.toast.error("Please enter a valid amount");
+                return;
+            }
+            // Determine vendor and payment method string based on selected payment method
+            let vendor;
+            let paymentMethodString = "";
+            if (paymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY) {
+                if (coinbaseAvailablePaymentMethods.length === 0) {
+                    sonner_1.toast.error("Coinbase Pay not available");
+                    return;
+                }
+                vendor = "coinbase";
+                paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || ""; // Use first available payment method ID
+            }
+            else if (paymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE) {
+                if (!isStripeOnrampSupported && (!stripeWeb2Support || !stripeWeb2Support.isSupport)) {
+                    sonner_1.toast.error("Stripe not available");
+                    return;
+                }
+                vendor = stripeWeb2Support && stripeWeb2Support.isSupport ? "stripe-web2" : "stripe";
+                paymentMethodString = "";
+            }
+            else {
+                sonner_1.toast.error("Please select a payment method");
+                return;
+            }
+            const getDstToken = () => {
+                if (isBuyMode) {
+                    (0, invariant_1.default)(destinationTokenAddress, "destinationTokenAddress is required");
+                    return {
+                        ...selectedDstToken,
+                        chainId: destinationTokenChainId || selectedDstChainId,
+                        address: destinationTokenAddress,
+                    };
+                }
+                return selectedDstToken;
+            };
+            createOnrampOrder({
+                isMainnet,
+                recipientAddress,
+                orderType: "swap",
+                dstChain: getDstToken().chainId,
+                dstToken: getDstToken(),
+                srcFiatAmount: srcAmountOnRamp,
+                onramp: {
+                    vendor: vendor,
+                    paymentMethod: paymentMethodString,
+                    country: geoData?.country || "US",
+                    ipAddress: geoData?.ip,
+                    redirectUrl: window.location.origin === "https://basement.fun" ? "https://basement.fun/deposit" : window.location.origin,
+                },
+                expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0",
+                creatorAddress: globalAddress,
+            });
+        }
+        catch (err) {
+            console.error(err);
+            sonner_1.toast.error("Failed to create order: " + err.message);
+        }
     };
     // Open a dynamic modal
     // const setIsDynamicModalOpen = useModalStore(state => state.setB3ModalOpen);
@@ -567,9 +734,10 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
     const onSelectOrder = (selectedOrderId) => {
         setActivePanel(PanelView.MAIN);
         setOrderId(selectedOrderId);
-        // Update URL with the new orderId
+        // Update URL with the new orderId and preserve existing parameters
         const params = new URLSearchParams(searchParams.toString());
         params.set("orderId", selectedOrderId);
+        // Keep existing paymentMethod if present
         router.push(`${window.location.pathname}?${params.toString()}`);
     };
     // Save custom recipients to local storage when they change
@@ -585,7 +753,6 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
     (0, react_4.useEffect)(() => {
         window.scrollTo({ top: 0, behavior: "smooth" });
     }, [activePanel]);
-    const [isOpenPasteRecipientAddressModal, setIsOpenPasteRecipientAddressModal] = (0, react_4.useState)(false);
     const calculatePriceImpact = (inputUsd, outputUsd) => {
         if (!inputUsd || !outputUsd) {
             return { percentage: "0.00", isNegative: false };
@@ -609,17 +776,26 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
     // Add state for rate details toggle
     // const [showRateDetails, setShowRateDetails] = useState(false);
     const historyView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: () => setActivePanel(PanelView.MAIN), onSelectOrder: onSelectOrder }) }));
-    const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsxs)("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);
-                            } })] })), mode === "page" && (0, jsx_runtime_1.jsx)("div", { className: "h-12" })] }) }));
-    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.jsxs)("div", { className: "bg-as-on-surface-1 relative mx-auto mb-4 grid h-10 w-fit min-w-[180px] 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-6 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"), children: "Crypto" }), (0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("relative z-10 h-full w-full rounded-xl px-6 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"), children: "Fiat" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex 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-on-surface-1 relative flex w-full flex-col gap-2 rounded-2xl 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: "Send" }), (0, jsx_runtime_1.jsx)(TokenBalance_1.TokenBalance, { token: selectedSrcToken, walletAddress: globalAddress, onChangeInput: value => {
-                                            setIsSrcInputDirty(true);
-                                            setSrcAmount(value);
-                                        } })] }), (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
+    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
+                        } })] })) }) }));
+    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
+                                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
+                                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 => {
                                     setIsSrcInputDirty(true);
                                     setSrcAmount(value);
-                                }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), (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)(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" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.cn)("bg-as-n-8 border-as-stroke absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-2xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", (activeTab === "fiat" || isBuyMode) && "top-[calc(50%+56px)] cursor-default"), onClick: () => {
+                                }, 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 => {
+                                            setIsSrcInputDirty(true);
+                                            setSrcAmount(value);
+                                        } })] })] })) : ((0, jsx_runtime_1.jsx)(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" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.cn)("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
                             if (activeTab === "fiat" || isBuyMode) {
                                 return;
                             }
@@ -638,9 +814,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
                             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" }) }) }), (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-on-surface-1 relative flex w-full flex-col gap-2 rounded-2xl 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/50 flex h-7 items-center gap-1 rounded-lg px-2", globalAddress && recipientAddress === globalAddress
-                                            ? "bg-as-on-surface-2 hover:bg-as-on-surface-3"
-                                            : "bg-as-yellow/70 hover:bg-as-yellow text-as-primary"), onClick: () => setIsOpenPasteRecipientAddressModal(true), 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-4 w-4 rounded-full" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ClipboardIcon, { className: "h-4 w-4" })), (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.ChevronsUpDown, { className: "h-3 w-3" })] })) : ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setIsOpenPasteRecipientAddressModal(true), 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-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 ? (
                             // 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);
@@ -657,33 +831,68 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
                                             }
                                             // Using inline style to ensure color displays
                                             return ((0, jsx_runtime_1.jsxs)("span", { className: "ml-2", style: { color: percentageNum >= 10 ? "red" : "#FFD700" }, children: ["(", isNegative ? "-" : "", percentage, "%)"] }));
-                                        })()] })] })] }), getAnyspendQuoteError && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 flex w-full max-w-[460px] items-center gap-2 rounded-2xl p-4", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { className: "bg-as-red h-4 min-h-4 w-4 min-w-4 rounded-full p-0 text-sm font-medium text-white" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm", children: getAnyspendQuoteError.message })] })), (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.2, ease: "easeInOut" }, className: "flex w-full max-w-[460px] flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: [btnInfo.text, !btnInfo.disable && !btnInfo.error && ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 h-6 w-6 -translate-y-1/2 opacity-70" }))] }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-full" }))] })] }));
+                                        })()] })] }))] }), getAnyspendQuoteError && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 flex w-full max-w-[460px] items-center gap-2 rounded-2xl p-4", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { className: "bg-as-red h-4 min-h-4 w-4 min-w-4 rounded-full p-0 text-sm font-medium text-white" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm", children: getAnyspendQuoteError.message })] })), (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.2, ease: "easeInOut" }, className: "mt-4 flex w-full max-w-[460px] flex-col gap-2 pb-2", children: [(0, jsx_runtime_1.jsxs)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: [btnInfo.text, !btnInfo.disable && !btnInfo.error && ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 h-6 w-6 -translate-y-1/2 opacity-70" }))] }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
     const onrampPaymentView = ((0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName, recipientAddress: recipientAddress, isMainnet: isMainnet, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
             setOrderId(orderId);
             setActivePanel(PanelView.ORDER_DETAILS);
-            // Add orderId to URL for persistence
-            const params = new URLSearchParams();
+            // Add orderId and payment method to URL for persistence
+            const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
             params.set("orderId", orderId);
+            // For fiat payments, the payment method is always fiat (but we use the active tab context)
+            if (activeTab === "fiat") {
+                params.set("paymentMethod", "fiat");
+            }
+            else if (selectedPaymentMethod !== CryptoPaymentMethod_1.PaymentMethod.NONE) {
+                params.set("paymentMethod", selectedPaymentMethod);
+            }
             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);
+            setActivePanel(PanelView.MAIN);
+        } }));
+    const fiatPaymentMethodView = ((0, jsx_runtime_1.jsx)(FiatPaymentMethod_1.FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {
+            setSelectedFiatPaymentMethod(method);
+            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.jsxs)("div", { className: (0, cn_1.cn)("mx-auto max-w-[calc(100vw-32px)]"), 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)("w-full", {
-                        "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)(EnterRecipientModal_1.EnterRecipientModal, { isOpenPasteRecipientAddress: isOpenPasteRecipientAddressModal, setIsOpenPasteRecipientAddress: setIsOpenPasteRecipientAddressModal, recipientAddress: recipientAddress, setRecipientAddress: setRecipientAddress })] }) }));
+    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
+                    ? oat
+                        ? PanelView.ORDER_DETAILS
+                        : PanelView.LOADING
+                    : activePanel === PanelView.ORDER_DETAILS
+                        ? PanelView.MAIN
+                        : activePanel, className: (0, cn_1.cn)("overflow-hidden", {
+                    "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"),
+                ] }) }) }));
 }