@b3dotfun/sdk 0.0.28 → 0.0.29-alpha.1

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

@@ -0,0 +1,263 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnySpendDepositHype = AnySpendDepositHype;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const anyspend_1 = require("../../../anyspend");
+const react_1 = require("../../../global-account/react");
+const cn_1 = require("../../../shared/utils/cn");
+const invariant_1 = __importDefault(require("invariant"));
+const react_2 = require("motion/react");
+const react_3 = require("react");
+const sonner_1 = require("sonner");
+const viem_1 = require("viem");
+const chains_1 = require("viem/chains");
+const useAnyspendFlow_1 = require("../hooks/useAnyspendFlow");
+const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
+const CryptoPaymentMethod_1 = require("./common/CryptoPaymentMethod");
+const CryptoReceiveSection_1 = require("./common/CryptoReceiveSection");
+const ErrorSection_1 = require("./common/ErrorSection");
+const FiatPaymentMethod_1 = require("./common/FiatPaymentMethod");
+const OrderDetails_1 = require("./common/OrderDetails");
+const OrderStatus_1 = require("./common/OrderStatus");
+const PaySection_1 = require("./common/PaySection");
+const RecipientSelection_1 = require("./common/RecipientSelection");
+const escrow_1 = require("../../../anyspend/abis/escrow");
+const lucide_react_1 = require("lucide-react");
+const PanelOnramp_1 = require("./common/PanelOnramp");
+function generateEncodedDataForDepositHype(amount, beneficiary) {
+    (0, invariant_1.default)(BigInt(amount) > 0, "Amount must be greater than zero");
+    const encodedData = (0, viem_1.encodeFunctionData)({
+        abi: escrow_1.ESCROW_ABI,
+        functionName: "depositFor",
+        args: [beneficiary, anyspend_1.B3_TOKEN.address, BigInt(amount)],
+    });
+    return encodedData;
+}
+function AnySpendDepositHype(props) {
+    const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
+    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendDepositHypeInner, { ...props }) }));
+}
+function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, depositContractAddress, }) {
+    // Use shared flow hook
+    const { activePanel, setActivePanel, orderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, dstAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = (0, useAnyspendFlow_1.useAnyspendFlow)({
+        paymentType,
+        recipientAddress,
+        loadOrder,
+        isDepositMode: true,
+        onTransactionSuccess: onSuccess,
+        sourceTokenAddress,
+        sourceTokenChainId,
+    });
+    // Button state logic
+    const btnInfo = (0, react_3.useMemo)(() => {
+        if (activeInputAmountInWei === "0")
+            return { text: "Enter an amount", disable: true, error: false };
+        if (isLoadingAnyspendQuote)
+            return { text: "Loading quote...", disable: true, error: false };
+        if (isCreatingOrder || isCreatingOnrampOrder)
+            return { text: "Creating order...", disable: true, error: false };
+        if (!selectedRecipientAddress)
+            return { text: "Select recipient", disable: false, error: false };
+        if (!anyspendQuote || !anyspendQuote.success)
+            return { text: "Get quote error", disable: true, error: true };
+        if (!dstAmount)
+            return { text: "No quote available", disable: true, error: true };
+        // Check minimum deposit amount (10 HYPE)
+        // Use the raw amount from the quote instead of the formatted display string
+        if (anyspendQuote.data?.currencyOut?.amount && anyspendQuote.data.currencyOut.currency?.decimals) {
+            const rawAmountInWei = anyspendQuote.data.currencyOut.amount;
+            const decimals = anyspendQuote.data.currencyOut.currency.decimals;
+            const actualAmount = parseFloat(rawAmountInWei) / Math.pow(10, decimals);
+            if (actualAmount < 10) {
+                return { text: "Minimum 10 HYPE deposit", disable: true, error: true };
+            }
+        }
+        if (paymentType === "crypto") {
+            if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
+                return { text: "Choose payment method", disable: false, error: false };
+            }
+            return { text: "Continue to deposit", disable: false, error: false };
+        }
+        if (paymentType === "fiat") {
+            if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.NONE) {
+                return { text: "Select payment method", disable: false, error: false };
+            }
+            return { text: "Buy", disable: false, error: false };
+        }
+        return { text: "Continue to deposit", disable: false, error: false };
+    }, [
+        activeInputAmountInWei,
+        isLoadingAnyspendQuote,
+        isCreatingOrder,
+        isCreatingOnrampOrder,
+        selectedRecipientAddress,
+        anyspendQuote,
+        dstAmount,
+        paymentType,
+        selectedCryptoPaymentMethod,
+        selectedFiatPaymentMethod,
+    ]);
+    const onMainButtonClick = async () => {
+        if (btnInfo.disable)
+            return;
+        if (!selectedRecipientAddress) {
+            setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION);
+            return;
+        }
+        if (paymentType === "crypto") {
+            if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
+                setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD);
+                return;
+            }
+            await handleCryptoOrder();
+        }
+        else if (paymentType === "fiat") {
+            if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.NONE) {
+                setActivePanel(useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD);
+                return;
+            }
+            await handleFiatOrder();
+        }
+    };
+    // Handle crypto order creation
+    const handleCryptoOrder = async () => {
+        try {
+            (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
+            (0, invariant_1.default)(selectedRecipientAddress, "Recipient address is not found");
+            (0, invariant_1.default)(depositContractAddress, "Deposit contract address is not found");
+            const srcAmountBigInt = BigInt(activeInputAmountInWei);
+            const depositAmountWei = anyspendQuote.data?.currencyOut?.amount || "0";
+            const encodedData = generateEncodedDataForDepositHype(depositAmountWei, selectedRecipientAddress);
+            createOrder({
+                recipientAddress: selectedRecipientAddress,
+                orderType: "custom",
+                srcChain: selectedSrcChainId,
+                dstChain: chains_1.base.id,
+                srcToken: selectedSrcToken,
+                dstToken: anyspend_1.B3_TOKEN,
+                srcAmount: srcAmountBigInt.toString(),
+                creatorAddress: globalAddress,
+                payload: {
+                    amount: depositAmountWei,
+                    data: encodedData,
+                    to: depositContractAddress,
+                    action: "deposit HYPE",
+                },
+            });
+        }
+        catch (err) {
+            console.error(err);
+            sonner_1.toast.error("Failed to create order: " + err.message);
+        }
+    };
+    // Handle fiat order creation
+    const handleFiatOrder = async () => {
+        try {
+            (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
+            (0, invariant_1.default)(selectedRecipientAddress, "Recipient address is not found");
+            (0, invariant_1.default)(depositContractAddress, "Deposit contract address is not found");
+            if (!srcAmount || parseFloat(srcAmount) <= 0) {
+                sonner_1.toast.error("Please enter a valid amount");
+                return;
+            }
+            // Determine vendor and payment method string
+            let vendor;
+            let paymentMethodString = "";
+            if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY) {
+                if (coinbaseAvailablePaymentMethods.length === 0) {
+                    sonner_1.toast.error("Coinbase Pay not available");
+                    return;
+                }
+                vendor = "coinbase";
+                paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || "";
+            }
+            else if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE) {
+                if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
+                    sonner_1.toast.error("Stripe not available");
+                    return;
+                }
+                vendor = "stripe-web2";
+                paymentMethodString = "";
+            }
+            else {
+                sonner_1.toast.error("Please select a payment method");
+                return;
+            }
+            const depositAmountWei = anyspendQuote.data?.currencyOut?.amount || "0";
+            const encodedData = generateEncodedDataForDepositHype(depositAmountWei, selectedRecipientAddress);
+            createOnrampOrder({
+                recipientAddress: selectedRecipientAddress,
+                orderType: "custom",
+                dstChain: chains_1.base.id,
+                dstToken: anyspend_1.B3_TOKEN,
+                srcFiatAmount: srcAmount,
+                onramp: {
+                    vendor: vendor,
+                    paymentMethod: paymentMethodString,
+                    country: geoData?.country || "US",
+                    redirectUrl: window.location.origin,
+                },
+                expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0",
+                creatorAddress: globalAddress,
+                payload: {
+                    amount: depositAmountWei,
+                    data: encodedData,
+                    to: depositContractAddress,
+                    action: "deposit HYPE",
+                },
+            });
+        }
+        catch (err) {
+            console.error(err);
+            sonner_1.toast.error("Failed to create order: " + err.message);
+        }
+    };
+    // Order details view
+    const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: oat.data.order }), (0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: paymentType === "fiat" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, onBack: () => {
+                            setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
+                            onSuccess?.();
+                        } })] })) }) }));
+    // Loading view
+    const loadingView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-full flex-col items-center gap-4 p-5", children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary", children: "Loading order details..." }) }));
+    // Panel views
+    const recipientSelectionView = ((0, jsx_runtime_1.jsx)(RecipientSelection_1.RecipientSelection, { initialValue: selectedRecipientAddress || "", onBack: () => setActivePanel(useAnyspendFlow_1.PanelView.MAIN), onConfirm: address => {
+            setSelectedRecipientAddress(address);
+            setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
+        } }));
+    const cryptoPaymentMethodView = ((0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: undefined, selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(useAnyspendFlow_1.PanelView.MAIN), onSelectPaymentMethod: (method) => {
+            setSelectedCryptoPaymentMethod(method);
+            setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
+        } }));
+    const fiatPaymentMethodView = ((0, jsx_runtime_1.jsx)(FiatPaymentMethod_1.FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: () => setActivePanel(useAnyspendFlow_1.PanelView.MAIN), onSelectPaymentMethod: (method) => {
+            setSelectedFiatPaymentMethod(method);
+            setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
+        }, srcAmountOnRamp: srcAmount }));
+    // If showing token selection, render with panel transitions
+    return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-container font-inter mx-auto w-full max-w-[460px]", mode === "page" &&
+                "bg-as-surface-primary border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: (0, jsx_runtime_1.jsx)(react_1.TransitionPanel, { activeIndex: orderId
+                    ? oat
+                        ? useAnyspendFlow_1.PanelView.ORDER_DETAILS
+                        : useAnyspendFlow_1.PanelView.LOADING
+                    : activePanel === useAnyspendFlow_1.PanelView.ORDER_DETAILS
+                        ? useAnyspendFlow_1.PanelView.MAIN
+                        : activePanel, className: (0, cn_1.cn)("rounded-2xl", {
+                    "mt-0": mode === "modal",
+                }), variants: {
+                    enter: { x: 300, opacity: 0 },
+                    center: { x: 0, opacity: 1 },
+                    exit: { x: -300, opacity: 0 },
+                }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: (0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(PaySection_1.PaySection, { paymentType: "crypto", selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, selectedFiatPaymentMethod: selectedFiatPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), onSelectFiatPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : ((0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: anyspend_1.B3_TOKEN, destinationChainId: chains_1.base.id, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD }) })), (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", className: (0, cn_1.cn)("swap-direction-button border-as-stroke bg-as-surface-primary absolute left-1/2 top-[calc(50%+56px)] z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: anyspend_1.B3_TOKEN, selectedDstChainId: chains_1.base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
+                                                    setIsSrcInputDirty(false);
+                                                    setSrcAmount(value);
+                                                }, anyspendQuote: anyspendQuote }))] }) }), (0, jsx_runtime_1.jsx)(ErrorSection_1.ErrorSection, { error: getAnyspendQuoteError }), (0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }) })] }) }, "main-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: cryptoPaymentMethodView }, "crypto-payment-method-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: fiatPaymentMethodView }, "fiat-payment-method-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: recipientSelectionView }, "recipient-selection-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: orderDetailsView }, "order-details-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: loadingView }, "loading-view"),
+                ] }) }) }));
+}

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

@@ -0,0 +1,17 @@
+import { components } from "../../../types/api";
+interface CryptoReceiveSectionProps {
+    isDepositMode?: boolean;
+    isBuyMode?: boolean;
+    selectedRecipientAddress?: string;
+    recipientName?: string;
+    onSelectRecipient: () => void;
+    dstAmount: string;
+    dstToken: components["schemas"]["Token"];
+    selectedDstChainId?: number;
+    setSelectedDstChainId?: (chainId: number) => void;
+    setSelectedDstToken?: (token: components["schemas"]["Token"]) => void;
+    onChangeDstAmount?: (value: string) => void;
+    anyspendQuote?: any;
+}
+export declare function CryptoReceiveSection({ isDepositMode, isBuyMode, selectedRecipientAddress, recipientName, onSelectRecipient, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, onChangeDstAmount, anyspendQuote, }: CryptoReceiveSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CryptoReceiveSection = CryptoReceiveSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../../../shared/utils");
+const cn_1 = require("../../../../shared/utils/cn");
+const formatAddress_1 = require("../../../../shared/utils/formatAddress");
+const number_1 = require("../../../../shared/utils/number");
+const lucide_react_1 = require("lucide-react");
+const react_1 = require("motion/react");
+const OrderTokenAmount_1 = require("./OrderTokenAmount");
+function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false, selectedRecipientAddress, recipientName, onSelectRecipient, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, onChangeDstAmount, anyspendQuote, }) {
+    return ((0, jsx_runtime_1.jsxs)(react_1.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "receive-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: isDepositMode ? "Deposit" : "Receive" }), selectedRecipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: onSelectRecipient, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.shortenAddress)(selectedRecipientAddress || "") }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }) })) : ((0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: onSelectRecipient, children: (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode || isDepositMode ? (
+            // Fixed destination token display for buy mode and deposit mode
+            (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3", children: [dstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: dstToken.metadata.logoURI, alt: dstToken.symbol, className: "h-8 w-8 rounded-full" })), (0, jsx_runtime_1.jsx)("span", { className: "text-as-brand text-lg font-bold", children: dstToken.symbol })] })] })) : (
+            // Token selection for regular swap mode
+            (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: selectedRecipientAddress, context: "to", inputValue: dstAmount, onChangeInput: onChangeDstAmount || (() => { }), chainId: selectedDstChainId || dstToken.chainId, setChainId: setSelectedDstChainId || (() => { }), token: dstToken, setToken: setSelectedDstToken || (() => { }) })), (0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: [(0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyOut?.amountUsd, {
+                        style: "currency",
+                        fallback: "",
+                    }), anyspendQuote?.data?.currencyIn?.amountUsd &&
+                        anyspendQuote?.data?.currencyOut?.amountUsd &&
+                        (() => {
+                            const calculatePriceImpact = (inputUsd, outputUsd) => {
+                                if (!inputUsd || !outputUsd) {
+                                    return { percentage: "0.00", isNegative: false };
+                                }
+                                const input = Number(inputUsd);
+                                const output = Number(outputUsd);
+                                // Handle edge cases
+                                if (input === 0 || isNaN(input) || isNaN(output) || input <= output) {
+                                    return { percentage: "0.00", isNegative: false };
+                                }
+                                const percentageValue = ((output - input) / input) * 100;
+                                // Handle the -0.00% case
+                                if (percentageValue > -0.005 && percentageValue < 0) {
+                                    return { percentage: "0.00", isNegative: false };
+                                }
+                                return {
+                                    percentage: Math.abs(percentageValue).toFixed(2),
+                                    isNegative: percentageValue < 0,
+                                };
+                            };
+                            const { percentage, isNegative } = calculatePriceImpact(anyspendQuote.data.currencyIn.amountUsd, anyspendQuote.data.currencyOut.amountUsd);
+                            // Parse the percentage as a number for comparison
+                            const percentageNum = parseFloat(percentage);
+                            // Don't show if less than 1%
+                            if (percentageNum < 1) {
+                                return null;
+                            }
+                            // Using inline style to ensure color displays
+                            return ((0, jsx_runtime_1.jsxs)("span", { className: "ml-2", style: { color: percentageNum >= 10 ? "red" : "#FFD700" }, children: ["(", isNegative ? "-" : "", percentage, "%)"] }));
+                        })()] })] }));
+}

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

@@ -0,0 +1,6 @@
+interface ErrorSectionProps {
+    error?: Error | null;
+    message?: string;
+}
+export declare function ErrorSection({ error, message }: ErrorSectionProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorSection = ErrorSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+function ErrorSection({ error, message }) {
+    if (!error && !message) {
+        return null;
+    }
+    const errorMessage = message || error?.message || "An error occurred";
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "error-section bg-as-on-surface-1 flex w-full max-w-[460px] items-center gap-2 rounded-2xl px-4 py-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { className: "bg-as-red h-4 min-h-4 w-4 min-w-4 rounded-full p-0 text-sm font-medium text-white" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm", children: errorMessage })] }));
+}

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

@@ -1,6 +1,6 @@
 import { components } from "../../../../anyspend/types/api";
 import { FiatPaymentMethod } from "./FiatPaymentMethod";
-export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, }: {
+export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, }: {
     srcAmountOnRamp: string;
     setSrcAmountOnRamp: (amount: string) => void;
     selectedPaymentMethod?: FiatPaymentMethod;
@@ -11,4 +11,5 @@ export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selec
     destinationAmount?: string;
     onDestinationTokenChange?: (token: components["schemas"]["Token"]) => void;
     onDestinationChainChange?: (chainId: number) => void;
+    fiatPaymentMethodIndex: number;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -12,7 +12,7 @@ const react_3 = require("react");
 const sonner_1 = require("sonner");
 const FiatPaymentMethod_1 = require("./FiatPaymentMethod");
 const OrderTokenAmountFiat_1 = require("./OrderTokenAmountFiat");
-function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, }) {
+function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, }) {
     // Get geo-based onramp options to access fee information
     const { stripeWeb2Support } = (0, react_1.useGeoOnrampOptions)(srcAmountOnRamp);
     // Helper function to get fees from API data
@@ -69,7 +69,7 @@ function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMetho
     const handleQuickAmount = (value) => {
         setSrcAmountOnRamp(value);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-primary flex w-full flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", 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-tertiarry flex items-center text-sm font-bold", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(7), children: selectedPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Stripe"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center pb-2 pt-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-3 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", 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-tertiarry flex items-center text-sm font-bold", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: selectedPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Stripe"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center pb-2 pt-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-3 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
                                         width: `${Math.max(50, srcAmountOnRamp.length * 34)}px`,
                                     } })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "mx-auto mb-6 inline-grid grid-cols-4 gap-2", children: ["5", "10", "20", "25"].map(value => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleQuickAmount(value), className: `bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${srcAmountOnRamp === value
                                 ? "border-as-border-secondary bg-as-surface-secondary"

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

@@ -0,0 +1,20 @@
+import { components } from "../../../types/api";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
+import { FiatPaymentMethod } from "./FiatPaymentMethod";
+interface PaySectionProps {
+    paymentType: "crypto" | "fiat";
+    selectedSrcChainId: number;
+    setSelectedSrcChainId: (chainId: number) => void;
+    selectedSrcToken: components["schemas"]["Token"];
+    setSelectedSrcToken: (token: components["schemas"]["Token"]) => void;
+    srcAmount: string;
+    setSrcAmount: (amount: string) => void;
+    setIsSrcInputDirty: (dirty: boolean) => void;
+    selectedCryptoPaymentMethod: CryptoPaymentMethodType;
+    selectedFiatPaymentMethod: FiatPaymentMethod;
+    onSelectCryptoPaymentMethod: () => void;
+    onSelectFiatPaymentMethod: () => void;
+    anyspendQuote?: any;
+}
+export declare function PaySection({ paymentType, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, selectedFiatPaymentMethod, onSelectCryptoPaymentMethod, onSelectFiatPaymentMethod, anyspendQuote, }: PaySectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaySection = PaySection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("../../../../global-account/react");
+const utils_1 = require("../../../../shared/utils");
+const formatAddress_1 = require("../../../../shared/utils/formatAddress");
+const number_1 = require("../../../../shared/utils/number");
+const lucide_react_1 = require("lucide-react");
+const react_2 = require("motion/react");
+const react_3 = require("react");
+const CryptoPaymentMethod_1 = require("./CryptoPaymentMethod");
+const FiatPaymentMethod_1 = require("./FiatPaymentMethod");
+const OrderTokenAmount_1 = require("./OrderTokenAmount");
+const TokenBalance_1 = require("./TokenBalance");
+function PaySection({ paymentType, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, selectedFiatPaymentMethod, onSelectCryptoPaymentMethod, onSelectFiatPaymentMethod, anyspendQuote, }) {
+    const { address: globalAddress, wallet: globalWallet, ensName: connectedName } = (0, react_1.useAccountWallet)();
+    const connectedAddress = globalWallet?.address;
+    const { data: srcTokenMetadata } = (0, react_1.useTokenData)(selectedSrcToken?.chainId, selectedSrcToken?.address);
+    // Add ref to track if we've applied metadata
+    const appliedSrcMetadataRef = (0, react_3.useRef)(false);
+    // Update source token with metadata
+    (0, react_3.useEffect)(() => {
+        if (selectedSrcToken && srcTokenMetadata && !appliedSrcMetadataRef.current) {
+            // Mark as applied
+            appliedSrcMetadataRef.current = true;
+            const enhancedToken = {
+                ...selectedSrcToken,
+                decimals: srcTokenMetadata.decimals || selectedSrcToken.decimals,
+                symbol: srcTokenMetadata.symbol || selectedSrcToken.symbol,
+                name: srcTokenMetadata.name || selectedSrcToken.name,
+                metadata: {
+                    ...selectedSrcToken.metadata,
+                    logoURI: srcTokenMetadata?.logoURI || selectedSrcToken.metadata.logoURI,
+                },
+            };
+            setSelectedSrcToken(enhancedToken);
+        }
+    }, [srcTokenMetadata, selectedSrcToken, setSelectedSrcToken]);
+    // Reset source token ref when address/chain changes
+    (0, react_3.useEffect)(() => {
+        appliedSrcMetadataRef.current = false;
+    }, [selectedSrcToken.address, selectedSrcToken.chainId]);
+    return ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [globalAddress ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(connectedAddress || "") })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transfer crypto", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })) : ((0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: onSelectFiatPaymentMethod, children: selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) }))] }), paymentType === "crypto" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
+                            setIsSrcInputDirty(true);
+                            setSrcAmount(value);
+                        }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: (0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyIn?.amountUsd, {
+                                    style: "currency",
+                                    fallback: "",
+                                }) }), (0, jsx_runtime_1.jsx)(TokenBalance_1.TokenBalance, { token: selectedSrcToken, walletAddress: globalAddress, onChangeInput: value => {
+                                    setIsSrcInputDirty(true);
+                                    setSrcAmount(value);
+                                } })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center pb-2 pt-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), (0, jsx_runtime_1.jsx)(react_1.Input, { type: "text", value: srcAmount, onChange: e => setSrcAmount(e.target.value.replace(/[^0-9.]/g, "")), placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-3 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
+                                        width: `${Math.max(50, srcAmount.length * 34)}px`,
+                                    } })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "mx-auto mb-6 inline-grid grid-cols-4 gap-2", children: ["5", "10", "20", "25"].map(value => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => setSrcAmount(value), className: `bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${srcAmount === value
+                                ? "border-as-border-secondary bg-as-surface-secondary"
+                                : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) })] }))] }));
+}

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

@@ -0,0 +1,10 @@
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
+import { FiatPaymentMethod } from "./FiatPaymentMethod";
+interface TabSectionProps {
+    activeTab: "crypto" | "fiat";
+    setActiveTab: (tab: "crypto" | "fiat") => void;
+    setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
+    setSelectedFiatPaymentMethod: (method: FiatPaymentMethod) => void;
+}
+export declare function TabSection({ activeTab, setActiveTab, setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod, }: TabSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabSection = TabSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../../shared/utils/cn");
+const CryptoPaymentMethod_1 = require("./CryptoPaymentMethod");
+const FiatPaymentMethod_1 = require("./FiatPaymentMethod");
+function TabSection({ activeTab, setActiveTab, setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "tab-section w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100", "h-full w-1/2", activeTab === "fiat" ? "translate-x-full" : "translate-x-0"), style: { willChange: "transform" } }), (0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
+                        setActiveTab("crypto");
+                        setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE); // Reset payment method when switching to crypto
+                        setSelectedFiatPaymentMethod(FiatPaymentMethod_1.FiatPaymentMethod.NONE); // Reset fiat payment method when switching to crypto
+                    }, children: "Pay with crypto" }), (0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "fiat" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
+                        setActiveTab("fiat");
+                        setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE); // Reset crypto payment method when switching to fiat
+                        setSelectedFiatPaymentMethod(FiatPaymentMethod_1.FiatPaymentMethod.NONE); // Reset fiat payment method when switching to fiat
+                    }, children: "Pay with Fiat" })] }) }));
+}

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

@@ -9,6 +9,7 @@ export { AnySpendStakeB3 } from "./AnySpendStakeB3";
 export { AnySpendTournament } from "./AnySpendTournament";
 export { AnySpendNFTButton } from "./common/AnySpendNFTButton";
 export { ChainTokenIcon } from "./common/ChainTokenIcon";
+export { CryptoReceiveSection } from "./common/CryptoReceiveSection";
 export { OrderDetails } from "./common/OrderDetails";
 export { OrderDetailsCollapsible } from "./common/OrderDetailsCollapsible";
 export { OrderHistory } from "./common/OrderHistory";
@@ -16,6 +17,7 @@ export { OrderHistoryItem } from "./common/OrderHistoryItem";
 export { OrderStatus } from "./common/OrderStatus";
 export { OrderToken } from "./common/OrderToken";
 export { OrderTokenAmount } from "./common/OrderTokenAmount";
+export { PaySection } from "./common/PaySection";
 export { RecipientSelection } from "./common/RecipientSelection";
 export { StepProgress } from "./common/StepProgress";
 export { TokenBalance } from "./common/TokenBalance";

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

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebviewOnrampPayment = exports.WebviewOnrampOrderStatus = exports.TransferCryptoDetails = exports.TokenBalance = exports.StepProgress = exports.RecipientSelection = exports.OrderTokenAmount = exports.OrderToken = exports.OrderStatus = exports.OrderHistoryItem = exports.OrderHistory = exports.OrderDetailsCollapsible = exports.OrderDetails = exports.ChainTokenIcon = exports.AnySpendNFTButton = exports.AnySpendTournament = exports.AnySpendStakeB3 = exports.AnyspendSignatureMint = exports.AnySpendNFT = exports.AnySpendCustom = exports.AnySpendBuySpin = exports.AnySpendBondKit = exports.AnySpend = void 0;
+exports.WebviewOnrampPayment = exports.WebviewOnrampOrderStatus = exports.TransferCryptoDetails = exports.TokenBalance = exports.StepProgress = exports.RecipientSelection = exports.PaySection = exports.OrderTokenAmount = exports.OrderToken = exports.OrderStatus = exports.OrderHistoryItem = exports.OrderHistory = exports.OrderDetailsCollapsible = exports.OrderDetails = exports.CryptoReceiveSection = exports.ChainTokenIcon = exports.AnySpendNFTButton = exports.AnySpendTournament = exports.AnySpendStakeB3 = exports.AnyspendSignatureMint = exports.AnySpendNFT = exports.AnySpendCustom = exports.AnySpendBuySpin = exports.AnySpendBondKit = exports.AnySpend = void 0;
 // Components
 var AnySpend_1 = require("./AnySpend");
 Object.defineProperty(exports, "AnySpend", { enumerable: true, get: function () { return AnySpend_1.AnySpend; } });
@@ -38,6 +38,8 @@ Object.defineProperty(exports, "AnySpendNFTButton", { enumerable: true, get: fun
 // Common Components
 var ChainTokenIcon_1 = require("./common/ChainTokenIcon");
 Object.defineProperty(exports, "ChainTokenIcon", { enumerable: true, get: function () { return ChainTokenIcon_1.ChainTokenIcon; } });
+var CryptoReceiveSection_1 = require("./common/CryptoReceiveSection");
+Object.defineProperty(exports, "CryptoReceiveSection", { enumerable: true, get: function () { return CryptoReceiveSection_1.CryptoReceiveSection; } });
 var OrderDetails_1 = require("./common/OrderDetails");
 Object.defineProperty(exports, "OrderDetails", { enumerable: true, get: function () { return OrderDetails_1.OrderDetails; } });
 var OrderDetailsCollapsible_1 = require("./common/OrderDetailsCollapsible");
@@ -52,6 +54,8 @@ var OrderToken_1 = require("./common/OrderToken");
 Object.defineProperty(exports, "OrderToken", { enumerable: true, get: function () { return OrderToken_1.OrderToken; } });
 var OrderTokenAmount_1 = require("./common/OrderTokenAmount");
 Object.defineProperty(exports, "OrderTokenAmount", { enumerable: true, get: function () { return OrderTokenAmount_1.OrderTokenAmount; } });
+var PaySection_1 = require("./common/PaySection");
+Object.defineProperty(exports, "PaySection", { enumerable: true, get: function () { return PaySection_1.PaySection; } });
 var RecipientSelection_1 = require("./common/RecipientSelection");
 Object.defineProperty(exports, "RecipientSelection", { enumerable: true, get: function () { return RecipientSelection_1.RecipientSelection; } });
 var StepProgress_1 = require("./common/StepProgress");