@b3dotfun/sdk 0.0.28-alpha.0 → 0.0.28-alpha.1

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

@@ -3,12 +3,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { getDefaultToken, USDC_BASE } from "../../../anyspend/index.js";
 import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
 import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet, useProfile, useRouter, useSearchParamsSSR, useTokenData, useTokenFromUrl, } from "../../../global-account/react/index.js";
-import { formatUsername } from "../../../shared/utils/index.js";
 import { cn } from "../../../shared/utils/cn.js";
-import { shortenAddress } from "../../../shared/utils/formatAddress.js";
-import { formatDisplayNumber, formatTokenAmount } from "../../../shared/utils/number.js";
+import { formatTokenAmount } from "../../../shared/utils/number.js";
 import invariant from "invariant";
-import { ArrowDown, ChevronRight, CircleAlert, HistoryIcon } from "lucide-react";
+import { ArrowDown, HistoryIcon } from "lucide-react";
 import { motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
@@ -16,15 +14,17 @@ import { parseUnits } from "viem";
 import { base, mainnet } from "viem/chains";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
+import { CryptoReceiveSection } from "./common/CryptoReceiveSection.js";
+import { ErrorSection } from "./common/ErrorSection.js";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
 import { OrderDetails, OrderDetailsLoadingView } from "./common/OrderDetails.js";
 import { OrderHistory } from "./common/OrderHistory.js";
 import { OrderStatus } from "./common/OrderStatus.js";
-import { OrderTokenAmount } from "./common/OrderTokenAmount.js";
 import { PanelOnramp } from "./common/PanelOnramp.js";
 import { PanelOnrampPayment } from "./common/PanelOnrampPayment.js";
+import { PaySection } from "./common/PaySection.js";
 import { RecipientSelection } from "./common/RecipientSelection.js";
-import { TokenBalance } from "./common/TokenBalance.js";
+import { TabSection } from "./common/TabSection.js";
 export var PanelView;
 (function (PanelView) {
     PanelView[PanelView["MAIN"] = 0] = "MAIN";
@@ -284,8 +284,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     // );
     // State for recipient selection
     const [recipientAddress, setRecipientAddress] = useState();
-    const { address: globalAddress, wallet: globalWallet, ensName: connectedName } = useAccountWallet();
-    const connectedAddress = globalWallet?.address;
+    const { address: globalAddress, wallet: globalWallet } = useAccountWallet();
     const recipientProfile = useProfile({ address: recipientAddress, fresh: true });
     const recipientName = recipientProfile.data?.name;
     // Set default recipient address when wallet changes
@@ -357,113 +356,6 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         }
         // Only run this effect once on mount
     }, [globalAddress, recipientAddress, customRecipients.length]);
-    // Available recipient options
-    // const recipientOptions = useMemo<RecipientOption[]>(() => {
-    //   const options: RecipientOption[] = [];
-    //   // Add current wallet if connected
-    //   if (globalAddress) {
-    //     options.push({
-    //       address: globalAddress,
-    //       icon: "https://gradvatar.com/" + globalAddress,
-    //       label: "Current Wallet",
-    //       ensName: walletName
-    //     });
-    //   }
-    //   // Add custom recipients with their onchain names
-    //   customRecipients.forEach((recipient, index) => {
-    //     options.push({
-    //       ...recipient,
-    //       ensName: customRecipientNames[index] || undefined
-    //     });
-    //   });
-    //   // Add current recipientAddress if it exists and isn't already in options
-    //   if (
-    //     recipientAddress &&
-    //     !options.some(opt => normalizeAddress(opt.address) === normalizeAddress(recipientAddress))
-    //   ) {
-    //     options.push({
-    //       address: recipientAddress,
-    //       label: `Custom (${centerTruncate(recipientAddress, 6)})`,
-    //       ensName: recipientName
-    //     });
-    //   }
-    //   return options;
-    // }, [globalAddress, customRecipients, recipientAddress, recipientName, walletName, customRecipientNames]);
-    // const handleCreateOrder = async (recipientAddress: string) => {
-    //   try {
-    //     invariant(anyspendPrice, "Relay price is not found");
-    //     const srcAmountBigInt = parseUnits(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals);
-    //     createOrder({
-    //       recipientAddress,
-    //       orderType: "swap",
-    //       srcChain: selectedSrcChainId,
-    //       dstChain: selectedDstChainId,
-    //       srcToken: selectedSrcToken,
-    //       dstToken: selectedDstToken,
-    //       srcAmount: srcAmountBigInt.toString(),
-    //       expectedDstAmount: anyspendPrice?.data?.currencyOut?.amount || "0"
-    //     });
-    //   } catch (err) {
-    //     console.error(err);
-    //     toast.error((err as Error).message);
-    //     throw err; // Re-throw to handle in the calling function
-    //   }
-    // };
-    // const handleSaveRecipient = async () => {
-    //   if (!newRecipientAddress) {
-    //     toast.error("Please enter an address");
-    //     recipientInputRef.current?.focus();
-    //     return;
-    //   }
-    //   let normalizedAddress: string;
-    //   try {
-    //     // Handle ENS name
-    //     if (
-    //       newRecipientAddress.toLowerCase().endsWith(".eth") ||
-    //       newRecipientAddress.startsWith("@") ||
-    //       newRecipientAddress.includes(".b3")
-    //     ) {
-    //       if (!resolvedAddress) {
-    //         toast.error("Could not resolve ENS name");
-    //         return;
-    //       }
-    //       normalizedAddress = getAddress(resolvedAddress);
-    //     }
-    //     // Handle regular address
-    //     else {
-    //       if (!isEvmOrSolanaAddress(newRecipientAddress)) {
-    //         toast.error("Please enter a valid address or ENS name");
-    //         recipientInputRef.current?.focus();
-    //         return;
-    //       }
-    //       normalizedAddress = normalizeAddress(newRecipientAddress);
-    //     }
-    //     // Check for duplicate address
-    //     if (!customRecipients.some(r => normalizeAddress(r.address) === normalizedAddress)) {
-    //       // Add to custom recipients
-    //       const newRecipient = {
-    //         address: normalizedAddress,
-    //         label:
-    //           newRecipientAddress.toLowerCase().endsWith(".eth") ||
-    //           newRecipientAddress.startsWith("@") ||
-    //           newRecipientAddress.includes(".b3")
-    //             ? newRecipientAddress // Keep ENS name as label
-    //             : `Custom (${centerTruncate(normalizedAddress, 6)})`
-    //       };
-    //       setCustomRecipients(prev => [...prev, newRecipient]);
-    //     }
-    //     setRecipientAddress(normalizedAddress);
-    //     // Handle based on login state
-    //     if (!globalAddress) {
-    //       await handleCreateOrder(normalizedAddress);
-    //     } else {
-    //       setActivePanel(PanelView.MAIN);
-    //     }
-    //   } catch (err) {
-    //     // Error handling is done in handleCreateOrder
-    //     console.error("Error in handleSaveRecipient:", err);
-    //   }
-    // };
     // Update dependent amount when relay price changes
     useEffect(() => {
         if (anyspendQuote?.data &&
@@ -757,49 +649,13 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     useEffect(() => {
         window.scrollTo({ top: 0, behavior: "smooth" });
     }, [activePanel]);
-    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,
-        };
-    };
-    // Add state for rate details toggle
-    // const [showRateDetails, setShowRateDetails] = useState(false);
     const historyView = (_jsx("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: _jsx(OrderHistory, { mode: mode, onBack: () => setActivePanel(PanelView.MAIN), onSelectOrder: onSelectOrder }) }));
     const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: oat.data.order }), _jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, onBack: () => {
                             setOrderId(undefined);
                             setActivePanel(PanelView.MAIN);
                             setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when going back
                         } })] })) }) }));
-    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && (_jsxs("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx("div", { className: "w-full", children: _jsxs("div", { className: "bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl", children: [_jsx("div", { className: cn("bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100", "h-full w-1/2", activeTab === "fiat" ? "translate-x-full" : "translate-x-0"), style: { willChange: "transform" } }), _jsx("button", { className: cn("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
-                                setActiveTab("crypto");
-                                setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when switching to crypto
-                                setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE); // Reset fiat payment method when switching to crypto
-                            }, children: "Pay with crypto" }), _jsx("button", { className: cn("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "fiat" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
-                                setActiveTab("fiat");
-                                setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset crypto payment method when switching to fiat
-                                setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE); // Reset fiat payment method when switching to fiat
-                            }, children: "Pay with Fiat" })] }) }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsxs(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: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [connectedAddress ? (_jsx(_Fragment, { children: _jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") }) })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx(OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
-                                    setIsSrcInputDirty(true);
-                                    setSrcAmount(value);
-                                }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, { style: "currency", fallback: "" }) }), _jsx(TokenBalance, { token: selectedSrcToken, walletAddress: globalAddress, onChangeInput: value => {
-                                            setIsSrcInputDirty(true);
-                                            setSrcAmount(value);
-                                        } })] })] })) : (_jsx(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: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId }) })), _jsx(Button, { variant: "ghost", className: cn("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
+    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && (_jsxs("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsx(PaySection, { paymentType: "crypto", selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, selectedFiatPaymentMethod: selectedFiatPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), onSelectFiatPaymentMethod: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : (_jsx(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: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD }) })), _jsx(Button, { variant: "ghost", className: cn("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
                             if (activeTab === "fiat" || isBuyMode) {
                                 return;
                             }
@@ -818,24 +674,10 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                             const tempDstAmount = dstAmount;
                             setSrcAmount(tempDstAmount);
                             setDstAmount(tempSrcAmount);
-                        }, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab !== "fiat" && (_jsxs(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: "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: [_jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? (_jsx("button", { className: cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsxs(_Fragment, { children: [recipientAddress ? (_jsx(_Fragment, { children: _jsx("span", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: recipientName ? formatUsername(recipientName) : shortenAddress(recipientAddress || "") }) })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] }) })) : (_jsx("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode ? (
-                            // Fixed destination token display in buy mode
-                            _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), _jsxs("div", { className: "bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3", children: [selectedDstToken.metadata?.logoURI && (_jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "h-8 w-8 rounded-full" })), _jsx("span", { className: "text-as-brand text-lg font-bold", children: selectedDstToken.symbol })] })] })) : (_jsx(OrderTokenAmount, { address: recipientAddress, context: "to", inputValue: dstAmount, onChangeInput: value => {
-                                    setIsSrcInputDirty(false);
-                                    setDstAmount(value);
-                                }, chainId: selectedDstChainId, setChainId: setSelectedDstChainId, token: selectedDstToken, setToken: setSelectedDstToken })), _jsxs("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: [formatDisplayNumber(anyspendQuote?.data?.currencyOut?.amountUsd, { style: "currency", fallback: "" }), anyspendQuote?.data?.currencyIn?.amountUsd &&
-                                        anyspendQuote?.data?.currencyOut?.amountUsd &&
-                                        (() => {
-                                            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 (_jsxs("span", { className: "ml-2", style: { color: percentageNum >= 10 ? "red" : "#FFD700" }, children: ["(", isNegative ? "-" : "", percentage, "%)"] }));
-                                        })()] })] }))] }), getAnyspendQuoteError && (_jsxs("div", { className: "bg-as-on-surface-1 flex w-full max-w-[460px] items-center gap-2 rounded-2xl px-4 py-2", children: [_jsx(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" }), _jsx("div", { className: "text-as-red text-sm", children: getAnyspendQuoteError.message })] })), _jsxs(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: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: [_jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
+                        }, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, onChangeDstAmount: value => {
+                            setIsSrcInputDirty(false);
+                            setDstAmount(value);
+                        }, anyspendQuote: anyspendQuote }))] }), _jsx(ErrorSection, { error: getAnyspendQuoteError }), _jsxs(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: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: [_jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
     const onrampPaymentView = (_jsx(PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName || undefined, recipientAddress: recipientAddress, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
             setOrderId(orderId);
             setActivePanel(PanelView.ORDER_DETAILS);

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { eqci, getDefaultToken, roundUpUSDCBaseAmountToNearest } from "../../../anyspend/index.js";
 import { RELAY_ETH_ADDRESS, USDC_BASE } from "../../../anyspend/constants/index.js";
 import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useAnyspendTokenList, useConnectedUserProfile, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
@@ -409,11 +409,11 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                         ? "Receive NFT at"
                         : orderType === "join_tournament"
                             ? "Join for"
-                            : "Recipient" }), _jsxs("div", { className: "flex items-center gap-2", children: [recipientAddress ? (_jsx("button", { className: cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsxs(_Fragment, { children: [recipientProfile && (_jsx("img", { src: recipientProfile.data?.avatar || "", alt: recipientProfile.data?.name || "", className: "bg-b3-react-foreground size-6 rounded-full object-cover opacity-100" })), _jsxs("div", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: [recipientName && _jsx("span", { children: formatUsername(recipientName) }), _jsx("span", { children: shortenAddress(recipientAddress) })] })] }) })) : (_jsx("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx("div", { className: "text-sm font-medium", children: "Select recipient" }) })), _jsx(ChevronRight, { className: "h-4 w-4" })] })] }, recipientAddress)) : null;
+                            : "Recipient" }), _jsxs("div", { className: "flex items-center gap-2", children: [recipientAddress ? (_jsx("button", { className: cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx(_Fragment, { children: _jsx("div", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: _jsx("span", { children: recipientName ? formatUsername(recipientName) : shortenAddress(recipientAddress) }) }) }) })) : (_jsx("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx("div", { className: "text-sm font-medium", children: "Select recipient" }) })), _jsx(ChevronRight, { className: "h-4 w-4" })] })] }, recipientAddress)) : null;
     const historyView = (_jsx("div", { className: cn("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: _jsx(OrderHistory, { mode: mode, onBack: () => {
                 setActivePanel(PanelView.HISTORY);
             }, onSelectOrder: onSelectOrder }) }));
-    const orderDetailsView = (_jsxs("div", { className: cn("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background rounded-xl"), children: [oat && (_jsxs(_Fragment, { children: [_jsx(OrderStatusDisplay, { order: oat.data.order }), _jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: activeTab === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, onBack: () => {
+    const orderDetailsView = (_jsxs("div", { className: cn("mx-auto flex w-full flex-col items-center gap-4", mode === "modal" && "bg-b3-react-background rounded-xl"), children: [oat && (_jsxs(_Fragment, { children: [_jsx(OrderStatusDisplay, { order: oat.data.order }), _jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: activeTab === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, onBack: () => {
                             setOrderId(undefined);
                             setActivePanel(PanelView.CONFIRM_ORDER);
                             // Remove orderId from URL when canceling

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

@@ -0,0 +1,10 @@
+export declare function AnySpendDepositHype(props: {
+    loadOrder?: string;
+    mode?: "modal" | "page";
+    recipientAddress: string;
+    paymentType?: "crypto" | "fiat";
+    sourceTokenAddress?: string;
+    sourceTokenChainId?: number;
+    onSuccess?: () => void;
+    depositContractAddress?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,257 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { B3_TOKEN } from "../../../anyspend/index.js";
+import { Button, ShinyButton, StyleRoot, TransitionPanel } from "../../../global-account/react/index.js";
+import { cn } from "../../../shared/utils/cn.js";
+import invariant from "invariant";
+import { motion } from "motion/react";
+import { useMemo } from "react";
+import { toast } from "sonner";
+import { encodeFunctionData } from "viem";
+import { base } from "viem/chains";
+import { PanelView, useAnyspendFlow } from "../hooks/useAnyspendFlow.js";
+import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
+import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
+import { CryptoReceiveSection } from "./common/CryptoReceiveSection.js";
+import { ErrorSection } from "./common/ErrorSection.js";
+import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
+import { OrderDetails } from "./common/OrderDetails.js";
+import { OrderStatus } from "./common/OrderStatus.js";
+import { PaySection } from "./common/PaySection.js";
+import { RecipientSelection } from "./common/RecipientSelection.js";
+import { ESCROW_ABI } from "../../../anyspend/abis/escrow.js";
+import { ArrowDown } from "lucide-react";
+import { PanelOnramp } from "./common/PanelOnramp.js";
+function generateEncodedDataForDepositHype(amount, beneficiary) {
+    invariant(BigInt(amount) > 0, "Amount must be greater than zero");
+    const encodedData = encodeFunctionData({
+        abi: ESCROW_ABI,
+        functionName: "depositFor",
+        args: [beneficiary, B3_TOKEN.address, BigInt(amount)],
+    });
+    return encodedData;
+}
+export function AnySpendDepositHype(props) {
+    const fingerprintConfig = getFingerprintConfig();
+    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _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, } = useAnyspendFlow({
+        paymentType,
+        recipientAddress,
+        loadOrder,
+        isDepositMode: true,
+        onTransactionSuccess: onSuccess,
+        sourceTokenAddress,
+        sourceTokenChainId,
+    });
+    // Button state logic
+    const btnInfo = 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 === 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.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(PanelView.RECIPIENT_SELECTION);
+            return;
+        }
+        if (paymentType === "crypto") {
+            if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
+                setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD);
+                return;
+            }
+            await handleCryptoOrder();
+        }
+        else if (paymentType === "fiat") {
+            if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
+                setActivePanel(PanelView.FIAT_PAYMENT_METHOD);
+                return;
+            }
+            await handleFiatOrder();
+        }
+    };
+    // Handle crypto order creation
+    const handleCryptoOrder = async () => {
+        try {
+            invariant(anyspendQuote, "Relay price is not found");
+            invariant(selectedRecipientAddress, "Recipient address is not found");
+            invariant(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: base.id,
+                srcToken: selectedSrcToken,
+                dstToken: B3_TOKEN,
+                srcAmount: srcAmountBigInt.toString(),
+                creatorAddress: globalAddress,
+                payload: {
+                    amount: depositAmountWei,
+                    data: encodedData,
+                    to: depositContractAddress,
+                    action: "deposit HYPE",
+                },
+            });
+        }
+        catch (err) {
+            console.error(err);
+            toast.error("Failed to create order: " + err.message);
+        }
+    };
+    // Handle fiat order creation
+    const handleFiatOrder = async () => {
+        try {
+            invariant(anyspendQuote, "Relay price is not found");
+            invariant(selectedRecipientAddress, "Recipient address is not found");
+            invariant(depositContractAddress, "Deposit contract address is not found");
+            if (!srcAmount || parseFloat(srcAmount) <= 0) {
+                toast.error("Please enter a valid amount");
+                return;
+            }
+            // Determine vendor and payment method string
+            let vendor;
+            let paymentMethodString = "";
+            if (selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY) {
+                if (coinbaseAvailablePaymentMethods.length === 0) {
+                    toast.error("Coinbase Pay not available");
+                    return;
+                }
+                vendor = "coinbase";
+                paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || "";
+            }
+            else if (selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE) {
+                if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
+                    toast.error("Stripe not available");
+                    return;
+                }
+                vendor = "stripe-web2";
+                paymentMethodString = "";
+            }
+            else {
+                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: base.id,
+                dstToken: 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);
+            toast.error("Failed to create order: " + err.message);
+        }
+    };
+    // Order details view
+    const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: oat.data.order }), _jsx(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" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, onBack: () => {
+                            setActivePanel(PanelView.MAIN);
+                            onSuccess?.();
+                        } })] })) }) }));
+    // Loading view
+    const loadingView = (_jsx("div", { className: "mx-auto flex w-full flex-col items-center gap-4 p-5", children: _jsx("div", { className: "text-as-primary", children: "Loading order details..." }) }));
+    // Panel views
+    const recipientSelectionView = (_jsx(RecipientSelection, { initialValue: selectedRecipientAddress || "", onBack: () => setActivePanel(PanelView.MAIN), onConfirm: address => {
+            setSelectedRecipientAddress(address);
+            setActivePanel(PanelView.MAIN);
+        } }));
+    const cryptoPaymentMethodView = (_jsx(CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: undefined, selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {
+            setSelectedCryptoPaymentMethod(method);
+            setActivePanel(PanelView.MAIN);
+        } }));
+    const fiatPaymentMethodView = (_jsx(FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: () => setActivePanel(PanelView.MAIN), onSelectPaymentMethod: (method) => {
+            setSelectedFiatPaymentMethod(method);
+            setActivePanel(PanelView.MAIN);
+        }, srcAmountOnRamp: srcAmount }));
+    // If showing token selection, render with panel transitions
+    return (_jsx(StyleRoot, { children: _jsx("div", { className: 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: _jsx(TransitionPanel, { activeIndex: orderId
+                    ? oat
+                        ? PanelView.ORDER_DETAILS
+                        : PanelView.LOADING
+                    : activePanel === PanelView.ORDER_DETAILS
+                        ? PanelView.MAIN
+                        : activePanel, className: 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: [
+                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: _jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsx("div", { children: _jsx("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(PaySection, { paymentType: "crypto", selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, selectedFiatPaymentMethod: selectedFiatPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), onSelectFiatPaymentMethod: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : (_jsx(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: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: B3_TOKEN, destinationChainId: base.id, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD }) })), _jsx(Button, { variant: "ghost", className: 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: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: B3_TOKEN, selectedDstChainId: base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
+                                                    setIsSrcInputDirty(false);
+                                                    setSrcAmount(value);
+                                                }, anyspendQuote: anyspendQuote }))] }) }), _jsx(ErrorSection, { error: getAnyspendQuoteError }), _jsx(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: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }) })] }) }, "main-view"),
+                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: cryptoPaymentMethodView }, "crypto-payment-method-view"),
+                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: fiatPaymentMethodView }, "fiat-payment-method-view"),
+                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: recipientSelectionView }, "recipient-selection-view"),
+                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: orderDetailsView }, "order-details-view"),
+                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: loadingView }, "loading-view"),
+                ] }) }) }));
+}

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