@b3dotfun/sdk 0.0.28 → 0.0.29-alpha.1

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

@@ -10,9 +10,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../anyspend");
 const react_1 = require("../../../anyspend/react");
 const react_2 = require("../../../global-account/react");
-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 invariant_1 = __importDefault(require("invariant"));
 const lucide_react_1 = require("lucide-react");
@@ -23,15 +21,17 @@ const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
 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 OrderHistory_1 = require("./common/OrderHistory");
 const OrderStatus_1 = require("./common/OrderStatus");
-const OrderTokenAmount_1 = require("./common/OrderTokenAmount");
 const PanelOnramp_1 = require("./common/PanelOnramp");
 const PanelOnrampPayment_1 = require("./common/PanelOnrampPayment");
+const PaySection_1 = require("./common/PaySection");
 const RecipientSelection_1 = require("./common/RecipientSelection");
-const TokenBalance_1 = require("./common/TokenBalance");
+const TabSection_1 = require("./common/TabSection");
 var PanelView;
 (function (PanelView) {
     PanelView[PanelView["MAIN"] = 0] = "MAIN";
@@ -291,8 +291,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     // );
     // State for recipient selection
     const [recipientAddress, setRecipientAddress] = (0, react_4.useState)();
-    const { address: globalAddress, wallet: globalWallet, ensName: connectedName } = (0, react_2.useAccountWallet)();
-    const connectedAddress = globalWallet?.address;
+    const { address: globalAddress, wallet: globalWallet } = (0, react_2.useAccountWallet)();
     const recipientProfile = (0, react_2.useProfile)({ address: recipientAddress, fresh: true });
     const recipientName = recipientProfile.data?.name;
     // Set default recipient address when wallet changes
@@ -364,113 +363,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
     (0, react_4.useEffect)(() => {
         if (anyspendQuote?.data &&
@@ -764,49 +656,13 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     (0, react_4.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 = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: () => setActivePanel(PanelView.MAIN), onSelectOrder: onSelectOrder }) }));
     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, onBack: () => {
                             setOrderId(undefined);
                             setActivePanel(PanelView.MAIN);
                             setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE); // Reset payment method when going back
                         } })] })) }) }));
-    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)("div", { className: "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" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsxs)(react_3.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" }), (0, jsx_runtime_1.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 === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (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)(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.jsx)(react_3.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: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.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 = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "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(PanelView.CRYPTO_PAYMENT_METHOD), onSelectFiatPaymentMethod: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : ((0, jsx_runtime_1.jsx)(react_3.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: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.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;
                             }
@@ -825,24 +681,10 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                             const tempDstAmount = dstAmount;
                             setSrcAmount(tempDstAmount);
                             setDstAmount(tempSrcAmount);
-                        }, 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" }) }) }), activeTab !== "fiat" && ((0, jsx_runtime_1.jsxs)(react_3.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: [(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: "Receive" }), recipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [recipientAddress ? ((0, jsx_runtime_1.jsx)(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)(recipientAddress || "") }) })) : ("Connect wallet"), (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: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode ? (
-                            // Fixed destination token display in buy 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: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "h-8 w-8 rounded-full" })), (0, jsx_runtime_1.jsx)("span", { className: "text-as-brand text-lg font-bold", children: selectedDstToken.symbol })] })] })) : ((0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: recipientAddress, context: "to", inputValue: dstAmount, onChangeInput: value => {
-                                    setIsSrcInputDirty(false);
-                                    setDstAmount(value);
-                                }, chainId: selectedDstChainId, setChainId: setSelectedDstChainId, token: selectedDstToken, 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 { 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, "%)"] }));
-                                        })()] })] }))] }), getAnyspendQuoteError && ((0, jsx_runtime_1.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: [(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: getAnyspendQuoteError.message })] })), (0, jsx_runtime_1.jsxs)(react_3.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_2.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 }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
+                        }, 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" }) }) }), activeTab === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.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 }))] }), (0, jsx_runtime_1.jsx)(ErrorSection_1.ErrorSection, { error: getAnyspendQuoteError }), (0, jsx_runtime_1.jsxs)(react_3.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_2.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 }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
     const onrampPaymentView = ((0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.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/cjs/anyspend/react/components/AnySpendBondKit.d.ts

@@ -1,2 +1,2 @@
 import { AnySpendBondKitProps } from "../../../global-account/react/stores/useModalStore";
-export declare function AnySpendBondKit({ mode, recipientAddress, contractAddress, minTokensOut, imageUrl, ethAmount: initialEthAmount, onSuccess, }: AnySpendBondKitProps): import("react/jsx-runtime").JSX.Element;
+export declare function AnySpendBondKit({ mode, recipientAddress, contractAddress, minTokensOut, imageUrl, b3Amount: initialB3Amount, onSuccess, }: AnySpendBondKitProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,13 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AnySpendBondKit = AnySpendBondKit;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const bondkit_1 = require("../../../bondkit");
 const react_1 = require("../../../global-account/react");
 const supported_1 = require("../../../shared/constants/chains/supported");
 const react_2 = require("motion/react");
 const react_3 = require("react");
 const viem_1 = require("viem");
-const bondKit_1 = require("../../abis/bondKit");
+const bondkit_1 = require("../../../bondkit");
 const AnySpendCustom_1 = require("./AnySpendCustom");
 // Debounce utility function
 function debounce(func, wait) {
@@ -24,11 +23,11 @@ function formatNumberWithCommas(x) {
     parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     return parts.join(".");
 }
-function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, minTokensOut = "0", imageUrl, ethAmount: initialEthAmount, onSuccess, }) {
+function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, minTokensOut = "0", imageUrl, b3Amount: initialB3Amount, onSuccess, }) {
     const hasMounted = (0, react_1.useHasMounted)();
-    const [showAmountPrompt, setShowAmountPrompt] = (0, react_3.useState)(!initialEthAmount);
-    const [ethAmount, setEthAmount] = (0, react_3.useState)(initialEthAmount || "");
-    const [isAmountValid, setIsAmountValid] = (0, react_3.useState)(!!initialEthAmount);
+    const [showAmountPrompt, setShowAmountPrompt] = (0, react_3.useState)(!initialB3Amount);
+    const [b3Amount, setB3Amount] = (0, react_3.useState)(initialB3Amount || "");
+    const [isAmountValid, setIsAmountValid] = (0, react_3.useState)(!!initialB3Amount);
     const [validationError, setValidationError] = (0, react_3.useState)("");
     const [tokenName, setTokenName] = (0, react_3.useState)("");
     const [tokenSymbol, setTokenSymbol] = (0, react_3.useState)("");
@@ -60,12 +59,12 @@ function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, mi
                 const [name, symbol] = await Promise.all([
                     basePublicClient.readContract({
                         address: contractAddress,
-                        abi: bondKit_1.ABI_bondKit,
+                        abi: bondkit_1.BondkitTokenABI,
                         functionName: "name",
                     }),
                     basePublicClient.readContract({
                         address: contractAddress,
-                        abi: bondKit_1.ABI_bondKit,
+                        abi: bondkit_1.BondkitTokenABI,
                         functionName: "symbol",
                     }),
                 ]);
@@ -82,8 +81,8 @@ function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, mi
             fetchTokenName();
         }
     }, [contractAddress, basePublicClient]);
-    // Get native token data for the chain
-    const { data: tokenData, isError: isTokenError, isLoading, } = (0, react_1.useTokenData)(supported_1.baseMainnet.id, "0x0000000000000000000000000000000000000000");
+    // Get b3 token data
+    const { data: tokenData, isError: isTokenError, isLoading, } = (0, react_1.useTokenData)(supported_1.baseMainnet.id, "0xB3B32F9f8827D4634fE7d973Fa1034Ec9fdDB3B3");
     // Convert token data to AnySpend Token type
     const dstToken = (0, react_3.useMemo)(() => {
         if (!tokenData)
@@ -119,16 +118,16 @@ function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, mi
             setIsLoadingQuote(false);
         }
     }, 500), [bondkitTokenClient]);
-    // Fetch initial quote if ethAmount is provided
+    // Fetch initial quote if b3Amount is provided
     (0, react_3.useEffect)(() => {
-        if (initialEthAmount && bondkitTokenClient) {
-            debouncedGetQuote(initialEthAmount);
+        if (initialB3Amount && bondkitTokenClient) {
+            debouncedGetQuote(initialB3Amount);
         }
-    }, [initialEthAmount, bondkitTokenClient, debouncedGetQuote]);
+    }, [initialB3Amount, bondkitTokenClient, debouncedGetQuote]);
     const validateAndSetAmount = (value) => {
         // Allow empty input
         if (value === "") {
-            setEthAmount("");
+            setB3Amount("");
             setIsAmountValid(false);
             setValidationError("");
             setQuote(null);
@@ -144,14 +143,14 @@ function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, mi
         if ((value.match(/\./g) || []).length > 1) {
             return;
         }
-        // Prevent more than 18 decimal places (ETH precision)
+        // Prevent more than 18 decimal places (B3 precision)
         const parts = value.split(".");
         if (parts[1] && parts[1].length > 18) {
             return;
         }
         // Clean the input - remove leading zeros if not decimal
         const cleanedValue = value.startsWith("0") && !value.startsWith("0.") ? value.replace(/^0+/, "0") : value;
-        setEthAmount(cleanedValue);
+        setB3Amount(cleanedValue);
         try {
             const parsedAmount = (0, viem_1.parseEther)(cleanedValue);
             if (parsedAmount <= BigInt(0)) {
@@ -169,7 +168,7 @@ function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, mi
             setValidationError("Please enter a valid amount");
         }
     };
-    const header = () => ((0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-primary w-full px-6 py-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col items-center space-y-6", children: [(0, jsx_runtime_1.jsxs)("h2", { className: "text-[28px] font-bold", children: ["Buy ", tokenName, " (", tokenSymbol, ")"] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col items-center space-y-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-[28px] font-bold", children: [ethAmount, " ETH"] }), quote && ((0, jsx_runtime_1.jsxs)("span", { className: "text-lg", children: ["\u2248 ", formatNumberWithCommas(parseFloat(quote).toFixed(4)), " ", tokenSymbol] }))] })] }) }));
+    const header = () => ((0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-primary w-full px-6 py-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col items-center space-y-6", children: [(0, jsx_runtime_1.jsxs)("h2", { className: "text-[28px] font-bold", children: ["Buy ", tokenName, " (", tokenSymbol, ")"] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col items-center space-y-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-[28px] font-bold", children: [b3Amount, " B3"] }), quote && ((0, jsx_runtime_1.jsxs)("span", { className: "text-lg", children: ["\u2248 ", formatNumberWithCommas(parseFloat(quote).toFixed(4)), " ", tokenSymbol] }))] })] }) }));
     // Show loading state while fetching token data
     if (isLoading) {
         return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsx)("div", { className: "b3-root b3-modal bg-b3-react-background flex w-full flex-col items-center p-8", children: (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/70 text-center text-sm", children: "Loading payment information..." }) }) }));
@@ -191,18 +190,18 @@ function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, mi
                             opacity: hasMounted ? 1 : 0,
                             y: hasMounted ? 0 : 20,
                             filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between", children: (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/70 text-sm font-medium", children: "ETH Amount" }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)(react_1.Input, { type: "text", inputMode: "decimal", placeholder: "0.1", value: ethAmount, onChange: e => validateAndSetAmount(e.target.value), className: `h-14 px-4 text-lg ${!isAmountValid && ethAmount ? "border-as-red" : "border-b3-react-border"}` }) }), !isAmountValid && ethAmount && (0, jsx_runtime_1.jsx)("p", { className: "text-as-red text-sm", children: validationError }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-2/30 rounded-lg border border-white/10 p-4 backdrop-blur-sm", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/70 text-sm font-medium", children: "Total Cost:" }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary text-lg font-bold", children: [ethAmount || "0", " ETH"] }) })] }), isLoadingQuote ? ((0, jsx_runtime_1.jsx)("div", { className: "mt-2 text-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/70 text-sm", children: "Calculating tokens..." }) })) : quote ? ((0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/70 text-sm font-medium", children: "You'll receive:" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary text-sm font-medium", children: ["\u2248 ", formatNumberWithCommas(parseFloat(quote).toFixed(4)), " ", tokenSymbol] })] })) : null] }), (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => {
-                                        if (isAmountValid && ethAmount) {
+                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between", children: (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/70 text-sm font-medium", children: "B3 Amount" }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)(react_1.Input, { type: "text", inputMode: "decimal", placeholder: "0.1", value: b3Amount, onChange: e => validateAndSetAmount(e.target.value), className: `h-14 px-4 text-lg ${!isAmountValid && b3Amount ? "border-as-red" : "border-b3-react-border"}` }) }), !isAmountValid && b3Amount && (0, jsx_runtime_1.jsx)("p", { className: "text-as-red text-sm", children: validationError }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-2/30 rounded-lg border border-white/10 p-4 backdrop-blur-sm", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/70 text-sm font-medium", children: "Total Cost:" }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary text-lg font-bold", children: [b3Amount || "0", " B3"] }) })] }), isLoadingQuote ? ((0, jsx_runtime_1.jsx)("div", { className: "mt-2 text-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/70 text-sm", children: "Calculating tokens..." }) })) : quote ? ((0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/70 text-sm font-medium", children: "You'll receive:" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary text-sm font-medium", children: ["\u2248 ", formatNumberWithCommas(parseFloat(quote).toFixed(4)), " ", tokenSymbol] })] })) : null] }), (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => {
+                                        if (isAmountValid && b3Amount) {
                                             setShowAmountPrompt(false);
                                         }
-                                    }, disabled: !isAmountValid || !ethAmount || isLoadingQuote, className: "bg-as-brand hover:bg-as-brand/90 text-as-primary mt-4 h-14 w-full rounded-xl text-lg font-medium", children: "Continue" })] }) })] }) }));
+                                    }, disabled: !isAmountValid || !b3Amount || isLoadingQuote, className: "bg-as-brand hover:bg-as-brand/90 text-as-primary mt-4 h-14 w-full rounded-xl text-lg font-medium", children: "Continue" })] }) })] }) }));
     }
     const encodedData = (0, viem_1.encodeFunctionData)({
-        abi: bondKit_1.ABI_bondKit,
+        abi: bondkit_1.BondkitTokenABI,
         functionName: "buyFor",
-        args: [recipientAddress, BigInt(minTokensOut)],
+        args: [recipientAddress, (0, viem_1.parseEther)(b3Amount), BigInt(minTokensOut)],
     });
-    return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.AnySpendCustom, { mode: mode, recipientAddress: recipientAddress, orderType: "custom", dstChainId: supported_1.baseMainnet.id, dstToken: dstToken, dstAmount: (0, viem_1.parseEther)(ethAmount).toString(), contractAddress: contractAddress, encodedData: encodedData, metadata: {
+    return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.AnySpendCustom, { mode: mode, recipientAddress: recipientAddress, orderType: "custom", dstChainId: supported_1.baseMainnet.id, dstToken: dstToken, dstAmount: (0, viem_1.parseEther)(b3Amount).toString(), contractAddress: contractAddress, encodedData: encodedData, metadata: {
             type: "custom",
             action: "BondKit Buy",
         }, header: header, onSuccess: onSuccess, showRecipient: true }));

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

@@ -415,11 +415,11 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                         ? "Receive NFT at"
                         : orderType === "join_tournament"
                             ? "Join for"
-                            : "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [recipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [recipientProfile && ((0, jsx_runtime_1.jsx)("img", { src: recipientProfile.data?.avatar || "", alt: recipientProfile.data?.name || "", className: "bg-b3-react-foreground size-6 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsxs)("div", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: [recipientName && (0, jsx_runtime_1.jsx)("span", { children: (0, utils_1.formatUsername)(recipientName) }), (0, jsx_runtime_1.jsx)("span", { children: (0, formatAddress_1.shortenAddress)(recipientAddress) })] })] }) })) : ((0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Select recipient" }) })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })] }, recipientAddress)) : null;
+                            : "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [recipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: (0, jsx_runtime_1.jsx)("span", { children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.shortenAddress)(recipientAddress) }) }) }) })) : ((0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Select recipient" }) })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })] }, recipientAddress)) : null;
     const historyView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: () => {
                 setActivePanel(PanelView.HISTORY);
             }, onSelectOrder: onSelectOrder }) }));
-    const orderDetailsView = ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background rounded-xl"), 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: activeTab === "fiat" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, onBack: () => {
+    const orderDetailsView = ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mx-auto flex w-full flex-col items-center gap-4", mode === "modal" && "bg-b3-react-background rounded-xl"), 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: activeTab === "fiat" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, onBack: () => {
                             setOrderId(undefined);
                             setActivePanel(PanelView.CONFIRM_ORDER);
                             // Remove orderId from URL when canceling

package/dist/cjs/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;