@b3dotfun/sdk 0.0.1-alpha.1

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

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronsUpDown } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { NumericFormat } from "react-number-format";
+import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID } from "../../../../anyspend";
+import { Button } from "../../../../global-account/react/components/ui/button";
+import { cn } from "../../../../shared/utils";
+import { TokenSelector } from "@reservoir0x/relay-kit-ui";
+import { ChainTokenIcon } from "./ChainTokenIcon";
+export 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 = useRef(token.address);
+    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 (_jsx("div", { className: cn("border-as-stroke flex w-full flex-col gap-2 rounded-xl", className), children: _jsxs("div", { className: cn("flex items-center justify-between gap-3", innerClassName), children: [!canEditAmount ? (_jsx("h2", { className: cn("text-3xl font-medium text-white", amountClassName), children: inputValue || "--" })) : (_jsx(NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 30, spellCheck: "false", className: 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 && (_jsx(TokenSelector, { address: address, chainIdsFilter: Object.values(ALL_CHAINS).map(chain => chain.id), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: Object.values(ALL_CHAINS).map(chain => chain.id), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID], restrictedToken: undefined, setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: _jsxs(Button, { variant: "outline", role: "combobox", className: 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 ? (_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[chainId].logoUrl, tokenUrl: token.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : (_jsx("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), _jsxs("div", { className: "flex flex-col items-start gap-0", children: [_jsx("div", { className: "text-as-primary font-semibold", children: token.symbol }), _jsx("div", { className: "text-as-primary/70 text-xs", children: ALL_CHAINS[chainId].name })] }), _jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) }, `selector-${context}-${token.address}-${chainId}`))] }) }, `${context}-${token.address}-${chainId}`));
+}

package/dist/esm/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/esm/anyspend/react/components/common/PanelOnramp.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCoinbaseOnrampOptions } from "../../../../anyspend";
+import { Input } from "../../../../global-account/react/components/ui/input";
+import useGetGeo from "../../../../global-account/react/hooks/useGetGeo";
+import { AnimatePresence, motion } from "framer-motion";
+import { useRef } from "react";
+import { toast } from "sonner";
+import { PaymentOptions } from "./PaymentOptions";
+export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp }) {
+    // Get geo data for onramp availability
+    const { geoData } = useGetGeo();
+    const { coinbaseOnrampOptions } = useCoinbaseOnrampOptions(true, geoData?.country || "US");
+    const amountInputRef = 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)) {
+            toast.error(`Maximum amount is $${maxLimit}`);
+            setSrcAmountOnRamp(maxLimit);
+            return;
+        }
+        setSrcAmountOnRamp(value);
+    };
+    const handleQuickAmount = (value) => {
+        setSrcAmountOnRamp(value);
+    };
+    return (_jsxs("div", { className: "bg-as-on-surface-1 relative flex w-full flex-col gap-4 rounded-2xl p-4 pb-6", children: [_jsxs("div", { className: "flex h-7 w-full items-center justify-between", children: [_jsx("span", { className: "text-as-primary/50 flex items-center text-sm", children: "Buy" }), _jsx(PaymentOptions, {})] }), _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) ? (_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"] })) : (_jsx("p", { className: "label-style text-b3-react-foreground/60 -mb-3 mt-3 text-xs dark:bg-transparent", children: "Buy amount in USD" })), _jsxs("div", { className: "relative inline-flex items-center dark:bg-transparent", children: [_jsx("span", { className: "text-b3-react-foreground/60 -ms-3 -mt-2 text-2xl font-semibold dark:bg-transparent", children: "$" }), _jsx(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"
+                                } }), _jsx(AnimatePresence, { mode: "wait", children: _jsx(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" }) })] })] }), _jsx("div", { className: "grid grid-cols-4 gap-4", children: ["5", "10", "25", "100"].map(value => (_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/esm/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/esm/anyspend/react/components/common/PanelOnrampPayment.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { OnrampVendor, OrderType, useAnyspendCreateOnrampOrder, useGeoOnrampOptions } from "../../../../anyspend";
+import { Button } from "../../../../global-account/react/components/ui/button";
+import centerTruncate from "../../../../shared/utils/centerTruncate";
+import { motion } from "framer-motion";
+import invariant from "invariant";
+import { ChevronLeft, ChevronRight, Landmark, Loader2 } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+export 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] = useState(srcAmountOnRamp);
+    const hasInitialized = useRef(false);
+    // Only update the stable amount on first render or when explicitly needed
+    useEffect(() => {
+        if (!hasInitialized.current && srcAmountOnRamp) {
+            setStableAmountForGeo(srcAmountOnRamp);
+            hasInitialized.current = true;
+        }
+    }, [srcAmountOnRamp]);
+    const { geoData, coinbaseOnrampOptions, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, isStripeWeb2Supported, isLoading: isLoadingGeoOnramp } = useGeoOnrampOptions(isMainnet, stableAmountForGeo);
+    const { createOrder, isCreatingOrder } = useAnyspendCreateOnrampOrder({
+        onSuccess: data => {
+            const orderId = data.data.id;
+            onOrderCreated(orderId);
+        },
+        onError: error => {
+            console.error(error);
+            toast.error("Failed to create order: " + error.message);
+        }
+    });
+    const handlePaymentMethodClick = async (vendor, paymentMethod) => {
+        try {
+            if (!recipientAddress) {
+                toast.error("Please select a recipient");
+                return;
+            }
+            if (!srcAmountOnRamp || parseFloat(srcAmountOnRamp) <= 0) {
+                toast.error("Please enter a valid amount");
+                return;
+            }
+            if (vendor === OnrampVendor.Coinbase && !coinbaseOnrampOptions) {
+                toast.error("Onramp options not available");
+                return;
+            }
+            if (vendor === OnrampVendor.Stripe && !isStripeOnrampSupported) {
+                toast.error("Stripe onramp not available");
+                return;
+            }
+            if (vendor === OnrampVendor.StripeWeb2 && !isStripeWeb2Supported) {
+                toast.error("Stripe credit card not available");
+                return;
+            }
+            if (!anyspendQuote) {
+                toast.error("Failed to get quote");
+                return;
+            }
+            const getDstToken = () => {
+                if (isBuyMode) {
+                    invariant(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);
+            toast.error("Failed to create order: " + err.message);
+        }
+    };
+    return (_jsxs("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-6", children: [_jsxs(_Fragment, { children: [_jsx("h2", { className: "-mb-3 text-lg font-semibold", children: "Order summary" }), _jsxs("div", { className: "bg-b3-react-background border-b3-react-border flex flex-col gap-3 rounded-lg border p-4", children: [recipientAddress && (_jsxs(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: [_jsx("p", { className: "text-b3-react-foreground/60", children: orderType === OrderType.Swap
+                                            ? "Recipient"
+                                            : orderType === OrderType.MintNFT
+                                                ? "Receive NFT at"
+                                                : orderType === OrderType.JoinTournament
+                                                    ? "Join for"
+                                                    : "Recipient" }), _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-end gap-1", children: [recipientEnsName && _jsxs("span", { className: "text-b3-react-foreground/80", children: ["@", recipientEnsName] }), _jsx("span", { className: "text-b3-react-foreground/80", children: centerTruncate(recipientAddress) })] })] })] })), _jsx("div", { className: "border-b3-react-border border-t pt-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-b3-react-foreground font-semibold", children: "Amount" }), _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 ? (_jsxs("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), _jsx("span", { className: "text-as-primary/70", children: "Creating onramp order..." })] })) : isLoadingGeoOnramp ? (_jsxs("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), _jsx("span", { className: "text-as-primary/70", children: "Loading payment options..." })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-semibold", children: "Payment method" }), _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 (_jsxs(_Fragment, { children: [hasCard && (_jsxs(_Fragment, { children: [_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" }), _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" }), _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" }), _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 && (_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 && _jsx(Landmark, { className: "h-5 w-5" })] }));
+                                    })() })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [coinbaseAvailablePaymentMethods.length > 0 &&
+                                (() => {
+                                    const method = coinbaseAvailablePaymentMethods[0];
+                                    return (_jsxs("button", { onClick: () => handlePaymentMethodClick(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: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-blue-50", children: _jsx("img", { src: "https://cdn.b3.fun/coinbase-wordmark-blue.svg", alt: "Coinbase", className: "h-6" }) }), _jsxs("div", { className: "flex flex-col items-start text-left", children: [_jsx("h4", { className: "text-b3-react-foreground text-lg font-semibold", children: "Coinbase Pay" }), _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"] }), _jsx("div", { className: "mt-1 flex items-center gap-1", children: _jsx("span", { className: "text-xs font-medium text-green-600", children: "Free" }) })] })] }), _jsx(ChevronRight, { className: "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] }));
+                                })(), isStripeWeb2Supported && (_jsxs("button", { onClick: () => handlePaymentMethodClick(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: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-purple-50", children: _jsx("img", { src: "https://raw.githubusercontent.com/stripe/stripe.github.io/455f506a628dc3f6c505e3001db45a64e29e9fc3/images/stripe-logo.svg", alt: "Stripe", className: "h-5" }) }), _jsxs("div", { className: "flex flex-col items-start text-left", children: [_jsx("h4", { className: "text-b3-react-foreground text-lg font-semibold", children: "Stripe" }), _jsx("p", { className: "text-b3-react-foreground/60 text-sm", children: "Credit or debit card payment" }), _jsx("div", { className: "mt-1 flex items-center gap-1", children: _jsx("span", { className: "text-xs font-medium text-orange-600", children: "Fee Applied" }) })] })] }), _jsx(ChevronRight, { className: "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] })), _jsxs(Button, { variant: "link", onClick: onBack, className: "text-b3-react-foreground/70 hover:text-b3-react-foreground/90 mt-2 w-full", children: [_jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }), "Back"] })] })] }))] }));
+}

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

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

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

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

package/dist/esm/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/esm/anyspend/react/components/common/PaymentOneClick.js

@@ -0,0 +1,21 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import ShinyButton from "../../../../global-account/react/components/ui/ShinyButton";
+import { getPaymentMethodDescription, getVendorDisplayName } from "../../../../shared/utils/payment.utils";
+import { ChevronRight } from "lucide-react";
+import HowItWorks from "./HowItWorks";
+export default function PaymentOneClick({ order }) {
+    const vendor = order.onrampMetadata?.vendor;
+    const vendorName = getVendorDisplayName(vendor);
+    const paymentDescription = 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 (_jsxs("div", { className: "relative my-8 flex w-full flex-1 flex-col items-center justify-center", children: [_jsx("a", { href: order.oneClickBuyUrl || "", target: "_blank", className: "w-4/5", children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", className: "relative w-full py-6", children: _jsxs("div", { className: "relative z-10 flex items-center justify-center gap-3", children: [_jsxs("span", { className: "text-lg font-medium text-white", children: ["Continue to ", vendorName] }), _jsx(ChevronRight, { className: "h-5 w-5 text-white/90" })] }) }) }), _jsx(HowItWorks, { steps: howItWorksSteps })] }));
+}

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

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

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function PaymentOptions() {
+    return (_jsxs("div", { className: "flex items-center justify-start gap-3 dark:bg-transparent", children: [_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" }), _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" }), _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" }), _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" }), _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" }), _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/esm/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/esm/anyspend/react/components/common/PaymentStripeWeb2.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { USDC_BASE, useStripeClientSecret } from "../../../../anyspend";
+import { STRIPE_CONFIG } from "../../../../anyspend/constants";
+import { useB3 } from "../../../../global-account/react/components/B3Provider";
+import ShinyButton from "../../../../global-account/react/components/ui/ShinyButton";
+import { formatStripeAmount } from "../../../../shared/utils/payment.utils";
+import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
+import { loadStripe } from "@stripe/stripe-js";
+import { HelpCircle, Info, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import HowItWorks from "./HowItWorks";
+import PaymentMethodIcons from "./PaymentMethodIcons";
+const stripePromise = loadStripe(STRIPE_CONFIG.publishableKey);
+export default function PaymentStripeWeb2({ isMainnet, order, onPaymentSuccess }) {
+    const { theme } = useB3();
+    const { clientSecret, isLoadingStripeClientSecret, stripeClientSecretError } = useStripeClientSecret(isMainnet, order.stripePaymentIntentId);
+    if (isLoadingStripeClientSecret) {
+        return _jsx(StripeLoadingState, {});
+    }
+    if (stripeClientSecretError) {
+        return _jsx(StripeErrorState, { error: stripeClientSecretError.message });
+    }
+    return (_jsx(Elements, { stripe: stripePromise, options: {
+            clientSecret: clientSecret || undefined,
+            appearance: { theme: theme === "light" ? "stripe" : "night" }
+        }, children: _jsx(StripePaymentForm, { order: order, clientSecret: clientSecret, onPaymentSuccess: onPaymentSuccess }) }));
+}
+function StripeLoadingState() {
+    return (_jsx("div", { className: "relative my-8 flex w-full flex-1 flex-col items-center justify-center", children: _jsxs("div", { className: "bg-as-on-surface-1 flex w-full flex-col items-center justify-center gap-4 rounded-2xl p-8", children: [_jsx("div", { className: "bg-as-brand/20 flex h-16 w-16 items-center justify-center rounded-full", children: _jsx("div", { className: "text-as-brand h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent" }) }), _jsxs("div", { className: "text-as-primary/70 text-center", children: [_jsx("div", { className: "text-lg font-medium", children: "Initializing payment" }), _jsx("div", { className: "text-as-primary/50 mt-2 text-sm", children: "Setting up secure payment form..." })] })] }) }));
+}
+function StripeErrorState({ error }) {
+    return (_jsx("div", { className: "relative my-8 flex w-full flex-1 flex-col items-center justify-center", children: _jsxs("div", { className: "bg-as-red/10 border-as-red/20 flex w-full items-center gap-3 rounded-2xl border p-4", children: [_jsx("div", { className: "bg-as-red flex h-6 w-6 shrink-0 items-center justify-center rounded-full", children: _jsx("svg", { className: "h-4 w-4 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsxs("div", { className: "text-as-red text-sm font-medium", children: ["Error: ", error] })] }) }));
+}
+function StripePaymentForm({ order, clientSecret, onPaymentSuccess }) {
+    const stripe = useStripe();
+    const elements = useElements();
+    const [loading, setLoading] = useState(false);
+    const [message, setMessage] = useState(null);
+    const [amount, setAmount] = useState(null);
+    const [stripeReady, setStripeReady] = useState(false);
+    const [showHowItWorks, setShowHowItWorks] = useState(false);
+    useEffect(() => {
+        if (stripe && elements) {
+            setStripeReady(true);
+            console.log("@@stripe-web2-payment:initialized:", JSON.stringify({ orderId: order.id }, null, 2));
+        }
+    }, [stripe, elements, order.id]);
+    useEffect(() => {
+        const fetchPaymentIntent = async () => {
+            if (!stripe || !clientSecret)
+                return;
+            try {
+                const paymentIntent = await stripe.retrievePaymentIntent(clientSecret);
+                const amount = paymentIntent.paymentIntent?.amount
+                    ? 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 _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 (_jsxs("div", { className: "relative my-8 flex w-full flex-1 flex-col items-center justify-center", children: [_jsxs("form", { onSubmit: handleSubmit, className: "w-full space-y-6", children: [_jsxs("div", { className: "bg-as-on-surface-1 w-full rounded-2xl p-6", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-as-brand/20 flex h-8 w-8 shrink-0 items-center justify-center rounded-full", children: _jsx("svg", { className: "text-as-brand h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _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" }) }) }), _jsxs("div", { children: [_jsx("div", { className: "text-as-primary text-sm font-medium", children: "Secured by Stripe" }), _jsx("div", { className: "text-as-primary/50 text-xs", children: "End-to-end encrypted payment" })] })] }), _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: [_jsx(HelpCircle, { className: "h-4 w-4" }), _jsx("span", { children: "How it works" })] })] }), amount && (_jsxs("div", { className: "border-as-stroke border-t pt-4", children: [_jsx("div", { className: "text-as-primary/50 mb-3 text-sm", children: "Payment Breakdown" }), (() => {
+                                        const originalAmount = Number(order.srcAmount) / 10 ** USDC_BASE.decimals;
+                                        const finalAmount = Number(amount);
+                                        const calculatedFee = finalAmount - originalAmount;
+                                        return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsx("span", { className: "text-as-primary/60", children: "Amount" }), _jsxs("span", { className: "text-as-primary", children: ["$", originalAmount.toFixed(2)] })] }), _jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "text-as-primary/60", children: "Processing fee" }), _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: _jsx(Info, { className: "text-as-primary/40 hover:text-as-primary/60 h-3 w-3 transition-colors" }) })] }), _jsxs("span", { className: "text-as-primary", children: ["$", calculatedFee.toFixed(2)] })] }), _jsx("div", { className: "border-as-stroke border-t pt-2", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-primary font-semibold", children: "Total Amount" }), _jsxs("span", { className: "text-as-primary text-2xl font-bold", children: ["$", finalAmount.toFixed(2), " USD"] })] }) })] }));
+                                    })()] }))] }), _jsxs("div", { className: "bg-as-on-surface-1 w-full rounded-2xl p-6", children: [_jsx("div", { className: "text-as-primary mb-4 text-lg font-semibold", children: "Payment Details" }), _jsx(PaymentElement, { options: stripeElementOptions })] }), message && (_jsxs("div", { className: "bg-as-red/10 border-as-red/20 flex w-full items-center gap-3 rounded-2xl border p-4", children: [_jsx("div", { className: "bg-as-red flex h-6 w-6 shrink-0 items-center justify-center rounded-full", children: _jsx("svg", { className: "h-4 w-4 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx("div", { className: "text-as-red text-sm font-medium", children: message })] })), _jsx(ShinyButton, { type: "submit", accentColor: "hsl(var(--as-brand))", disabled: !stripe || !elements || loading, className: "relative w-full py-4 text-lg font-semibold", children: loading ? (_jsxs("div", { className: "flex items-center justify-center gap-3", children: [_jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-current border-t-transparent" }), _jsx("span", { className: "text-white", children: "Processing Payment..." })] })) : (_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx("span", { className: "text-white", children: "Complete Payment" }), amount && _jsxs("span", { className: "text-white/90", children: ["$", Number(amount).toFixed(2)] })] })) })] }), showHowItWorks && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", children: _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: [_jsxs("div", { className: "mb-6 flex items-center justify-between", children: [_jsx("h2", { className: "text-as-primary text-xl font-semibold", children: "How it works" }), _jsx("button", { onClick: () => setShowHowItWorks(false), className: "text-as-primary/60 hover:text-as-primary transition-colors", children: _jsx(X, { className: "h-6 w-6" }) })] }), _jsxs("div", { className: "space-y-6", children: [_jsx(PaymentMethodIcons, {}), _jsx(HowItWorks, { steps: howItWorksSteps })] })] }) }))] }));
+}
+// Add tooltip component
+function Tooltip({ children, content }) {
+    const [isVisible, setIsVisible] = useState(false);
+    return (_jsxs("div", { className: "relative inline-block", children: [_jsx("div", { onMouseEnter: () => setIsVisible(true), onMouseLeave: () => setIsVisible(false), className: "cursor-help", children: children }), isVisible && (_jsx("div", { className: "absolute bottom-full left-1/2 z-50 mb-2 w-80 -translate-x-1/2", children: _jsxs("div", { className: "bg-as-on-surface-1 border-as-stroke text-as-primary rounded-lg border p-3 text-sm shadow-lg", children: [_jsx("div", { className: "whitespace-pre-line", children: content }), _jsx("div", { className: "absolute left-1/2 top-full -translate-x-1/2", children: _jsx("div", { className: "border-t-as-on-surface-1 border-l-4 border-r-4 border-t-4 border-transparent" }) })] }) }))] }));
+}

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

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OnrampVendor } from "../../../../anyspend";
+import PaymentOneClick from "./PaymentOneClick";
+import PaymentStripeWeb2 from "./PaymentStripeWeb2";
+export default function PaymentVendorUI({ isMainnet, order, dstTokenSymbol }) {
+    const vendor = order.onrampMetadata?.vendor;
+    // Handle one-click payment flows (Coinbase, Stripe redirect)
+    if (order.oneClickBuyUrl) {
+        return _jsx(PaymentOneClick, { order: order, dstTokenSymbol: dstTokenSymbol });
+    }
+    // Handle Stripe Web2 payment flow
+    if (vendor === OnrampVendor.StripeWeb2) {
+        return _jsx(PaymentStripeWeb2, { isMainnet: isMainnet, order: order });
+    }
+    // Return null for unsupported vendors
+    return null;
+}

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

@@ -0,0 +1,6 @@
+import { Token } from "../../../../anyspend";
+export default function TokenBalance({ token, walletAddress, onChangeInput }: {
+    token: Token;
+    walletAddress: string | undefined;
+    onChangeInput: (value: string) => void;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTokenBalance } from "../../../../global-account/react/hooks/useTokenBalance";
+import { formatUnits } from "viem";
+export default function TokenBalance({ token, walletAddress, onChangeInput }) {
+    const { rawBalance, formattedBalance, isLoading } = useTokenBalance({
+        token,
+        address: walletAddress
+    });
+    const handlePercentageClick = (percentage) => {
+        if (!rawBalance)
+            return;
+        // Calculate the amount based on percentage of balance
+        // Multiply first, then divide to avoid BigInt truncation
+        const amount = percentage === 100 ? rawBalance : (rawBalance * BigInt(percentage)) / 100n;
+        onChangeInput(formatUnits(amount, token.decimals));
+    };
+    return (_jsx("div", { className: "flex h-7 items-center justify-end gap-1", children: !isLoading && (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-as-primary/50 inline-flex rounded-lg text-sm", children: rawBalance ? `Balance: ${formattedBalance}` : `Balance: 0` }), !!rawBalance && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => handlePercentageClick(20), className: "text-as-primary/50 bg-as-on-surface-2 hover:bg-as-on-surface-3 inline-flex rounded-lg px-2 py-1 text-xs transition-colors sm:hidden", children: "20%" }), _jsx("button", { onClick: () => handlePercentageClick(50), className: "text-as-primary/50 bg-as-on-surface-2 hover:bg-as-on-surface-3 inline-flex rounded-lg px-2 py-1 text-xs transition-colors", children: "50%" }), _jsx("button", { onClick: () => handlePercentageClick(100), className: "text-as-primary/50 bg-as-on-surface-2 hover:bg-as-on-surface-3 inline-flex rounded-lg px-2 py-1 text-xs transition-colors", children: "MAX" })] }))] })) }, `balance-${token.address}-${token.chainId}`));
+}

package/dist/esm/anyspend/react/components/icons/EthIcon.d.ts

@@ -0,0 +1,3 @@
+export declare function EthIcon({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/anyspend/react/components/icons/EthIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function EthIcon({ className }) {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24", className: className, children: [_jsx("path", { fill: "#8FFCF3", d: "M12 3v6.65l5.625 2.516z" }), _jsx("path", { fill: "#CABCF8", d: "m12 3-5.625 9.166L12 9.651z" }), _jsx("path", { fill: "#CBA7F5", d: "M12 16.477v4.522l5.625-7.784z" }), _jsx("path", { fill: "#74A0F3", d: "M12 21v-4.523l-5.625-3.262z" }), _jsx("path", { fill: "#CBA7F5", d: "m12 15.43 5.625-3.263L12 9.65z" }), _jsx("path", { fill: "#74A0F3", d: "M6.375 12.167 12 15.429V9.651z" }), _jsx("path", { fill: "#202699", fillRule: "evenodd", d: "m12 15.429-5.625-3.263L12 3l5.625 9.166zM6.749 11.9l5.16-8.41v6.115zm-.077.23 5.238-2.327v5.364zm5.418-2.327v5.364l5.233-3.038zm0-.198 5.16 2.295-5.16-8.41z", clipRule: "evenodd" }), _jsx("path", { fill: "#202699", fillRule: "evenodd", d: "M12 16.406 6.375 13.21 12 21l5.625-7.79zm-4.995-2.633 4.905 2.79v4.005zm5.085 2.79v4.005l4.905-6.795z", clipRule: "evenodd" })] }));
+}

package/dist/esm/anyspend/react/components/icons/SolIcon.d.ts

@@ -0,0 +1,3 @@
+export declare function SolIcon({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/anyspend/react/components/icons/SolIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function SolIcon({ className }) {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24", className: className, children: [_jsx("path", { fill: "url(#SOL__a)", d: "M18.413 7.903a.62.62 0 0 1-.411.164H3.58c-.512 0-.77-.585-.416-.929l2.368-2.283a.6.6 0 0 1 .41-.169h14.479c.517 0 .77.59.41.934z" }), _jsx("path", { fill: "url(#SOL__b)", d: "M18.413 19.157a.6.6 0 0 1-.411.157H3.58c-.512 0-.77-.58-.416-.923l2.368-2.289a.6.6 0 0 1 .41-.163h14.479c.517 0 .77.585.41.928z" }), _jsx("path", { fill: "url(#SOL__c)", d: "M18.413 10.472a.6.6 0 0 0-.411-.158H3.58c-.512 0-.77.58-.416.922l2.368 2.29a.62.62 0 0 0 .41.163h14.479c.517 0 .77-.585.41-.928z" }), _jsxs("defs", { children: [_jsxs("linearGradient", { id: "SOL__a", x1: "3.001", x2: "21.431", y1: "16.322", y2: "15.591", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#599DB0" }), _jsx("stop", { offset: "1", stopColor: "#47F8C3" })] }), _jsxs("linearGradient", { id: "SOL__b", x1: "3.001", x2: "21.323", y1: "16.973", y2: "16.366", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#C44FE2" }), _jsx("stop", { offset: "1", stopColor: "#73B0D0" })] }), _jsxs("linearGradient", { id: "SOL__c", x1: "4.035", x2: "20.302", y1: "12.002", y2: "12.002", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#778CBF" }), _jsx("stop", { offset: "1", stopColor: "#5DCDC9" })] })] })] }));
+}

package/dist/esm/anyspend/react/components/icons/USDCIcon.d.ts

@@ -0,0 +1,3 @@
+export declare function UsdcIcon({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/anyspend/react/components/icons/USDCIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function UsdcIcon({ className }) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24", className: className, children: _jsx("path", { fill: "#2775CA", fillRule: "evenodd", d: "M12 21c4.99 0 9-4.01 9-9s-4.01-9-9-9-9 4.01-9 9 4.01 9 9 9m2.475-7.578c0-1.31-.787-1.76-2.362-1.946-1.125-.152-1.35-.45-1.35-.978 0-.523.377-.86 1.125-.86.675 0 1.052.224 1.237.787.04.112.152.185.265.185h.596a.256.256 0 0 0 .264-.259v-.039c-.152-.827-.827-1.614-1.687-1.687v-.827c0-.152-.113-.265-.298-.298h-.495c-.152 0-.293.112-.332.298v.827c-1.125.151-1.873 1.012-1.873 1.951 0 1.238.748 1.722 2.323 1.913 1.052.185 1.39.41 1.39 1.012 0 .597-.53 1.013-1.238 1.013-.98 0-1.316-.416-1.429-.979-.034-.146-.146-.225-.259-.225h-.641a.256.256 0 0 0-.259.264v.04c.146.934.748 1.575 1.986 1.76v.833c0 .152.112.253.298.293h.54c.146 0 .248-.102.287-.293v-.833c1.125-.185 1.912-.939 1.912-1.952m-6.262 2.803a5.6 5.6 0 0 0 1.875 1.135c.112.079.225.225.225.338v.528c0 .073 0 .113-.04.146-.033.152-.185.225-.337.152a6.751 6.751 0 0 1 0-12.864c.04-.034.112-.034.152-.034.152.034.225.147.225.298v.524c0 .19-.073.303-.225.376a5.55 5.55 0 0 0-3.336 3.336 5.59 5.59 0 0 0 1.46 6.065m5.514-10.413c.034-.152.186-.225.338-.152a6.8 6.8 0 0 1 4.387 4.427c1.125 3.56-.827 7.352-4.387 8.477-.04.033-.113.033-.152.033-.152-.033-.225-.146-.225-.298v-.523c0-.191.073-.303.225-.377a5.55 5.55 0 0 0 3.335-3.335 5.585 5.585 0 0 0-3.335-7.2c-.113-.079-.225-.225-.225-.377v-.523c0-.079 0-.113.04-.152", clipRule: "evenodd" }) }));
+}

package/dist/esm/anyspend/react/components/modals/EnterRecipientModal.d.ts

@@ -0,0 +1,6 @@
+export declare function EnterRecipientModal({ isOpenPasteRecipientAddress, setIsOpenPasteRecipientAddress, recipientAddress, setRecipientAddress }: {
+    isOpenPasteRecipientAddress: boolean;
+    setIsOpenPasteRecipientAddress: (isOpen: boolean) => void;
+    recipientAddress: string | undefined;
+    setRecipientAddress: (address: string) => void;
+}): import("react/jsx-runtime").JSX.Element;