@b3dotfun/sdk 0.0.7 → 0.0.8

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

@@ -8,14 +8,15 @@ exports.PanelView = void 0;
 exports.AnySpend = AnySpend;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../anyspend");
-const react_1 = require("../../../global-account/react");
+const react_1 = require("../../../anyspend/react");
+const react_2 = require("../../../global-account/react");
 const cn_1 = require("../../../shared/utils/cn");
 const formatAddress_1 = require("../../../shared/utils/formatAddress");
 const number_1 = require("../../../shared/utils/number");
 const framer_motion_1 = require("framer-motion");
 const invariant_1 = __importDefault(require("invariant"));
 const lucide_react_1 = require("lucide-react");
-const react_2 = require("react");
+const react_3 = require("react");
 const sonner_1 = require("sonner");
 const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
@@ -36,20 +37,20 @@ var PanelView;
     PanelView[PanelView["FIAT_PAYMENT"] = 4] = "FIAT_PAYMENT";
 })(PanelView || (exports.PanelView = PanelView = {}));
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
-function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet = true, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps }) {
-    const searchParams = (0, react_1.useSearchParamsSSR)();
-    const router = (0, react_1.useRouter)();
+function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet = true, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, }) {
+    const searchParams = (0, react_2.useSearchParamsSSR)();
+    const router = (0, react_2.useRouter)();
     // Determine if we're in "buy mode" based on whether destination token props are provided
     const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
     // Add refs to track URL state
-    const initialUrlProcessed = (0, react_2.useRef)(false);
-    const lastUrlUpdate = (0, react_2.useRef)(null);
-    const [activeTab, setActiveTab] = (0, react_2.useState)(defaultActiveTab);
-    const [orderId, setOrderId] = (0, react_2.useState)(loadOrder);
-    const { orderAndTransactions: oat, getOrderAndTransactionsError } = (0, anyspend_1.useAnyspendOrderAndTransactions)(isMainnet, orderId);
+    const initialUrlProcessed = (0, react_3.useRef)(false);
+    const lastUrlUpdate = (0, react_3.useRef)(null);
+    const [activeTab, setActiveTab] = (0, react_3.useState)(defaultActiveTab);
+    const [orderId, setOrderId] = (0, react_3.useState)(loadOrder);
+    const { orderAndTransactions: oat, getOrderAndTransactionsError } = (0, react_1.useAnyspendOrderAndTransactions)(isMainnet, orderId);
     !!getOrderAndTransactionsError && console.log("getOrderAndTransactionsError", getOrderAndTransactionsError);
-    const [activePanel, setActivePanel] = (0, react_2.useState)(loadOrder ? PanelView.ORDER_DETAILS : PanelView.MAIN);
-    const [customRecipients, setCustomRecipients] = (0, react_2.useState)([]);
+    const [activePanel, setActivePanel] = (0, react_3.useState)(loadOrder ? PanelView.ORDER_DETAILS : PanelView.MAIN);
+    const [customRecipients, setCustomRecipients] = (0, react_3.useState)([]);
     // const [newRecipientAddress, setNewRecipientAddress] = useState("");
     // const recipientInputRef = useRef<HTMLInputElement>(null);
     // Get initial chain IDs from URL or defaults
@@ -57,19 +58,19 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
     const initialDstChainId = parseInt(searchParams.get("toChainId") || "0") ||
         (isBuyMode ? destinationTokenChainId : isMainnet ? chains_1.base.id : chains_1.b3Sepolia.id);
     // State for source chain/token selection
-    const [selectedSrcChainId, setSelectedSrcChainId] = (0, react_2.useState)(initialSrcChainId);
+    const [selectedSrcChainId, setSelectedSrcChainId] = (0, react_3.useState)(initialSrcChainId);
     const defaultSrcToken = (0, anyspend_1.getDefaultToken)(selectedSrcChainId);
-    const srcTokenFromUrl = (0, react_1.useTokenFromUrl)({
+    const srcTokenFromUrl = (0, react_2.useTokenFromUrl)({
         defaultToken: defaultSrcToken,
-        prefix: "from"
+        prefix: "from",
     });
-    const [selectedSrcToken, setSelectedSrcToken] = (0, react_2.useState)(srcTokenFromUrl);
-    const { data: srcTokenMetadata } = (0, react_1.useTokenData)(selectedSrcToken?.chainId, selectedSrcToken?.address);
-    const [srcAmount, setSrcAmount] = (0, react_2.useState)(searchParams.get("fromAmount") || "0.01");
+    const [selectedSrcToken, setSelectedSrcToken] = (0, react_3.useState)(srcTokenFromUrl);
+    const { data: srcTokenMetadata } = (0, react_2.useTokenData)(selectedSrcToken?.chainId, selectedSrcToken?.address);
+    const [srcAmount, setSrcAmount] = (0, react_3.useState)(searchParams.get("fromAmount") || "0.01");
     // State for onramp amount
-    const [srcAmountOnRamp, setSrcAmountOnRamp] = (0, react_2.useState)(searchParams.get("fromAmount") || "5");
+    const [srcAmountOnRamp, setSrcAmountOnRamp] = (0, react_3.useState)(searchParams.get("fromAmount") || "5");
     // State for destination chain/token selection
-    const [selectedDstChainId, setSelectedDstChainId] = (0, react_2.useState)(initialDstChainId);
+    const [selectedDstChainId, setSelectedDstChainId] = (0, react_3.useState)(initialDstChainId);
     const defaultDstToken = isBuyMode
         ? {
             symbol: "",
@@ -77,22 +78,22 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
             address: destinationTokenAddress,
             name: "",
             decimals: 18,
-            metadata: {}
+            metadata: {},
         }
         : (0, anyspend_1.getDefaultToken)(selectedDstChainId);
-    const dstTokenFromUrl = (0, react_1.useTokenFromUrl)({
+    const dstTokenFromUrl = (0, react_2.useTokenFromUrl)({
         defaultToken: defaultDstToken,
-        prefix: "to"
+        prefix: "to",
     });
-    const [selectedDstToken, setSelectedDstToken] = (0, react_2.useState)(isBuyMode ? defaultDstToken : dstTokenFromUrl);
-    const { data: dstTokenMetadata } = (0, react_1.useTokenData)(selectedDstToken?.chainId, selectedDstToken?.address);
-    const [dstAmount, setDstAmount] = (0, react_2.useState)(searchParams.get("toAmount") || "");
-    const [isSrcInputDirty, setIsSrcInputDirty] = (0, react_2.useState)(true);
+    const [selectedDstToken, setSelectedDstToken] = (0, react_3.useState)(isBuyMode ? defaultDstToken : dstTokenFromUrl);
+    const { data: dstTokenMetadata } = (0, react_2.useTokenData)(selectedDstToken?.chainId, selectedDstToken?.address);
+    const [dstAmount, setDstAmount] = (0, react_3.useState)(searchParams.get("toAmount") || "");
+    const [isSrcInputDirty, setIsSrcInputDirty] = (0, react_3.useState)(true);
     // Add refs to track if we've applied metadata
-    const appliedSrcMetadataRef = (0, react_2.useRef)(false);
-    const appliedDstMetadataRef = (0, react_2.useRef)(false);
+    const appliedSrcMetadataRef = (0, react_3.useRef)(false);
+    const appliedDstMetadataRef = (0, react_3.useRef)(false);
     // Update source token with metadata
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         if (selectedSrcToken && srcTokenMetadata && !appliedSrcMetadataRef.current) {
             // Mark as applied
             appliedSrcMetadataRef.current = true;
@@ -103,18 +104,18 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
                 name: srcTokenMetadata.name || selectedSrcToken.name,
                 metadata: {
                     ...selectedSrcToken.metadata,
-                    logoURI: srcTokenMetadata?.logoURI || selectedSrcToken.metadata.logoURI
-                }
+                    logoURI: srcTokenMetadata?.logoURI || selectedSrcToken.metadata.logoURI,
+                },
             };
             setSelectedSrcToken(enhancedToken);
         }
     }, [srcTokenMetadata, selectedSrcToken]);
     // Reset source token ref when address/chain changes
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         appliedSrcMetadataRef.current = false;
     }, [selectedSrcToken.address, selectedSrcToken.chainId]);
     // Update destination token with metadata
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         if (selectedDstToken && dstTokenMetadata && !appliedDstMetadataRef.current) {
             // Mark as applied
             appliedDstMetadataRef.current = true;
@@ -125,18 +126,18 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
                 name: dstTokenMetadata.name || selectedDstToken.name,
                 metadata: {
                     ...selectedDstToken.metadata,
-                    logoURI: dstTokenMetadata?.logoURI || selectedDstToken.metadata.logoURI
-                }
+                    logoURI: dstTokenMetadata?.logoURI || selectedDstToken.metadata.logoURI,
+                },
             };
             setSelectedDstToken(enhancedToken);
         }
     }, [dstTokenMetadata, selectedDstToken]);
     // Reset destination token ref when address/chain changes
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         appliedDstMetadataRef.current = false;
     }, [selectedDstToken.address, selectedDstToken.chainId]);
     // Load swap configuration from URL on initial render
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         // Skip if we've already processed the URL or if we have an order to load
         if (initialUrlProcessed.current || loadOrder)
             return;
@@ -173,7 +174,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
         initialUrlProcessed.current = true;
     }, [searchParams, loadOrder]);
     // Update URL when swap configuration changes - but not on initial load
-    const updateSwapParamsInURL = (0, react_2.useCallback)(() => {
+    const updateSwapParamsInURL = (0, react_3.useCallback)(() => {
         // Skip if:
         // 1. There's an active order or orderId in the URL
         // 2. We're not on the main panel
@@ -192,7 +193,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
             fromAmount: activeTab === "crypto" ? srcAmount : undefined,
             toChainId: selectedDstChainId.toString(),
             toCurrency: selectedDstToken.address,
-            toAmount: dstAmount
+            toAmount: dstAmount,
         };
         // Compare with last update to prevent unnecessary URL changes
         const lastState = lastUrlUpdate.current;
@@ -241,10 +242,10 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
         selectedDstToken.address,
         dstAmount,
         router,
-        srcAmountOnRamp
+        srcAmountOnRamp,
     ]);
     // Update URL when relevant state changes - but only after initial render
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         // Skip the URL update on first render
         if (initialUrlProcessed.current) {
             updateSwapParamsInURL();
@@ -255,7 +256,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
         selectedSrcToken.address,
         selectedDstChainId,
         selectedDstToken.address,
-        updateSwapParamsInURL
+        updateSwapParamsInURL,
     ]);
     // Use our hook for ENS resolution
     // const { address: resolvedAddress } = useResolveOnchainName(
@@ -275,10 +276,10 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
     //   [selectedDstChainId, newRecipientAddress, resolvedAddress]
     // );
     // State for recipient selection
-    const [recipientAddress, setRecipientAddress] = (0, react_2.useState)();
-    const { address: globalAddress, wallet: globalWallet } = (0, react_1.useAccountWallet)();
+    const [recipientAddress, setRecipientAddress] = (0, react_3.useState)();
+    const { address: globalAddress, wallet: globalWallet } = (0, react_2.useAccountWallet)();
     // Set default recipient address when wallet changes
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         setRecipientAddress(recipientAddressFromProps || globalAddress);
     }, [recipientAddressFromProps, globalAddress]);
     // Get anyspend price
@@ -286,7 +287,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
         ? (0, viem_1.parseUnits)(srcAmount.replaceAll(",", ""), selectedSrcToken.decimals).toString()
         : (0, viem_1.parseUnits)(dstAmount.replaceAll(",", ""), selectedDstToken.decimals).toString();
     const srcAmountOnrampInWei = (0, viem_1.parseUnits)(srcAmountOnRamp.replaceAll(",", ""), anyspend_1.USDC_BASE.decimals).toString();
-    const { anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError } = (0, anyspend_1.useAnyspendQuote)(isMainnet, activeTab === "crypto"
+    const { anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError } = (0, react_1.useAnyspendQuote)(isMainnet, activeTab === "crypto"
         ? {
             srcChain: selectedSrcChainId,
             dstChain: isBuyMode ? destinationTokenChainId : selectedDstChainId,
@@ -294,7 +295,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
             dstTokenAddress: isBuyMode ? destinationTokenAddress : selectedDstToken.address,
             type: anyspend_1.OrderType.Swap,
             tradeType: isSrcInputDirty ? anyspend_1.TradeType.EXACT_INPUT : anyspend_1.TradeType.EXPECTED_OUTPUT,
-            amount: activeInputAmountInWei
+            amount: activeInputAmountInWei,
         }
         : {
             srcChain: chains_1.base.id,
@@ -303,15 +304,15 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
             dstTokenAddress: isBuyMode ? destinationTokenAddress : selectedDstToken.address,
             type: anyspend_1.OrderType.Swap,
             tradeType: anyspend_1.TradeType.EXACT_INPUT,
-            amount: srcAmountOnrampInWei
+            amount: srcAmountOnrampInWei,
         });
     // Replace the old ENS lookup with our new hooks
-    const { name: recipientName } = (0, react_1.useOnchainName)(recipientAddress);
+    const { name: recipientName } = (0, react_2.useOnchainName)(recipientAddress);
     // const { name: walletName } = useOnchainName(globalAddress);
     // Batch lookup for custom recipients
     // const { names: customRecipientNames } = useOnchainNames(customRecipients.map(r => r.address));
     // Load custom recipients from local storage on mount
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         try {
             const savedRecipients = localStorage.getItem(ANYSPEND_RECIPIENTS_KEY);
             if (savedRecipients) {
@@ -442,7 +443,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
     //   }
     // };
     // Update dependent amount when relay price changes
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         if (anyspendQuote?.data &&
             anyspendQuote.data.currencyIn?.amount &&
             anyspendQuote.data.currencyIn?.currency?.decimals &&
@@ -468,7 +469,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
             }
         }
     }, [anyspendQuote, isSrcInputDirty]);
-    const { createOrder, isCreatingOrder } = (0, anyspend_1.useAnyspendCreateOrder)({
+    const { createOrder, isCreatingOrder } = (0, react_1.useAnyspendCreateOrder)({
         onSuccess: data => {
             const orderId = data.data.id;
             setOrderId(orderId);
@@ -482,10 +483,10 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
         onError: error => {
             console.error(error);
             sonner_1.toast.error("Failed to create order: " + error.message);
-        }
+        },
     });
     // Determine button state and text
-    const btnInfo = (0, react_2.useMemo)(() => {
+    const btnInfo = (0, react_3.useMemo)(() => {
         if (activeInputAmountInWei === "0")
             return { text: "Enter an amount", disable: true, error: false };
         if (isLoadingAnyspendQuote)
@@ -507,7 +508,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
         anyspendQuote,
         activeTab,
         isBuyMode,
-        selectedDstToken.symbol
+        selectedDstToken.symbol,
     ]);
     // Handle main button click
     const onMainButtonClick = async () => {
@@ -537,7 +538,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
                     : selectedDstToken,
                 srcAmount: srcAmountBigInt.toString(),
                 expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount || "0",
-                creatorAddress: globalAddress
+                creatorAddress: globalAddress,
             });
         }
         catch (err) {
@@ -557,7 +558,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
     // const setIsDynamicModalOpen = useModalStore(state => state.setB3ModalOpen);
     // const setDynamicModalContentType = useModalStore(state => state.setB3ModalContentType);
     // Update useEffect for URL parameter to not override loadOrder
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         if (loadOrder)
             return; // Skip if we have a loadOrder
         const orderIdParam = searchParams.get("orderId");
@@ -575,7 +576,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
         router.push(`${window.location.pathname}?${params.toString()}`);
     };
     // Save custom recipients to local storage when they change
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         try {
             localStorage.setItem(ANYSPEND_RECIPIENTS_KEY, JSON.stringify(customRecipients));
         }
@@ -584,10 +585,10 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
         }
     }, [customRecipients]);
     // Scroll to top when panel changes
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         window.scrollTo({ top: 0, behavior: "smooth" });
     }, [activePanel]);
-    const [isOpenPasteRecipientAddressModal, setIsOpenPasteRecipientAddressModal] = (0, react_2.useState)(false);
+    const [isOpenPasteRecipientAddressModal, setIsOpenPasteRecipientAddressModal] = (0, react_3.useState)(false);
     const calculatePriceImpact = (inputUsd, outputUsd) => {
         if (!inputUsd || !outputUsd) {
             return { percentage: "0.00", isNegative: false };
@@ -605,7 +606,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
         }
         return {
             percentage: Math.abs(percentageValue).toFixed(2),
-            isNegative: percentageValue < 0
+            isNegative: percentageValue < 0,
         };
     };
     // Add state for rate details toggle
@@ -621,7 +622,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
                                         } })] }), (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.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)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp }) })), (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", className: (0, cn_1.cn)("bg-as-n-8 border-as-stroke absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-2xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", (activeTab === "fiat" || isBuyMode) && "top-[calc(50%+56px)] cursor-default"), onClick: () => {
+                                }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), (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)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.cn)("bg-as-n-8 border-as-stroke absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-2xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", (activeTab === "fiat" || isBuyMode) && "top-[calc(50%+56px)] cursor-default"), onClick: () => {
                             if (activeTab === "fiat" || isBuyMode) {
                                 return;
                             }
@@ -659,7 +660,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
                                             }
                                             // 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 p-4", 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)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "flex w-full max-w-[460px] flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("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, !btnInfo.disable && !btnInfo.error && ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 h-6 w-6 -translate-y-1/2 opacity-70" }))] }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_1.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" })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-full" }))] })] }));
+                                        })()] })] })] }), 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 p-4", 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)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "flex w-full max-w-[460px] flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("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, !btnInfo.disable && !btnInfo.error && ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 h-6 w-6 -translate-y-1/2 opacity-70" }))] }), !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" })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-full" }))] })] }));
     const onrampPaymentView = ((0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName, recipientAddress: recipientAddress, isMainnet: isMainnet, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: anyspend_1.OrderType.Swap, anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
             setOrderId(orderId);
             setActivePanel(PanelView.ORDER_DETAILS);
@@ -669,23 +670,23 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
             router.push(`${window.location.pathname}?${params.toString()}`);
         }, onBack: () => setActivePanel(PanelView.MAIN), recipientEnsName: globalWallet?.ensName, recipientImageUrl: globalWallet?.meta?.icon }));
     // Add tabs to the main component when no order is loaded
-    return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("mx-auto max-w-[calc(100vw-32px)]"), children: [(0, jsx_runtime_1.jsx)(react_1.TransitionPanel, { activeIndex: orderId
+    return ((0, jsx_runtime_1.jsx)(react_2.StyleRoot, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("mx-auto max-w-[calc(100vw-32px)]"), children: [(0, jsx_runtime_1.jsx)(react_2.TransitionPanel, { activeIndex: orderId
                         ? oat
                             ? PanelView.ORDER_DETAILS
                             : PanelView.LOADING
                         : activePanel === PanelView.ORDER_DETAILS
                             ? PanelView.MAIN
                             : activePanel, className: (0, cn_1.cn)("w-full", {
-                        "mt-0": mode === "modal"
+                        "mt-0": mode === "modal",
                     }), variants: {
                         enter: { x: 300, opacity: 0 },
                         center: { x: 0, opacity: 1 },
-                        exit: { x: -300, opacity: 0 }
+                        exit: { x: -300, opacity: 0 },
                     }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
                         (0, jsx_runtime_1.jsx)("div", { children: mainView }, "main-view"),
                         (0, jsx_runtime_1.jsx)("div", { children: historyView }, "history-view"),
                         (0, jsx_runtime_1.jsx)("div", { children: orderDetailsView }, "order-details-view"),
                         (0, jsx_runtime_1.jsx)("div", { children: OrderDetails_1.OrderDetailsLoadingView }, "loading-view"),
-                        (0, jsx_runtime_1.jsx)("div", { children: onrampPaymentView }, "fiat-payment-view")
+                        (0, jsx_runtime_1.jsx)("div", { children: onrampPaymentView }, "fiat-payment-view"),
                     ] }), (0, jsx_runtime_1.jsx)(EnterRecipientModal_1.EnterRecipientModal, { isOpenPasteRecipientAddress: isOpenPasteRecipientAddressModal, setIsOpenPasteRecipientAddress: setIsOpenPasteRecipientAddressModal, recipientAddress: recipientAddress, setRecipientAddress: setRecipientAddress })] }) }));
 }

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

@@ -1,4 +1,4 @@
-export declare function AnySpendBuySpin({ isMainnet, loadOrder, mode, spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess }: {
+export declare function AnySpendBuySpin({ isMainnet, loadOrder, mode, spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess, }: {
     isMainnet?: boolean;
     loadOrder?: string;
     mode?: "modal" | "page";