@b3dotfun/sdk 0.0.73 → 0.0.74-alpha.1

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

@@ -10,13 +10,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../anyspend");
 const react_1 = require("../../../anyspend/react");
 const react_2 = require("../../../global-account/react");
+const BottomNavigation_1 = __importDefault(require("../../../global-account/react/components/ManageAccount/BottomNavigation"));
+const useAccountWallet_1 = require("../../../global-account/react/hooks/useAccountWallet");
+const supported_1 = require("../../../shared/constants/chains/supported");
 const cn_1 = require("../../../shared/utils/cn");
 const number_1 = require("../../../shared/utils/number");
 const invariant_1 = __importDefault(require("invariant"));
 const lucide_react_1 = require("lucide-react");
 const react_3 = require("motion/react");
 const react_4 = require("react");
-const sonner_1 = require("sonner");
 const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
 const useAutoSelectCryptoPaymentMethod_1 = require("../hooks/useAutoSelectCryptoPaymentMethod");
@@ -37,6 +39,7 @@ const PanelOnrampPayment_1 = require("./common/PanelOnrampPayment");
 const PointsDetailPanel_1 = require("./common/PointsDetailPanel");
 const RecipientSelection_1 = require("./common/RecipientSelection");
 const TabSection_1 = require("./common/TabSection");
+const baseChain = (0, supported_1.getThirdwebChain)(8453);
 var PanelView;
 (function (PanelView) {
     PanelView[PanelView["MAIN"] = 0] = "MAIN";
@@ -58,6 +61,8 @@ function AnySpend(props) {
 function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, }) {
     const searchParams = (0, react_2.useSearchParamsSSR)();
     const router = (0, react_2.useRouter)();
+    const { partnerId } = (0, react_2.useB3)();
+    const setB3ModalContentType = (0, react_2.useModalStore)(state => state.setB3ModalContentType);
     // Determine if we're in "buy mode" based on whether destination token props are provided
     const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
     // Add refs to track URL state
@@ -314,6 +319,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     //   [selectedDstChainId, newRecipientAddress, resolvedAddress]
     // );
     const { address: globalAddress, wallet: globalWallet, connectedEOAWallet } = (0, react_2.useAccountWallet)();
+    const globalWalletImage = (0, useAccountWallet_1.useAccountWalletImage)();
     // Auto-set active wallet from wagmi
     (0, useAutoSetActiveWalletFromWagmi_1.useAutoSetActiveWalletFromWagmi)();
     // Get wallet address based on selected payment method
@@ -484,7 +490,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         },
         onError: error => {
             console.error(error);
-            sonner_1.toast.error("Failed to create order: " + error.message);
+            react_2.toast.error("Failed to create order: " + error.message);
         },
     });
     // Add onramp order creation hook
@@ -501,7 +507,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         },
         onError: error => {
             console.error(error);
-            sonner_1.toast.error("Failed to create order: " + error.message);
+            react_2.toast.error("Failed to create order: " + error.message);
         },
     });
     // Check if it's a same-chain same-token swap
@@ -612,12 +618,16 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         }
         catch (err) {
             console.error(err);
-            sonner_1.toast.error("Failed to create order: " + err.message);
+            react_2.toast.error("Failed to create order: " + err.message);
         }
     };
     const onClickHistory = () => {
         setOrderId(undefined);
         navigateToPanel(PanelView.HISTORY, "forward");
+        setB3ModalContentType({
+            type: "anySpendOrderHistory",
+            showBackButton: false,
+        });
         // Remove orderId and paymentMethod from URL when going back to history
         const params = new URLSearchParams(searchParams.toString());
         params.delete("orderId");
@@ -649,7 +659,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         }
         catch (err) {
             console.error(err);
-            sonner_1.toast.error("Failed to create order: " + err.message);
+            react_2.toast.error("Failed to create order: " + err.message);
         }
     };
     // Handle fiat onramp order creation
@@ -658,7 +668,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
             (0, invariant_1.default)(effectiveRecipientAddress, "Recipient address is not found");
             if (!srcAmountOnRamp || parseFloat(srcAmountOnRamp) <= 0) {
-                sonner_1.toast.error("Please enter a valid amount");
+                react_2.toast.error("Please enter a valid amount");
                 return;
             }
             // Determine vendor and payment method string based on selected payment method
@@ -666,7 +676,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             let paymentMethodString = "";
             if (paymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY) {
                 if (coinbaseAvailablePaymentMethods.length === 0) {
-                    sonner_1.toast.error("Coinbase Pay not available");
+                    react_2.toast.error("Coinbase Pay not available");
                     return;
                 }
                 vendor = "coinbase";
@@ -674,14 +684,14 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
             }
             else if (paymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE) {
                 if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
-                    sonner_1.toast.error("Stripe not available");
+                    react_2.toast.error("Stripe not available");
                     return;
                 }
                 vendor = stripeWeb2Support && stripeWeb2Support.isSupport ? "stripe-web2" : "stripe";
                 paymentMethodString = "";
             }
             else {
-                sonner_1.toast.error("Please select a payment method");
+                react_2.toast.error("Please select a payment method");
                 return;
             }
             const getDstToken = () => {
@@ -713,7 +723,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         }
         catch (err) {
             console.error(err);
-            sonner_1.toast.error("Failed to create order: " + err.message);
+            react_2.toast.error("Failed to create order: " + err.message);
         }
     };
     // Open a dynamic modal
@@ -779,7 +789,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         };
     }, [activePanel, navigateBack]);
     const historyView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: navigateBack, onSelectOrder: onSelectOrder }) }));
-    const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", 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 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 => {
                     // When user explicitly changes payment method, set it as selected
                     setSelectedCryptoPaymentMethod(method);
                 }, points: oat.data.points || undefined, onBack: () => {
@@ -788,43 +798,58 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                     // Reset payment methods when going back
                     resetPaymentMethods();
                 } })) }) }));
-    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: tab => {
-                    setActiveTab(tab);
-                    // Reset payment methods when switching tabs
-                    resetPaymentMethods();
-                    setSelectedFiatPaymentMethod(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
-                }, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward"), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect, onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward") })) : ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: (panelIndex) => {
-                                // Map panel index to navigation with direction
-                                const panelsWithForwardNav = [PanelView.FIAT_PAYMENT_METHOD, PanelView.RECIPIENT_SELECTION];
-                                if (panelsWithForwardNav.includes(panelIndex)) {
-                                    navigateToPanel(panelIndex, "forward");
-                                }
-                                else {
-                                    setActivePanel(panelIndex);
-                                }
-                            }, _recipientAddress: effectiveRecipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), customUsdInputValues: customUsdInputValues }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.cn)("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
-                            if (activeTab === "fiat" || isBuyMode) {
-                                return;
-                            }
-                            // Swap chain selections
-                            const tempSrcChainId = selectedSrcChainId;
-                            const tempDstChainId = selectedDstChainId;
-                            setSelectedSrcChainId(tempDstChainId);
-                            setSelectedDstChainId(tempSrcChainId);
-                            // Swap token selections
-                            const tempSrcToken = selectedSrcToken;
-                            const tempDstToken = selectedDstToken;
-                            setSelectedSrcToken(tempDstToken);
-                            setSelectedDstToken(tempSrcToken);
-                            // Swap amounts
-                            const tempSrcAmount = srcAmount;
-                            const tempDstAmount = dstAmount;
-                            setSrcAmount(tempDstAmount);
-                            setDstAmount(tempSrcAmount);
-                        }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, effectiveRecipientAddress: effectiveRecipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
-                            setIsSrcInputDirty(false);
-                            setDstAmount(value);
-                        }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward") }))] }), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [(0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || effectiveRecipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
+    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "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 && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: tab => {
+                            setActiveTab(tab);
+                            // Reset payment methods when switching tabs
+                            resetPaymentMethods();
+                            setSelectedFiatPaymentMethod(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
+                        }, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward"), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect, onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward") })) : ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: (panelIndex) => {
+                                        // Map panel index to navigation with direction
+                                        const panelsWithForwardNav = [PanelView.FIAT_PAYMENT_METHOD, PanelView.RECIPIENT_SELECTION];
+                                        if (panelsWithForwardNav.includes(panelIndex)) {
+                                            navigateToPanel(panelIndex, "forward");
+                                        }
+                                        else {
+                                            setActivePanel(panelIndex);
+                                        }
+                                    }, _recipientAddress: effectiveRecipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), customUsdInputValues: customUsdInputValues }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.cn)("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
+                                    if (activeTab === "fiat" || isBuyMode) {
+                                        return;
+                                    }
+                                    // Swap chain selections
+                                    const tempSrcChainId = selectedSrcChainId;
+                                    const tempDstChainId = selectedDstChainId;
+                                    setSelectedSrcChainId(tempDstChainId);
+                                    setSelectedDstChainId(tempSrcChainId);
+                                    // Swap token selections
+                                    const tempSrcToken = selectedSrcToken;
+                                    const tempDstToken = selectedDstToken;
+                                    setSelectedSrcToken(tempDstToken);
+                                    setSelectedDstToken(tempSrcToken);
+                                    // Swap amounts
+                                    const tempSrcAmount = srcAmount;
+                                    const tempDstAmount = dstAmount;
+                                    setSrcAmount(tempDstAmount);
+                                    setDstAmount(tempSrcAmount);
+                                }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, effectiveRecipientAddress: effectiveRecipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
+                                    setIsSrcInputDirty(false);
+                                    setDstAmount(value);
+                                }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward") }))] }), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [(0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || effectiveRecipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: (0, jsx_runtime_1.jsx)(react_2.TabsPrimitive, { defaultValue: "swap", onValueChange: value => {
+                        if (value === "settings" || value === "home") {
+                            setB3ModalContentType({
+                                type: "manageAccount",
+                                activeTab: value,
+                                setActiveTab: () => { },
+                                chain: baseChain,
+                                partnerId,
+                            });
+                        }
+                        else if (value === "swap") {
+                            setB3ModalContentType({
+                                type: "anySpend",
+                            });
+                        }
+                    }, children: mode == "page" && (0, jsx_runtime_1.jsx)(BottomNavigation_1.default, {}) }) })] }));
     const onrampPaymentView = ((0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName || undefined, recipientAddress: effectiveRecipientAddress, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
             setOrderId(orderId);
             navigateToPanel(PanelView.ORDER_DETAILS, "forward");
@@ -839,13 +864,13 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                 params.set("paymentMethod", selectedCryptoPaymentMethod);
             }
             router.push(`${window.location.pathname}?${params.toString()}`);
-        }, onBack: navigateBack, recipientEnsName: globalWallet?.ensName, recipientImageUrl: globalWallet?.meta?.icon }));
+        }, onBack: navigateBack, recipientEnsName: globalWallet?.ensName, recipientImageUrl: globalWalletImage }));
     const recipientSelectionView = ((0, jsx_runtime_1.jsx)(RecipientSelection_1.RecipientSelection, { initialValue: effectiveRecipientAddress || "", onBack: navigateBack, onConfirm: address => {
             // User manually selected a recipient
             setSelectedRecipientAddress(address);
             navigateBack();
         } }));
-    const cryptoPaymentMethodView = ((0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: globalWallet, selectedPaymentMethod: effectiveCryptoPaymentMethod, setSelectedPaymentMethod: method => {
+    const cryptoPaymentMethodView = ((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: navigateBack, onSelectPaymentMethod: (method) => {

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

@@ -13,7 +13,6 @@ const invariant_1 = __importDefault(require("invariant"));
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("motion/react");
 const react_3 = require("react");
-const sonner_1 = require("sonner");
 const viem_1 = require("viem");
 const wagmi_1 = require("wagmi");
 const AnySpendCustom_1 = require("./AnySpendCustom");
@@ -122,12 +121,12 @@ function AnySpendBuySpin({ loadOrder, mode = "modal", spinwheelContractAddress,
         if (isTxSuccess) {
             setB3ModalOpen(false);
             onSuccess?.(buyingTxHash);
-            sonner_1.toast.success("Spin purchase transaction confirmed!");
+            react_1.toast.success("Spin purchase transaction confirmed!");
             setIsBuying(false);
         }
         else if (isTxError) {
             console.error("@@anyspend-buy-spin:tx-error:", txError);
-            sonner_1.toast.error("Transaction failed. Please try again.");
+            react_1.toast.error("Transaction failed. Please try again.");
             setB3ModalOpen(false);
             setIsBuying(false);
         }
@@ -239,7 +238,7 @@ function AnySpendBuySpin({ loadOrder, mode = "modal", spinwheelContractAddress,
         catch (error) {
             console.error("@@anyspend-buy-spin:config-error:", error);
             setConfigError("Failed to load spin wheel configuration");
-            sonner_1.toast.error("Failed to load spin wheel configuration");
+            react_1.toast.error("Failed to load spin wheel configuration");
         }
         finally {
             setIsLoadingConfig(false);
@@ -270,7 +269,7 @@ function AnySpendBuySpin({ loadOrder, mode = "modal", spinwheelContractAddress,
             });
             // If allowance is insufficient, request approval first
             if (allowance < totalCost) {
-                sonner_1.toast.info("Approving B3 spending...");
+                react_1.toast.info("Approving B3 spending...");
                 const approvalData = (0, viem_1.encodeFunctionData)({
                     abi: viem_1.erc20Abi,
                     functionName: "approve",
@@ -281,10 +280,10 @@ function AnySpendBuySpin({ loadOrder, mode = "modal", spinwheelContractAddress,
                     data: approvalData,
                     value: BigInt(0),
                 });
-                sonner_1.toast.info("Approval confirmed. Proceeding with spin purchase...");
+                react_1.toast.info("Approval confirmed. Proceeding with spin purchase...");
             }
             // Execute the buy entries and spin
-            sonner_1.toast.info("Buying spins...");
+            react_1.toast.info("Buying spins...");
             const buyData = (0, viem_1.encodeFunctionData)({
                 abi: SPIN_WHEEL_ABI,
                 functionName: "buyEntriesAndSpin",
@@ -297,12 +296,12 @@ function AnySpendBuySpin({ loadOrder, mode = "modal", spinwheelContractAddress,
             });
             if (buyHash) {
                 setBuyingTxHash(buyHash);
-                sonner_1.toast.success("Spin purchase transaction submitted!");
+                react_1.toast.success("Spin purchase transaction submitted!");
             }
         }
         catch (error) {
             console.error("@@anyspend-buy-spin:error:", error);
-            sonner_1.toast.error("Spin purchase failed. Please try again.");
+            react_1.toast.error("Spin purchase failed. Please try again.");
             setB3ModalOpen(false);
         }
         finally {
@@ -311,7 +310,7 @@ function AnySpendBuySpin({ loadOrder, mode = "modal", spinwheelContractAddress,
     };
     const confirmQuantity = () => {
         if (!isQuantityValid || !paymentConfig) {
-            sonner_1.toast.error("Please enter a valid quantity to buy");
+            react_1.toast.error("Please enter a valid quantity to buy");
             return;
         }
         // Check if user has sufficient B3 balance for direct buying