@b3dotfun/sdk 0.0.65-test.1 → 0.0.65

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

@@ -10,7 +10,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../anyspend");
 const react_1 = require("../../../anyspend/react");
 const react_2 = require("../../../global-account/react");
-const BottomNavigation_1 = __importDefault(require("../../../global-account/react/components/ManageAccount/BottomNavigation"));
 const cn_1 = require("../../../shared/utils/cn");
 const number_1 = require("../../../shared/utils/number");
 const invariant_1 = __importDefault(require("invariant"));
@@ -18,7 +17,6 @@ const lucide_react_1 = require("lucide-react");
 const react_3 = require("motion/react");
 const react_4 = require("react");
 const sonner_1 = require("sonner");
-const thirdweb_1 = require("thirdweb");
 const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
 const useAutoSelectCryptoPaymentMethod_1 = require("../hooks/useAutoSelectCryptoPaymentMethod");
@@ -57,25 +55,6 @@ function AnySpend(props) {
 function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, }) {
     const searchParams = (0, react_2.useSearchParamsSSR)();
     const router = (0, react_2.useRouter)();
-    const { partnerId } = (0, react_2.useB3)();
-    const setB3ModalContentType = (0, react_2.useModalStore)(state => state.setB3ModalContentType);
-    // Define base chain with RPC for modal props
-    const baseChain = (0, react_4.useMemo)(() => (0, thirdweb_1.defineChain)({
-        id: 8453,
-        name: "Base",
-        nativeCurrency: {
-            name: "Ether",
-            symbol: "ETH",
-            decimals: 18,
-        },
-        rpc: "https://mainnet.base.org",
-        blockExplorers: [
-            {
-                name: "Basescan",
-                url: "https://basescan.org",
-            },
-        ],
-    }), []);
     // 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
@@ -627,10 +606,6 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     const onClickHistory = () => {
         setOrderId(undefined);
         navigateToPanel(PanelView.HISTORY, "forward");
-        setB3ModalContentType({
-            type: "anySpendOrderHistory",
-            showBackButton: false,
-        });
         // Remove orderId and paymentMethod from URL when going back to history
         const params = new URLSearchParams(searchParams.toString());
         params.delete("orderId");
@@ -792,58 +767,43 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         };
     }, [activePanel, navigateBack]);
     const historyView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: navigateBack, onSelectOrder: onSelectOrder }) }));
-    const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full px-5", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, points: oat.data.points || undefined, onBack: () => {
+    const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, points: oat.data.points || undefined, onBack: () => {
                     setOrderId(undefined);
                     navigateBack();
                     setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE); // Reset payment method when going back
                 } })) }) }));
-    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full max-w-full flex-col items-center gap-2 px-5", children: [isBuyMode && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward"), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect, onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward") })) : ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: (panelIndex) => {
-                                        // Map panel index to navigation with direction
-                                        const panelsWithForwardNav = [PanelView.FIAT_PAYMENT_METHOD, PanelView.RECIPIENT_SELECTION];
-                                        if (panelsWithForwardNav.includes(panelIndex)) {
-                                            navigateToPanel(panelIndex, "forward");
-                                        }
-                                        else {
-                                            setActivePanel(panelIndex);
-                                        }
-                                    }, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), customUsdInputValues: customUsdInputValues }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.cn)("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
-                                    if (activeTab === "fiat" || isBuyMode) {
-                                        return;
-                                    }
-                                    // Swap chain selections
-                                    const tempSrcChainId = selectedSrcChainId;
-                                    const tempDstChainId = selectedDstChainId;
-                                    setSelectedSrcChainId(tempDstChainId);
-                                    setSelectedDstChainId(tempSrcChainId);
-                                    // Swap token selections
-                                    const tempSrcToken = selectedSrcToken;
-                                    const tempDstToken = selectedDstToken;
-                                    setSelectedSrcToken(tempDstToken);
-                                    setSelectedDstToken(tempSrcToken);
-                                    // Swap amounts
-                                    const tempSrcAmount = srcAmount;
-                                    const tempDstAmount = dstAmount;
-                                    setSrcAmount(tempDstAmount);
-                                    setDstAmount(tempSrcAmount);
-                                }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), setRecipientAddress: setRecipientAddress, recipientAddressFromProps: recipientAddressFromProps, globalAddress: globalAddress, dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
-                                    setIsSrcInputDirty(false);
-                                    setDstAmount(value);
-                                }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }))] }), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [(0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: (0, jsx_runtime_1.jsx)(react_2.TabsPrimitive, { defaultValue: "swap", onValueChange: value => {
-                        if (value === "settings" || value === "home") {
-                            setB3ModalContentType({
-                                type: "manageAccount",
-                                activeTab: value,
-                                setActiveTab: () => { },
-                                chain: baseChain,
-                                partnerId,
-                            });
-                        }
-                        else if (value === "swap") {
-                            setB3ModalContentType({
-                                type: "anySpend",
-                            });
-                        }
-                    }, children: (0, jsx_runtime_1.jsx)(BottomNavigation_1.default, {}) }) })] }));
+    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward"), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect, onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward") })) : ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: (panelIndex) => {
+                                // Map panel index to navigation with direction
+                                const panelsWithForwardNav = [PanelView.FIAT_PAYMENT_METHOD, PanelView.RECIPIENT_SELECTION];
+                                if (panelsWithForwardNav.includes(panelIndex)) {
+                                    navigateToPanel(panelIndex, "forward");
+                                }
+                                else {
+                                    setActivePanel(panelIndex);
+                                }
+                            }, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), customUsdInputValues: customUsdInputValues }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.cn)("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
+                            if (activeTab === "fiat" || isBuyMode) {
+                                return;
+                            }
+                            // Swap chain selections
+                            const tempSrcChainId = selectedSrcChainId;
+                            const tempDstChainId = selectedDstChainId;
+                            setSelectedSrcChainId(tempDstChainId);
+                            setSelectedDstChainId(tempSrcChainId);
+                            // Swap token selections
+                            const tempSrcToken = selectedSrcToken;
+                            const tempDstToken = selectedDstToken;
+                            setSelectedSrcToken(tempDstToken);
+                            setSelectedDstToken(tempSrcToken);
+                            // Swap amounts
+                            const tempSrcAmount = srcAmount;
+                            const tempDstAmount = dstAmount;
+                            setSrcAmount(tempDstAmount);
+                            setDstAmount(tempSrcAmount);
+                        }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), setRecipientAddress: setRecipientAddress, recipientAddressFromProps: recipientAddressFromProps, globalAddress: globalAddress, dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
+                            setIsSrcInputDirty(false);
+                            setDstAmount(value);
+                        }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }))] }), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [(0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
     const onrampPaymentView = ((0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName || undefined, recipientAddress: recipientAddress, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
             setOrderId(orderId);
             navigateToPanel(PanelView.ORDER_DETAILS, "forward");

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

@@ -476,7 +476,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                         : orderType === "join_tournament"
                             ? "Join for"
                             : "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [recipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: (0, jsx_runtime_1.jsx)("span", { children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.shortenAddress)(recipientAddress) }) }) }) })) : ((0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Select recipient" }) })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })] }, recipientAddress)) : null;
-    const historyView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("mx-auto flex w-full max-w-2xl flex-col items-center", mode === "modal" && "bg-b3-react-background"), children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: () => {
+    const historyView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: () => {
                 setActivePanel(PanelView.HISTORY);
             }, onSelectOrder: onSelectOrder }) }));
     const orderDetailsView = ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background rounded-xl"), children: [oat && ((0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: activeTab === "fiat" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {

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

@@ -160,7 +160,7 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
             }
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "crypto-payment-method mx-auto h-fit w-[460px] max-w-full px-5 pb-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("relative flex flex-col gap-10"), children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-around gap-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex-1 text-center", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Select a payment method" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "crypto-payment-methods flex flex-col gap-4", children: [(shouldShowConnectedEOA || shouldShowWagmiWallet || globalAddress) && ((0, jsx_runtime_1.jsxs)("div", { className: "installed-wallets", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Connected wallets" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [shouldShowConnectedEOA && ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "crypto-payment-method mx-auto h-fit w-[460px] max-w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("relative flex flex-col gap-10"), children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-around gap-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex-1 text-center", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Select a payment method" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "crypto-payment-methods flex flex-col gap-4", children: [(shouldShowConnectedEOA || shouldShowWagmiWallet || globalAddress) && ((0, jsx_runtime_1.jsxs)("div", { className: "installed-wallets", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Connected wallets" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [shouldShowConnectedEOA && ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
                                                     setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                                                     onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                                                     if (connectedEOAWallet) {

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

@@ -62,7 +62,7 @@ function FeeDetailPanel({ fee, transactionAmountUsd, onBack }) {
     // State for expanding tier lists
     const [showAllFeeTiers, setShowAllFeeTiers] = (0, react_2.useState)(false);
     const [showAllDiscountTiers, setShowAllDiscountTiers] = (0, react_2.useState)(false);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-3 px-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-center", children: (0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary text-lg font-bold", children: "Fee Breakdown" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary mb-3 text-sm font-semibold", children: isStripeFee ? "Fiat Fee Schedule" : "Base Fee Schedule" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-1.5", children: isStripeFee
+    return ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-center", children: (0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary text-lg font-bold", children: "Fee Breakdown" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary mb-3 text-sm font-semibold", children: isStripeFee ? "Fiat Fee Schedule" : "Base Fee Schedule" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-1.5", children: isStripeFee
                                 ? FIAT_FEE_TIERS.map((tier, idx) => {
                                     const isCurrentTier = currentFiatTier?.label === tier.label;
                                     const currentTierIndex = FIAT_FEE_TIERS.findIndex(t => t.label === currentFiatTier?.label);

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

@@ -60,9 +60,9 @@ function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedPaymentM
     }
     // Show loading state while checking geo availability
     if (isLoadingGeoOnramp) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: "fiat-payment-method mx-auto w-[460px] max-w-full px-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Choose payment method" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center py-8", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-6 w-6 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-secondary ml-2 text-sm", children: "Loading payment methods..." })] })] }) }));
+        return ((0, jsx_runtime_1.jsx)("div", { className: "fiat-payment-method mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Choose payment method" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center py-8", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-6 w-6 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-secondary ml-2 text-sm", children: "Loading payment methods..." })] })] }) }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { className: "fiat-payment-method mx-auto w-[460px] max-w-full px-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Choose payment method" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-3", children: availablePaymentMethods.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "fiat-payment-method-no-methods bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-6 text-center", children: (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary text-sm", children: "No payment methods available in your region for the selected amount." }) })) : (availablePaymentMethods.map(method => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "fiat-payment-method mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Choose payment method" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-3", children: availablePaymentMethods.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "fiat-payment-method-no-methods bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-6 text-center", children: (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary text-sm", children: "No payment methods available in your region for the selected amount." }) })) : (availablePaymentMethods.map(method => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => {
                             setSelectedPaymentMethod(method.id);
                             onSelectPaymentMethod(method.id);
                         }, className: (0, cn_1.cn)("fiat-payment-method-item bg-as-surface-secondary border-as-border-secondary flex w-full items-center gap-4 rounded-2xl border p-4 transition-all duration-200", selectedPaymentMethod === method.id

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

@@ -1,6 +1,6 @@
 interface OrderHistoryProps {
     mode: "modal" | "page";
-    onBack?: () => void;
+    onBack: () => void;
     onSelectOrder?: (orderId: string) => void;
 }
 export declare function OrderHistory({ mode, onBack, onSelectOrder }: OrderHistoryProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,22 +1,18 @@
 "use strict";
 "use client";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OrderHistory = OrderHistory;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../anyspend/react");
 const react_2 = require("../../../../global-account/react");
-const ModalHeader_1 = __importDefault(require("../../../../global-account/react/components/ModalHeader/ModalHeader"));
 const lucide_react_1 = require("lucide-react");
 const OrderHistoryItem_1 = require("./OrderHistoryItem");
 function OrderHistory({ mode, onBack, onSelectOrder }) {
     const { address } = (0, react_2.useAccountWallet)();
     const { orderHistory, isLoadingOrderHistory, refetchOrderHistory } = (0, react_1.useAnyspendOrderHistory)(address);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.default, { title: "Order History", showCloseButton: false, handleBack: onBack, className: "w-full", children: (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", size: "icon", className: "hover:bg-as-surface-secondary", onClick: () => {
-                        refetchOrderHistory();
-                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "text-as-secondary hover:text-as-primary h-5 w-5 cursor-pointer transition-all hover:rotate-180" }) }) }), isLoadingOrderHistory ? ((0, jsx_runtime_1.jsx)("div", { className: "w-full space-y-3 px-5", children: [1, 2, 3].map(i => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-[180px] w-full rounded-2xl" }, i))) })) : !orderHistory?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary w-full rounded-2xl p-12 px-5 text-center", children: (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary text-sm", children: "No order history found" }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "mb-12 w-full space-y-3 px-5 pt-5", children: [...orderHistory]
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-8 flex w-full items-center gap-3", children: [(0, jsx_runtime_1.jsx)(react_2.Button, { onClick: onBack, variant: "ghost", size: "icon", className: "hover:bg-as-surface-secondary", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { className: "h-5 w-5" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: (0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary text-2xl font-bold", children: "Order History" }) }), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", size: "icon", className: "hover:bg-as-surface-secondary", onClick: () => {
+                            refetchOrderHistory();
+                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "text-as-secondary hover:text-as-primary h-5 w-5 cursor-pointer transition-all hover:rotate-180" }) })] }), isLoadingOrderHistory ? ((0, jsx_runtime_1.jsx)("div", { className: "w-full space-y-3", children: [1, 2, 3].map(i => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-[180px] w-full rounded-2xl" }, i))) })) : !orderHistory?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary w-full rounded-2xl p-12 text-center", children: (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary text-sm", children: "No order history found" }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "mb-12 w-full space-y-3", 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/PanelOnrampPayment.js

@@ -88,7 +88,7 @@ function PanelOnrampPaymentInner(props) {
             sonner_1.toast.error("Failed to create order: " + err.message);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-6 px-5", children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "-mb-3 text-lg font-semibold", children: "Order summary" }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background border-b3-react-border flex flex-col gap-3 rounded-lg border p-4", children: [recipientAddress && ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "-mb-3 text-lg font-semibold", children: "Order summary" }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background border-b3-react-border flex flex-col gap-3 rounded-lg border p-4", children: [recipientAddress && ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
                                     opacity: 1,
                                     y: 0,
                                     filter: "blur(0px)",

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

@@ -9,5 +9,5 @@ const react_1 = require("../../../../global-account/react");
 const cn_1 = require("../../../../shared/utils/cn");
 const link_1 = __importDefault(require("next/link"));
 function PointsDetailPanel({ pointsAmount = 0, onBack }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-4 px-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-4 text-center", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary text-xl font-bold", children: "Earn Points with Every Swap" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-as-primary/70 text-balance text-sm leading-relaxed", children: ["You'll earn ", (0, jsx_runtime_1.jsxs)("span", { className: "text-as-brand font-semibold", children: ["+", pointsAmount.toLocaleString(), " points"] }), " ", "towards the", " ", (0, jsx_runtime_1.jsx)(link_1.default, { href: "https://anyspend.com/points", target: "_blank", className: "text-as-brand underline", children: "next AnySpend airdrop" }), " ", "when you complete this transaction."] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-primary border-as-border-secondary mt-2 w-full rounded-lg border p-4 text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary mb-2 font-semibold", children: "How it works:" }), (0, jsx_runtime_1.jsxs)("ul", { className: "text-as-primary/70 space-y-1 text-sm", children: [(0, jsx_runtime_1.jsx)("li", { children: "\u2022 Points are earned based on transaction volume" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2022 Higher volume = more points" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2022 Points contribute to future airdrops" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2022 Keep swapping to maximize your rewards" })] })] }), (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", onClick: onBack, className: (0, cn_1.cn)("as-main-button !bg-as-brand relative w-full"), textClassName: (0, cn_1.cn)("text-white"), children: "Back to Swap" })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-4 text-center", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary text-xl font-bold", children: "Earn Points with Every Swap" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-as-primary/70 text-balance text-sm leading-relaxed", children: ["You'll earn ", (0, jsx_runtime_1.jsxs)("span", { className: "text-as-brand font-semibold", children: ["+", pointsAmount.toLocaleString(), " points"] }), " ", "towards the", " ", (0, jsx_runtime_1.jsx)(link_1.default, { href: "https://anyspend.com/points", target: "_blank", className: "text-as-brand underline", children: "next AnySpend airdrop" }), " ", "when you complete this transaction."] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-primary border-as-border-secondary mt-2 w-full rounded-lg border p-4 text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary mb-2 font-semibold", children: "How it works:" }), (0, jsx_runtime_1.jsxs)("ul", { className: "text-as-primary/70 space-y-1 text-sm", children: [(0, jsx_runtime_1.jsx)("li", { children: "\u2022 Points are earned based on transaction volume" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2022 Higher volume = more points" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2022 Points contribute to future airdrops" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2022 Keep swapping to maximize your rewards" })] })] }), (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", onClick: onBack, className: (0, cn_1.cn)("as-main-button !bg-as-brand relative w-full"), textClassName: (0, cn_1.cn)("text-white"), children: "Back to Swap" })] }) }));
 }

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

@@ -32,5 +32,5 @@ function RecipientSelection({ initialValue = "", placeholder = "Enter recipient
     };
     const isAddressValid = !validateAddress || !recipientAddress || validateAddress(recipientAddress);
     const canConfirm = recipientAddress && isAddressValid;
-    return ((0, jsx_runtime_1.jsx)("div", { className: "recipient-selection mx-auto w-[460px] max-w-full px-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-around", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/60 text-sm", children: description })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-secondary border-as-border-secondary flex h-12 w-full overflow-hidden rounded-xl border", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, value: recipientAddress, onChange: e => setRecipientAddress(e.target.value), onKeyDown: handleKeyDown, className: "text-as-primary placeholder:text-as-primary/50 flex-1 bg-transparent px-4 text-base focus:outline-none", autoFocus: autoFocus }), (0, jsx_runtime_1.jsx)("div", { className: "border-as-border-secondary border-l", children: (0, jsx_runtime_1.jsx)("button", { onClick: handlePaste, className: "text-as-primary/70 hover:text-as-primary hover:bg-as-surface-primary h-full px-4 font-semibold transition-colors", children: "Paste" }) })] }), recipientAddress && !isAddressValid && ((0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm", children: "Please enter a valid address" })), (0, jsx_runtime_1.jsx)("button", { onClick: handleConfirm, disabled: !canConfirm, className: "bg-as-brand hover:bg-as-brand/90 disabled:bg-as-on-surface-2 disabled:text-as-secondary h-12 w-full rounded-xl font-medium text-white transition-colors disabled:cursor-not-allowed", children: confirmText })] })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "recipient-selection mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-around", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/60 text-sm", children: description })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-secondary border-as-border-secondary flex h-12 w-full overflow-hidden rounded-xl border", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, value: recipientAddress, onChange: e => setRecipientAddress(e.target.value), onKeyDown: handleKeyDown, className: "text-as-primary placeholder:text-as-primary/50 flex-1 bg-transparent px-4 text-base focus:outline-none", autoFocus: autoFocus }), (0, jsx_runtime_1.jsx)("div", { className: "border-as-border-secondary border-l", children: (0, jsx_runtime_1.jsx)("button", { onClick: handlePaste, className: "text-as-primary/70 hover:text-as-primary hover:bg-as-surface-primary h-full px-4 font-semibold transition-colors", children: "Paste" }) })] }), recipientAddress && !isAddressValid && ((0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm", children: "Please enter a valid address" })), (0, jsx_runtime_1.jsx)("button", { onClick: handleConfirm, disabled: !canConfirm, className: "bg-as-brand hover:bg-as-brand/90 disabled:bg-as-on-surface-2 disabled:text-as-secondary h-12 w-full rounded-xl font-medium text-white transition-colors disabled:cursor-not-allowed", children: confirmText })] })] }) }));
 }

package/dist/cjs/global-account/react/components/AccountAssets/AccountAssets.js

@@ -2,48 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccountAssets = AccountAssets;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 function AccountAssets({ nfts, isLoading }) {
-    // Initialize with all collections expanded
-    const [expandedCollections, setExpandedCollections] = (0, react_1.useState)(() => new Set(collections.map(c => c.collection_id)));
     if (isLoading) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-3", children: [...Array(2)].map((_, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "animate-pulse", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-react-muted mb-3 h-6 w-48 rounded" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-react-muted h-[98px] w-[98px] shrink-0 rounded-lg" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-b3-react-muted h-[98px] w-[98px] shrink-0 rounded-lg" })] })] }, i))) }));
+        return ((0, jsx_runtime_1.jsx)("div", { className: "grid animate-pulse grid-cols-2 gap-4", children: [...Array(4)].map((_, i) => ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-react-muted aspect-square rounded-lg" }, i))) }));
     }
     if (!nfts?.nfts?.length) {
         return (0, jsx_runtime_1.jsx)("div", { className: "text-b3-react-muted-foreground py-8 text-center", children: "No NFTs found" });
     }
-    // Group NFTs by collection
-    const groupedNFTs = nfts.nfts.reduce((acc, nft) => {
-        const collectionId = nft.collection?.collection_id || "unknown";
-        if (!acc[collectionId]) {
-            acc[collectionId] = {
-                collection_id: collectionId,
-                collection_name: nft.collection?.name || "Unknown Collection",
-                collection_image: nft.collection?.image_url || nft.previews?.image_small_url || "",
-                nfts: [],
-            };
-        }
-        acc[collectionId].nfts.push(nft);
-        return acc;
-    }, {});
-    const collections = Object.values(groupedNFTs);
-    const toggleCollection = (collectionId) => {
-        setExpandedCollections(prev => {
-            const next = new Set(prev);
-            if (next.has(collectionId)) {
-                next.delete(collectionId);
-            }
-            else {
-                next.add(collectionId);
-            }
-            return next;
-        });
-    };
-    return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-3 px-4", children: collections.map(collection => {
-            const isExpanded = expandedCollections.has(collection.collection_id);
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => toggleCollection(collection.collection_id), className: "flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [collection.collection_image && ((0, jsx_runtime_1.jsx)("img", { src: collection.collection_image, alt: collection.collection_name, className: "h-5 w-5 shrink-0 rounded object-cover" })), (0, jsx_runtime_1.jsxs)("p", { className: "font-neue-montreal-medium text-[14px] text-[#3f3f46]", children: [collection.collection_name, " (", collection.nfts.length, ")"] })] }), (0, jsx_runtime_1.jsx)("svg", { className: `h-[18px] w-[18px] shrink-0 transition-transform ${isExpanded ? "rotate-180" : ""}`, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M4.5 6.75L9 11.25L13.5 6.75", stroke: "#51525C", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), isExpanded && ((0, jsx_runtime_1.jsx)("div", { className: "flex gap-3 overflow-x-auto", children: collection.nfts.map(nft => ((0, jsx_runtime_1.jsx)("div", { className: "relative h-[98px] w-[98px] shrink-0 overflow-hidden rounded-lg", children: (0, jsx_runtime_1.jsx)("img", { src: nft.previews?.image_medium_url ||
-                                    nft.extra_metadata?.image_original_url ||
-                                    nft.collection?.image_url ||
-                                    "", alt: nft.name || "NFT", className: "h-full w-full object-cover" }) }, nft.nft_id))) }))] }, collection.collection_id));
-        }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 gap-4", children: nfts.nfts.map(nft => ((0, jsx_runtime_1.jsx)("div", { className: "group relative aspect-square overflow-hidden", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative h-full w-full overflow-hidden rounded-xl", children: [(0, jsx_runtime_1.jsx)("img", { src: nft.previews?.image_medium_url || nft.extra_metadata?.image_original_url || nft.collection?.image_url, alt: nft.name || "NFT", className: "h-full w-full rounded-xl object-cover" }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black from-35% via-black/70 to-transparent p-3 opacity-0 transition-all duration-200 ease-in-out group-hover:opacity-100", children: [(0, jsx_runtime_1.jsx)("p", { className: "font-neue-montreal-bold text-[16px] text-white drop-shadow-[0_1px_2px_rgba(0,0,0,1)]", children: nft.name || `#${nft.token_id}` }), (0, jsx_runtime_1.jsx)("p", { className: "font-neue-montreal-bold text-sm text-white/95 drop-shadow-[0_1px_2px_rgba(0,0,0,1)]", children: nft.collection?.name })] })] }) }, nft.nft_id))) }));
 }