@b3dotfun/sdk 0.0.20 → 0.0.21-alpha.0

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

@@ -10,7 +10,7 @@ const constants_1 = require("../../../anyspend/constants");
 const react_1 = require("../../../anyspend/react");
 const react_2 = require("../../../global-account/react");
 const utils_1 = require("../../../shared/utils");
-const centerTruncate_1 = __importDefault(require("../../../shared/utils/centerTruncate"));
+const formatAddress_1 = require("../../../shared/utils/formatAddress");
 const number_1 = require("../../../shared/utils/number");
 const simplehash_1 = require("../../../shared/utils/simplehash");
 const invariant_1 = __importDefault(require("invariant"));
@@ -19,17 +19,23 @@ const react_3 = require("motion/react");
 const react_4 = require("react");
 const sonner_1 = require("sonner");
 const chains_1 = require("viem/chains");
+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");
 const OrderToken_1 = require("./common/OrderToken");
-const PanelOnrampPayment_1 = require("./common/PanelOnrampPayment");
+const RecipientSelection_1 = require("./common/RecipientSelection");
 var PanelView;
 (function (PanelView) {
     PanelView[PanelView["CONFIRM_ORDER"] = 0] = "CONFIRM_ORDER";
     PanelView[PanelView["HISTORY"] = 1] = "HISTORY";
     PanelView[PanelView["ORDER_DETAILS"] = 2] = "ORDER_DETAILS";
     PanelView[PanelView["LOADING"] = 3] = "LOADING";
+    PanelView[PanelView["RECIPIENT_SELECTION"] = 4] = "RECIPIENT_SELECTION";
+    PanelView[PanelView["CRYPTO_PAYMENT_METHOD"] = 5] = "CRYPTO_PAYMENT_METHOD";
+    PanelView[PanelView["FIAT_PAYMENT_METHOD"] = 6] = "FIAT_PAYMENT_METHOD";
 })(PanelView || (PanelView = {}));
 function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChainId, dstToken, dstAmount, contractAddress, tokenId, contractType, encodedData, spenderAddress, }) {
     switch (orderType) {
@@ -88,23 +94,25 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
         }
     }
 }
-function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true, }) {
+function AnySpendCustom(props) {
+    const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
+    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendCustomInner, { ...props }) }));
+}
+function AnySpendCustomInner({ isMainnet = true, loadOrder, mode = "modal", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true, }) {
     const hasMounted = (0, react_2.useHasMounted)();
     const searchParams = (0, react_2.useSearchParamsSSR)();
     const router = (0, react_2.useRouter)();
     const [activePanel, setActivePanel] = (0, react_4.useState)(loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER);
     const [activeTab, setActiveTab] = (0, react_4.useState)("crypto");
+    // Add state for selected payment methods
+    const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = (0, react_4.useState)(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE);
+    const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = (0, react_4.useState)(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
     // Get current user's wallet
     const currentWallet = (0, react_2.useAccountWallet)();
-    // Add state for recipient modal
-    const [isRecipientModalOpen, setIsRecipientModalOpen] = (0, react_4.useState)(false);
     // Add state for custom recipient
     const [customRecipientAddress, setCustomRecipientAddress] = (0, react_4.useState)(recipientAddressProps);
     // Update recipient logic to use custom recipient
     const recipientAddress = customRecipientAddress || currentWallet.address;
-    const recipientPropsProfile = (0, react_2.useProfile)({ address: recipientAddress });
-    const recipientEnsName = recipientPropsProfile.data?.name?.replace(/\.b3\.fun/g, "");
-    const recipientImageUrl = recipientPropsProfile.data?.avatar || currentWallet.wallet.meta?.icon;
     const [orderId, setOrderId] = (0, react_4.useState)(loadOrder);
     const [srcChainId, setSrcChainId] = (0, react_4.useState)(isMainnet ? chains_1.base.id : chains_1.baseSepolia.id);
     // Get token list for token balance check
@@ -216,7 +224,7 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
     const formattedSrcAmount = srcAmount ? (0, number_1.formatTokenAmount)(srcAmount, srcToken.decimals, 6, false) : null;
     const srcFiatAmount = (0, react_4.useMemo)(() => (activeTab === "fiat" && srcAmount ? (0, number_1.formatUnits)(srcAmount.toString(), constants_1.USDC_BASE.decimals) : "0"), [activeTab, srcAmount]);
     // Get geo data and onramp options (after quote is available)
-    const { geoData, isOnrampSupported } = (0, react_1.useGeoOnrampOptions)(isMainnet, srcFiatAmount);
+    const { geoData, isOnrampSupported, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, stripeWeb2Support } = (0, react_1.useGeoOnrampOptions)(isMainnet, srcFiatAmount);
     (0, react_4.useEffect)(() => {
         if (oat?.data?.order.status === "executed") {
             console.log("Calling onSuccess");
@@ -243,6 +251,9 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
         },
     });
     const isCreatingOrder = isCreatingRegularOrder || isCreatingOnrampOrder;
+    const { address: connectedAddress, name: connectedName, profile: connectedProfile } = (0, react_1.useConnectedUserProfile)();
+    const recipientProfile = (0, react_2.useProfile)({ address: recipientAddress });
+    const recipientName = recipientProfile.data?.name;
     const handleCreateOrder = async (recipientAddress, onramp) => {
         try {
             (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
@@ -262,7 +273,7 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
                         ? {
                             type: "erc1155",
                             contractAddress: metadata.nftContract.contractAddress,
-                            tokenId: metadata.nftContract.tokenId,
+                            tokenId: metadata.nftContract.tokenId ?? 0,
                             name: metadata.nftContract.name,
                             description: metadata.nftContract.description,
                             imageUrl: metadata.nftContract.imageUrl,
@@ -297,15 +308,18 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
                     : undefined,
             };
             if (onramp) {
-                (0, invariant_1.default)(srcToken.address === constants_1.USDC_BASE.address, "Selected src token is not USDC");
-                (0, invariant_1.default)(srcChainId === chains_1.base.id, "Selected src chain is not base");
+                const effectiveSrcToken = activeTab === "fiat" ? constants_1.USDC_BASE : srcToken;
+                (0, invariant_1.default)(effectiveSrcToken.address === constants_1.USDC_BASE.address, "Selected src token is not USDC");
+                (0, invariant_1.default)((activeTab === "fiat" ? chains_1.base.id : srcChainId) === chains_1.base.id, "Selected src chain is not base");
+                // Get the current geo data from the hook
+                const currentGeoData = geoData;
                 void createOnrampOrder({
                     ...createOrderParams,
                     srcFiatAmount: srcFiatAmount,
                     onramp: {
                         vendor: onramp.vendor,
                         paymentMethod: onramp.paymentMethod,
-                        country: geoData?.country || "US",
+                        country: currentGeoData?.country || "US",
                         redirectUrl: window.location.origin === "https://basement.fun"
                             ? "https://basement.fun/deposit"
                             : window.location.origin,
@@ -324,22 +338,21 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
         }
     };
     const handleConfirmOrder = async (onramp) => {
-        // if (!isAuthenticated) {
-        //   // Copied from https://github.com/b3-fun/b3-mono/blob/main/apps/anyspend-web/components/User/index.tsx#L85
-        //   setB3ModalContentType({
-        //     chain: {
-        //       ...b3,
-        //       rpc: "https://mainnet-rpc.b3.fun",
-        //       blockExplorers: [{ name: "B3 Explorer", url: "https://explorer.b3.fun/" }],
-        //       testnet: undefined,
-        //     },
-        //     partnerId: String(process.env.NEXT_PUBLIC_THIRDWEB_PARTNER_ID),
-        //     type: "signInWithB3",
-        //     showBackButton: false,
-        //   });
-        //   setB3ModalOpen(true);
-        //   return;
-        // }
+        // Check if recipient is selected
+        if (!recipientAddress) {
+            setActivePanel(PanelView.RECIPIENT_SELECTION);
+            return;
+        }
+        // Check payment method selection for crypto tab
+        if (activeTab === "crypto" && selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
+            setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD);
+            return;
+        }
+        // Check payment method selection for fiat tab
+        if (activeTab === "fiat" && selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.NONE) {
+            setActivePanel(PanelView.FIAT_PAYMENT_METHOD);
+            return;
+        }
         if (recipientAddress) {
             try {
                 await handleCreateOrder(recipientAddress, onramp);
@@ -350,21 +363,63 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
             }
         }
     };
+    // Handle fiat 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 (!srcFiatAmount || parseFloat(srcFiatAmount) <= 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 || "";
+            }
+            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;
+            }
+            await handleCreateOrder(recipientAddress, {
+                paymentMethod: paymentMethodString,
+                vendor: vendor,
+            });
+        }
+        catch (err) {
+            console.error(err);
+            sonner_1.toast.error("Failed to create order: " + err.message);
+        }
+    };
     const recipientSection = showRecipient ? ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
             opacity: hasMounted ? 1 : 0,
             y: hasMounted ? 0 : 20,
             filter: hasMounted ? "blur(0px)" : "blur(10px)",
-        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "flex w-full items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-b3-react-foreground", children: orderType === "swap"
+        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "flex w-full items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry text-sm", children: orderType === "swap"
                     ? "Recipient"
                     : orderType === "mint_nft"
                         ? "Receive NFT at"
                         : orderType === "join_tournament"
                             ? "Join for"
-                            : "Recipient" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "outline", className: "w-full justify-between border-none p-0", onClick: () => setIsRecipientModalOpen(true), children: [recipientAddress ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [recipientImageUrl && ((0, jsx_runtime_1.jsx)("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-1", children: [recipientEnsName && (0, jsx_runtime_1.jsxs)("span", { children: ["@", recipientEnsName] }), (0, jsx_runtime_1.jsx)("span", { children: (0, centerTruncate_1.default)(recipientAddress) })] })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "text-b3-react-foreground/60 flex items-center gap-2", children: (0, jsx_runtime_1.jsx)("span", { children: "Select address" }) })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) })] }, recipientAddress)) : null;
+                            : "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [recipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, utils_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: [recipientProfile && ((0, jsx_runtime_1.jsx)("img", { src: recipientProfile.data?.avatar || "", alt: recipientProfile.data?.name || "", className: "bg-b3-react-foreground size-6 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsxs)("div", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: [recipientName && (0, jsx_runtime_1.jsx)("span", { children: (0, utils_1.formatUsername)(recipientName) }), (0, jsx_runtime_1.jsx)("span", { children: (0, formatAddress_1.shortenAddress)(recipientAddress) })] })] }) })) : ((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" }) })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })] }, recipientAddress)) : null;
     const historyView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: () => {
                 setActivePanel(PanelView.HISTORY);
             }, onSelectOrder: onSelectOrder }) }));
-    const orderDetailsView = ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background"), 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: () => {
+    const orderDetailsView = ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background rounded-xl"), 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, cryptoPaymentMethod: activeTab === "fiat" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, onBack: () => {
                             setOrderId(undefined);
                             setActivePanel(PanelView.CONFIRM_ORDER);
                             // Remove orderId from URL when canceling
@@ -374,66 +429,86 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
                         } })] })), mode === "page" && (0, jsx_runtime_1.jsx)("div", { className: "h-12" })] }));
     const loadingView = ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background"), children: [(0, jsx_runtime_1.jsxs)(react_2.Badge, { variant: "default", className: "bg-b3-react-muted/30 border-b3-react-border hover:bg-b3-react-muted/50 flex items-center gap-3 px-4 py-1 text-base transition-all", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-b3-react-foreground size-4 animate-spin" }), (0, jsx_runtime_1.jsx)(react_2.TextShimmer, { duration: 1, className: "font-sf-rounded text-base font-semibold", children: "Loading..." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-1 flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-24" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-8 w-48" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "ml-4 h-8 w-32" })] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "mt-4 h-8 w-24" })] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "mb-4 h-12 w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)(react_2.Skeleton, { className: "rounded-lg bg-white/5 p-6 pb-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "size-[200px]" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-3 flex items-center justify-center gap-2", children: (0, jsx_runtime_1.jsx)("div", { className: "size-5 rounded-full" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 flex-col gap-2", children: [1, 2, 3].map(i => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 w-full" }, i))) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-muted/30 mt-8 w-full rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "mb-3 h-4 w-48" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 flex-1" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 flex-1" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-3", children: [1, 2, 3, 4, 5].map(i => ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full justify-between", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-24" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-32" })] }, i))) }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 w-full" }), mode === "page" && (0, jsx_runtime_1.jsx)("div", { className: "h-12" })] }));
     // Confirm order view.
-    const confirmOrderView = ((0, jsx_runtime_1.jsxs)("div", { className: "relative mx-auto flex w-full flex-col items-center", children: [header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)(react_2.Tabs, { value: activeTab, onValueChange: value => setActiveTab(value), className: "bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5", children: [(0, jsx_runtime_1.jsxs)(react_2.TabsList, { hideGradient: true, className: "justify-center", children: [(0, jsx_runtime_1.jsx)(react_2.TabTrigger, { value: "crypto", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Pay with crypto" }) }), isOnrampSupported ? ((0, jsx_runtime_1.jsx)(react_2.TabTrigger, { value: "fiat", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Pay with fiat" }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(react_2.TabTrigger, { value: "fiat", disabled: true, children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Pay with fiat" }) }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Fiat payments are not supported for this amount" }) })] }))] }), (0, jsx_runtime_1.jsx)(react_2.TabsContent, { value: "crypto", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
+    const confirmOrderView = ((0, jsx_runtime_1.jsxs)("div", { className: "relative mx-auto flex w-full flex-col items-center", children: [header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote }), (0, jsx_runtime_1.jsxs)(react_2.Tabs, { value: activeTab, onValueChange: value => setActiveTab(value), className: "bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5", children: [(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, utils_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, utils_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");
+                                        setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE);
+                                        setSelectedFiatPaymentMethod(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
+                                    }, children: "Pay with crypto" }), isOnrampSupported ? ((0, jsx_runtime_1.jsx)("button", { className: (0, utils_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");
+                                        setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE);
+                                        setSelectedFiatPaymentMethod(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
+                                    }, children: "Pay with fiat" })) : ((0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", "text-as-primary/50 cursor-not-allowed bg-transparent"), disabled: true, children: "Pay with fiat" }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Fiat payments are not supported for this amount" }) })] }))] }) }), (0, jsx_runtime_1.jsx)(react_2.TabsContent, { value: "crypto", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary flex w-full flex-col gap-4 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
+                                                opacity: hasMounted ? 1 : 0,
+                                                y: hasMounted ? 0 : 20,
+                                                filter: hasMounted ? "blur(0px)" : "blur(10px)",
+                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors hover:text-blue-700", 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: [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", 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" })] })) : 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)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
+                                                        opacity: hasMounted ? 1 : 0,
+                                                        y: hasMounted ? 0 : 20,
+                                                        filter: hasMounted ? "blur(0px)" : "blur(10px)",
+                                                    }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry text-sm", children: "Pay with" }), (0, jsx_runtime_1.jsx)(OrderToken_1.OrderToken, { address: currentWallet?.wallet?.address, context: "from", chainId: srcChainId, setChainId: setSrcChainId, token: srcToken, setToken: token => {
+                                                                setDirtySelectSrcToken(true);
+                                                                setSrcToken(token);
+                                                            }, requiredAmount: srcAmount || undefined })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
+                                                        opacity: hasMounted ? 1 : 0,
+                                                        y: hasMounted ? 0 : 20,
+                                                        filter: hasMounted ? "blur(0px)" : "blur(10px)",
+                                                    }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry text-sm", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry", children: "(with fee)" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: [formattedSrcAmount || "--", " ", srcToken.symbol] })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex w-full flex-col items-center justify-between gap-2"), children: (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: false, animate: {
+                                            opacity: hasMounted ? 1 : 0,
+                                            y: hasMounted ? 0 : 20,
+                                            filter: hasMounted ? "blur(0px)" : "blur(10px)",
+                                        }, transition: { duration: 0.3, delay: 0.3, ease: "easeInOut" }, className: "flex w-full flex-col gap-2", children: (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", disabled: isCreatingOrder || isLoadingAnyspendQuote || !anyspendQuote, onClick: () => handleConfirmOrder(), className: "relative w-full", children: isCreatingOrder ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Loading quote..." })] })) : !recipientAddress ? ("Select recipient") : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE ? ("Choose payment method") : anyspendQuote ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Checkout" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : ("No quote found") }) }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.TabsContent, { value: "fiat", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary flex w-full flex-col gap-4 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-medium", children: "Pay with" }), (0, jsx_runtime_1.jsx)(OrderToken_1.OrderToken, { address: currentWallet?.wallet?.address, context: "from", chainId: srcChainId, setChainId: setSrcChainId, token: srcToken, setToken: token => {
-                                                        setDirtySelectSrcToken(true);
-                                                        setSrcToken(token);
-                                                    }, requiredAmount: srcAmount || undefined })] }), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), (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)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("span", { className: "font-medium", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-500", children: "(with fee)" })] }), (0, jsx_runtime_1.jsxs)("h2", { className: (0, utils_1.cn)("text-as-primary text-2xl font-semibold"), children: [formattedSrcAmount || "--", " ", srcToken.symbol] })] })] }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex w-full flex-col items-center justify-between gap-2"), children: (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry text-sm", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry", children: "(USD)" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary text-xl font-semibold", children: ["$", srcFiatAmount || "0.00"] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex w-full flex-col items-center justify-between gap-2"), children: (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: false, animate: {
                                             opacity: hasMounted ? 1 : 0,
                                             y: hasMounted ? 0 : 20,
                                             filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                        }, transition: { duration: 0.3, delay: 0.3, ease: "easeInOut" }, className: "flex w-full flex-col gap-2", children: (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", disabled: isCreatingOrder || isLoadingAnyspendQuote || !anyspendQuote || !recipientAddress, onClick: () => handleConfirmOrder(), className: "relative w-full", children: isCreatingOrder ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Loading quote..." })] })) : anyspendQuote && recipientAddress ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Checkout" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : recipientAddress ? ("No quote found") : ("Please select a recipient") }) }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.TabsContent, { value: "fiat", children: (0, jsx_runtime_1.jsx)("div", { className: "mt-6 flex w-full flex-col gap-6", children: (0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.PanelOnrampPayment, { srcAmountOnRamp: srcAmount ? (0, number_1.formatUnits)(srcAmount.toString(), constants_1.USDC_BASE.decimals) : "0", recipientName: recipientEnsName, recipientAddress: recipientAddress, isMainnet: isMainnet, isBuyMode: false, selectedDstChainId: dstChainId, selectedDstToken: dstToken, anyspendQuote: anyspendQuote, globalAddress: currentWallet?.wallet?.address, onOrderCreated: (orderId) => setOrderId(orderId), onBack: () => setActiveTab("crypto"), orderType: orderType, nft: metadata.type === "mint_nft"
-                                    ? metadata.nftContract.type === "erc1155"
-                                        ? {
-                                            type: "erc1155",
-                                            contractAddress: metadata.nftContract.contractAddress,
-                                            tokenId: metadata.nftContract.tokenId,
-                                            imageUrl: metadata.nftContract.imageUrl,
-                                            name: metadata.nftContract.name,
-                                            description: metadata.nftContract.description,
-                                            price: dstAmount,
-                                        }
-                                        : {
-                                            type: "erc721",
-                                            contractAddress: metadata.nftContract.contractAddress,
-                                            name: metadata.nftContract.name,
-                                            description: metadata.nftContract.description,
-                                            imageUrl: metadata.nftContract.imageUrl,
-                                            price: dstAmount,
-                                        }
-                                    : undefined, payload: metadata.type === "custom"
-                                    ? {
-                                        ...metadata,
-                                        amount: dstAmount,
-                                        data: encodedData,
-                                        to: contractAddress,
-                                        spenderAddress: spenderAddress,
-                                    }
-                                    : undefined, recipientEnsName: recipientEnsName, recipientImageUrl: recipientImageUrl }) }) })] })] }));
+                                        }, transition: { duration: 0.3, delay: 0.3, ease: "easeInOut" }, className: "flex w-full flex-col gap-2", children: (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", disabled: isCreatingOrder || isLoadingAnyspendQuote || !anyspendQuote, onClick: () => {
+                                                if (selectedFiatPaymentMethod !== FiatPaymentMethod_1.FiatPaymentMethod.NONE) {
+                                                    handleFiatOrder(selectedFiatPaymentMethod);
+                                                }
+                                                else {
+                                                    handleConfirmOrder();
+                                                }
+                                            }, className: "relative w-full", children: isCreatingOrder ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Loading quote..." })] })) : !recipientAddress ? ("Select recipient") : selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.NONE ? ("Select payment method") : anyspendQuote ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Buy" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : ("No quote found") }) }) })] }) })] })] }));
+    // Recipient selection view
+    const recipientSelectionView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(RecipientSelection_1.RecipientSelection, { initialValue: customRecipientAddress || "", title: "Add recipient address or ENS", description: "Send tokens to another address", onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onConfirm: address => {
+                setCustomRecipientAddress(address);
+                setActivePanel(PanelView.CONFIRM_ORDER);
+            } }) }));
+    // Crypto payment method view
+    const cryptoPaymentMethodView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { globalAddress: currentWallet?.wallet?.address, globalWallet: currentWallet?.wallet, selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onSelectPaymentMethod: (method) => {
+                setSelectedCryptoPaymentMethod(method);
+                setActivePanel(PanelView.CONFIRM_ORDER);
+            } }) }));
+    // Fiat payment method view
+    const fiatPaymentMethodView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(FiatPaymentMethod_1.FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onSelectPaymentMethod: (method) => {
+                setSelectedFiatPaymentMethod(method);
+                setActivePanel(PanelView.CONFIRM_ORDER);
+            }, srcAmountOnRamp: srcFiatAmount, isMainnet: isMainnet }) }));
     // Return the TransitionPanel with all views
-    return ((0, jsx_runtime_1.jsxs)(react_2.StyleRoot, { children: [(0, jsx_runtime_1.jsx)(react_2.TransitionPanel, { activeIndex: orderId
-                    ? oat
-                        ? PanelView.ORDER_DETAILS
-                        : PanelView.LOADING
-                    : activePanel === PanelView.ORDER_DETAILS
-                        ? PanelView.CONFIRM_ORDER
-                        : activePanel, className: (0, utils_1.cn)("w-full"), 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", { className: "w-full", children: confirmOrderView }, "edit-recipient-view"),
-                    (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: historyView }, "history-view"),
-                    (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: orderDetailsView }, "order-details-view"),
-                    (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: loadingView }, "loading-view"),
-                ] }), (0, jsx_runtime_1.jsx)(react_2.Dialog, { open: isRecipientModalOpen, onOpenChange: setIsRecipientModalOpen, children: (0, jsx_runtime_1.jsx)(react_2.DialogContent, { className: "w-[420px] max-w-[calc(100vw-32px)] rounded-2xl p-3.5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: "To address" }), (0, jsx_runtime_1.jsx)(react_2.Input, { value: customRecipientAddress || "", onChange: e => setCustomRecipientAddress(e.target.value), placeholder: "Enter address", className: "h-12 rounded-lg", spellCheck: false }), (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "w-full rounded-lg", onClick: () => {
-                                    setIsRecipientModalOpen(false);
-                                }, children: "Save" })] }) }) })] }));
+    return ((0, jsx_runtime_1.jsx)(react_2.StyleRoot, { children: (0, jsx_runtime_1.jsx)(react_2.TransitionPanel, { activeIndex: orderId
+                ? oat
+                    ? PanelView.ORDER_DETAILS
+                    : PanelView.LOADING
+                : activePanel === PanelView.ORDER_DETAILS
+                    ? PanelView.CONFIRM_ORDER
+                    : activePanel, className: (0, utils_1.cn)("w-full"), 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", { className: "w-full", children: confirmOrderView }, "confirm-order-view"),
+                (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: historyView }, "history-view"),
+                (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: orderDetailsView }, "order-details-view"),
+                (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: loadingView }, "loading-view"),
+                (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: recipientSelectionView }, "recipient-selection-view"),
+                (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: cryptoPaymentMethodView }, "crypto-payment-method-view"),
+                (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: fiatPaymentMethodView }, "fiat-payment-method-view"),
+            ] }) }));
 }

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

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

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

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

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

@@ -83,7 +83,7 @@ function AnySpendNFT({ isMainnet = true, loadOrder, mode = "modal", recipientAdd
         }
         fetchContractMetadata();
     }, [nftContract.contractAddress, nftContract.chainId, nftContract.imageUrl, nftContract.tokenId]);
-    const header = ({ anyspendPrice, isLoadingAnyspendPrice, }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative size-[200px]", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 scale-95 bg-black/30 blur-md" }), (0, jsx_runtime_1.jsxs)(react_1.GlareCard, { className: "overflow-hidden", children: [imageUrlWithFallback && ((0, jsx_runtime_1.jsx)("img", { src: imageUrlWithFallback, alt: nftContract.name, className: "size-full object-cover" })), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 rounded-xl border border-white/10" })] }), (0, jsx_runtime_1.jsx)(DropdownMenu, { nftContract: nftContract })] }), (0, jsx_runtime_1.jsxs)("div", { className: "from-b3-react-background to-as-on-surface-1 mt-[-100px] w-full rounded-t-lg bg-gradient-to-t", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-[100px] w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-1 flex w-full flex-col items-center gap-2 p-5", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-sf-rounded text-2xl font-semibold", children: nftContract.name }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-fit items-center gap-1", children: anyspendPrice ? ((0, jsx_runtime_1.jsx)(react_2.AnimatePresence, { mode: "wait", children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("text-as-primary group flex items-center text-3xl font-semibold transition-all", {
+    const header = ({ anyspendPrice, isLoadingAnyspendPrice, }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative size-[200px]", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 scale-95 bg-black/30 blur-md" }), (0, jsx_runtime_1.jsxs)(react_1.GlareCard, { className: "overflow-hidden", children: [imageUrlWithFallback && ((0, jsx_runtime_1.jsx)("img", { src: imageUrlWithFallback, alt: nftContract.name, className: "size-full object-cover" })), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 rounded-xl border border-white/10" })] }), (0, jsx_runtime_1.jsx)(DropdownMenu, { nftContract: nftContract })] }), (0, jsx_runtime_1.jsxs)("div", { className: "from-b3-react-background to-as-on-surface-1 -mb-5 mt-[-100px] w-full rounded-t-lg bg-gradient-to-t", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-[100px] w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-1 flex w-full flex-col items-center gap-2 p-5", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-sf-rounded text-2xl font-semibold", children: nftContract.name }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-fit items-center gap-1", children: anyspendPrice ? ((0, jsx_runtime_1.jsx)(react_2.AnimatePresence, { mode: "wait", children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("text-as-primary group flex items-center text-3xl font-semibold transition-all", {
                                             "opacity-0": isLoadingAnyspendPrice,
                                         }), children: (0, number_1.formatDisplayNumber)(anyspendPrice?.data?.currencyIn?.amountUsd, { style: "currency" }) }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-[36px] w-full" })) })] })] })] }));
     return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.AnySpendCustom, { isMainnet: isMainnet, loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, orderType: "mint_nft", dstChainId: nftContract.chainId, dstToken: nftContract.currency, dstAmount: nftContract.price, contractAddress: nftContract.contractAddress, encodedData: "0x", metadata: {

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

@@ -43,7 +43,7 @@ function ConnectWalletPayment({ order, onPayment, txLoading, isSwitchingOrExecut
     if (!srcToken || !dstToken) {
         return (0, jsx_runtime_1.jsx)("div", { children: "Loading..." });
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col items-center gap-6", children: [(0, jsx_runtime_1.jsx)(StepProgress_1.StepProgress, { steps: steps, currentStepIndex: 1 }), (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.5 }, className: "flex w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-5/6 items-center gap-2 sm:px-0", disabled: txLoading || isSwitchingOrExecuting, onClick: onPayment, children: txLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transaction Pending", (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap pl-4 text-lg md:text-sm", children: order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col items-center gap-6", children: [(0, jsx_runtime_1.jsx)(StepProgress_1.StepProgress, { steps: steps, currentStepIndex: 1 }), (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.5 }, className: "flex w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-5/6 max-w-[400px] items-center gap-2 sm:px-0", disabled: txLoading || isSwitchingOrExecuting, onClick: onPayment, children: txLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transaction Pending", (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap pl-4 text-lg md:text-sm", children: order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
                                         ? "Pay from Phantom Wallet"
                                         : "Pay from Connected Wallet" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }) })] })] }));
 }

package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethod.d.ts

@@ -1,4 +1,4 @@
-export declare enum PaymentMethod {
+export declare enum CryptoPaymentMethodType {
     NONE = "none",
     CONNECT_WALLET = "connect_wallet",
     TRANSFER_CRYPTO = "transfer_crypto"
@@ -10,11 +10,11 @@ interface CryptoPaymentMethodProps {
             icon?: string;
         };
     };
-    selectedPaymentMethod: PaymentMethod;
-    setSelectedPaymentMethod: (method: PaymentMethod) => void;
+    selectedPaymentMethod: CryptoPaymentMethodType;
+    setSelectedPaymentMethod: (method: CryptoPaymentMethodType) => void;
     isCreatingOrder: boolean;
     onBack: () => void;
-    onSelectPaymentMethod: (method: PaymentMethod) => void;
+    onSelectPaymentMethod: (method: CryptoPaymentMethodType) => void;
 }
 export declare function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }: CryptoPaymentMethodProps): import("react/jsx-runtime").JSX.Element;
 export {};