@b3dotfun/sdk 0.0.1-alpha.1

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

@@ -0,0 +1,59 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OrderToken = OrderToken;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const anyspend_1 = require("../../../../anyspend");
+const button_1 = require("../../../../global-account/react/components/ui/button");
+const useAccountWallet_1 = require("../../../../global-account/react/hooks/useAccountWallet");
+const useTokenBalancesByChain_1 = require("../../../../global-account/react/hooks/useTokenBalancesByChain");
+const utils_1 = require("../../../../shared/utils");
+const number_1 = require("../../../../shared/utils/number");
+const simplehash_1 = require("../../../../shared/utils/simplehash");
+const relay_kit_ui_1 = require("@reservoir0x/relay-kit-ui");
+const lucide_react_1 = require("lucide-react");
+const react_1 = require("react");
+const ChainTokenIcon_1 = require("./ChainTokenIcon");
+function OrderToken({ context, address, chainId, setChainId, token, setToken, requiredAmount, tokenSelectClassName }) {
+    const { wallet } = (0, useAccountWallet_1.useAccountWallet)();
+    const chainName = (0, react_1.useMemo)(() => (0, simplehash_1.simpleHashChainToChainName)(chainId), [chainId]);
+    const { nativeTokens, fungibleTokens } = (0, useTokenBalancesByChain_1.useTokenBalancesByChain)({
+        address: wallet?.address || "",
+        chainsIds: [chainId],
+        enabled: !!wallet?.address && !!chainName
+    });
+    const { formattedBalance, hasEnoughBalance } = (0, react_1.useMemo)(() => {
+        // Get balance for the selected token
+        let balance = null;
+        if (token && wallet?.address) {
+            if (token.address === anyspend_1.RELAY_ETH_ADDRESS) {
+                // Native token
+                const nativeToken = nativeTokens?.find(t => t.chainId === chainId);
+                balance = nativeToken?.value ?? null;
+            }
+            else {
+                // ERC20 token
+                const fungibleToken = fungibleTokens?.find(t => t.token_address?.toLowerCase() === token.address.toLowerCase());
+                balance = fungibleToken?.balance ? BigInt(fungibleToken.balance) : null;
+            }
+        }
+        // Check if balance is sufficient for the required amount
+        const hasEnoughBalance = balance && requiredAmount ? balance >= requiredAmount : false;
+        const formattedBalance = balance ? (0, number_1.formatTokenAmount)(balance, token.decimals, 6, false) : null;
+        return {
+            formattedBalance,
+            hasEnoughBalance
+        };
+    }, [chainId, fungibleTokens, nativeTokens, requiredAmount, token, wallet?.address]);
+    return ((0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { address: address, chainIdsFilter: Object.values(anyspend_1.ALL_CHAINS).map(chain => chain.id), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: Object.values(anyspend_1.ALL_CHAINS).map(chain => chain.id), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID], restrictedToken: undefined, setToken: token => {
+            setChainId(token.chainId);
+            setToken({
+                address: token.address,
+                chainId,
+                decimals: token.decimals,
+                metadata: { logoURI: token.logoURI },
+                name: token.name,
+                symbol: token.symbol
+            });
+        }, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: (0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "outline", role: "combobox", className: (0, utils_1.cn)("bg-b3-react-background border-as-stroke flex h-auto w-fit shrink-0 items-center justify-center gap-2 rounded-xl border-2 px-2 py-1 pr-2 text-center", tokenSelectClassName), children: [token.metadata.logoURI ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[chainId].logoUrl, tokenUrl: token.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary font-semibold", children: [token.symbol, " on ", anyspend_1.ALL_CHAINS[chainId].name] }), formattedBalance && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/50 text-xs", children: [formattedBalance || "--", " ", token.symbol] }), hasEnoughBalance && (0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { className: "text-as-brand -mt-0.5 h-4 w-4" })] }))] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) }, undefined));
+}

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

@@ -0,0 +1,18 @@
+import { Token } from "../../../../anyspend";
+export declare function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect, canEditAmount, className, innerClassName, amountClassName, tokenSelectClassName }: {
+    disabled?: boolean;
+    inputValue: string;
+    onChangeInput: (value: string) => void;
+    context: "from" | "to";
+    address: string | undefined;
+    token: Token;
+    setToken: (token: Token) => void;
+    chainId: number;
+    setChainId: (chainId: number) => void;
+    hideTokenSelect?: boolean;
+    canEditAmount?: boolean;
+    className?: string;
+    innerClassName?: string;
+    amountClassName?: string;
+    tokenSelectClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,50 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OrderTokenAmount = OrderTokenAmount;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const react_1 = require("react");
+const react_number_format_1 = require("react-number-format");
+const anyspend_1 = require("../../../../anyspend");
+const button_1 = require("../../../../global-account/react/components/ui/button");
+const utils_1 = require("../../../../shared/utils");
+const relay_kit_ui_1 = require("@reservoir0x/relay-kit-ui");
+const ChainTokenIcon_1 = require("./ChainTokenIcon");
+function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect = false, canEditAmount = true, className, innerClassName, amountClassName, tokenSelectClassName }) {
+    // Track previous token to detect changes
+    const prevTokenRef = (0, react_1.useRef)(token.address);
+    (0, react_1.useEffect)(() => {
+        // Only trigger when token actually changes
+        if (prevTokenRef.current !== token.address) {
+            console.log(`Token changed from ${prevTokenRef.current} to ${token.address}`);
+            // For "from" context, reset to default value when token changes
+            if (context === "from") {
+                // Reset input to default for new token
+                onChangeInput("0.01");
+            }
+            // Update ref to current token
+            prevTokenRef.current = token.address;
+        }
+    }, [token.address, chainId, context, onChangeInput]);
+    const handleTokenSelect = (newToken) => {
+        // Mark that we're about to change tokens
+        prevTokenRef.current = "changing"; // Temporary value to force effect
+        // Set the chain ID first
+        setChainId(newToken.chainId);
+        // Then set the new token
+        setToken({
+            address: newToken.address,
+            chainId: newToken.chainId, // Use the new chain ID
+            decimals: newToken.decimals,
+            metadata: { logoURI: newToken.logoURI },
+            name: newToken.name,
+            symbol: newToken.symbol
+        });
+        // If this is the source token, reset the amount immediately
+        if (context === "from") {
+            onChangeInput("0.01");
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("border-as-stroke flex w-full flex-col gap-2 rounded-xl", className), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center justify-between gap-3", innerClassName), children: [!canEditAmount ? ((0, jsx_runtime_1.jsx)("h2", { className: (0, utils_1.cn)("text-3xl font-medium text-white", amountClassName), children: inputValue || "--" })) : ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 30, spellCheck: "false", className: (0, utils_1.cn)("placeholder:text-as-primary/70 disabled:text-as-primary/70 text-as-primary w-full bg-transparent text-4xl font-semibold leading-[42px] outline-none sm:text-[30px]", amountClassName), pattern: "^[0-9]*[.,]?[0-9]*$", disabled: disabled, value: inputValue, allowNegative: false, onChange: e => onChangeInput(e.currentTarget.value) }, `input-${token.address}-${chainId}`)), !hideTokenSelect && ((0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { address: address, chainIdsFilter: Object.values(anyspend_1.ALL_CHAINS).map(chain => chain.id), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: Object.values(anyspend_1.ALL_CHAINS).map(chain => chain.id), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID], restrictedToken: undefined, setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: (0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "outline", role: "combobox", className: (0, utils_1.cn)("bg-b3-react-background border-as-stroke flex h-auto w-fit shrink-0 items-center justify-center gap-2 rounded-xl border-2 px-2 py-1 pr-2 text-center", tokenSelectClassName), children: [token.metadata.logoURI ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[chainId].logoUrl, tokenUrl: token.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: token.symbol }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/70 text-xs", children: anyspend_1.ALL_CHAINS[chainId].name })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) }, `selector-${context}-${token.address}-${chainId}`))] }) }, `${context}-${token.address}-${chainId}`));
+}

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

@@ -0,0 +1,4 @@
+export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp }: {
+    srcAmountOnRamp: string;
+    setSrcAmountOnRamp: (amount: string) => void;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelOnramp = PanelOnramp;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const anyspend_1 = require("../../../../anyspend");
+const input_1 = require("../../../../global-account/react/components/ui/input");
+const useGetGeo_1 = __importDefault(require("../../../../global-account/react/hooks/useGetGeo"));
+const framer_motion_1 = require("framer-motion");
+const react_1 = require("react");
+const sonner_1 = require("sonner");
+const PaymentOptions_1 = require("./PaymentOptions");
+function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp }) {
+    // Get geo data for onramp availability
+    const { geoData } = (0, useGetGeo_1.default)();
+    const { coinbaseOnrampOptions } = (0, anyspend_1.useCoinbaseOnrampOptions)(true, geoData?.country || "US");
+    const amountInputRef = (0, react_1.useRef)(null);
+    const handleAmountChange = (e) => {
+        // Only allow numbers and decimal points
+        const value = e.target.value.replace(/[^0-9.]/g, "");
+        // Get the max limit from payment currencies
+        const maxLimit = coinbaseOnrampOptions?.paymentCurrencies?.[0]?.limits?.find(l => l.id === "ACH_BANK_ACCOUNT")?.max || "25000";
+        const numValue = parseFloat(value);
+        if (!Number.isNaN(numValue) && numValue > parseFloat(maxLimit)) {
+            sonner_1.toast.error(`Maximum amount is $${maxLimit}`);
+            setSrcAmountOnRamp(maxLimit);
+            return;
+        }
+        setSrcAmountOnRamp(value);
+    };
+    const handleQuickAmount = (value) => {
+        setSrcAmountOnRamp(value);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 relative flex w-full flex-col gap-4 rounded-2xl p-4 pb-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex h-7 w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50 flex items-center text-sm", children: "Buy" }), (0, jsx_runtime_1.jsx)(PaymentOptions_1.PaymentOptions, {})] }), (0, jsx_runtime_1.jsxs)("div", { className: "hover:bg-as-brand/30 hover:border-as-brand border-as-stroke relative flex w-full flex-col items-center justify-center rounded-lg border transition-all duration-200", children: [parseFloat(srcAmountOnRamp) >
+                        (coinbaseOnrampOptions?.paymentCurrencies?.[0]?.limits?.find(l => l.id === "ACH_BANK_ACCOUNT")?.max
+                            ? parseFloat(coinbaseOnrampOptions.paymentCurrencies[0].limits.find(l => l.id === "ACH_BANK_ACCOUNT")?.max || "25000")
+                            : 25000) ? ((0, jsx_runtime_1.jsxs)("p", { className: "label-style -mb-3 mt-3 text-xs text-red-400 dark:bg-transparent", children: ["Maximum amount is $", coinbaseOnrampOptions?.paymentCurrencies?.[0]?.limits?.find(l => l.id === "ACH_BANK_ACCOUNT")?.max ||
+                                "25,000"] })) : ((0, jsx_runtime_1.jsx)("p", { className: "label-style text-b3-react-foreground/60 -mb-3 mt-3 text-xs dark:bg-transparent", children: "Buy amount in USD" })), (0, jsx_runtime_1.jsxs)("div", { className: "relative inline-flex items-center dark:bg-transparent", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-b3-react-foreground/60 -ms-3 -mt-2 text-2xl font-semibold dark:bg-transparent", children: "$" }), (0, jsx_runtime_1.jsx)(input_1.Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "0.00", className: "placeholder:text-b3-react-foreground/60 h-auto min-w-[70px] border-0 bg-transparent py-6 text-center text-4xl font-semibold focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-transparent", style: {
+                                    width: `${Math.max(50, srcAmountOnRamp.length * 34)}px`,
+                                    minWidth: srcAmountOnRamp ? `auto` : "105px"
+                                } }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { animate: { opacity: !srcAmountOnRamp || parseFloat(srcAmountOnRamp) <= 0 ? 1 : 0 }, exit: { opacity: 0 }, transition: { duration: 0.5, ease: "easeInOut" }, className: "border-b3-react-foreground/10 absolute bottom-3 left-1 h-1 w-[90%] rounded-full border-t-2 border-dashed bg-transparent" }) })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-4 gap-4", children: ["5", "10", "25", "100"].map(value => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleQuickAmount(value), className: `rounded-lg border px-4 py-3 ${srcAmountOnRamp === value
+                        ? "border-as-brand bg-as-brand/30"
+                        : "border-as-stroke hover:border-as-brand hover:bg-as-brand/30"} transition-all duration-200`, children: ["$", value] }, value))) })] }));
+}

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

@@ -0,0 +1,29 @@
+import { GetQuoteResponse, Nft, OrderType, Token, Tournament } from "../../../../anyspend";
+interface PanelOnrampPaymentProps {
+    srcAmountOnRamp: string;
+    recipientName?: string;
+    recipientAddress?: string;
+    isMainnet: boolean;
+    isBuyMode: boolean;
+    destinationTokenChainId?: number;
+    destinationTokenAddress?: string;
+    selectedDstChainId: number;
+    selectedDstToken: Token;
+    anyspendQuote: GetQuoteResponse | undefined;
+    globalAddress?: string;
+    onOrderCreated: (orderId: string) => void;
+    onBack: () => void;
+    orderType: OrderType;
+    nft?: Nft & {
+        price: string;
+    };
+    tournament?: Tournament & {
+        contractAddress: string;
+        entryPriceOrFundAmount: string;
+    };
+    payload?: any;
+    recipientEnsName?: string;
+    recipientImageUrl?: string;
+}
+export declare function PanelOnrampPayment({ srcAmountOnRamp, recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationTokenAddress, selectedDstChainId, selectedDstToken, anyspendQuote, globalAddress, onOrderCreated, onBack, orderType, nft, tournament, payload, recipientEnsName, recipientImageUrl }: PanelOnrampPaymentProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,124 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelOnrampPayment = PanelOnrampPayment;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const anyspend_1 = require("../../../../anyspend");
+const button_1 = require("../../../../global-account/react/components/ui/button");
+const centerTruncate_1 = __importDefault(require("../../../../shared/utils/centerTruncate"));
+const framer_motion_1 = require("framer-motion");
+const invariant_1 = __importDefault(require("invariant"));
+const lucide_react_1 = require("lucide-react");
+const react_1 = require("react");
+const sonner_1 = require("sonner");
+function PanelOnrampPayment({ srcAmountOnRamp, 
+// recipientName,
+recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationTokenAddress, selectedDstChainId, selectedDstToken, anyspendQuote, globalAddress, onOrderCreated, onBack, orderType, nft, tournament, payload, recipientEnsName, recipientImageUrl }) {
+    // Use a stable amount for geo onramp options to prevent unnecessary refetches
+    const [stableAmountForGeo, setStableAmountForGeo] = (0, react_1.useState)(srcAmountOnRamp);
+    const hasInitialized = (0, react_1.useRef)(false);
+    // Only update the stable amount on first render or when explicitly needed
+    (0, react_1.useEffect)(() => {
+        if (!hasInitialized.current && srcAmountOnRamp) {
+            setStableAmountForGeo(srcAmountOnRamp);
+            hasInitialized.current = true;
+        }
+    }, [srcAmountOnRamp]);
+    const { geoData, coinbaseOnrampOptions, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, isStripeWeb2Supported, isLoading: isLoadingGeoOnramp } = (0, anyspend_1.useGeoOnrampOptions)(isMainnet, stableAmountForGeo);
+    const { createOrder, isCreatingOrder } = (0, anyspend_1.useAnyspendCreateOnrampOrder)({
+        onSuccess: data => {
+            const orderId = data.data.id;
+            onOrderCreated(orderId);
+        },
+        onError: error => {
+            console.error(error);
+            sonner_1.toast.error("Failed to create order: " + error.message);
+        }
+    });
+    const handlePaymentMethodClick = async (vendor, paymentMethod) => {
+        try {
+            if (!recipientAddress) {
+                sonner_1.toast.error("Please select a recipient");
+                return;
+            }
+            if (!srcAmountOnRamp || parseFloat(srcAmountOnRamp) <= 0) {
+                sonner_1.toast.error("Please enter a valid amount");
+                return;
+            }
+            if (vendor === anyspend_1.OnrampVendor.Coinbase && !coinbaseOnrampOptions) {
+                sonner_1.toast.error("Onramp options not available");
+                return;
+            }
+            if (vendor === anyspend_1.OnrampVendor.Stripe && !isStripeOnrampSupported) {
+                sonner_1.toast.error("Stripe onramp not available");
+                return;
+            }
+            if (vendor === anyspend_1.OnrampVendor.StripeWeb2 && !isStripeWeb2Supported) {
+                sonner_1.toast.error("Stripe credit card not available");
+                return;
+            }
+            if (!anyspendQuote) {
+                sonner_1.toast.error("Failed to get quote");
+                return;
+            }
+            const getDstToken = () => {
+                if (isBuyMode) {
+                    (0, invariant_1.default)(destinationTokenAddress, "destinationTokenAddress is required");
+                    return {
+                        ...selectedDstToken,
+                        chainId: destinationTokenChainId || selectedDstChainId,
+                        address: destinationTokenAddress
+                    };
+                }
+                return selectedDstToken;
+            };
+            createOrder({
+                isMainnet,
+                recipientAddress,
+                orderType,
+                dstChain: getDstToken().chainId,
+                dstToken: getDstToken(),
+                srcFiatAmount: srcAmountOnRamp,
+                onramp: {
+                    vendor: vendor,
+                    paymentMethod: paymentMethod || "",
+                    country: geoData?.country || "US",
+                    ipAddress: geoData?.ip,
+                    redirectUrl: window.location.origin === "https://basement.fun" ? "https://basement.fun/deposit" : window.location.origin
+                },
+                expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0",
+                creatorAddress: globalAddress,
+                nft,
+                tournament,
+                payload
+            });
+        }
+        catch (err) {
+            console.error(err);
+            sonner_1.toast.error("Failed to create order: " + err.message);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "-mb-3 text-lg font-semibold", children: "Order summary" }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background border-b3-react-border flex flex-col gap-3 rounded-lg border p-4", children: [recipientAddress && ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: false, animate: {
+                                    opacity: 1,
+                                    y: 0,
+                                    filter: "blur(0px)"
+                                }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-foreground/60", children: orderType === anyspend_1.OrderType.Swap
+                                            ? "Recipient"
+                                            : orderType === anyspend_1.OrderType.MintNFT
+                                                ? "Receive NFT at"
+                                                : orderType === anyspend_1.OrderType.JoinTournament
+                                                    ? "Join for"
+                                                    : "Recipient" }), (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-end gap-1", children: [recipientEnsName && (0, jsx_runtime_1.jsxs)("span", { className: "text-b3-react-foreground/80", children: ["@", recipientEnsName] }), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-react-foreground/80", children: (0, centerTruncate_1.default)(recipientAddress) })] })] })] })), (0, jsx_runtime_1.jsx)("div", { className: "border-b3-react-border border-t pt-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-foreground font-semibold", children: "Amount" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-b3-react-foreground hover:text-b3-react-foreground/80 cursor-pointer text-xl font-semibold transition-colors", onClick: onBack, children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] })] }) })] })] }), isCreatingOrder ? ((0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/70", children: "Creating onramp order..." })] })) : isLoadingGeoOnramp ? ((0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/70", children: "Loading payment options..." })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-3 flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-lg font-semibold", children: "Payment method" }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: coinbaseAvailablePaymentMethods.length > 0 &&
+                                    (() => {
+                                        const hasCard = coinbaseAvailablePaymentMethods.some(m => m.id === "CARD");
+                                        const hasApplePay = coinbaseAvailablePaymentMethods.some(m => m.id === "APPLE_PAY");
+                                        const hasBankAccount = coinbaseAvailablePaymentMethods.some(m => m.id === "ACH_BANK_ACCOUNT");
+                                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasCard && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: "https://github.com/marcovoliveira/react-svg-credit-card-payment-icons/raw/main/src/icons/flat-rounded/visa.svg", alt: "Visa", className: "h-5" }), (0, jsx_runtime_1.jsx)("img", { src: "https://github.com/marcovoliveira/react-svg-credit-card-payment-icons/raw/main/src/icons/flat-rounded/mastercard.svg", alt: "Mastercard", className: "h-5" }), (0, jsx_runtime_1.jsx)("img", { src: "https://github.com/marcovoliveira/react-svg-credit-card-payment-icons/raw/main/src/icons/flat-rounded/amex.svg", alt: "Amex", className: "h-5" }), (0, jsx_runtime_1.jsx)("img", { src: "https://github.com/marcovoliveira/react-svg-credit-card-payment-icons/raw/main/src/icons/flat-rounded/discover.svg", alt: "Discover", className: "h-5" })] })), hasApplePay && ((0, jsx_runtime_1.jsx)("img", { src: "https://github.com/Kimmax/react-payment-icons/raw/main/assets/card-icons/card_apple-pay.svg", alt: "Apple Pay", className: "h-5" })), hasBankAccount && (0, jsx_runtime_1.jsx)(lucide_react_1.Landmark, { className: "h-5 w-5" })] }));
+                                    })() })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [coinbaseAvailablePaymentMethods.length > 0 &&
+                                (() => {
+                                    const method = coinbaseAvailablePaymentMethods[0];
+                                    return ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handlePaymentMethodClick(anyspend_1.OnrampVendor.Coinbase, method.id), disabled: isCreatingOrder, className: "bg-b3-react-background border-b3-react-border hover:border-as-brand disabled:hover:border-b3-react-border group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-blue-50", children: (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/coinbase-wordmark-blue.svg", alt: "Coinbase", className: "h-6" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-b3-react-foreground text-lg font-semibold", children: "Coinbase Pay" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-b3-react-foreground/60 text-sm", children: [method.id === "CARD" && "Debit card, bank account, or Coinbase Account", method.id === "FIAT_WALLET" && "Pay with your Coinbase account balance", method.id === "APPLE_PAY" && "Quick payment with Apple Pay", method.id === "ACH_BANK_ACCOUNT" && "Direct bank account transfer"] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-1 flex items-center gap-1", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-green-600", children: "Free" }) })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] }));
+                                })(), isStripeWeb2Supported && ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handlePaymentMethodClick(anyspend_1.OnrampVendor.StripeWeb2), className: "bg-b3-react-background border-b3-react-border hover:border-as-brand group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-purple-50", children: (0, jsx_runtime_1.jsx)("img", { src: "https://raw.githubusercontent.com/stripe/stripe.github.io/455f506a628dc3f6c505e3001db45a64e29e9fc3/images/stripe-logo.svg", alt: "Stripe", className: "h-5" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-b3-react-foreground text-lg font-semibold", children: "Stripe" }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-foreground/60 text-sm", children: "Credit or debit card payment" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-1 flex items-center gap-1", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-orange-600", children: "Fee Applied" }) })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "link", onClick: onBack, className: "text-b3-react-foreground/70 hover:text-b3-react-foreground/90 mt-2 w-full", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "mr-2 h-4 w-4" }), "Back"] })] })] }))] }));
+}

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

@@ -0,0 +1 @@
+export default function PaymentMethodIcons(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = PaymentMethodIcons;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("../../../../anyspend/constants");
+function PaymentMethodIcons() {
+    const paymentMethods = [
+        { name: "Visa", src: constants_1.PAYMENT_METHOD_ICONS.visa },
+        { name: "Mastercard", src: constants_1.PAYMENT_METHOD_ICONS.mastercard },
+        { name: "Amex", src: constants_1.PAYMENT_METHOD_ICONS.amex },
+        { name: "Apple Pay", src: constants_1.PAYMENT_METHOD_ICONS.applePay },
+        { name: "Google Pay", src: constants_1.PAYMENT_METHOD_ICONS.googlePay }
+    ];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "mt-6 flex w-full flex-col items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30 text-xs", children: "Supported payment methods" }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-3", children: paymentMethods.map(method => ((0, jsx_runtime_1.jsx)("img", { src: method.src, alt: method.name, className: "h-6 opacity-70" }, method.name))) })] }));
+}

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

@@ -0,0 +1,7 @@
+import { Order } from "../../../../anyspend";
+interface PaymentOneClickProps {
+    order: Order;
+    dstTokenSymbol: string;
+}
+export default function PaymentOneClick({ order }: PaymentOneClickProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = PaymentOneClick;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ShinyButton_1 = __importDefault(require("../../../../global-account/react/components/ui/ShinyButton"));
+const payment_utils_1 = require("../../../../shared/utils/payment.utils");
+const lucide_react_1 = require("lucide-react");
+const HowItWorks_1 = __importDefault(require("./HowItWorks"));
+function PaymentOneClick({ order }) {
+    const vendor = order.onrampMetadata?.vendor;
+    const vendorName = (0, payment_utils_1.getVendorDisplayName)(vendor);
+    const paymentDescription = (0, payment_utils_1.getPaymentMethodDescription)(vendor);
+    const howItWorksSteps = [
+        {
+            number: 1,
+            description: `Click the link above to pay with ${paymentDescription}`
+        },
+        {
+            number: 2,
+            description: `After payment, you'll be redirected back here, where we continue to execute the order.`
+        }
+    ];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative my-8 flex w-full flex-1 flex-col items-center justify-center", children: [(0, jsx_runtime_1.jsx)("a", { href: order.oneClickBuyUrl || "", target: "_blank", className: "w-4/5", children: (0, jsx_runtime_1.jsx)(ShinyButton_1.default, { accentColor: "hsl(var(--as-brand))", className: "relative w-full py-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative z-10 flex items-center justify-center gap-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-lg font-medium text-white", children: ["Continue to ", vendorName] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-5 w-5 text-white/90" })] }) }) }), (0, jsx_runtime_1.jsx)(HowItWorks_1.default, { steps: howItWorksSteps })] }));
+}

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

@@ -0,0 +1 @@
+export declare function PaymentOptions(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaymentOptions = PaymentOptions;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function PaymentOptions() {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-start gap-3 dark:bg-transparent", children: [(0, jsx_runtime_1.jsx)("img", { src: "https://github.com/marcovoliveira/react-svg-credit-card-payment-icons/raw/main/src/icons/flat-rounded/visa.svg", alt: "Visa", className: "h-6" }), (0, jsx_runtime_1.jsx)("img", { src: "https://github.com/marcovoliveira/react-svg-credit-card-payment-icons/raw/main/src/icons/flat-rounded/mastercard.svg", alt: "Mastercard", className: "h-6" }), (0, jsx_runtime_1.jsx)("img", { src: "https://github.com/marcovoliveira/react-svg-credit-card-payment-icons/raw/main/src/icons/flat-rounded/amex.svg", alt: "Amex", className: "h-6" }), (0, jsx_runtime_1.jsx)("img", { src: "https://github.com/marcovoliveira/react-svg-credit-card-payment-icons/raw/main/src/icons/flat-rounded/discover.svg", alt: "Discover", className: "h-6" }), (0, jsx_runtime_1.jsx)("img", { src: "https://github.com/Kimmax/react-payment-icons/raw/main/assets/card-icons/card_apple-pay.svg", alt: "Apple Pay", className: "h-6" }), (0, jsx_runtime_1.jsx)("img", { src: "https://github.com/Kimmax/react-payment-icons/raw/main/assets/card-icons/card_google-pay.svg", alt: "Google Pay", className: "h-6" })] }));
+}

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

@@ -0,0 +1,8 @@
+import { Order } from "../../../../anyspend";
+interface PaymentStripeWeb2Props {
+    isMainnet: boolean;
+    order: Order;
+    onPaymentSuccess?: (paymentIntent: any) => void;
+}
+export default function PaymentStripeWeb2({ isMainnet, order, onPaymentSuccess }: PaymentStripeWeb2Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,153 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = PaymentStripeWeb2;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const anyspend_1 = require("../../../../anyspend");
+const constants_1 = require("../../../../anyspend/constants");
+const B3Provider_1 = require("../../../../global-account/react/components/B3Provider");
+const ShinyButton_1 = __importDefault(require("../../../../global-account/react/components/ui/ShinyButton"));
+const payment_utils_1 = require("../../../../shared/utils/payment.utils");
+const react_stripe_js_1 = require("@stripe/react-stripe-js");
+const stripe_js_1 = require("@stripe/stripe-js");
+const lucide_react_1 = require("lucide-react");
+const react_1 = require("react");
+const HowItWorks_1 = __importDefault(require("./HowItWorks"));
+const PaymentMethodIcons_1 = __importDefault(require("./PaymentMethodIcons"));
+const stripePromise = (0, stripe_js_1.loadStripe)(constants_1.STRIPE_CONFIG.publishableKey);
+function PaymentStripeWeb2({ isMainnet, order, onPaymentSuccess }) {
+    const { theme } = (0, B3Provider_1.useB3)();
+    const { clientSecret, isLoadingStripeClientSecret, stripeClientSecretError } = (0, anyspend_1.useStripeClientSecret)(isMainnet, order.stripePaymentIntentId);
+    if (isLoadingStripeClientSecret) {
+        return (0, jsx_runtime_1.jsx)(StripeLoadingState, {});
+    }
+    if (stripeClientSecretError) {
+        return (0, jsx_runtime_1.jsx)(StripeErrorState, { error: stripeClientSecretError.message });
+    }
+    return ((0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, { stripe: stripePromise, options: {
+            clientSecret: clientSecret || undefined,
+            appearance: { theme: theme === "light" ? "stripe" : "night" }
+        }, children: (0, jsx_runtime_1.jsx)(StripePaymentForm, { order: order, clientSecret: clientSecret, onPaymentSuccess: onPaymentSuccess }) }));
+}
+function StripeLoadingState() {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "relative my-8 flex w-full flex-1 flex-col items-center justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 flex w-full flex-col items-center justify-center gap-4 rounded-2xl p-8", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-brand/20 flex h-16 w-16 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-brand h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/70 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-lg font-medium", children: "Initializing payment" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 mt-2 text-sm", children: "Setting up secure payment form..." })] })] }) }));
+}
+function StripeErrorState({ error }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "relative my-8 flex w-full flex-1 flex-col items-center justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-red/10 border-as-red/20 flex w-full items-center gap-3 rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-red flex h-6 w-6 shrink-0 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-4 w-4 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-as-red text-sm font-medium", children: ["Error: ", error] })] }) }));
+}
+function StripePaymentForm({ order, clientSecret, onPaymentSuccess }) {
+    const stripe = (0, react_stripe_js_1.useStripe)();
+    const elements = (0, react_stripe_js_1.useElements)();
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [message, setMessage] = (0, react_1.useState)(null);
+    const [amount, setAmount] = (0, react_1.useState)(null);
+    const [stripeReady, setStripeReady] = (0, react_1.useState)(false);
+    const [showHowItWorks, setShowHowItWorks] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (stripe && elements) {
+            setStripeReady(true);
+            console.log("@@stripe-web2-payment:initialized:", JSON.stringify({ orderId: order.id }, null, 2));
+        }
+    }, [stripe, elements, order.id]);
+    (0, react_1.useEffect)(() => {
+        const fetchPaymentIntent = async () => {
+            if (!stripe || !clientSecret)
+                return;
+            try {
+                const paymentIntent = await stripe.retrievePaymentIntent(clientSecret);
+                const amount = paymentIntent.paymentIntent?.amount
+                    ? (0, payment_utils_1.formatStripeAmount)(paymentIntent.paymentIntent.amount)
+                    : null;
+                setAmount(amount);
+            }
+            catch (error) {
+                console.error("@@stripe-web2-payment:retrieve-intent-error:", JSON.stringify(error, null, 2));
+            }
+        };
+        fetchPaymentIntent();
+    }, [clientSecret, stripe]);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!stripe || !elements) {
+            setMessage("Stripe is not initialized");
+            return;
+        }
+        setLoading(true);
+        setMessage(null);
+        try {
+            console.log("@@stripe-web2-payment:confirming-payment:", JSON.stringify({ orderId: order.id }, null, 2));
+            const { error, paymentIntent } = await stripe.confirmPayment({
+                elements,
+                redirect: "if_required"
+            });
+            if (error) {
+                console.error("@@stripe-web2-payment:error:", JSON.stringify(error, null, 2));
+                setMessage(error.message || "An unexpected error occurred.");
+            }
+            else if (paymentIntent && paymentIntent.status === "succeeded") {
+                console.log("@@stripe-web2-payment:success:", JSON.stringify({ orderId: order.id, paymentIntentId: paymentIntent.id }, null, 2));
+                // Payment succeeded without redirect - handle success in the modal
+                setMessage(null);
+                // Add waitingForDeposit=true to query params
+                const currentUrl = new URL(window.location.href);
+                currentUrl.searchParams.set("waitingForDeposit", "true");
+                window.history.replaceState(null, "", currentUrl.toString());
+                // Call the success callback if provided
+                onPaymentSuccess?.(paymentIntent);
+            }
+        }
+        catch (error) {
+            console.error("@@stripe-web2-payment:confirmation-error:", JSON.stringify(error, null, 2));
+            setMessage("Payment failed. Please try again.");
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    if (!stripeReady) {
+        return (0, jsx_runtime_1.jsx)(StripeLoadingState, {});
+    }
+    const stripeElementOptions = {
+        layout: "tabs",
+        defaultValues: {
+            billingDetails: {
+                name: "",
+                email: ""
+            }
+        },
+        fields: {
+            billingDetails: "auto"
+        },
+        wallets: {
+            applePay: "auto",
+            googlePay: "auto"
+        }
+    };
+    const howItWorksSteps = [
+        {
+            number: 1,
+            description: "Enter your payment details securely using Stripe's encrypted form"
+        },
+        {
+            number: 2,
+            description: "Your payment is processed instantly and securely through our payment partner"
+        },
+        {
+            number: 3,
+            description: "After payment confirmation, your order will be processed and completed automatically"
+        }
+    ];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative my-8 flex w-full flex-1 flex-col items-center justify-center", children: [(0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: "w-full space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 w-full rounded-2xl p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-brand/20 flex h-8 w-8 shrink-0 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("svg", { className: "text-as-brand h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" }) }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary text-sm font-medium", children: "Secured by Stripe" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 text-xs", children: "End-to-end encrypted payment" })] })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setShowHowItWorks(true), className: "text-as-primary/60 hover:text-as-primary flex items-center gap-1 text-xs transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HelpCircle, { className: "h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { children: "How it works" })] })] }), amount && ((0, jsx_runtime_1.jsxs)("div", { className: "border-as-stroke border-t pt-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 mb-3 text-sm", children: "Payment Breakdown" }), (() => {
+                                        const originalAmount = Number(order.srcAmount) / 10 ** anyspend_1.USDC_BASE.decimals;
+                                        const finalAmount = Number(amount);
+                                        const calculatedFee = finalAmount - originalAmount;
+                                        return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60", children: "Amount" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary", children: ["$", originalAmount.toFixed(2)] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between text-sm", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60", children: "Processing fee" }), (0, jsx_runtime_1.jsx)(Tooltip, { content: `Credit card companies charge a processing fee of 5.4% + $0.30 for all transactions.\n\nThis fee covers secure payment processing and fraud protection.`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "text-as-primary/40 hover:text-as-primary/60 h-3 w-3 transition-colors" }) })] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary", children: ["$", calculatedFee.toFixed(2)] })] }), (0, jsx_runtime_1.jsx)("div", { className: "border-as-stroke border-t pt-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: "Total Amount" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary text-2xl font-bold", children: ["$", finalAmount.toFixed(2), " USD"] })] }) })] }));
+                                    })()] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 w-full rounded-2xl p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary mb-4 text-lg font-semibold", children: "Payment Details" }), (0, jsx_runtime_1.jsx)(react_stripe_js_1.PaymentElement, { options: stripeElementOptions })] }), message && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-red/10 border-as-red/20 flex w-full items-center gap-3 rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-red flex h-6 w-6 shrink-0 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-4 w-4 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm font-medium", children: message })] })), (0, jsx_runtime_1.jsx)(ShinyButton_1.default, { type: "submit", accentColor: "hsl(var(--as-brand))", disabled: !stripe || !elements || loading, className: "relative w-full py-4 text-lg font-semibold", children: loading ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-current border-t-transparent" }), (0, jsx_runtime_1.jsx)("span", { className: "text-white", children: "Processing Payment..." })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-white", children: "Complete Payment" }), amount && (0, jsx_runtime_1.jsxs)("span", { className: "text-white/90", children: ["$", Number(amount).toFixed(2)] })] })) })] }), showHowItWorks && ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 relative max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded-2xl p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-6 flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-semibold", children: "How it works" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowHowItWorks(false), className: "text-as-primary/60 hover:text-as-primary transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-6 w-6" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsx)(PaymentMethodIcons_1.default, {}), (0, jsx_runtime_1.jsx)(HowItWorks_1.default, { steps: howItWorksSteps })] })] }) }))] }));
+}
+// Add tooltip component
+function Tooltip({ children, content }) {
+    const [isVisible, setIsVisible] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative inline-block", children: [(0, jsx_runtime_1.jsx)("div", { onMouseEnter: () => setIsVisible(true), onMouseLeave: () => setIsVisible(false), className: "cursor-help", children: children }), isVisible && ((0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-full left-1/2 z-50 mb-2 w-80 -translate-x-1/2", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 border-as-stroke text-as-primary rounded-lg border p-3 text-sm shadow-lg", children: [(0, jsx_runtime_1.jsx)("div", { className: "whitespace-pre-line", children: content }), (0, jsx_runtime_1.jsx)("div", { className: "absolute left-1/2 top-full -translate-x-1/2", children: (0, jsx_runtime_1.jsx)("div", { className: "border-t-as-on-surface-1 border-l-4 border-r-4 border-t-4 border-transparent" }) })] }) }))] }));
+}

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

@@ -0,0 +1,8 @@
+import { Order } from "../../../../anyspend";
+interface PaymentVendorUIProps {
+    isMainnet: boolean;
+    order: Order;
+    dstTokenSymbol: string;
+}
+export default function PaymentVendorUI({ isMainnet, order, dstTokenSymbol }: PaymentVendorUIProps): import("react/jsx-runtime").JSX.Element | null;
+export {};