@b3dotfun/sdk 0.1.68-alpha.9 → 0.1.69-alpha.0

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

@@ -969,8 +969,8 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isAuthenticated]);
-    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 p-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: effectiveCryptoPaymentMethod, onPaymentMethodChange: method => {
+    const historyView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-full max-w-[560px] 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-full max-w-[460px] p-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: effectiveCryptoPaymentMethod, onPaymentMethodChange: method => {
                     // When user explicitly changes payment method, set it as selected
                     setSelectedCryptoPaymentMethod(method);
                 }, points: oat.data.points || undefined, onBack: () => {
@@ -979,7 +979,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                     // Reset payment methods when going back
                     resetPaymentMethods();
                 }, returnToHomeUrl: returnToHomeUrl, returnHomeLabel: returnHomeLabel, disableUrlParamManagement: disableUrlParamManagement })) }) }));
-    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: classes?.mainContent || "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2 pt-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full max-w-full flex-col items-center gap-2 px-5", children: [isBuyMode && !hideHeader && ((0, jsx_runtime_1.jsxs)("div", { className: classes?.header || "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: classes?.headerLogo || "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: classes?.headerTitle || "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: tab => {
+    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: classes?.mainContent || "mx-auto flex w-full max-w-[460px] flex-col items-center gap-2 pt-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full max-w-full flex-col items-center gap-2 px-5", children: [isBuyMode && !hideHeader && ((0, jsx_runtime_1.jsxs)("div", { className: classes?.header || "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: classes?.headerLogo || "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: classes?.headerTitle || "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: tab => {
                             setActiveTab(tab);
                             // Reset payment methods when switching tabs
                             resetPaymentMethods();
@@ -1096,7 +1096,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
         },
         returnUrl: returnToHomeUrl,
         returnLabel: resolvedReturnLabel || undefined,
-    })) : ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-6 p-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [(0, jsx_runtime_1.jsx)(AnimatedCheckmark_1.AnimatedCheckmark, { className: "h-16 w-16" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-bold", children: defaultSuccessTitle }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary mt-1 text-sm", children: defaultSuccessDesc })] })] }), directTransferTxHash && ((0, jsx_runtime_1.jsx)("a", { href: (0, anyspend_1.getExplorerTxUrl)(selectedSrcChainId, directTransferTxHash), target: "_blank", rel: "noopener noreferrer", className: "text-as-brand hover:text-as-brand/80 text-sm underline", children: "View transaction" })), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-2", children: returnToHomeUrl ? ((0, jsx_runtime_1.jsx)(react_2.Button, { onClick: () => {
+    })) : ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-full max-w-[460px] flex-col items-center gap-6 p-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [(0, jsx_runtime_1.jsx)(AnimatedCheckmark_1.AnimatedCheckmark, { className: "h-16 w-16" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-bold", children: defaultSuccessTitle }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary mt-1 text-sm", children: defaultSuccessDesc })] })] }), directTransferTxHash && ((0, jsx_runtime_1.jsx)("a", { href: (0, anyspend_1.getExplorerTxUrl)(selectedSrcChainId, directTransferTxHash), target: "_blank", rel: "noopener noreferrer", className: "text-as-brand hover:text-as-brand/80 text-sm underline", children: "View transaction" })), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-2", children: returnToHomeUrl ? ((0, jsx_runtime_1.jsx)(react_2.Button, { onClick: () => {
                         window.location.href = returnToHomeUrl;
                     }, className: "bg-as-brand hover:bg-as-brand/90 w-full text-white", children: resolvedReturnLabel || "Return to Home" })) : ((0, jsx_runtime_1.jsx)(react_2.Button, { onClick: () => {
                         onSuccess?.(directTransferTxHash);

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

@@ -567,13 +567,13 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                 }
                                             }, className: "relative w-full", children: 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..." })] })) : !recipientAddress ? ("Select recipient") : selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.NONE ? ("Select payment method") : anyspendQuote ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Buy" }), (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") }) }) })] }) })] })] }));
     // Recipient selection view
-    const recipientSelectionView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(RecipientSelection_1.RecipientSelection, { initialValue: recipientAddress || "", title: "Add recipient address or ENS", description: "Send tokens to another address", onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onConfirm: address => {
+    const recipientSelectionView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-full max-w-[460px] rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(RecipientSelection_1.RecipientSelection, { initialValue: recipientAddress || "", title: "Add recipient address or ENS", description: "Send tokens to another address", onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onConfirm: address => {
                 // User manually selected a recipient
                 setSelectedRecipientAddress(address);
                 setActivePanel(PanelView.CONFIRM_ORDER);
             } }) }));
     // Crypto payment method view
-    const cryptoPaymentMethodView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { selectedPaymentMethod: effectiveCryptoPaymentMethod, setSelectedPaymentMethod: method => {
+    const cryptoPaymentMethodView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-full max-w-[460px] rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { selectedPaymentMethod: effectiveCryptoPaymentMethod, setSelectedPaymentMethod: method => {
                 // When user explicitly selects a payment method, save it
                 setSelectedCryptoPaymentMethod(method);
             }, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onSelectPaymentMethod: (method) => {
@@ -591,9 +591,9 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         setActivePanel(PanelView.CONFIRM_ORDER);
     }, []);
     // Fiat payment method view
-    const fiatPaymentMethodView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(FiatPaymentMethod_1.FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: handleBackToConfirmOrder, onSelectPaymentMethod: handleFiatPaymentMethodSelect, srcAmountOnRamp: srcFiatAmount }) }));
+    const fiatPaymentMethodView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-full max-w-[460px] rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(FiatPaymentMethod_1.FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: handleBackToConfirmOrder, onSelectPaymentMethod: handleFiatPaymentMethodSelect, srcAmountOnRamp: srcFiatAmount }) }));
     // Points detail view
-    const pointsDetailView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(PointsDetailPanel_1.PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER) }) }));
+    const pointsDetailView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-full max-w-[460px] rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(PointsDetailPanel_1.PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER) }) }));
     // Return the TransitionPanel with all views
     return ((0, jsx_runtime_1.jsx)(react_2.StyleRoot, { children: (0, jsx_runtime_1.jsx)(react_2.TransitionPanel, { activeIndex: orderId
                 ? oat

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

@@ -232,7 +232,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
     };
     const headerContent = header ? (header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote })) : ((0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: actionLabel }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary text-sm", children: "Pay from any token to execute a custom exact-in transaction." })] }) }));
     const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: classes?.container ||
-            "anyspend-custom-exact-in-container mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "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: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : ((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: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues, customRecipientLabel: customRecipientLabel }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: classes?.swapDirectionButton ||
+            "anyspend-custom-exact-in-container mx-auto flex w-full max-w-[460px] flex-col items-center gap-2", children: [headerContent, (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "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: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : ((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: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues, customRecipientLabel: customRecipientLabel }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: classes?.swapDirectionButton ||
                                     "swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", 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" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: false, effectiveRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, customRecipientLabel: customRecipientLabel, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), dstAmount: isSrcInputDirty && !destinationTokenAmount ? dstAmount : dstAmountInput, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
                                 setIsSrcInputDirty(false);
                                 setDstAmountInput(value);
@@ -399,7 +399,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
             react_2.toast.error("Failed to create order: " + err.message);
         }
     };
-    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, cryptoPaymentMethod: paymentType === "fiat" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : effectiveCryptoPaymentMethod, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
+    const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-full max-w-[460px]", 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, cryptoPaymentMethod: paymentType === "fiat" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : effectiveCryptoPaymentMethod, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
                     setOrderId(undefined);
                     setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
                 }, disableUrlParamManagement: true, points: oat.data.points || undefined, returnToHomeUrl: returnToHomeUrl, returnHomeLabel: returnHomeLabel })) }) }));

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

@@ -76,7 +76,7 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
             setClosable(true);
         }
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: classes?.container || "crypto-payment-method mx-auto h-fit w-[460px] max-w-full px-5 pb-5 pt-5 sm:px-0 sm:pt-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: classes?.backButton ||
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes?.container || "crypto-payment-method mx-auto h-fit w-full max-w-[460px] px-5 pb-5 pt-5 sm:px-0 sm:pt-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: classes?.backButton ||
                         "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: classes?.header || "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" }) }) }), process.env.NODE_ENV === "development" && ((0, jsx_runtime_1.jsxs)("div", { className: "rounded-lg border border-yellow-500/50 bg-yellow-50 p-3 dark:bg-yellow-950/20", children: [(0, jsx_runtime_1.jsx)("p", { className: "mb-2 text-xs font-semibold text-yellow-800 dark:text-yellow-300", children: "\uD83E\uDDEA Toast Test (Dev Only)" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => react_1.toast.success("Success! Transaction completed"), className: "rounded bg-green-600 px-2 py-1 text-xs font-medium text-white hover:bg-green-700", children: "Success" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => react_1.toast.error("Error! Transaction failed"), className: "rounded bg-red-600 px-2 py-1 text-xs font-medium text-white hover:bg-red-700", children: "Error" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => react_1.toast.info("Info: Processing your request..."), className: "rounded bg-blue-600 px-2 py-1 text-xs font-medium text-white hover:bg-blue-700", children: "Info" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => react_1.toast.warning("Warning: Low balance detected"), className: "rounded bg-yellow-600 px-2 py-1 text-xs font-medium text-white hover:bg-yellow-700", children: "Warning" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
                                         react_1.toast.success("Multiple test 1");
                                         setTimeout(() => react_1.toast.info("Multiple test 2"), 200);

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

@@ -62,7 +62,7 @@ function FeeDetailPanel({ fee, transactionAmountUsd, onBack, classes }) {
     // 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: classes?.container || "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: classes?.title || "text-as-primary text-lg font-bold", children: "Fee Breakdown" }) }), (0, jsx_runtime_1.jsxs)("div", { className: classes?.tierCard || "bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsx)("h4", { className: classes?.tierCardTitle || "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: classes?.container || "mx-auto flex w-full max-w-[460px] 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: classes?.title || "text-as-primary text-lg font-bold", children: "Fee Breakdown" }) }), (0, jsx_runtime_1.jsxs)("div", { className: classes?.tierCard || "bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsx)("h4", { className: classes?.tierCardTitle || "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

@@ -83,10 +83,10 @@ function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedPaymentM
     }
     // Show loading state while checking geo availability
     if (isLoadingGeoOnramp) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: classes?.container || "fiat-payment-method mx-auto w-[460px] max-w-full p-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.header || "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: classes?.backButton ||
+        return ((0, jsx_runtime_1.jsx)("div", { className: classes?.container || "fiat-payment-method mx-auto w-full max-w-[460px] p-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.header || "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: classes?.backButton ||
                                     "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: classes?.container || "fiat-payment-method mx-auto w-[460px] max-w-full p-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.header || "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: classes?.backButton ||
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes?.container || "fiat-payment-method mx-auto w-full max-w-[460px] p-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.header || "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: classes?.backButton ||
                                 "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: classes?.optionsList || "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);

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

@@ -475,4 +475,4 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
 function TransactionDetails({ title, chainId, tx, isProcessing, delay, }) {
     return ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-transaction-item relative flex w-full flex-1 items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-details-transaction-content flex grow items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_4.motion.div, { className: "bg-as-surface-secondary relative h-10 w-10 rounded-full", children: isProcessing ? ((0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeInOut", delay }, className: "border-as-border-secondary absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border-2 shadow-lg backdrop-blur-sm", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }) })) : ((0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeOut", delay }, className: "bg-as-success-secondary absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border border-white/30 shadow-lg backdrop-blur-sm", children: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckIcon, { className: "text-as-content-icon-success h-4 w-4" }) })) }), (0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay }, className: "shrink-0 text-base", children: isProcessing ? ((0, jsx_runtime_1.jsx)(react_1.TextShimmer, { duration: 1, children: title })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-as-primary", children: title })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-1", children: tx ? ((0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay: (delay || 0) + 0.3 }, className: "flex items-center gap-3", children: (0, jsx_runtime_1.jsx)("a", { href: (0, anyspend_1.getExplorerTxUrl)(chainId, tx.txHash), target: "_blank", children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30 font-mono text-xs", children: (0, centerTruncate_1.default)(tx?.txHash, 6) }) }) })) : null })] }));
 }
-exports.OrderDetailsLoadingView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-4", children: [(0, jsx_runtime_1.jsxs)(react_1.Badge, { variant: "default", className: "hover:bg-b3-react-background flex items-center gap-3 border-white/20 bg-white/10 px-4 py-1 text-base transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-as-primary h-4 w-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 p-6 pb-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-[200px] w-[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: "h-5 w-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-background 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)(react_1.Skeleton, { className: "h-10 w-full" })] }));
+exports.OrderDetailsLoadingView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-full max-w-[460px] flex-col items-center gap-4", children: [(0, jsx_runtime_1.jsxs)(react_1.Badge, { variant: "default", className: "hover:bg-b3-react-background flex items-center gap-3 border-white/20 bg-white/10 px-4 py-1 text-base transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-as-primary h-4 w-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 p-6 pb-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-[200px] w-[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: "h-5 w-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-background 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)(react_1.Skeleton, { className: "h-10 w-full" })] }));

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

@@ -9,6 +9,6 @@ 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, classes }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: classes?.container || "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: classes?.title || "text-as-primary text-xl font-bold", children: "Earn Points with Every Swap" }), (0, jsx_runtime_1.jsxs)("p", { className: classes?.description || "text-as-primary/70 text-balance text-sm leading-relaxed", children: ["You'll earn", " ", (0, jsx_runtime_1.jsxs)("span", { className: classes?.highlightText || "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: classes?.link || "text-as-brand underline", children: "next AnySpend airdrop" }), " ", "when you complete this transaction."] }), (0, jsx_runtime_1.jsxs)("div", { className: classes?.infoCard ||
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes?.container || "mx-auto flex w-full max-w-[460px] 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: classes?.title || "text-as-primary text-xl font-bold", children: "Earn Points with Every Swap" }), (0, jsx_runtime_1.jsxs)("p", { className: classes?.description || "text-as-primary/70 text-balance text-sm leading-relaxed", children: ["You'll earn", " ", (0, jsx_runtime_1.jsxs)("span", { className: classes?.highlightText || "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: classes?.link || "text-as-brand underline", children: "next AnySpend airdrop" }), " ", "when you complete this transaction."] }), (0, jsx_runtime_1.jsxs)("div", { className: classes?.infoCard ||
                         "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: classes?.infoCardTitle || "text-as-primary mb-2 font-semibold", children: "How it works:" }), (0, jsx_runtime_1.jsxs)("ul", { className: classes?.infoList || "text-as-primary/70 space-y-1 text-sm", children: [(0, jsx_runtime_1.jsx)("li", { className: classes?.infoListItem, children: "\u2022 Points are earned based on transaction volume" }), (0, jsx_runtime_1.jsx)("li", { className: classes?.infoListItem, children: "\u2022 Higher volume = more points" }), (0, jsx_runtime_1.jsx)("li", { className: classes?.infoListItem, children: "\u2022 Points contribute to future airdrops" }), (0, jsx_runtime_1.jsx)("li", { className: classes?.infoListItem, children: "\u2022 Keep swapping to maximize your rewards" })] })] }), (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", onClick: onBack, className: classes?.backButton || (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,7 +32,7 @@ function RecipientSelection({ initialValue = "", placeholder = "Enter recipient
     };
     const isAddressValid = !validateAddress || !recipientAddress || validateAddress(recipientAddress);
     const canConfirm = recipientAddress && isAddressValid;
-    return ((0, jsx_runtime_1.jsx)("div", { className: classes?.container || "recipient-selection mx-auto w-[460px] max-w-full p-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.header || "flex justify-around", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: classes?.backButton ||
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes?.container || "recipient-selection mx-auto w-full max-w-[460px] p-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.header || "flex justify-around", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: classes?.backButton ||
                                 "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: classes?.searchInput ||
                                         "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: classes?.confirmButton ||
                                 "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/ManageAccount/HomeActions.js

@@ -6,7 +6,7 @@ const BankIcon_1 = require("../../../../global-account/react/components/icons/Ba
 const SwapIcon_1 = require("../../../../global-account/react/components/icons/SwapIcon");
 const utils_1 = require("../../../../shared/utils");
 const SendIcon = () => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M17.9958 1.21467C17.666 1.10449 17.359 1.18417 17.2063 1.22851C17.04 1.27683 16.8417 1.35425 16.6428 1.43191L2.51187 6.94641C2.28951 7.03315 2.07413 7.11717 1.9079 7.19936C1.76427 7.27038 1.45899 7.42845 1.28859 7.75646C1.10067 8.11818 1.10092 8.54881 1.28927 8.9103C1.46006 9.23811 1.76552 9.39582 1.90924 9.46667C2.07556 9.54867 2.29099 9.63241 2.51345 9.71889L6.4468 11.2485C6.74023 11.3626 6.88695 11.4197 7.03291 11.4232C7.16193 11.4263 7.2899 11.3994 7.40674 11.3446C7.53893 11.2826 7.65024 11.1713 7.87287 10.9487L11.9107 6.91083C12.2361 6.58539 12.7638 6.58539 13.0892 6.91083C13.4147 7.23626 13.4147 7.7639 13.0892 8.08934L9.05138 12.1272C8.82875 12.3498 8.71744 12.4611 8.65545 12.5933C8.60065 12.7101 8.57374 12.8381 8.57684 12.9671C8.58035 13.1131 8.6374 13.2598 8.75152 13.5532L10.2811 17.4865C10.3676 17.709 10.4514 17.9245 10.5334 18.0908C10.6042 18.2345 10.7619 18.54 11.0897 18.7108C11.4512 18.8991 11.8819 18.8994 12.2436 18.7115C12.5716 18.541 12.7297 18.2358 12.8007 18.0921C12.8829 17.9259 12.9669 17.7106 13.0536 17.4882L18.5681 3.35726C18.6458 3.15833 18.7232 2.96007 18.7715 2.79371C18.8159 2.64105 18.8955 2.334 18.7854 2.00419C18.6609 1.63157 18.3685 1.33915 17.9958 1.21467Z", fill: "#0C68E9" }) }));
-const BuyIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [(0, jsx_runtime_1.jsx)("path", { d: "M9.99998 8.75C9.30962 8.75 8.74998 9.30964 8.74998 10C8.74998 10.6904 9.30962 11.25 9.99998 11.25C10.6903 11.25 11.25 10.6904 11.25 10C11.25 9.30964 10.6903 8.75 9.99998 8.75Z", fill: "#0C68E9" }), (0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14.1666 2.5C12.3642 2.5 10.8013 2.95205 9.44241 3.37018L9.18862 3.44844C7.90485 3.84476 6.86213 4.16667 5.83332 4.16667C5.09512 4.16667 4.43564 4.08819 3.88041 3.98151L3.85421 3.97647C3.44746 3.89831 3.10585 3.83267 2.84038 3.79758C2.60748 3.76679 2.26236 3.7302 1.94675 3.84126C1.78134 3.89947 1.60242 3.98249 1.43327 4.12224C1.26411 4.26199 1.14882 4.42202 1.06045 4.57348C0.898119 4.85168 0.864329 5.167 0.849347 5.3925C0.833297 5.63407 0.833306 5.94132 0.833317 6.29588L0.833315 15.2922C0.833263 15.4565 0.833201 15.6516 0.932434 15.9263C0.981719 16.0628 1.06288 16.1945 1.10974 16.2664C1.15659 16.3383 1.24436 16.4657 1.34932 16.5659C1.41718 16.6306 1.49456 16.6992 1.58722 16.76C1.67809 16.8196 1.76087 16.8559 1.79699 16.8717L1.80356 16.8746C2.48669 17.1759 3.71203 17.5 5.83332 17.5C7.63579 17.5 9.19862 17.0479 10.5576 16.6298L10.8113 16.5516C12.0951 16.1552 13.1378 15.8333 14.1666 15.8333C14.9048 15.8333 15.5643 15.9118 16.1196 16.0185L16.1458 16.0235C16.5525 16.1017 16.8941 16.1673 17.1596 16.2024C17.3925 16.2332 17.7376 16.2698 18.0532 16.1587C18.2186 16.1005 18.3975 16.0175 18.5667 15.8778C18.7359 15.738 18.8511 15.578 18.9395 15.4265C19.1018 15.1483 19.1356 14.833 19.1506 14.6075C19.1667 14.3659 19.1667 14.0587 19.1666 13.7041L19.1667 4.70776C19.1667 4.54347 19.1668 4.34839 19.0675 4.07365C19.0182 3.9372 18.9371 3.80547 18.8902 3.73359C18.8434 3.6617 18.7556 3.53428 18.6507 3.43412C18.5828 3.36935 18.5054 3.30084 18.4127 3.24003C18.3219 3.1804 18.2391 3.14413 18.203 3.1283L18.1964 3.12542C17.5133 2.82409 16.2879 2.5 14.1666 2.5ZM15.8333 7.5C15.8333 7.03976 15.4602 6.66667 15 6.66667C14.5397 6.66667 14.1666 7.03976 14.1666 7.5V10.8333C14.1666 11.2936 14.5397 11.6667 15 11.6667C15.4602 11.6667 15.8333 11.2936 15.8333 10.8333V7.5ZM7.08331 10C7.08331 8.38917 8.38915 7.08333 9.99998 7.08333C11.6108 7.08333 12.9166 8.38917 12.9166 10C12.9166 11.6108 11.6108 12.9167 9.99998 12.9167C8.38915 12.9167 7.08331 11.6108 7.08331 10ZM4.99998 8.33333C5.46022 8.33333 5.83331 8.70643 5.83331 9.16667V12.5C5.83331 12.9602 5.46022 13.3333 4.99998 13.3333C4.53974 13.3333 4.16665 12.9602 4.16665 12.5V9.16667C4.16665 8.70643 4.53974 8.33333 4.99998 8.33333Z", fill: "#0C68E9" })] }));
+const BuyIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [(0, jsx_runtime_1.jsx)("path", { d: "M9.99998 8.75C9.30962 8.75 8.74998 9.30964 8.74998 10C8.74998 10.6904 9.30962 11.25 9.99998 11.25C10.6903 11.25 11.25 10.6904 11.25 10C11.25 9.30964 10.6903 8.75 9.99998 8.75Z", fill: "#0C68E9" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.1666 2.5C12.3642 2.5 10.8013 2.95205 9.44241 3.37018L9.18862 3.44844C7.90485 3.84476 6.86213 4.16667 5.83332 4.16667C5.09512 4.16667 4.43564 4.08819 3.88041 3.98151L3.85421 3.97647C3.44746 3.89831 3.10585 3.83267 2.84038 3.79758C2.60748 3.76679 2.26236 3.7302 1.94675 3.84126C1.78134 3.89947 1.60242 3.98249 1.43327 4.12224C1.26411 4.26199 1.14882 4.42202 1.06045 4.57348C0.898119 4.85168 0.864329 5.167 0.849347 5.3925C0.833297 5.63407 0.833306 5.94132 0.833317 6.29588L0.833315 15.2922C0.833263 15.4565 0.833201 15.6516 0.932434 15.9263C0.981719 16.0628 1.06288 16.1945 1.10974 16.2664C1.15659 16.3383 1.24436 16.4657 1.34932 16.5659C1.41718 16.6306 1.49456 16.6992 1.58722 16.76C1.67809 16.8196 1.76087 16.8559 1.79699 16.8717L1.80356 16.8746C2.48669 17.1759 3.71203 17.5 5.83332 17.5C7.63579 17.5 9.19862 17.0479 10.5576 16.6298L10.8113 16.5516C12.0951 16.1552 13.1378 15.8333 14.1666 15.8333C14.9048 15.8333 15.5643 15.9118 16.1196 16.0185L16.1458 16.0235C16.5525 16.1017 16.8941 16.1673 17.1596 16.2024C17.3925 16.2332 17.7376 16.2698 18.0532 16.1587C18.2186 16.1005 18.3975 16.0175 18.5667 15.8778C18.7359 15.738 18.8511 15.578 18.9395 15.4265C19.1018 15.1483 19.1356 14.833 19.1506 14.6075C19.1667 14.3659 19.1667 14.0587 19.1666 13.7041L19.1667 4.70776C19.1667 4.54347 19.1668 4.34839 19.0675 4.07365C19.0182 3.9372 18.9371 3.80547 18.8902 3.73359C18.8434 3.6617 18.7556 3.53428 18.6507 3.43412C18.5828 3.36935 18.5054 3.30084 18.4127 3.24003C18.3219 3.1804 18.2391 3.14413 18.203 3.1283L18.1964 3.12542C17.5133 2.82409 16.2879 2.5 14.1666 2.5ZM15.8333 7.5C15.8333 7.03976 15.4602 6.66667 15 6.66667C14.5397 6.66667 14.1666 7.03976 14.1666 7.5V10.8333C14.1666 11.2936 14.5397 11.6667 15 11.6667C15.4602 11.6667 15.8333 11.2936 15.8333 10.8333V7.5ZM7.08331 10C7.08331 8.38917 8.38915 7.08333 9.99998 7.08333C11.6108 7.08333 12.9166 8.38917 12.9166 10C12.9166 11.6108 11.6108 12.9167 9.99998 12.9167C8.38915 12.9167 7.08331 11.6108 7.08331 10ZM4.99998 8.33333C5.46022 8.33333 5.83331 8.70643 5.83331 9.16667V12.5C5.83331 12.9602 5.46022 13.3333 4.99998 13.3333C4.53974 13.3333 4.16665 12.9602 4.16665 12.5V9.16667C4.16665 8.70643 4.53974 8.33333 4.99998 8.33333Z", fill: "#0C68E9" })] }));
 const HomeActionButton = ({ customClass, icon, label, onClick, }) => {
     return ((0, jsx_runtime_1.jsxs)(react_1.Button, { className: (0, utils_1.cn)("border-b3-line hover:border-b3-primary-blue flex h-[84px] w-full flex-col items-center justify-center gap-2 rounded-2xl border-[1.5px] bg-[#FAFAFA] shadow-[0_0_0_1px_rgba(10,13,18,0.18)_inset,0_-2px_0_0_rgba(10,13,18,0.05)_inset,0_1px_2px_0_rgba(10,13,18,0.05)] hover:bg-[#FAFAFA]", customClass), onClick: onClick, children: [icon, (0, jsx_runtime_1.jsx)("div", { className: "text-b3-grey font-neue-montreal-semibold", children: label })] }));
 };

package/dist/cjs/global-account/react/components/ManageAccount/channels/TelegramChannel.js

@@ -72,7 +72,7 @@ const TelegramChannel = ({ userId, jwtToken, telegramChannel, isConnected, isOpt
             handleConnect();
         }
     };
-    const icon = ((0, jsx_runtime_1.jsx)("svg", { width: "1000px", height: "1000px", viewBox: "0 0 1000 1000", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("g", { id: "Telegram", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", children: (0, jsx_runtime_1.jsx)("path", { d: "M226.328419,494.722069 C372.088573,431.216685 469.284839,389.350049 517.917216,369.122161 C656.772535,311.36743 685.625481,301.334815 704.431427,301.003532 C708.567621,300.93067 717.815839,301.955743 723.806446,306.816707 C728.864797,310.92121 730.256552,316.46581 730.922551,320.357329 C731.588551,324.248848 732.417879,333.113828 731.758626,340.040666 C724.234007,419.102486 691.675104,610.964674 675.110982,699.515267 C668.10208,736.984342 654.301336,749.547532 640.940618,750.777006 C611.904684,753.448938 589.856115,731.588035 561.733393,713.153237 C517.726886,684.306416 492.866009,666.349181 450.150074,638.200013 C400.78442,605.66878 432.786119,587.789048 460.919462,558.568563 C468.282091,550.921423 596.21508,434.556479 598.691227,424.000355 C599.00091,422.680135 599.288312,417.758981 596.36474,415.160431 C593.441168,412.561881 589.126229,413.450484 586.012448,414.157198 C581.598758,415.158943 511.297793,461.625274 375.109553,553.556189 C355.154858,567.258623 337.080515,573.934908 320.886524,573.585046 C303.033948,573.199351 268.692754,563.490928 243.163606,555.192408 C211.851067,545.013936 186.964484,539.632504 189.131547,522.346309 C190.260287,513.342589 202.659244,504.134509 226.328419,494.722069 Z", id: "Path-3", fill: "#FFFFFF" }) }) }));
+    const icon = ((0, jsx_runtime_1.jsx)("svg", { width: "1000px", height: "1000px", viewBox: "0 0 1000 1000", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("g", { id: "Telegram", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: (0, jsx_runtime_1.jsx)("path", { d: "M226.328419,494.722069 C372.088573,431.216685 469.284839,389.350049 517.917216,369.122161 C656.772535,311.36743 685.625481,301.334815 704.431427,301.003532 C708.567621,300.93067 717.815839,301.955743 723.806446,306.816707 C728.864797,310.92121 730.256552,316.46581 730.922551,320.357329 C731.588551,324.248848 732.417879,333.113828 731.758626,340.040666 C724.234007,419.102486 691.675104,610.964674 675.110982,699.515267 C668.10208,736.984342 654.301336,749.547532 640.940618,750.777006 C611.904684,753.448938 589.856115,731.588035 561.733393,713.153237 C517.726886,684.306416 492.866009,666.349181 450.150074,638.200013 C400.78442,605.66878 432.786119,587.789048 460.919462,558.568563 C468.282091,550.921423 596.21508,434.556479 598.691227,424.000355 C599.00091,422.680135 599.288312,417.758981 596.36474,415.160431 C593.441168,412.561881 589.126229,413.450484 586.012448,414.157198 C581.598758,415.158943 511.297793,461.625274 375.109553,553.556189 C355.154858,567.258623 337.080515,573.934908 320.886524,573.585046 C303.033948,573.199351 268.692754,563.490928 243.163606,555.192408 C211.851067,545.013936 186.964484,539.632504 189.131547,522.346309 C190.260287,513.342589 202.659244,504.134509 226.328419,494.722069 Z", id: "Path-3", fill: "#FFFFFF" }) }) }));
     const inputSection = status === "pending" ? ((0, jsx_runtime_1.jsxs)("div", { className: "mt-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-yellow-700 dark:text-white", children: "Waiting for connection..." }), (0, jsx_runtime_1.jsx)("p", { className: "font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[12px] text-yellow-600 dark:text-white", children: "Send /start to @b3_notifications_bot" })] })) : ((0, jsx_runtime_1.jsxs)("button", { onClick: handleConnect, disabled: isConnecting, className: "mt-1 flex items-center gap-1 disabled:opacity-50", children: [(0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M8 3.33333V12.6667M3.33333 8H12.6667", stroke: "#0c68e9", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), (0, jsx_runtime_1.jsx)("span", { className: "font-['Inter',sans-serif] text-[11px] font-semibold leading-[16px] text-[#0b57c2]", children: isConnecting ? "Opening..." : "Add Telegram" })] }));
     return ((0, jsx_runtime_1.jsx)(NotificationChannel_1.NotificationChannel, { icon: icon, iconClassName: "bg-[#24A1DE] rounded-xl", title: "Telegram", isConnected: isOptimisticallyConnected || status === "connected", isConnecting: isConnecting, isDisconnecting: isDisconnecting, connectedInfo: telegramChannel?.channel_identifier || "Connected", inputSection: inputSection, onToggle: handleToggle }));
 };

package/dist/cjs/global-account/react/hooks/useAuthentication.js

@@ -147,8 +147,9 @@ function useAuthentication(partnerId, { skipAutoConnect = false } = {}) {
         }
     }, [activeWallet, partnerId, authenticate, setIsAuthenticated, setIsAuthenticating, setUser, setHasStartedConnecting]);
     const logout = (0, react_2.useCallback)(async (callback) => {
-        // Only disconnect ecosystem/smart wallets, preserve EOA wallets (e.g. MetaMask)
-        // so they remain available after re-login.
+        // Disconnect ecosystem/smart wallets from the connected wallets list.
+        // EOA wallets (MetaMask, Coinbase Wallet) are left in the list so they can
+        // auto-reconnect on next login without requiring a new approval popup.
         // Use walletsRef.current (not the stale closure value) so we always get current wallets —
         // autoConnectCore captures logout from the first render when wallets is still [].
         walletsRef.current.forEach(wallet => {
@@ -157,19 +158,25 @@ function useAuthentication(partnerId, { skipAutoConnect = false } = {}) {
                 disconnect(wallet);
             }
         });
-        // Also disconnect the active wallet using the exact reference from thirdweb's
-        // activeWalletStore. The wallets in walletsRef (from useConnectedWallets) may be
-        // different object references than what thirdweb holds as "active". Thirdweb's
+        // Unconditionally disconnect the active wallet to clear thirdweb's activeAccountStore.
+        // This is separate from the loop above: even if the active wallet is an EOA (e.g.
+        // Coinbase Wallet), we must disconnect it so activeAccount becomes undefined.
+        // Without this, ConnectEmbed renders show=false (blank modal) because it checks
+        // show = !activeAccount. Note: thirdweb's disconnect() is idempotent — calling it
+        // on an already-disconnected wallet (from the loop above) is a no-op.
+        // We use the exact reference from activeWalletRef because thirdweb's
         // onWalletDisconnect uses strict identity (===) to decide whether to clear
-        // activeAccountStore — if the reference doesn't match, activeAccount stays set
-        // and ConnectEmbed renders show=false (blank).
-        if (activeWalletRef.current &&
-            (activeWalletRef.current.id.startsWith("ecosystem.") || activeWalletRef.current.id === "smart")) {
+        // activeAccountStore.
+        // Tradeoff: EOA wallets (MetaMask, Coinbase Wallet) will be removed from
+        // connectedWallets and require a new approval popup on next login.
+        // This is acceptable because a working login form is more critical than
+        // skipping one wallet approval step.
+        if (activeWalletRef.current) {
             debug("@@logout:disconnecting active wallet", activeWalletRef.current.id);
             disconnect(activeWalletRef.current);
         }
-        // Clear user-specific storage but preserve wallet connection state
-        // so EOA wallets (e.g. MetaMask) can auto-reconnect on next login
+        // Clear user-specific storage (auth tokens, cached user data).
+        // Thirdweb's wallet connection state is managed separately via disconnect() above.
         if (typeof localStorage !== "undefined") {
             localStorage.removeItem("lastAuthProvider");
             localStorage.removeItem("b3-user");
@@ -193,25 +200,47 @@ function useAuthentication(partnerId, { skipAutoConnect = false } = {}) {
     [disconnect, setIsAuthenticated, setIsAuthenticating, setUser, setIsConnected, onLogoutCallback]);
     const onConnect = (0, react_2.useCallback)(async (_walleAutoConnectedWith, allConnectedWallets) => {
         debug("@@useAuthentication:onConnect", { _walleAutoConnectedWith, allConnectedWallets });
+        const connectedEcosystemWallet = allConnectedWallets.find(w => w.id.startsWith("ecosystem."));
         try {
-            const wallet = allConnectedWallets.find(wallet => wallet.id.startsWith("ecosystem."));
-            if (!wallet) {
+            if (!connectedEcosystemWallet) {
                 throw new Error("No smart wallet found during auto-connect");
             }
-            debug("@@useAuthentication:onConnect", { wallet });
+            debug("@@useAuthentication:onConnect", { wallet: connectedEcosystemWallet });
             setHasStartedConnecting(true);
             setIsConnected(true);
             setIsAuthenticating(true);
-            await setActiveWallet(wallet);
-            const userAuth = await authenticateUser(wallet);
+            await setActiveWallet(connectedEcosystemWallet);
+            const userAuth = await authenticateUser(connectedEcosystemWallet);
             if (userAuth && onConnectCallback) {
-                await onConnectCallback(wallet, userAuth.accessToken);
+                await onConnectCallback(connectedEcosystemWallet, userAuth.accessToken);
             }
         }
         catch (error) {
             debug("@@useAuthentication:onConnect:failed", { error });
             setIsAuthenticated(false);
             setUser(undefined);
+            // Directly disconnect the ecosystem wallet we set active above.
+            // We can't rely on logout()'s activeWalletRef here because it's updated
+            // via useEffect (deferred until after paint), but this callback may run
+            // entirely within a single React commit cycle — before the ref updates.
+            // Note: logout() below may also call disconnect() on the same wallet via
+            // activeWalletRef — thirdweb's disconnect() is idempotent so this is safe.
+            if (connectedEcosystemWallet) {
+                debug("@@useAuthentication:onConnect:disconnecting ecosystem wallet", connectedEcosystemWallet.id);
+                disconnect(connectedEcosystemWallet);
+            }
+            // Also disconnect the wallet that autoConnectCore set as active.
+            // When only a non-ecosystem wallet (e.g. MetaMask) auto-reconnects,
+            // connectedEcosystemWallet is undefined, so the block above is skipped.
+            // But autoConnectCore already set this wallet as thirdweb's activeWallet,
+            // leaving activeAccount set. ConnectEmbed checks show = !activeAccount,
+            // so if we don't clear it, the login form renders blank.
+            // Uses object identity (===) which is safe because thirdweb returns
+            // stable references for connected wallet instances.
+            if (_walleAutoConnectedWith && _walleAutoConnectedWith !== connectedEcosystemWallet) {
+                debug("@@useAuthentication:onConnect:disconnecting auto-connected wallet", _walleAutoConnectedWith.id);
+                disconnect(_walleAutoConnectedWith);
+            }
             await logout();
         }
         finally {
@@ -226,6 +255,7 @@ function useAuthentication(partnerId, { skipAutoConnect = false } = {}) {
         isAuthenticated,
         isAuthenticating,
         isConnected,
+        disconnect,
         setHasStartedConnecting,
         setIsConnected,
         setIsAuthenticating,

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

@@ -962,8 +962,8 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isAuthenticated]);
-    const historyView = (_jsx("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: _jsx(OrderHistory, { mode: mode, onBack: navigateBack, onSelectOrder: onSelectOrder }) }));
-    const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full p-5", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: method => {
+    const historyView = (_jsx("div", { className: "mx-auto flex w-full max-w-[560px] flex-col items-center", children: _jsx(OrderHistory, { mode: mode, onBack: navigateBack, onSelectOrder: onSelectOrder }) }));
+    const orderDetailsView = (_jsx("div", { className: "mx-auto w-full max-w-[460px] p-5", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: method => {
                     // When user explicitly changes payment method, set it as selected
                     setSelectedCryptoPaymentMethod(method);
                 }, points: oat.data.points || undefined, onBack: () => {
@@ -972,7 +972,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                     // Reset payment methods when going back
                     resetPaymentMethods();
                 }, returnToHomeUrl: returnToHomeUrl, returnHomeLabel: returnHomeLabel, disableUrlParamManagement: disableUrlParamManagement })) }) }));
-    const mainView = (_jsxs("div", { className: classes?.mainContent || "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2 pt-5", children: [_jsxs("div", { className: "flex w-full max-w-full flex-col items-center gap-2 px-5", children: [isBuyMode && !hideHeader && (_jsxs("div", { className: classes?.header || "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: classes?.headerLogo || "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: classes?.headerTitle || "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: tab => {
+    const mainView = (_jsxs("div", { className: classes?.mainContent || "mx-auto flex w-full max-w-[460px] flex-col items-center gap-2 pt-5", children: [_jsxs("div", { className: "flex w-full max-w-full flex-col items-center gap-2 px-5", children: [isBuyMode && !hideHeader && (_jsxs("div", { className: classes?.header || "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: classes?.headerLogo || "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: classes?.headerTitle || "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: tab => {
                             setActiveTab(tab);
                             // Reset payment methods when switching tabs
                             resetPaymentMethods();
@@ -1089,7 +1089,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
         },
         returnUrl: returnToHomeUrl,
         returnLabel: resolvedReturnLabel || undefined,
-    })) : (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-6 p-5", children: [_jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx(AnimatedCheckmark, { className: "h-16 w-16" }), _jsxs("div", { className: "text-center", children: [_jsx("h2", { className: "text-as-primary text-xl font-bold", children: defaultSuccessTitle }), _jsx("p", { className: "text-as-secondary mt-1 text-sm", children: defaultSuccessDesc })] })] }), directTransferTxHash && (_jsx("a", { href: getExplorerTxUrl(selectedSrcChainId, directTransferTxHash), target: "_blank", rel: "noopener noreferrer", className: "text-as-brand hover:text-as-brand/80 text-sm underline", children: "View transaction" })), _jsx("div", { className: "flex w-full flex-col gap-2", children: returnToHomeUrl ? (_jsx(Button, { onClick: () => {
+    })) : (_jsxs("div", { className: "mx-auto flex w-full max-w-[460px] flex-col items-center gap-6 p-5", children: [_jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx(AnimatedCheckmark, { className: "h-16 w-16" }), _jsxs("div", { className: "text-center", children: [_jsx("h2", { className: "text-as-primary text-xl font-bold", children: defaultSuccessTitle }), _jsx("p", { className: "text-as-secondary mt-1 text-sm", children: defaultSuccessDesc })] })] }), directTransferTxHash && (_jsx("a", { href: getExplorerTxUrl(selectedSrcChainId, directTransferTxHash), target: "_blank", rel: "noopener noreferrer", className: "text-as-brand hover:text-as-brand/80 text-sm underline", children: "View transaction" })), _jsx("div", { className: "flex w-full flex-col gap-2", children: returnToHomeUrl ? (_jsx(Button, { onClick: () => {
                         window.location.href = returnToHomeUrl;
                     }, className: "bg-as-brand hover:bg-as-brand/90 w-full text-white", children: resolvedReturnLabel || "Return to Home" })) : (_jsx(Button, { onClick: () => {
                         onSuccess?.(directTransferTxHash);

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

@@ -561,13 +561,13 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                 }
                                             }, className: "relative w-full", children: isCreatingOrder ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { children: "Loading quote..." })] })) : !recipientAddress ? ("Select recipient") : selectedFiatPaymentMethod === FiatPaymentMethod.NONE ? ("Select payment method") : anyspendQuote ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "Buy" }), _jsx(ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : ("No quote found") }) }) })] }) })] })] }));
     // Recipient selection view
-    const recipientSelectionView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(RecipientSelection, { initialValue: recipientAddress || "", title: "Add recipient address or ENS", description: "Send tokens to another address", onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onConfirm: address => {
+    const recipientSelectionView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-full max-w-[460px] rounded-xl p-4"), children: _jsx(RecipientSelection, { initialValue: recipientAddress || "", title: "Add recipient address or ENS", description: "Send tokens to another address", onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onConfirm: address => {
                 // User manually selected a recipient
                 setSelectedRecipientAddress(address);
                 setActivePanel(PanelView.CONFIRM_ORDER);
             } }) }));
     // Crypto payment method view
-    const cryptoPaymentMethodView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(CryptoPaymentMethod, { selectedPaymentMethod: effectiveCryptoPaymentMethod, setSelectedPaymentMethod: method => {
+    const cryptoPaymentMethodView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-full max-w-[460px] rounded-xl p-4"), children: _jsx(CryptoPaymentMethod, { selectedPaymentMethod: effectiveCryptoPaymentMethod, setSelectedPaymentMethod: method => {
                 // When user explicitly selects a payment method, save it
                 setSelectedCryptoPaymentMethod(method);
             }, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onSelectPaymentMethod: (method) => {
@@ -585,9 +585,9 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         setActivePanel(PanelView.CONFIRM_ORDER);
     }, []);
     // Fiat payment method view
-    const fiatPaymentMethodView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: handleBackToConfirmOrder, onSelectPaymentMethod: handleFiatPaymentMethodSelect, srcAmountOnRamp: srcFiatAmount }) }));
+    const fiatPaymentMethodView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-full max-w-[460px] rounded-xl p-4"), children: _jsx(FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: handleBackToConfirmOrder, onSelectPaymentMethod: handleFiatPaymentMethodSelect, srcAmountOnRamp: srcFiatAmount }) }));
     // Points detail view
-    const pointsDetailView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER) }) }));
+    const pointsDetailView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-full max-w-[460px] rounded-xl p-4"), children: _jsx(PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER) }) }));
     // Return the TransitionPanel with all views
     return (_jsx(StyleRoot, { children: _jsx(TransitionPanel, { activeIndex: orderId
                 ? oat

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

@@ -226,7 +226,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
     };
     const headerContent = header ? (header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote })) : (_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsxs("div", { children: [_jsx("h1", { className: "text-as-primary text-xl font-bold", children: actionLabel }), _jsx("p", { className: "text-as-secondary text-sm", children: "Pay from any token to execute a custom exact-in transaction." })] }) }));
     const mainView = (_jsxs("div", { className: classes?.container ||
-            "anyspend-custom-exact-in-container mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues, customRecipientLabel: customRecipientLabel }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: classes?.swapDirectionButton ||
+            "anyspend-custom-exact-in-container mx-auto flex w-full max-w-[460px] flex-col items-center gap-2", children: [headerContent, _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues, customRecipientLabel: customRecipientLabel }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: classes?.swapDirectionButton ||
                                     "swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: false, effectiveRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, customRecipientLabel: customRecipientLabel, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: isSrcInputDirty && !destinationTokenAmount ? dstAmount : dstAmountInput, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
                                 setIsSrcInputDirty(false);
                                 setDstAmountInput(value);
@@ -393,7 +393,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
             toast.error("Failed to create order: " + err.message);
         }
     };
-    const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: paymentType === "fiat" ? CryptoPaymentMethodType.NONE : effectiveCryptoPaymentMethod, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
+    const orderDetailsView = (_jsx("div", { className: "mx-auto w-full max-w-[460px]", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: paymentType === "fiat" ? CryptoPaymentMethodType.NONE : effectiveCryptoPaymentMethod, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
                     setOrderId(undefined);
                     setActivePanel(PanelView.MAIN);
                 }, disableUrlParamManagement: true, points: oat.data.points || undefined, returnToHomeUrl: returnToHomeUrl, returnHomeLabel: returnHomeLabel })) }) }));

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

@@ -72,7 +72,7 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
             setClosable(true);
         }
     };
-    return (_jsx("div", { className: classes?.container || "crypto-payment-method mx-auto h-fit w-[460px] max-w-full px-5 pb-5 pt-5 sm:px-0 sm:pt-5", children: _jsxs("div", { className: cn("relative flex flex-col gap-10"), children: [_jsx("button", { onClick: onBack, className: classes?.backButton ||
+    return (_jsx("div", { className: classes?.container || "crypto-payment-method mx-auto h-fit w-full max-w-[460px] px-5 pb-5 pt-5 sm:px-0 sm:pt-5", children: _jsxs("div", { className: cn("relative flex flex-col gap-10"), children: [_jsx("button", { onClick: onBack, className: classes?.backButton ||
                         "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: _jsx(ChevronLeft, { className: "h-6 w-6" }) }), _jsx("div", { className: classes?.header || "flex items-center justify-around gap-4", children: _jsx("div", { className: "flex-1 text-center", children: _jsx("h2", { className: "text-as-primary text-lg font-semibold", children: "Select a payment method" }) }) }), process.env.NODE_ENV === "development" && (_jsxs("div", { className: "rounded-lg border border-yellow-500/50 bg-yellow-50 p-3 dark:bg-yellow-950/20", children: [_jsx("p", { className: "mb-2 text-xs font-semibold text-yellow-800 dark:text-yellow-300", children: "\uD83E\uDDEA Toast Test (Dev Only)" }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx("button", { onClick: () => toast.success("Success! Transaction completed"), className: "rounded bg-green-600 px-2 py-1 text-xs font-medium text-white hover:bg-green-700", children: "Success" }), _jsx("button", { onClick: () => toast.error("Error! Transaction failed"), className: "rounded bg-red-600 px-2 py-1 text-xs font-medium text-white hover:bg-red-700", children: "Error" }), _jsx("button", { onClick: () => toast.info("Info: Processing your request..."), className: "rounded bg-blue-600 px-2 py-1 text-xs font-medium text-white hover:bg-blue-700", children: "Info" }), _jsx("button", { onClick: () => toast.warning("Warning: Low balance detected"), className: "rounded bg-yellow-600 px-2 py-1 text-xs font-medium text-white hover:bg-yellow-700", children: "Warning" }), _jsx("button", { onClick: () => {
                                         toast.success("Multiple test 1");
                                         setTimeout(() => toast.info("Multiple test 2"), 200);

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

@@ -59,7 +59,7 @@ export function FeeDetailPanel({ fee, transactionAmountUsd, onBack, classes }) {
     // State for expanding tier lists
     const [showAllFeeTiers, setShowAllFeeTiers] = useState(false);
     const [showAllDiscountTiers, setShowAllDiscountTiers] = useState(false);
-    return (_jsx("div", { className: classes?.container || "mx-auto flex w-[460px] max-w-full flex-col items-center gap-3 px-5", children: _jsxs("div", { className: "flex w-full flex-col gap-3", children: [_jsx("div", { className: "text-center", children: _jsx("h3", { className: classes?.title || "text-as-primary text-lg font-bold", children: "Fee Breakdown" }) }), _jsxs("div", { className: classes?.tierCard || "bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-4", children: [_jsx("h4", { className: classes?.tierCardTitle || "text-as-primary mb-3 text-sm font-semibold", children: isStripeFee ? "Fiat Fee Schedule" : "Base Fee Schedule" }), _jsx("div", { className: "space-y-1.5", children: isStripeFee
+    return (_jsx("div", { className: classes?.container || "mx-auto flex w-full max-w-[460px] flex-col items-center gap-3 px-5", children: _jsxs("div", { className: "flex w-full flex-col gap-3", children: [_jsx("div", { className: "text-center", children: _jsx("h3", { className: classes?.title || "text-as-primary text-lg font-bold", children: "Fee Breakdown" }) }), _jsxs("div", { className: classes?.tierCard || "bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-4", children: [_jsx("h4", { className: classes?.tierCardTitle || "text-as-primary mb-3 text-sm font-semibold", children: isStripeFee ? "Fiat Fee Schedule" : "Base Fee Schedule" }), _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/esm/anyspend/react/components/common/FiatPaymentMethod.js

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

package/dist/esm/anyspend/react/components/common/OrderDetails.js

@@ -469,4 +469,4 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
 function TransactionDetails({ title, chainId, tx, isProcessing, delay, }) {
     return (_jsxs("div", { className: "order-details-transaction-item relative flex w-full flex-1 items-center justify-between gap-4", children: [_jsxs("div", { className: "order-details-transaction-content flex grow items-center gap-4", children: [_jsx(motion.div, { className: "bg-as-surface-secondary relative h-10 w-10 rounded-full", children: isProcessing ? (_jsx(motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeInOut", delay }, className: "border-as-border-secondary absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border-2 shadow-lg backdrop-blur-sm", children: _jsx(Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }) })) : (_jsx(motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeOut", delay }, className: "bg-as-success-secondary absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border border-white/30 shadow-lg backdrop-blur-sm", children: _jsx(CheckIcon, { className: "text-as-content-icon-success h-4 w-4" }) })) }), _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay }, className: "shrink-0 text-base", children: isProcessing ? (_jsx(TextShimmer, { duration: 1, children: title })) : (_jsx("span", { className: "text-as-primary", children: title })) })] }), _jsx("div", { className: "flex flex-col gap-1", children: tx ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay: (delay || 0) + 0.3 }, className: "flex items-center gap-3", children: _jsx("a", { href: getExplorerTxUrl(chainId, tx.txHash), target: "_blank", children: _jsx("div", { className: "text-as-primary/30 font-mono text-xs", children: centerTruncate(tx?.txHash, 6) }) }) })) : null })] }));
 }
-export const OrderDetailsLoadingView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-4", children: [_jsxs(Badge, { variant: "default", className: "hover:bg-b3-react-background flex items-center gap-3 border-white/20 bg-white/10 px-4 py-1 text-base transition-colors", children: [_jsx(Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }), _jsx(TextShimmer, { duration: 1, className: "font-sf-rounded text-base font-semibold", children: "Loading..." })] }), _jsxs("div", { className: "flex w-full flex-1 flex-col", children: [_jsxs("div", { className: "mb-4 flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsxs("div", { className: "mt-2 flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-8 w-48" }), _jsx(Skeleton, { className: "ml-4 h-8 w-32" })] }), _jsx(Skeleton, { className: "mt-4 h-8 w-24" })] }), _jsx(Skeleton, { className: "mb-4 h-12 w-full" }), _jsxs("div", { className: "flex w-full items-center justify-between gap-4", children: [_jsxs(Skeleton, { className: "rounded-lg p-6 pb-3", children: [_jsx("div", { className: "h-[200px] w-[200px]" }), _jsx("div", { className: "mt-3 flex items-center justify-center gap-2", children: _jsx("div", { className: "h-5 w-5 rounded-full" }) })] }), _jsx("div", { className: "flex flex-1 flex-col gap-2", children: [1, 2, 3].map(i => (_jsx(Skeleton, { className: "h-10 w-full" }, i))) })] })] }), _jsxs("div", { className: "bg-b3-react-background mt-8 w-full rounded-lg p-4", children: [_jsx(Skeleton, { className: "mb-3 h-4 w-48" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Skeleton, { className: "h-10 flex-1" }), _jsx(Skeleton, { className: "h-10 flex-1" })] })] }), _jsx(Skeleton, { className: "h-10 w-full" })] }));
+export const OrderDetailsLoadingView = (_jsxs("div", { className: "mx-auto flex w-full max-w-[460px] flex-col items-center gap-4", children: [_jsxs(Badge, { variant: "default", className: "hover:bg-b3-react-background flex items-center gap-3 border-white/20 bg-white/10 px-4 py-1 text-base transition-colors", children: [_jsx(Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }), _jsx(TextShimmer, { duration: 1, className: "font-sf-rounded text-base font-semibold", children: "Loading..." })] }), _jsxs("div", { className: "flex w-full flex-1 flex-col", children: [_jsxs("div", { className: "mb-4 flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsxs("div", { className: "mt-2 flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-8 w-48" }), _jsx(Skeleton, { className: "ml-4 h-8 w-32" })] }), _jsx(Skeleton, { className: "mt-4 h-8 w-24" })] }), _jsx(Skeleton, { className: "mb-4 h-12 w-full" }), _jsxs("div", { className: "flex w-full items-center justify-between gap-4", children: [_jsxs(Skeleton, { className: "rounded-lg p-6 pb-3", children: [_jsx("div", { className: "h-[200px] w-[200px]" }), _jsx("div", { className: "mt-3 flex items-center justify-center gap-2", children: _jsx("div", { className: "h-5 w-5 rounded-full" }) })] }), _jsx("div", { className: "flex flex-1 flex-col gap-2", children: [1, 2, 3].map(i => (_jsx(Skeleton, { className: "h-10 w-full" }, i))) })] })] }), _jsxs("div", { className: "bg-b3-react-background mt-8 w-full rounded-lg p-4", children: [_jsx(Skeleton, { className: "mb-3 h-4 w-48" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Skeleton, { className: "h-10 flex-1" }), _jsx(Skeleton, { className: "h-10 flex-1" })] })] }), _jsx(Skeleton, { className: "h-10 w-full" })] }));

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

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