@b3dotfun/sdk 0.0.7-alpha.25 → 0.0.7-alpha.26

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

@@ -1,5 +1,3 @@
-export * from "./react/hooks";
-export * from "./react/providers/AnyspendProvider";
 export * from "./types";
 export * from "./types/metadata";
 export * from "./types/relay";

package/dist/cjs/anyspend/index.js

@@ -14,10 +14,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-// Export all hooks
-__exportStar(require("./react/hooks"), exports);
-// Providers
-__exportStar(require("./react/providers/AnyspendProvider"), exports);
 // Types
 __exportStar(require("./types"), exports);
 __exportStar(require("./types/metadata"), exports);

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");
@@ -37,19 +38,19 @@ var PanelView;
 })(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)();
+    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",
     });
-    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: "",
@@ -80,19 +81,19 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
             metadata: {},
         }
         : (0, anyspend_1.getDefaultToken)(selectedDstChainId);
-    const dstTokenFromUrl = (0, react_1.useTokenFromUrl)({
+    const dstTokenFromUrl = (0, react_2.useTokenFromUrl)({
         defaultToken: defaultDstToken,
         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;
@@ -110,11 +111,11 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
         }
     }, [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;
@@ -132,11 +133,11 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
         }
     }, [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
@@ -244,7 +245,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
         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();
@@ -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,
@@ -306,12 +307,12 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
             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);
@@ -485,7 +486,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
         },
     });
     // 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)
@@ -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 };
@@ -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,7 +670,7 @@ 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

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

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AnySpendCustom = AnySpendCustom;
 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 utils_1 = require("../../../shared/utils");
 const centerTruncate_1 = __importDefault(require("../../../shared/utils/centerTruncate"));
 const number_1 = require("../../../shared/utils/number");
@@ -14,7 +15,7 @@ const simplehash_1 = require("../../../shared/utils/simplehash");
 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 chains_1 = require("viem/chains");
 const OrderDetails_1 = require("./common/OrderDetails");
@@ -87,36 +88,36 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
     }
 }
 function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true, }) {
-    const { setB3ModalOpen, setB3ModalContentType } = (0, react_1.useModalStore)();
-    const hasMounted = (0, react_1.useHasMounted)();
-    const searchParams = (0, react_1.useSearchParamsSSR)();
-    const router = (0, react_1.useRouter)();
-    const [activePanel, setActivePanel] = (0, react_2.useState)(loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER);
-    const [activeTab, setActiveTab] = (0, react_2.useState)("crypto");
+    const { setB3ModalOpen, setB3ModalContentType } = (0, react_2.useModalStore)();
+    const hasMounted = (0, react_2.useHasMounted)();
+    const searchParams = (0, react_2.useSearchParamsSSR)();
+    const router = (0, react_2.useRouter)();
+    const [activePanel, setActivePanel] = (0, react_3.useState)(loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER);
+    const [activeTab, setActiveTab] = (0, react_3.useState)("crypto");
     // Get current user's wallet
-    const currentWallet = (0, react_1.useAccountWallet)();
+    const currentWallet = (0, react_2.useAccountWallet)();
     // Add state for recipient modal
-    const [isRecipientModalOpen, setIsRecipientModalOpen] = (0, react_2.useState)(false);
+    const [isRecipientModalOpen, setIsRecipientModalOpen] = (0, react_3.useState)(false);
     // Add state for custom recipient
-    const [customRecipientAddress, setCustomRecipientAddress] = (0, react_2.useState)(recipientAddressProps);
+    const [customRecipientAddress, setCustomRecipientAddress] = (0, react_3.useState)(recipientAddressProps);
     // Update recipient logic to use custom recipient
     const recipientAddress = customRecipientAddress || currentWallet.address;
-    const recipientPropsProfile = (0, react_1.useBsmntProfile)({ address: recipientAddress });
+    const recipientPropsProfile = (0, react_2.useBsmntProfile)({ address: recipientAddress });
     const recipientEnsName = recipientPropsProfile.data?.username?.replaceAll(".b3.fun", "");
     const recipientImageUrl = recipientPropsProfile.data?.avatar || currentWallet.wallet.meta?.icon;
-    const [orderId, setOrderId] = (0, react_2.useState)(loadOrder);
-    const [srcChainId, setSrcChainId] = (0, react_2.useState)(isMainnet ? chains_1.base.id : chains_1.baseSepolia.id);
+    const [orderId, setOrderId] = (0, react_3.useState)(loadOrder);
+    const [srcChainId, setSrcChainId] = (0, react_3.useState)(isMainnet ? chains_1.base.id : chains_1.baseSepolia.id);
     // Get token list for token balance check
-    const chainName = (0, react_2.useMemo)(() => (0, simplehash_1.simpleHashChainToChainName)(srcChainId), [srcChainId]);
-    const { data: tokenList } = (0, anyspend_1.useAnyspendTokenList)(isMainnet, srcChainId, "");
+    const chainName = (0, react_3.useMemo)(() => (0, simplehash_1.simpleHashChainToChainName)(srcChainId), [srcChainId]);
+    const { data: tokenList } = (0, react_1.useAnyspendTokenList)(isMainnet, srcChainId, "");
     // Get token balances for the selected chain
-    const { nativeTokens, fungibleTokens } = (0, react_1.useTokenBalancesByChain)({
+    const { nativeTokens, fungibleTokens } = (0, react_2.useTokenBalancesByChain)({
         address: currentWallet?.wallet?.address || "",
         chainsIds: [srcChainId],
         enabled: !!currentWallet?.wallet?.address && !!chainName,
     });
     // Find a token with a balance, prioritizing tokens the user already owns
-    const getTokenWithBalance = (0, react_2.useCallback)(() => {
+    const getTokenWithBalance = (0, react_3.useCallback)(() => {
         if (!currentWallet?.wallet?.address || (!nativeTokens && !fungibleTokens) || !tokenList) {
             return (0, anyspend_1.getDefaultToken)(srcChainId);
         }
@@ -146,10 +147,10 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
         return (0, anyspend_1.getDefaultToken)(srcChainId);
     }, [currentWallet?.wallet?.address, nativeTokens, fungibleTokens, tokenList, srcChainId]);
     // Set the selected token with preference for tokens user owns
-    const [srcToken, setSrcToken] = (0, react_2.useState)((0, anyspend_1.getDefaultToken)(srcChainId));
-    const [dirtySelectSrcToken, setDirtySelectSrcToken] = (0, react_2.useState)(false);
+    const [srcToken, setSrcToken] = (0, react_3.useState)((0, anyspend_1.getDefaultToken)(srcChainId));
+    const [dirtySelectSrcToken, setDirtySelectSrcToken] = (0, react_3.useState)(false);
     // Update token when chain changes or token balances are loaded
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         if (tokenList?.length && !dirtySelectSrcToken) {
             const tokenWithBalance = getTokenWithBalance();
             if ((0, anyspend_1.eqci)(tokenWithBalance.address, dstToken.address) === false) {
@@ -157,8 +158,8 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
             }
         }
     }, [srcChainId, tokenList, getTokenWithBalance, nativeTokens, fungibleTokens, dirtySelectSrcToken, dstToken.address]);
-    const { account: isAuthenticated } = (0, react_1.useB3)();
-    const getRelayQuoteRequest = (0, react_2.useMemo)(() => {
+    const { account: isAuthenticated } = (0, react_2.useB3)();
+    const getRelayQuoteRequest = (0, react_3.useMemo)(() => {
         return generateGetRelayQuoteRequest({
             orderType: orderType,
             srcChainId: srcChainId,
@@ -184,10 +185,10 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
         srcChainId,
         srcToken,
     ]);
-    const { anyspendQuote, isLoadingAnyspendQuote } = (0, anyspend_1.useAnyspendQuote)(isMainnet, getRelayQuoteRequest);
+    const { anyspendQuote, isLoadingAnyspendQuote } = (0, react_1.useAnyspendQuote)(isMainnet, getRelayQuoteRequest);
     // Get geo data and onramp options (after quote is available)
-    const { geoData, isOnrampSupported } = (0, anyspend_1.useGeoOnrampOptions)(isMainnet, anyspendQuote?.data?.currencyIn?.amountUsd || "0");
-    const { orderAndTransactions: oat } = (0, anyspend_1.useAnyspendOrderAndTransactions)(isMainnet, orderId);
+    const { geoData, isOnrampSupported } = (0, react_1.useGeoOnrampOptions)(isMainnet, anyspendQuote?.data?.currencyIn?.amountUsd || "0");
+    const { orderAndTransactions: oat } = (0, react_1.useAnyspendOrderAndTransactions)(isMainnet, orderId);
     const onSelectOrder = (selectedOrderId) => {
         setActivePanel(PanelView.ORDER_DETAILS);
         setOrderId(selectedOrderId);
@@ -196,11 +197,11 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
         params.set("orderId", selectedOrderId);
         router.push(`${window.location.pathname}?${params.toString()}`);
     };
-    const [srcAmount, setSrcAmount] = (0, react_2.useState)(null);
+    const [srcAmount, setSrcAmount] = (0, react_3.useState)(null);
     const formattedSrcAmount = srcAmount ? (0, number_1.formatTokenAmount)(srcAmount, srcToken.decimals, 6, false) : null;
     // Update the selected src token to USDC and chain to base when the active tab is fiat,
     // also force not to update srcToken by setting dirtySelectSrcToken to true.
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         if (activeTab === "fiat") {
             setSrcChainId(chains_1.base.id);
             setSrcToken(anyspend_1.USDC_BASE);
@@ -208,7 +209,7 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
         }
     }, [activeTab]);
     // 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) {
@@ -220,14 +221,14 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
             setSrcAmount(null);
         }
     }, [anyspendQuote?.data]);
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         if (oat?.data?.order.status === anyspend_1.OrderStatus.Executed) {
             console.log("Calling onSuccess");
             const txHash = oat?.data?.executeTx?.txHash;
             onSuccess?.(txHash);
         }
     }, [oat?.data?.executeTx?.txHash, oat?.data?.order.status, onSuccess]);
-    const { createOrder: createRegularOrder, isCreatingOrder: isCreatingRegularOrder } = (0, anyspend_1.useAnyspendCreateOrder)({
+    const { createOrder: createRegularOrder, isCreatingOrder: isCreatingRegularOrder } = (0, react_1.useAnyspendCreateOrder)({
         onSuccess: data => {
             setOrderId(data.data.id);
         },
@@ -236,7 +237,7 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
             sonner_1.toast.error("Failed to create order: " + error.message);
         },
     });
-    const { createOrder: createOnrampOrder, isCreatingOrder: isCreatingOnrampOrder } = (0, anyspend_1.useAnyspendCreateOnrampOrder)({
+    const { createOrder: createOnrampOrder, isCreatingOrder: isCreatingOnrampOrder } = (0, react_1.useAnyspendCreateOnrampOrder)({
         onSuccess: data => {
             setOrderId(data.data.id);
         },
@@ -364,7 +365,7 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
                         ? "Receive NFT at"
                         : orderType === anyspend_1.OrderType.JoinTournament
                             ? "Join for"
-                            : "Recipient" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "outline", className: "w-full justify-between border-none p-0", onClick: () => setIsRecipientModalOpen(true), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [recipientImageUrl && ((0, jsx_runtime_1.jsx)("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-1", children: [recipientEnsName && (0, jsx_runtime_1.jsxs)("span", { children: ["@", recipientEnsName] }), (0, jsx_runtime_1.jsx)("span", { children: (0, centerTruncate_1.default)(recipientAddress) })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) })] })) : null;
+                            : "Recipient" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "outline", className: "w-full justify-between border-none p-0", onClick: () => setIsRecipientModalOpen(true), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [recipientImageUrl && ((0, jsx_runtime_1.jsx)("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-1", children: [recipientEnsName && (0, jsx_runtime_1.jsxs)("span", { children: ["@", recipientEnsName] }), (0, jsx_runtime_1.jsx)("span", { children: (0, centerTruncate_1.default)(recipientAddress) })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) })] })) : 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 }) }));
@@ -376,9 +377,9 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
                             params.delete("orderId");
                             router.push(`${window.location.pathname}?${params.toString()}`);
                         } })] })), mode === "page" && (0, jsx_runtime_1.jsx)("div", { className: "h-12" })] }));
-    const loadingView = ((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"), children: [(0, jsx_runtime_1.jsxs)(react_1.Badge, { variant: "default", className: "bg-b3-react-muted/30 border-b3-react-border hover:bg-b3-react-muted/50 flex items-center gap-3 px-4 py-1 text-base transition-all", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-b3-react-foreground size-4 animate-spin" }), (0, jsx_runtime_1.jsx)(react_1.TextShimmer, { duration: 1, className: "font-sf-rounded text-base font-semibold", children: "Loading..." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-1 flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-4 w-24" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-8 w-48" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "ml-4 h-8 w-32" })] }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "mt-4 h-8 w-24" })] }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "mb-4 h-12 w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)(react_1.Skeleton, { className: "rounded-lg bg-white/5 p-6 pb-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "size-[200px]" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-3 flex items-center justify-center gap-2", children: (0, jsx_runtime_1.jsx)("div", { className: "size-5 rounded-full" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 flex-col gap-2", children: [1, 2, 3].map(i => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-10 w-full" }, i))) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-muted/30 mt-8 w-full rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "mb-3 h-4 w-48" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-10 flex-1" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-10 flex-1" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-3", children: [1, 2, 3, 4, 5].map(i => ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full justify-between", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-4 w-24" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-4 w-32" })] }, i))) }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-10 w-full" }), mode === "page" && (0, jsx_runtime_1.jsx)("div", { className: "h-12" })] }));
+    const loadingView = ((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"), children: [(0, jsx_runtime_1.jsxs)(react_2.Badge, { variant: "default", className: "bg-b3-react-muted/30 border-b3-react-border hover:bg-b3-react-muted/50 flex items-center gap-3 px-4 py-1 text-base transition-all", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-b3-react-foreground size-4 animate-spin" }), (0, jsx_runtime_1.jsx)(react_2.TextShimmer, { duration: 1, className: "font-sf-rounded text-base font-semibold", children: "Loading..." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-1 flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-24" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-8 w-48" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "ml-4 h-8 w-32" })] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "mt-4 h-8 w-24" })] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "mb-4 h-12 w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)(react_2.Skeleton, { className: "rounded-lg bg-white/5 p-6 pb-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "size-[200px]" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-3 flex items-center justify-center gap-2", children: (0, jsx_runtime_1.jsx)("div", { className: "size-5 rounded-full" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 flex-col gap-2", children: [1, 2, 3].map(i => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 w-full" }, i))) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-muted/30 mt-8 w-full rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "mb-3 h-4 w-48" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 flex-1" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 flex-1" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-3", children: [1, 2, 3, 4, 5].map(i => ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full justify-between", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-24" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-32" })] }, i))) }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 w-full" }), mode === "page" && (0, jsx_runtime_1.jsx)("div", { className: "h-12" })] }));
     // Confirm order view.
-    const confirmOrderView = ((0, jsx_runtime_1.jsxs)("div", { className: "relative mx-auto flex w-full flex-col items-center", children: [header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: activeTab, onValueChange: value => setActiveTab(value), className: "bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5", children: [(0, jsx_runtime_1.jsxs)(react_1.TabsList, { hideGradient: true, className: "justify-center", children: [(0, jsx_runtime_1.jsx)(react_1.TabTrigger, { value: "crypto", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Pay with crypto" }) }), isOnrampSupported ? ((0, jsx_runtime_1.jsx)(react_1.TabTrigger, { value: "fiat", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Pay with fiat" }) })) : ((0, jsx_runtime_1.jsxs)(react_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_1.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(react_1.TabTrigger, { value: "fiat", disabled: true, children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Pay with fiat" }) }) }), (0, jsx_runtime_1.jsx)(react_1.TooltipContent, { children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Fiat payments are not supported for this amount" }) })] }))] }), (0, jsx_runtime_1.jsx)(react_1.TabsContent, { value: "crypto", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: false, animate: {
+    const confirmOrderView = ((0, jsx_runtime_1.jsxs)("div", { className: "relative mx-auto flex w-full flex-col items-center", children: [header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)(react_2.Tabs, { value: activeTab, onValueChange: value => setActiveTab(value), className: "bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5", children: [(0, jsx_runtime_1.jsxs)(react_2.TabsList, { hideGradient: true, className: "justify-center", children: [(0, jsx_runtime_1.jsx)(react_2.TabTrigger, { value: "crypto", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Pay with crypto" }) }), isOnrampSupported ? ((0, jsx_runtime_1.jsx)(react_2.TabTrigger, { value: "fiat", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Pay with fiat" }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(react_2.TabTrigger, { value: "fiat", disabled: true, children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Pay with fiat" }) }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Fiat payments are not supported for this amount" }) })] }))] }), (0, jsx_runtime_1.jsx)(react_2.TabsContent, { value: "crypto", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: false, animate: {
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
@@ -393,7 +394,7 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
                                             opacity: hasMounted ? 1 : 0,
                                             y: hasMounted ? 0 : 20,
                                             filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                        }, transition: { duration: 0.3, delay: 0.3, ease: "easeInOut" }, className: "flex w-full flex-col gap-2", children: (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", disabled: isCreatingOrder || isLoadingAnyspendQuote || !anyspendQuote, onClick: () => handleConfirmOrder(), className: "relative w-full", children: !isAuthenticated ? ("Sign in with B3") : isCreatingOrder ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Loading quote..." })] })) : anyspendQuote ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Checkout" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : ("No quote found") }) }) })] }) }), (0, jsx_runtime_1.jsx)(react_1.TabsContent, { value: "fiat", children: (0, jsx_runtime_1.jsx)("div", { className: "mt-6 flex w-full flex-col gap-6", children: (0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.PanelOnrampPayment, { srcAmountOnRamp: anyspendQuote?.data?.currencyIn?.amountUsd || "0", recipientName: recipientEnsName, recipientAddress: recipientAddress, isMainnet: isMainnet, isBuyMode: false, selectedDstChainId: dstChainId, selectedDstToken: dstToken, anyspendQuote: anyspendQuote, globalAddress: currentWallet?.wallet?.address, onOrderCreated: (orderId) => setOrderId(orderId), onBack: () => setActiveTab("crypto"), orderType: orderType, nft: (0, anyspend_1.isNftMetadata)(metadata)
+                                        }, transition: { duration: 0.3, delay: 0.3, ease: "easeInOut" }, className: "flex w-full flex-col gap-2", children: (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", disabled: isCreatingOrder || isLoadingAnyspendQuote || !anyspendQuote, onClick: () => handleConfirmOrder(), className: "relative w-full", children: !isAuthenticated ? ("Sign in with B3") : isCreatingOrder ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Loading quote..." })] })) : anyspendQuote ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Checkout" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : ("No quote found") }) }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.TabsContent, { value: "fiat", children: (0, jsx_runtime_1.jsx)("div", { className: "mt-6 flex w-full flex-col gap-6", children: (0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.PanelOnrampPayment, { srcAmountOnRamp: anyspendQuote?.data?.currencyIn?.amountUsd || "0", recipientName: recipientEnsName, recipientAddress: recipientAddress, isMainnet: isMainnet, isBuyMode: false, selectedDstChainId: dstChainId, selectedDstToken: dstToken, anyspendQuote: anyspendQuote, globalAddress: currentWallet?.wallet?.address, onOrderCreated: (orderId) => setOrderId(orderId), onBack: () => setActiveTab("crypto"), orderType: orderType, nft: (0, anyspend_1.isNftMetadata)(metadata)
                                     ? metadata.nftContract.type === anyspend_1.NftType.ERC1155
                                         ? {
                                             type: anyspend_1.NftType.ERC1155,
@@ -422,7 +423,7 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
                                     }
                                     : undefined, recipientEnsName: recipientEnsName, recipientImageUrl: recipientImageUrl }) }) })] })] }));
     // Return the TransitionPanel with all views
-    return ((0, jsx_runtime_1.jsxs)(react_1.StyleRoot, { children: [(0, jsx_runtime_1.jsx)(react_1.TransitionPanel, { activeIndex: orderId
+    return ((0, jsx_runtime_1.jsxs)(react_2.StyleRoot, { children: [(0, jsx_runtime_1.jsx)(react_2.TransitionPanel, { activeIndex: orderId
                     ? oat
                         ? PanelView.ORDER_DETAILS
                         : PanelView.LOADING
@@ -437,7 +438,7 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
                     (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: historyView }, "history-view"),
                     (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: orderDetailsView }, "order-details-view"),
                     (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: loadingView }, "loading-view"),
-                ] }), (0, jsx_runtime_1.jsx)(react_1.Dialog, { open: isRecipientModalOpen, onOpenChange: setIsRecipientModalOpen, children: (0, jsx_runtime_1.jsx)(react_1.DialogContent, { className: "w-[420px] max-w-[calc(100vw-32px)] rounded-2xl p-3.5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: "To address" }), (0, jsx_runtime_1.jsx)(react_1.Input, { value: customRecipientAddress || "", onChange: e => setCustomRecipientAddress(e.target.value), placeholder: "Enter address", className: "h-12 rounded-lg", spellCheck: false }), (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "w-full rounded-lg", onClick: () => {
+                ] }), (0, jsx_runtime_1.jsx)(react_2.Dialog, { open: isRecipientModalOpen, onOpenChange: setIsRecipientModalOpen, children: (0, jsx_runtime_1.jsx)(react_2.DialogContent, { className: "w-[420px] max-w-[calc(100vw-32px)] rounded-2xl p-3.5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: "To address" }), (0, jsx_runtime_1.jsx)(react_2.Input, { value: customRecipientAddress || "", onChange: e => setCustomRecipientAddress(e.target.value), placeholder: "Enter address", className: "h-12 rounded-lg", spellCheck: false }), (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "w-full rounded-lg", onClick: () => {
                                     setIsRecipientModalOpen(false);
                                 }, children: "Save" })] }) }) })] }));
 }

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

@@ -3,17 +3,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OrderHistory = OrderHistory;
 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 lucide_react_1 = require("lucide-react");
 const OrderHistoryItem_1 = require("./OrderHistoryItem");
 const isMainnet = true;
 function OrderHistory({ mode, onBack, onSelectOrder }) {
-    const { address } = (0, react_1.useAccountWallet)();
-    const { orderHistory, isLoadingOrderHistory, refetchOrderHistory } = (0, anyspend_1.useAnyspendOrderHistory)(isMainnet, address);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-6 flex w-full items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { onClick: onBack, variant: "ghost", size: "icon", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { className: "h-4 w-4" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-xl font-semibold", children: "Order History" }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/30 text-sm", children: "View your past transactions" })] }), (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", size: "icon", onClick: () => {
+    const { address } = (0, react_2.useAccountWallet)();
+    const { orderHistory, isLoadingOrderHistory, refetchOrderHistory } = (0, react_1.useAnyspendOrderHistory)(isMainnet, address);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-6 flex w-full items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_2.Button, { onClick: onBack, variant: "ghost", size: "icon", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { className: "h-4 w-4" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-xl font-semibold", children: "Order History" }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/30 text-sm", children: "View your past transactions" })] }), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", size: "icon", onClick: () => {
                             refetchOrderHistory();
-                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "text-as-primary/30 hover:text-as-primary h-4 w-4 cursor-pointer transition-all hover:rotate-180" }) })] }), isLoadingOrderHistory ? ((0, jsx_runtime_1.jsx)("div", { className: "w-full space-y-4", children: [1, 2, 3].map(i => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-[160px] w-full rounded-lg" }, i))) })) : !orderHistory?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "bg-as-light-brand w-full rounded-lg border p-8 text-center", children: (0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-muted-foreground", children: "No order history found" }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "mb-12 w-full space-y-4", children: [...orderHistory]
+                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "text-as-primary/30 hover:text-as-primary h-4 w-4 cursor-pointer transition-all hover:rotate-180" }) })] }), isLoadingOrderHistory ? ((0, jsx_runtime_1.jsx)("div", { className: "w-full space-y-4", children: [1, 2, 3].map(i => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-[160px] w-full rounded-lg" }, i))) })) : !orderHistory?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "bg-as-light-brand w-full rounded-lg border p-8 text-center", children: (0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-muted-foreground", children: "No order history found" }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "mb-12 w-full space-y-4", children: [...orderHistory]
                     .sort((a, b) => b.createdAt - a.createdAt)
                     .map(order => ((0, jsx_runtime_1.jsx)(OrderHistoryItem_1.OrderHistoryItem, { order: order, onSelectOrder: onSelectOrder, mode: mode }, order.id))) }))] }));
 }

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

@@ -2,17 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PanelOnramp = PanelOnramp;
 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 framer_motion_1 = require("framer-motion");
-const react_2 = require("react");
+const react_3 = require("react");
 const sonner_1 = require("sonner");
 const PaymentOptions_1 = require("./PaymentOptions");
 function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, }) {
     // Get geo data for onramp availability
-    const { geoData } = (0, react_1.useGetGeo)();
-    const { coinbaseOnrampOptions } = (0, anyspend_1.useCoinbaseOnrampOptions)(true, geoData?.country || "US");
-    const amountInputRef = (0, react_2.useRef)(null);
+    const { geoData } = (0, react_2.useGetGeo)();
+    const { coinbaseOnrampOptions } = (0, react_1.useCoinbaseOnrampOptions)(true, geoData?.country || "US");
+    const amountInputRef = (0, react_3.useRef)(null);
     const handleAmountChange = (e) => {
         // Only allow numbers and decimal points
         const value = e.target.value.replace(/[^0-9.]/g, "");
@@ -33,7 +33,7 @@ function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, }) {
                         (coinbaseOnrampOptions?.paymentCurrencies?.[0]?.limits?.find(l => l.id === "ACH_BANK_ACCOUNT")?.max
                             ? parseFloat(coinbaseOnrampOptions.paymentCurrencies[0].limits.find(l => l.id === "ACH_BANK_ACCOUNT")?.max || "25000")
                             : 25000) ? ((0, jsx_runtime_1.jsxs)("p", { className: "label-style -mb-3 mt-3 text-xs text-red-400 dark:bg-transparent", children: ["Maximum amount is $", coinbaseOnrampOptions?.paymentCurrencies?.[0]?.limits?.find(l => l.id === "ACH_BANK_ACCOUNT")?.max ||
-                                "25,000"] })) : ((0, jsx_runtime_1.jsx)("p", { className: "label-style text-b3-react-foreground/60 -mb-3 mt-3 text-xs dark:bg-transparent", children: "Buy amount in USD" })), (0, jsx_runtime_1.jsxs)("div", { className: "relative inline-flex items-center dark:bg-transparent", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-b3-react-foreground/60 -ms-3 -mt-2 text-2xl font-semibold dark:bg-transparent", children: "$" }), (0, jsx_runtime_1.jsx)(react_1.Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "0.00", className: "placeholder:text-b3-react-foreground/60 h-auto min-w-[70px] border-0 bg-transparent py-6 text-center text-4xl font-semibold focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-transparent", style: {
+                                "25,000"] })) : ((0, jsx_runtime_1.jsx)("p", { className: "label-style text-b3-react-foreground/60 -mb-3 mt-3 text-xs dark:bg-transparent", children: "Buy amount in USD" })), (0, jsx_runtime_1.jsxs)("div", { className: "relative inline-flex items-center dark:bg-transparent", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-b3-react-foreground/60 -ms-3 -mt-2 text-2xl font-semibold dark:bg-transparent", children: "$" }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "0.00", className: "placeholder:text-b3-react-foreground/60 h-auto min-w-[70px] border-0 bg-transparent py-6 text-center text-4xl font-semibold focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-transparent", style: {
                                     width: `${Math.max(50, srcAmountOnRamp.length * 34)}px`,
                                     minWidth: srcAmountOnRamp ? `auto` : "105px",
                                 } }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { animate: { opacity: !srcAmountOnRamp || parseFloat(srcAmountOnRamp) <= 0 ? 1 : 0 }, exit: { opacity: 0 }, transition: { duration: 0.5, ease: "easeInOut" }, className: "border-b3-react-foreground/10 absolute bottom-3 left-1 h-1 w-[90%] rounded-full border-t-2 border-dashed bg-transparent" }) })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-4 gap-4", children: ["5", "10", "25", "100"].map(value => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleQuickAmount(value), className: `rounded-lg border px-4 py-3 ${srcAmountOnRamp === value