@b3dotfun/sdk 0.0.16 → 0.0.17-alpha.0

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { eqci, getDefaultToken } from "../../../anyspend/index.js";
+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 { formatTokenAmount } from "../../../shared/utils/number.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";
@@ -156,8 +156,8 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
     const getRelayQuoteRequest = useMemo(() => {
         return generateGetRelayQuoteRequest({
             orderType: orderType,
-            srcChainId: srcChainId,
-            srcToken: srcToken,
+            srcChainId: activeTab === "fiat" ? base.id : srcChainId,
+            srcToken: activeTab === "fiat" ? USDC_BASE : srcToken,
             dstChainId: dstChainId,
             dstToken: dstToken,
             dstAmount: dstAmount,
@@ -168,20 +168,21 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
             spenderAddress: spenderAddress,
         });
     }, [
+        activeTab,
         contractAddress,
         dstAmount,
         dstChainId,
         dstToken,
         encodedData,
-        metadata,
+        metadata?.nftContract?.tokenId,
+        metadata?.nftContract?.type,
+        metadata?.type,
         orderType,
         spenderAddress,
         srcChainId,
         srcToken,
     ]);
     const { anyspendQuote, isLoadingAnyspendQuote } = useAnyspendQuote(isMainnet, getRelayQuoteRequest);
-    // Get geo data and onramp options (after quote is available)
-    const { geoData, isOnrampSupported } = useGeoOnrampOptions(isMainnet, anyspendQuote?.data?.currencyIn?.amountUsd || "0");
     const { orderAndTransactions: oat } = useAnyspendOrderAndTransactions(isMainnet, orderId);
     const onSelectOrder = (selectedOrderId) => {
         setActivePanel(PanelView.ORDER_DETAILS);
@@ -191,30 +192,25 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
         params.set("orderId", selectedOrderId);
         router.push(`${window.location.pathname}?${params.toString()}`);
     };
-    const [srcAmount, setSrcAmount] = useState(null);
-    const formattedSrcAmount = srcAmount ? formatTokenAmount(srcAmount, srcToken.decimals, 6, false) : null;
-    // Update the selected src token to USDC and chain to base when the active tab is fiat,
-    // also force not to update srcToken by setting dirtySelectSrcToken to true.
-    useEffect(() => {
-        if (activeTab === "fiat") {
-            setSrcChainId(base.id);
-            setSrcToken(USDC_BASE);
-            setDirtySelectSrcToken(true);
-        }
-    }, [activeTab]);
     // Update dependent amount when relay price changes
-    useEffect(() => {
-        if (anyspendQuote?.data &&
-            anyspendQuote.data.currencyIn?.amount &&
-            anyspendQuote.data.currencyIn?.currency?.decimals) {
-            // Use toPrecision instead of toSignificant
-            const amount = anyspendQuote.data.currencyIn.amount;
-            setSrcAmount(BigInt(amount));
+    const srcAmount = useMemo(() => {
+        if (!anyspendQuote?.data ||
+            !anyspendQuote?.data?.currencyIn?.amount ||
+            !anyspendQuote?.data?.currencyIn?.currency?.decimals)
+            return null;
+        const amount = anyspendQuote.data.currencyIn.amount;
+        if (activeTab === "fiat") {
+            const roundUpAmount = roundUpUSDCBaseAmountToNearest(amount);
+            return BigInt(roundUpAmount);
         }
         else {
-            setSrcAmount(null);
+            return BigInt(amount);
         }
-    }, [anyspendQuote?.data]);
+    }, [activeTab, anyspendQuote?.data]);
+    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);
     useEffect(() => {
         if (oat?.data?.order.status === "executed") {
             console.log("Calling onSuccess");
@@ -248,9 +244,9 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
             const createOrderParams = {
                 isMainnet: isMainnet,
                 orderType: orderType,
-                srcChain: srcChainId,
+                srcChain: activeTab === "fiat" ? base.id : srcChainId,
                 dstChain: dstChainId,
-                srcToken: srcToken,
+                srcToken: activeTab === "fiat" ? USDC_BASE : srcToken,
                 dstToken: dstToken,
                 srcAmount: srcAmount.toString(),
                 recipientAddress,
@@ -299,7 +295,7 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
                 invariant(srcChainId === base.id, "Selected src chain is not base");
                 void createOnrampOrder({
                     ...createOrderParams,
-                    srcFiatAmount: anyspendQuote?.data?.currencyIn?.amountUsd || "0",
+                    srcFiatAmount: srcFiatAmount,
                     onramp: {
                         vendor: onramp.vendor,
                         paymentMethod: onramp.paymentMethod,
@@ -388,7 +384,7 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
                                             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: anyspendQuote?.data?.currencyIn?.amountUsd || "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"
+                                        }, 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",

package/dist/esm/anyspend/react/components/common/ConnectWalletPayment.d.ts

@@ -0,0 +1,15 @@
+import { components } from "../../../../anyspend/types/api";
+type Tournament = components["schemas"]["Tournament"];
+type NFT = components["schemas"]["NFT"];
+interface ConnectWalletPaymentProps {
+    order: components["schemas"]["Order"];
+    onPayment: () => void;
+    onCancel: () => void;
+    txLoading: boolean;
+    isSwitchingOrExecuting: boolean;
+    phantomWalletAddress?: string | null;
+    tournament?: Tournament;
+    nft?: NFT;
+}
+export default function ConnectWalletPayment({ order, onPayment, txLoading, isSwitchingOrExecuting, phantomWalletAddress, tournament, nft, }: ConnectWalletPaymentProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { RELAY_SOLANA_MAINNET_CHAIN_ID } from "../../../../anyspend/index.js";
+import { ShinyButton, useProfile } from "../../../../global-account/react/index.js";
+import { formatTokenAmount } from "../../../../shared/utils/number.js";
+import { motion } from "framer-motion";
+import { ChevronRight, Loader2 } from "lucide-react";
+import { useMemo } from "react";
+import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible.js";
+import { StepProgress } from "./StepProgress.js";
+export default function ConnectWalletPayment({ order, onPayment, txLoading, isSwitchingOrExecuting, phantomWalletAddress, tournament, nft, }) {
+    const profile = useProfile({ address: order.recipientAddress });
+    const recipientName = profile.data?.name?.replace(/\.b3\.fun/g, "");
+    const srcToken = order.metadata.srcToken;
+    const dstToken = order.metadata.dstToken;
+    const expectedDstAmount = order.type === "mint_nft" ||
+        order.type === "join_tournament" ||
+        order.type === "fund_tournament" ||
+        order.type === "custom"
+        ? "0"
+        : order.payload.expectedDstAmount.toString();
+    const formattedExpectedDstAmount = formatTokenAmount(BigInt(expectedDstAmount), dstToken.decimals);
+    const steps = useMemo(() => [
+        {
+            id: 1,
+            title: "Connect Wallet",
+            description: "Connect your wallet to continue",
+        },
+        {
+            id: 2,
+            title: "Awaiting Payment",
+            description: "Send your payment to the address below",
+        },
+        {
+            id: 3,
+            title: "Complete Payment",
+            description: "Finalize your transaction",
+        },
+    ], []);
+    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
+                                        ? "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

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

package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAccountWallet } from "../../../../global-account/react/index.js";
+import { cn } from "../../../../shared/utils/cn.js";
+import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
+import { ChevronLeft, ChevronRightCircle, Wallet, X } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { toast } from "sonner";
+import { useSetActiveWallet } from "thirdweb/react";
+import { useAccount, useConnect, useDisconnect } from "wagmi";
+export var PaymentMethod;
+(function (PaymentMethod) {
+    PaymentMethod["NONE"] = "none";
+    PaymentMethod["CONNECT_WALLET"] = "connect_wallet";
+    PaymentMethod["TRANSFER_CRYPTO"] = "transfer_crypto";
+})(PaymentMethod || (PaymentMethod = {}));
+export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
+    const { connect, connectors, isPending: isConnecting, error: connectError } = useConnect();
+    const wagmiAccount = useAccount();
+    const { address: globalAddress, connectedEOAWallet, isActiveEOAWallet, wallet: globalWallet } = useAccountWallet();
+    const { disconnect } = useDisconnect();
+    const previousAddress = useRef(globalAddress);
+    const setActiveWallet = useSetActiveWallet();
+    // Automatically set EOA wallet as active when available
+    useEffect(() => {
+        if (connectedEOAWallet) {
+            console.log("Setting active wallet", connectedEOAWallet);
+            setActiveWallet(connectedEOAWallet);
+        }
+    }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet]);
+    // Handle wallet connection success
+    useEffect(() => {
+        if (globalAddress && previousAddress.current !== globalAddress) {
+            previousAddress.current = globalAddress;
+            toast.success("Wallet connected successfully");
+            // Automatically select connect wallet method and go back to main view
+            setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
+            onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
+        }
+    }, [globalAddress, setSelectedPaymentMethod, onSelectPaymentMethod]);
+    // Handle connection errors
+    useEffect(() => {
+        if (connectError) {
+            // Handle specific error cases
+            if (connectError.message.includes("Connector already connected")) {
+                // If connector is already connected, just proceed with the flow
+                console.log("Connector already connected, proceeding with selection");
+                // Use wagmi account address or global address
+                if (wagmiAccount.address || globalAddress) {
+                    setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
+                    onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
+                }
+                else {
+                    // Fallback: proceed anyway as the connector reports it's connected
+                    setTimeout(() => {
+                        setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
+                        onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
+                    }, 100);
+                }
+            }
+            else {
+                toast.error(`Failed to connect wallet: ${connectError.message}`);
+            }
+        }
+    }, [connectError, globalAddress, wagmiAccount.address, setSelectedPaymentMethod, onSelectPaymentMethod]);
+    return (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsxs("div", { className: cn("relative flex flex-col gap-10"), children: [_jsx("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: _jsx(ChevronLeft, { className: "h-6 w-6" }) }), _jsx("div", { className: "flex items-center justify-around gap-4", children: _jsx("div", { className: "flex-1 text-center", children: _jsx("h2", { className: "text-as-primary text-lg font-semibold", children: "Choose payment method" }) }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [!globalAddress ? (
+                        // Not connected - show single connect button
+                        _jsxs("button", { onClick: () => {
+                                // Prevent connecting if already connecting or if there's already a connection
+                                if (isConnecting)
+                                    return;
+                                try {
+                                    // Check if wagmi already has a connection
+                                    if (wagmiAccount.isConnected && wagmiAccount.address) {
+                                        // Already connected via wagmi, just proceed with selection
+                                        console.log("Wagmi already connected, proceeding with selection");
+                                        setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
+                                        onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
+                                        return;
+                                    }
+                                    // Check if global address exists (b3 account system)
+                                    if (globalAddress) {
+                                        // Already connected via global account, just proceed with selection
+                                        console.log("Global address already exists, proceeding with selection");
+                                        setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
+                                        onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
+                                        return;
+                                    }
+                                    // Use the first available connector or a preferred one
+                                    const preferredConnector = connectors.find(c => c.name.toLowerCase().includes("metamask")) || connectors[0];
+                                    if (preferredConnector) {
+                                        connect({ connector: preferredConnector });
+                                    }
+                                }
+                                catch (error) {
+                                    console.error("Connection error:", error);
+                                    toast.error("Failed to connect wallet. Please try again.");
+                                }
+                            }, disabled: isConnecting, className: "bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-4 w-4 text-blue-600" }) }), _jsxs("div", { className: "flex flex-col items-start text-left", children: [_jsx("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }), _jsx("p", { className: "text-as-primary/60 text-sm", children: "Connect your wallet to continue" })] })] }), isConnecting ? (_jsx("div", { className: "border-as-primary/20 border-t-as-primary h-5 w-5 animate-spin rounded-full border-2" })) : (_jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" }))] })) : (
+                        // Connected - show wallet info
+                        _jsx("div", { className: "bg-as-surface-primary border-as-border-secondary rounded-xl border", children: _jsxs("div", { className: "flex items-center justify-between p-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [globalWallet?.meta?.icon ? (_jsx("img", { src: globalWallet.meta.icon, alt: "Connected Wallet", className: "h-8 w-8 rounded-full" })) : (_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-green-100", children: _jsx(Wallet, { className: "h-4 w-4 text-green-600" }) })), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: "Connected Wallet" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(globalAddress) })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { onClick: () => {
+                                                    setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
+                                                    onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
+                                                }, className: "bg-as-brand hover:bg-as-brand/90 rounded-lg px-3 py-1.5 text-sm font-medium text-white transition-colors", children: "Use Wallet" }), _jsx("button", { onClick: () => {
+                                                    disconnect();
+                                                    toast.success("Wallet disconnected");
+                                                    if (selectedPaymentMethod === PaymentMethod.CONNECT_WALLET) {
+                                                        setSelectedPaymentMethod(PaymentMethod.NONE);
+                                                    }
+                                                }, className: "text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors", children: _jsx(X, { className: "h-4 w-4" }) })] })] }) })), _jsxs("button", { onClick: () => {
+                                setSelectedPaymentMethod(PaymentMethod.TRANSFER_CRYPTO);
+                                onSelectPaymentMethod(PaymentMethod.TRANSFER_CRYPTO);
+                            }, disabled: isCreatingOrder, className: "bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md", children: [_jsx("div", { className: "flex flex-col items-start text-left", children: _jsx("h4", { className: "text-as-primary font-semibold", children: "Transfer crypto" }) }), _jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] })] })] }) }));
+}

package/dist/esm/anyspend/react/components/common/FiatPaymentMethod.d.ts

@@ -0,0 +1,15 @@
+export declare enum FiatPaymentMethod {
+    NONE = "none",
+    COINBASE_PAY = "coinbase_pay",
+    STRIPE = "stripe"
+}
+interface FiatPaymentMethodProps {
+    selectedPaymentMethod: FiatPaymentMethod;
+    setSelectedPaymentMethod: (method: FiatPaymentMethod) => void;
+    onBack: () => void;
+    onSelectPaymentMethod: (method: FiatPaymentMethod) => void;
+    srcAmountOnRamp: string;
+    isMainnet: boolean;
+}
+export declare function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedPaymentMethod, onBack, onSelectPaymentMethod, srcAmountOnRamp, isMainnet, }: FiatPaymentMethodProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/anyspend/react/components/common/FiatPaymentMethod.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGeoOnrampOptions } from "../../../../anyspend/react/index.js";
+import { cn } from "../../../../shared/utils/cn.js";
+import { ChevronLeft, ChevronRight, Loader2 } from "lucide-react";
+export var FiatPaymentMethod;
+(function (FiatPaymentMethod) {
+    FiatPaymentMethod["NONE"] = "none";
+    FiatPaymentMethod["COINBASE_PAY"] = "coinbase_pay";
+    FiatPaymentMethod["STRIPE"] = "stripe";
+})(FiatPaymentMethod || (FiatPaymentMethod = {}));
+export function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedPaymentMethod, onBack, onSelectPaymentMethod, srcAmountOnRamp, isMainnet, }) {
+    // Helper function to get fees from API data
+    const getFeeFromApi = (paymentMethod) => {
+        switch (paymentMethod) {
+            case FiatPaymentMethod.COINBASE_PAY:
+                // Coinbase doesn't provide fee info in API, use hardcoded $0.02
+                return "0.02";
+            case FiatPaymentMethod.STRIPE:
+                // Get fee from Stripe API response
+                if (stripeWeb2Support && "formattedFeeUsd" in stripeWeb2Support) {
+                    return stripeWeb2Support.formattedFeeUsd;
+                }
+                return null;
+            default:
+                return null; // No fee when no payment method selected
+        }
+    };
+    // Load geo-based onramp options like in PanelOnramp
+    const { coinbaseAvailablePaymentMethods, isStripeOnrampSupported, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = useGeoOnrampOptions(isMainnet, srcAmountOnRamp);
+    // Generate payment methods based on geo availability (like in PanelOnrampPayment)
+    const availablePaymentMethods = [];
+    // Add Coinbase Pay if available
+    if (coinbaseAvailablePaymentMethods.length > 0) {
+        const coinbaseFee = getFeeFromApi(FiatPaymentMethod.COINBASE_PAY);
+        availablePaymentMethods.push({
+            id: FiatPaymentMethod.COINBASE_PAY,
+            name: "Coinbase Pay",
+            description: "Debit card, bank account or Coinbase account",
+            badge: coinbaseFee ? `$${coinbaseFee} fee` : "Lowest Fee",
+            badgeColor: "bg-green-100 text-green-800",
+            available: true,
+        });
+    }
+    // Add Stripe if available
+    if (isStripeOnrampSupported || (stripeWeb2Support && stripeWeb2Support.isSupport)) {
+        const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE);
+        availablePaymentMethods.push({
+            id: FiatPaymentMethod.STRIPE,
+            name: "Stripe",
+            description: "Credit or debit card payment",
+            badge: stripeFee ? `$${stripeFee} fee` : "Standard Fee",
+            badgeColor: "bg-yellow-100 text-yellow-800",
+            available: true,
+        });
+    }
+    // Show loading state while checking geo availability
+    if (isLoadingGeoOnramp) {
+        return (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: _jsx(ChevronLeft, { className: "h-6 w-6" }) }), _jsx("div", { className: "flex-1", children: _jsx("h2", { className: "text-as-primary text-lg font-semibold", children: "Choose payment method" }) })] }), _jsxs("div", { className: "flex items-center justify-center py-8", children: [_jsx(Loader2, { className: "h-6 w-6 animate-spin" }), _jsx("span", { className: "text-as-secondary ml-2 text-sm", children: "Loading payment methods..." })] })] }) }));
+    }
+    return (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: _jsx(ChevronLeft, { className: "h-6 w-6" }) }), _jsx("div", { className: "flex-1", children: _jsx("h2", { className: "text-as-primary text-lg font-semibold", children: "Choose payment method" }) })] }), _jsx("div", { className: "flex flex-col gap-3", children: availablePaymentMethods.length === 0 ? (_jsx("div", { className: "bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-6 text-center", children: _jsx("p", { className: "text-as-secondary text-sm", children: "No payment methods available in your region for the selected amount." }) })) : (availablePaymentMethods.map(method => (_jsxs("button", { onClick: () => {
+                            setSelectedPaymentMethod(method.id);
+                            onSelectPaymentMethod(method.id);
+                        }, className: cn("bg-as-surface-secondary border-as-border-secondary flex w-full items-center gap-4 rounded-2xl border p-4 transition-all duration-200", selectedPaymentMethod === method.id
+                            ? "border-as-brand bg-as-brand/10"
+                            : "hover:border-as-brand/50 hover:bg-as-brand/5"), children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-blue-600 text-2xl text-white", children: method.id === FiatPaymentMethod.COINBASE_PAY ? "C" : "S" }), _jsxs("div", { className: "flex flex-1 flex-col items-start text-left", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-as-primary text-base font-semibold", children: method.name }), _jsx("span", { className: cn("rounded-full px-2 py-1 text-xs font-medium", method.badgeColor), children: method.badge })] }), _jsx("span", { className: "text-as-primary/60 text-sm", children: method.description })] }), selectedPaymentMethod === method.id && _jsx(ChevronRight, { className: "text-as-brand h-5 w-5" })] }, method.id)))) })] }) }));
+}

package/dist/esm/anyspend/react/components/common/OrderDetails.d.ts

@@ -1,4 +1,5 @@
 import { components } from "../../../../anyspend/types/api";
+import { PaymentMethod } from "./CryptoPaymentMethod";
 interface OrderDetailsProps {
     isMainnet: boolean;
     mode?: "modal" | "page";
@@ -7,6 +8,7 @@ interface OrderDetailsProps {
     relayTx: components["schemas"]["RelayTx"] | null;
     executeTx: components["schemas"]["ExecuteTx"] | null;
     refundTxs: components["schemas"]["RefundTx"][] | null;
+    paymentMethod?: PaymentMethod;
     onBack?: () => void;
 }
 export declare const OrderDetails: import("react").NamedExoticComponent<OrderDetailsProps>;