@b3dotfun/sdk 0.0.20 → 0.0.21-alpha.1

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

@@ -1,29 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { eqci, getDefaultToken, roundUpUSDCBaseAmountToNearest } from "../../../anyspend/index.js";
 import { RELAY_ETH_ADDRESS, USDC_BASE } from "../../../anyspend/constants/index.js";
-import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useAnyspendTokenList, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
-import { Badge, Button, Dialog, DialogContent, Input, ShinyButton, Skeleton, StyleRoot, Tabs, TabsContent, TabsList, TabTrigger, TextShimmer, Tooltip, TooltipContent, TooltipTrigger, TransitionPanel, useAccountWallet, useHasMounted, useProfile, useRouter, useSearchParamsSSR, useTokenBalancesByChain, } from "../../../global-account/react/index.js";
-import { cn } from "../../../shared/utils/index.js";
-import centerTruncate from "../../../shared/utils/centerTruncate.js";
+import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useAnyspendTokenList, useConnectedUserProfile, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
+import { Badge, ShinyButton, Skeleton, StyleRoot, Tabs, TabsContent, TextShimmer, Tooltip, TooltipContent, TooltipTrigger, TransitionPanel, useAccountWallet, useHasMounted, useProfile, useRouter, useSearchParamsSSR, useTokenBalancesByChain, } from "../../../global-account/react/index.js";
+import { cn, formatUsername } from "../../../shared/utils/index.js";
+import { shortenAddress } from "../../../shared/utils/formatAddress.js";
 import { formatTokenAmount, formatUnits } from "../../../shared/utils/number.js";
 import { simpleHashChainToChainName } from "../../../shared/utils/simplehash.js";
 import invariant from "invariant";
-import { ChevronRightCircle, Loader2 } from "lucide-react";
+import { ChevronRight, ChevronRightCircle, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { base, baseSepolia } from "viem/chains";
+import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
+import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
+import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
 import { OrderDetails } from "./common/OrderDetails.js";
 import { OrderHistory } from "./common/OrderHistory.js";
 import { OrderStatus as OrderStatusDisplay } from "./common/OrderStatus.js";
 import { OrderToken } from "./common/OrderToken.js";
-import { PanelOnrampPayment } from "./common/PanelOnrampPayment.js";
+import { RecipientSelection } from "./common/RecipientSelection.js";
 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) {
@@ -82,23 +88,25 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
         }
     }
 }
-export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true, }) {
+export function AnySpendCustom(props) {
+    const fingerprintConfig = getFingerprintConfig();
+    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _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 = useHasMounted();
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
     const [activePanel, setActivePanel] = useState(loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER);
     const [activeTab, setActiveTab] = useState("crypto");
+    // Add state for selected payment methods
+    const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState(CryptoPaymentMethodType.NONE);
+    const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState(FiatPaymentMethod.NONE);
     // Get current user's wallet
     const currentWallet = useAccountWallet();
-    // Add state for recipient modal
-    const [isRecipientModalOpen, setIsRecipientModalOpen] = useState(false);
     // Add state for custom recipient
     const [customRecipientAddress, setCustomRecipientAddress] = useState(recipientAddressProps);
     // Update recipient logic to use custom recipient
     const recipientAddress = customRecipientAddress || currentWallet.address;
-    const recipientPropsProfile = useProfile({ address: recipientAddress });
-    const recipientEnsName = recipientPropsProfile.data?.name?.replace(/\.b3\.fun/g, "");
-    const recipientImageUrl = recipientPropsProfile.data?.avatar || currentWallet.wallet.meta?.icon;
     const [orderId, setOrderId] = useState(loadOrder);
     const [srcChainId, setSrcChainId] = useState(isMainnet ? base.id : baseSepolia.id);
     // Get token list for token balance check
@@ -210,7 +218,7 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
     const formattedSrcAmount = srcAmount ? formatTokenAmount(srcAmount, srcToken.decimals, 6, false) : null;
     const srcFiatAmount = useMemo(() => (activeTab === "fiat" && srcAmount ? formatUnits(srcAmount.toString(), USDC_BASE.decimals) : "0"), [activeTab, srcAmount]);
     // Get geo data and onramp options (after quote is available)
-    const { geoData, isOnrampSupported } = useGeoOnrampOptions(isMainnet, srcFiatAmount);
+    const { geoData, isOnrampSupported, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, stripeWeb2Support } = useGeoOnrampOptions(isMainnet, srcFiatAmount);
     useEffect(() => {
         if (oat?.data?.order.status === "executed") {
             console.log("Calling onSuccess");
@@ -237,6 +245,9 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
         },
     });
     const isCreatingOrder = isCreatingRegularOrder || isCreatingOnrampOrder;
+    const { address: connectedAddress, name: connectedName, profile: connectedProfile } = useConnectedUserProfile();
+    const recipientProfile = useProfile({ address: recipientAddress });
+    const recipientName = recipientProfile.data?.name;
     const handleCreateOrder = async (recipientAddress, onramp) => {
         try {
             invariant(anyspendQuote, "Relay price is not found");
@@ -256,7 +267,7 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
                         ? {
                             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,
@@ -291,15 +302,18 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
                     : undefined,
             };
             if (onramp) {
-                invariant(srcToken.address === USDC_BASE.address, "Selected src token is not USDC");
-                invariant(srcChainId === base.id, "Selected src chain is not base");
+                const effectiveSrcToken = activeTab === "fiat" ? USDC_BASE : srcToken;
+                invariant(effectiveSrcToken.address === USDC_BASE.address, "Selected src token is not USDC");
+                invariant((activeTab === "fiat" ? base.id : srcChainId) === 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,
@@ -318,22 +332,21 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
         }
     };
     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 === CryptoPaymentMethodType.NONE) {
+            setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD);
+            return;
+        }
+        // Check payment method selection for fiat tab
+        if (activeTab === "fiat" && selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
+            setActivePanel(PanelView.FIAT_PAYMENT_METHOD);
+            return;
+        }
         if (recipientAddress) {
             try {
                 await handleCreateOrder(recipientAddress, onramp);
@@ -344,21 +357,63 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
             }
         }
     };
+    // Handle fiat order creation
+    const handleFiatOrder = async (paymentMethod) => {
+        try {
+            invariant(anyspendQuote, "Relay price is not found");
+            invariant(recipientAddress, "Recipient address is not found");
+            if (!srcFiatAmount || parseFloat(srcFiatAmount) <= 0) {
+                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.COINBASE_PAY) {
+                if (coinbaseAvailablePaymentMethods.length === 0) {
+                    toast.error("Coinbase Pay not available");
+                    return;
+                }
+                vendor = "coinbase";
+                paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || "";
+            }
+            else if (paymentMethod === FiatPaymentMethod.STRIPE) {
+                if (!isStripeOnrampSupported && (!stripeWeb2Support || !stripeWeb2Support.isSupport)) {
+                    toast.error("Stripe not available");
+                    return;
+                }
+                vendor = stripeWeb2Support && stripeWeb2Support.isSupport ? "stripe-web2" : "stripe";
+                paymentMethodString = "";
+            }
+            else {
+                toast.error("Please select a payment method");
+                return;
+            }
+            await handleCreateOrder(recipientAddress, {
+                paymentMethod: paymentMethodString,
+                vendor: vendor,
+            });
+        }
+        catch (err) {
+            console.error(err);
+            toast.error("Failed to create order: " + err.message);
+        }
+    };
     const recipientSection = showRecipient ? (_jsxs(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: [_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: [_jsx("div", { className: "text-as-tertiarry text-sm", children: orderType === "swap"
                     ? "Recipient"
                     : orderType === "mint_nft"
                         ? "Receive NFT at"
                         : orderType === "join_tournament"
                             ? "Join for"
-                            : "Recipient" }), _jsx("div", { children: _jsxs(Button, { variant: "outline", className: "w-full justify-between border-none p-0", onClick: () => setIsRecipientModalOpen(true), children: [recipientAddress ? (_jsxs("div", { className: "flex items-center gap-2", children: [recipientImageUrl && (_jsx("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), _jsxs("div", { className: "flex flex-col items-start gap-1", children: [recipientEnsName && _jsxs("span", { children: ["@", recipientEnsName] }), _jsx("span", { children: centerTruncate(recipientAddress) })] })] })) : (_jsx("div", { className: "text-b3-react-foreground/60 flex items-center gap-2", children: _jsx("span", { children: "Select address" }) })), _jsx(ChevronRightCircle, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) })] }, recipientAddress)) : null;
+                            : "Recipient" }), _jsxs("div", { className: "flex items-center gap-2", children: [recipientAddress ? (_jsx("button", { className: cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsxs(_Fragment, { children: [recipientProfile && (_jsx("img", { src: recipientProfile.data?.avatar || "", alt: recipientProfile.data?.name || "", className: "bg-b3-react-foreground size-6 rounded-full object-cover opacity-100" })), _jsxs("div", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: [recipientName && _jsx("span", { children: formatUsername(recipientName) }), _jsx("span", { children: shortenAddress(recipientAddress) })] })] }) })) : (_jsx("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx("div", { className: "text-sm font-medium", children: "Select recipient" }) })), _jsx(ChevronRight, { className: "h-4 w-4" })] })] }, recipientAddress)) : null;
     const historyView = (_jsx("div", { className: cn("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: _jsx(OrderHistory, { mode: mode, onBack: () => {
                 setActivePanel(PanelView.HISTORY);
             }, onSelectOrder: onSelectOrder }) }));
-    const orderDetailsView = (_jsxs("div", { className: cn("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background"), children: [oat && (_jsxs(_Fragment, { children: [_jsx(OrderStatusDisplay, { order: oat.data.order }), _jsx(OrderDetails, { isMainnet: isMainnet, mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, onBack: () => {
+    const orderDetailsView = (_jsxs("div", { className: cn("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background rounded-xl"), children: [oat && (_jsxs(_Fragment, { children: [_jsx(OrderStatusDisplay, { order: oat.data.order }), _jsx(OrderDetails, { isMainnet: isMainnet, mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: activeTab === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, onBack: () => {
                             setOrderId(undefined);
                             setActivePanel(PanelView.CONFIRM_ORDER);
                             // Remove orderId from URL when canceling
@@ -368,66 +423,86 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
                         } })] })), mode === "page" && _jsx("div", { className: "h-12" })] }));
     const loadingView = (_jsxs("div", { className: cn("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background"), children: [_jsxs(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: [_jsx(Loader2, { className: "text-b3-react-foreground size-4 animate-spin" }), _jsx(TextShimmer, { duration: 1, className: "font-sf-rounded text-base font-semibold", children: "Loading..." })] }), _jsxs("div", { className: "flex w-full flex-1 flex-col", children: [_jsxs("div", { className: "mb-4 flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsxs("div", { className: "mt-2 flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-8 w-48" }), _jsx(Skeleton, { className: "ml-4 h-8 w-32" })] }), _jsx(Skeleton, { className: "mt-4 h-8 w-24" })] }), _jsx(Skeleton, { className: "mb-4 h-12 w-full" }), _jsxs("div", { className: "flex w-full items-center justify-between gap-4", children: [_jsxs(Skeleton, { className: "rounded-lg bg-white/5 p-6 pb-3", children: [_jsx("div", { className: "size-[200px]" }), _jsx("div", { className: "mt-3 flex items-center justify-center gap-2", children: _jsx("div", { className: "size-5 rounded-full" }) })] }), _jsx("div", { className: "flex flex-1 flex-col gap-2", children: [1, 2, 3].map(i => (_jsx(Skeleton, { className: "h-10 w-full" }, i))) })] })] }), _jsxs("div", { className: "bg-b3-react-muted/30 mt-8 w-full rounded-lg p-4", children: [_jsx(Skeleton, { className: "mb-3 h-4 w-48" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Skeleton, { className: "h-10 flex-1" }), _jsx(Skeleton, { className: "h-10 flex-1" })] })] }), _jsx("div", { className: "flex w-full flex-col gap-3", children: [1, 2, 3, 4, 5].map(i => (_jsxs("div", { className: "flex w-full justify-between", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsx(Skeleton, { className: "h-4 w-32" })] }, i))) }), _jsx(Skeleton, { className: "h-10 w-full" }), mode === "page" && _jsx("div", { className: "h-12" })] }));
     // Confirm order view.
-    const confirmOrderView = (_jsxs("div", { className: "relative mx-auto flex w-full flex-col items-center", children: [header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote }), _jsx("div", { className: "divider w-full" }), _jsxs(Tabs, { value: activeTab, onValueChange: value => setActiveTab(value), className: "bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5", children: [_jsxs(TabsList, { hideGradient: true, className: "justify-center", children: [_jsx(TabTrigger, { value: "crypto", children: _jsx("span", { className: "text-as-primary w-[140px]", children: "Pay with crypto" }) }), isOnrampSupported ? (_jsx(TabTrigger, { value: "fiat", children: _jsx("span", { className: "text-as-primary w-[140px]", children: "Pay with fiat" }) })) : (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(TabTrigger, { value: "fiat", disabled: true, children: _jsx("span", { className: "text-as-primary w-[140px]", children: "Pay with fiat" }) }) }), _jsx(TooltipContent, { children: _jsx("span", { className: "text-as-primary w-[140px]", children: "Fiat payments are not supported for this amount" }) })] }))] }), _jsx(TabsContent, { value: "crypto", children: _jsxs("div", { className: "mt-2 flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(motion.div, { initial: false, animate: {
+    const confirmOrderView = (_jsxs("div", { className: "relative mx-auto flex w-full flex-col items-center", children: [header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote }), _jsxs(Tabs, { value: activeTab, onValueChange: value => setActiveTab(value), className: "bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5", children: [_jsx("div", { className: "w-full", children: _jsxs("div", { className: "bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl", children: [_jsx("div", { className: cn("bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100", "h-full w-1/2", activeTab === "fiat" ? "translate-x-full" : "translate-x-0"), style: { willChange: "transform" } }), _jsx("button", { className: cn("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
+                                        setActiveTab("crypto");
+                                        setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE);
+                                        setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
+                                    }, children: "Pay with crypto" }), isOnrampSupported ? (_jsx("button", { className: cn("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "fiat" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
+                                        setActiveTab("fiat");
+                                        setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE);
+                                        setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
+                                    }, children: "Pay with fiat" })) : (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { className: 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" }) }), _jsx(TooltipContent, { children: _jsx("span", { className: "text-as-primary w-[140px]", children: "Fiat payments are not supported for this amount" }) })] }))] }) }), _jsx(TabsContent, { value: "crypto", children: _jsxs("div", { className: "mt-2 flex flex-col gap-6", children: [_jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary flex w-full flex-col gap-4 rounded-xl border p-4", children: [_jsxs(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: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [connectedAddress ? (_jsxs(_Fragment, { children: [connectedProfile?.data?.avatar && (_jsx("img", { src: connectedProfile.data?.avatar || "", alt: "Connected Wallet", className: "bg-as-primary h-6 w-6 rounded-full" })), _jsxs("span", { className: "text-as-tertiarry flex items-center gap-1", children: [connectedName && _jsx("span", { children: formatUsername(connectedName) }), _jsx("span", { children: shortenAddress(connectedAddress || "") })] })] })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(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: [_jsx("div", { className: "text-as-tertiarry text-sm", children: "Pay with" }), _jsx(OrderToken, { address: currentWallet?.wallet?.address, context: "from", chainId: srcChainId, setChainId: setSrcChainId, token: srcToken, setToken: token => {
+                                                                setDirtySelectSrcToken(true);
+                                                                setSrcToken(token);
+                                                            }, requiredAmount: srcAmount || undefined })] }), _jsx("div", { className: "divider w-full" }), _jsxs(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: [_jsxs("span", { className: "text-as-tertiarry text-sm", children: ["Total ", _jsx("span", { className: "text-as-tertiarry", children: "(with fee)" })] }), _jsxs("span", { className: "text-as-primary font-semibold", children: [formattedSrcAmount || "--", " ", srcToken.symbol] })] })] })] }), _jsx("div", { className: cn("flex w-full flex-col items-center justify-between gap-2"), children: _jsx(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: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", disabled: isCreatingOrder || isLoadingAnyspendQuote || !anyspendQuote, onClick: () => handleConfirmOrder(), className: "relative w-full", children: isCreatingOrder ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { children: "Loading quote..." })] })) : !recipientAddress ? ("Select recipient") : selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE ? ("Choose payment method") : anyspendQuote ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "Checkout" }), _jsx(ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : ("No quote found") }) }) })] }) }), _jsx(TabsContent, { value: "fiat", children: _jsxs("div", { className: "mt-2 flex flex-col gap-6", children: [_jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary flex w-full flex-col gap-4 rounded-xl border p-4", children: [_jsxs(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: [_jsx("div", { className: "font-medium", children: "Pay with" }), _jsx(OrderToken, { address: currentWallet?.wallet?.address, context: "from", chainId: srcChainId, setChainId: setSrcChainId, token: srcToken, setToken: token => {
-                                                        setDirtySelectSrcToken(true);
-                                                        setSrcToken(token);
-                                                    }, requiredAmount: srcAmount || undefined })] }), _jsxs(motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), _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.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs(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: [_jsxs("span", { className: "font-medium", children: ["Total ", _jsx("span", { className: "text-sm text-gray-500", children: "(with fee)" })] }), _jsxs("h2", { className: cn("text-as-primary text-2xl font-semibold"), children: [formattedSrcAmount || "--", " ", srcToken.symbol] })] })] }), recipientSection, _jsx("div", { className: cn("flex w-full flex-col items-center justify-between gap-2"), children: _jsx(motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsxs("span", { className: "text-as-tertiarry text-sm", children: ["Total ", _jsx("span", { className: "text-as-tertiarry", children: "(USD)" })] }), _jsxs("span", { className: "text-as-primary text-xl font-semibold", children: ["$", srcFiatAmount || "0.00"] })] })] }), _jsx("div", { className: cn("flex w-full flex-col items-center justify-between gap-2"), children: _jsx(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: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", disabled: isCreatingOrder || isLoadingAnyspendQuote || !anyspendQuote || !recipientAddress, onClick: () => handleConfirmOrder(), className: "relative w-full", children: isCreatingOrder ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { children: "Loading quote..." })] })) : anyspendQuote && recipientAddress ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "Checkout" }), _jsx(ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : recipientAddress ? ("No quote found") : ("Please select a recipient") }) }) })] }) }), _jsx(TabsContent, { value: "fiat", children: _jsx("div", { className: "mt-6 flex w-full flex-col gap-6", children: _jsx(PanelOnrampPayment, { srcAmountOnRamp: srcAmount ? formatUnits(srcAmount.toString(), 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: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", disabled: isCreatingOrder || isLoadingAnyspendQuote || !anyspendQuote, onClick: () => {
+                                                if (selectedFiatPaymentMethod !== FiatPaymentMethod.NONE) {
+                                                    handleFiatOrder(selectedFiatPaymentMethod);
+                                                }
+                                                else {
+                                                    handleConfirmOrder();
+                                                }
+                                            }, className: "relative w-full", children: isCreatingOrder ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { children: "Loading quote..." })] })) : !recipientAddress ? ("Select recipient") : selectedFiatPaymentMethod === FiatPaymentMethod.NONE ? ("Select payment method") : anyspendQuote ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "Buy" }), _jsx(ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : ("No quote found") }) }) })] }) })] })] }));
+    // Recipient selection view
+    const recipientSelectionView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(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 = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(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 = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(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 (_jsxs(StyleRoot, { children: [_jsx(TransitionPanel, { activeIndex: orderId
-                    ? oat
-                        ? PanelView.ORDER_DETAILS
-                        : PanelView.LOADING
-                    : activePanel === PanelView.ORDER_DETAILS
-                        ? PanelView.CONFIRM_ORDER
-                        : activePanel, className: 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: [
-                    _jsx("div", { className: "w-full", children: confirmOrderView }, "edit-recipient-view"),
-                    _jsx("div", { className: "w-full", children: historyView }, "history-view"),
-                    _jsx("div", { className: "w-full", children: orderDetailsView }, "order-details-view"),
-                    _jsx("div", { className: "w-full", children: loadingView }, "loading-view"),
-                ] }), _jsx(Dialog, { open: isRecipientModalOpen, onOpenChange: setIsRecipientModalOpen, children: _jsx(DialogContent, { className: "w-[420px] max-w-[calc(100vw-32px)] rounded-2xl p-3.5", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { className: "text-as-primary font-semibold", children: "To address" }), _jsx(Input, { value: customRecipientAddress || "", onChange: e => setCustomRecipientAddress(e.target.value), placeholder: "Enter address", className: "h-12 rounded-lg", spellCheck: false }), _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "w-full rounded-lg", onClick: () => {
-                                    setIsRecipientModalOpen(false);
-                                }, children: "Save" })] }) }) })] }));
+    return (_jsx(StyleRoot, { children: _jsx(TransitionPanel, { activeIndex: orderId
+                ? oat
+                    ? PanelView.ORDER_DETAILS
+                    : PanelView.LOADING
+                : activePanel === PanelView.ORDER_DETAILS
+                    ? PanelView.CONFIRM_ORDER
+                    : activePanel, className: 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: [
+                _jsx("div", { className: "w-full", children: confirmOrderView }, "confirm-order-view"),
+                _jsx("div", { className: "w-full", children: historyView }, "history-view"),
+                _jsx("div", { className: "w-full", children: orderDetailsView }, "order-details-view"),
+                _jsx("div", { className: "w-full", children: loadingView }, "loading-view"),
+                _jsx("div", { className: "w-full", children: recipientSelectionView }, "recipient-selection-view"),
+                _jsx("div", { className: "w-full", children: cryptoPaymentMethodView }, "crypto-payment-method-view"),
+                _jsx("div", { className: "w-full", children: fiatPaymentMethodView }, "fiat-payment-method-view"),
+            ] }) }));
 }

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

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

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

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

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

@@ -80,7 +80,7 @@ export function AnySpendNFT({ isMainnet = true, loadOrder, mode = "modal", recip
         }
         fetchContractMetadata();
     }, [nftContract.contractAddress, nftContract.chainId, nftContract.imageUrl, nftContract.tokenId]);
-    const header = ({ anyspendPrice, isLoadingAnyspendPrice, }) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative size-[200px]", children: [_jsx("div", { className: "absolute inset-0 scale-95 bg-black/30 blur-md" }), _jsxs(GlareCard, { className: "overflow-hidden", children: [imageUrlWithFallback && (_jsx("img", { src: imageUrlWithFallback, alt: nftContract.name, className: "size-full object-cover" })), _jsx("div", { className: "absolute inset-0 rounded-xl border border-white/10" })] }), _jsx(DropdownMenu, { nftContract: nftContract })] }), _jsxs("div", { className: "from-b3-react-background to-as-on-surface-1 mt-[-100px] w-full rounded-t-lg bg-gradient-to-t", children: [_jsx("div", { className: "h-[100px] w-full" }), _jsxs("div", { className: "mb-1 flex w-full flex-col items-center gap-2 p-5", children: [_jsx("span", { className: "font-sf-rounded text-2xl font-semibold", children: nftContract.name }), _jsx("div", { className: "flex w-fit items-center gap-1", children: anyspendPrice ? (_jsx(AnimatePresence, { mode: "wait", children: _jsx("div", { className: cn("text-as-primary group flex items-center text-3xl font-semibold transition-all", {
+    const header = ({ anyspendPrice, isLoadingAnyspendPrice, }) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative size-[200px]", children: [_jsx("div", { className: "absolute inset-0 scale-95 bg-black/30 blur-md" }), _jsxs(GlareCard, { className: "overflow-hidden", children: [imageUrlWithFallback && (_jsx("img", { src: imageUrlWithFallback, alt: nftContract.name, className: "size-full object-cover" })), _jsx("div", { className: "absolute inset-0 rounded-xl border border-white/10" })] }), _jsx(DropdownMenu, { nftContract: nftContract })] }), _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: [_jsx("div", { className: "h-[100px] w-full" }), _jsxs("div", { className: "mb-1 flex w-full flex-col items-center gap-2 p-5", children: [_jsx("span", { className: "font-sf-rounded text-2xl font-semibold", children: nftContract.name }), _jsx("div", { className: "flex w-fit items-center gap-1", children: anyspendPrice ? (_jsx(AnimatePresence, { mode: "wait", children: _jsx("div", { className: cn("text-as-primary group flex items-center text-3xl font-semibold transition-all", {
                                             "opacity-0": isLoadingAnyspendPrice,
                                         }), children: formatDisplayNumber(anyspendPrice?.data?.currencyIn?.amountUsd, { style: "currency" }) }) })) : (_jsx("div", { className: "h-[36px] w-full" })) })] })] })] }));
     return (_jsx(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/esm/anyspend/react/components/common/ConnectWalletPayment.js

@@ -40,7 +40,7 @@ export default function ConnectWalletPayment({ order, onPayment, txLoading, isSw
     if (!srcToken || !dstToken) {
         return _jsx("div", { children: "Loading..." });
     }
-    return (_jsxs("div", { className: "flex w-full flex-col items-center gap-6", children: [_jsx(StepProgress, { steps: steps, currentStepIndex: 1 }), _jsxs(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: [_jsx(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 ? (_jsxs(_Fragment, { children: ["Transaction Pending", _jsx(Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap pl-4 text-lg md:text-sm", children: order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
+    return (_jsxs("div", { className: "flex w-full flex-col items-center gap-6", children: [_jsx(StepProgress, { steps: steps, currentStepIndex: 1 }), _jsxs(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: [_jsx(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 ? (_jsxs(_Fragment, { children: ["Transaction Pending", _jsx(Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap pl-4 text-lg md:text-sm", children: order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
                                         ? "Pay from Phantom Wallet"
                                         : "Pay from Connected Wallet" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) }), _jsx("div", { className: "mt-4", children: _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }) })] })] }));
 }

package/dist/esm/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 {};