@b3dotfun/sdk 0.0.73 → 0.0.74-alpha.0

package/dist/cjs/global-account/react/utils/notificationsAPI.js

@@ -0,0 +1,257 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.notificationsAPI = void 0;
+const debug_1 = require("../../../shared/utils/debug");
+const debug = (0, debug_1.debugB3React)("notificationsAPI");
+const API_URL = "https://notifications.b3.fun";
+exports.notificationsAPI = {
+    /**
+     * Register user (requires JWT)
+     */
+    async registerUser(jwtToken) {
+        const res = await fetch(`${API_URL}/users`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${jwtToken}`,
+            },
+        });
+        if (!res.ok) {
+            throw new Error(`Failed to register user: ${res.statusText}`);
+        }
+        return res.json();
+    },
+    /**
+     * Get user data (requires JWT)
+     */
+    async getUser(userId, jwtToken) {
+        const res = await fetch(`${API_URL}/users/${userId}`, {
+            headers: {
+                Authorization: `Bearer ${jwtToken}`,
+            },
+        });
+        if (!res.ok) {
+            throw new Error(`Failed to get user: ${res.statusText}`);
+        }
+        return res.json();
+    },
+    /**
+     * Connect email (requires JWT)
+     */
+    async connectEmail(userId, email, jwtToken) {
+        const res = await fetch(`${API_URL}/users/${userId}/channels`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${jwtToken}`,
+            },
+            body: JSON.stringify({
+                channelType: "email",
+                channelIdentifier: email,
+                enabled: true,
+            }),
+        });
+        if (!res.ok) {
+            throw new Error(`Failed to connect email: ${res.statusText}`);
+        }
+        return res.json();
+    },
+    /**
+     * Connect SMS (requires JWT)
+     */
+    async connectSMS(userId, phoneNumber, jwtToken) {
+        const res = await fetch(`${API_URL}/users/${userId}/channels`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${jwtToken}`,
+            },
+            body: JSON.stringify({
+                channelType: "sms",
+                channelIdentifier: phoneNumber,
+                enabled: true,
+            }),
+        });
+        if (!res.ok) {
+            throw new Error(`Failed to connect SMS: ${res.statusText}`);
+        }
+        return res.json();
+    },
+    /**
+     * Connect WhatsApp (requires JWT)
+     */
+    async connectWhatsApp(userId, phoneNumber, jwtToken) {
+        const res = await fetch(`${API_URL}/users/${userId}/channels`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${jwtToken}`,
+            },
+            body: JSON.stringify({
+                channelType: "whatsapp",
+                channelIdentifier: phoneNumber,
+                enabled: true,
+            }),
+        });
+        if (!res.ok) {
+            throw new Error(`Failed to connect WhatsApp: ${res.statusText}`);
+        }
+        return res.json();
+    },
+    /**
+     * Connect Discord (requires JWT)
+     */
+    async connectDiscord(userId, discordUserId, jwtToken) {
+        const res = await fetch(`${API_URL}/users/${userId}/channels`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${jwtToken}`,
+            },
+            body: JSON.stringify({
+                channelType: "discord",
+                channelIdentifier: discordUserId,
+                enabled: true,
+            }),
+        });
+        if (!res.ok) {
+            throw new Error(`Failed to connect Discord: ${res.statusText}`);
+        }
+        return res.json();
+    },
+    /**
+     * Disconnect a channel (requires JWT)
+     * Looks up the channel ID by type and deletes it
+     */
+    async disconnectChannel(userId, channelType, jwtToken) {
+        // First, get user data to find the channel ID
+        const userData = await this.getUser(userId, jwtToken);
+        const channel = userData.channels.find((c) => c.channel_type === channelType);
+        if (!channel) {
+            throw new Error(`Channel ${channelType} not found`);
+        }
+        // Delete using the channel ID
+        const res = await fetch(`${API_URL}/users/${userId}/channels/${channel.id}`, {
+            method: "DELETE",
+            headers: {
+                Authorization: `Bearer ${jwtToken}`,
+            },
+        });
+        if (!res.ok) {
+            throw new Error(`Failed to disconnect channel: ${res.statusText}`);
+        }
+        return res.json();
+    },
+    /**
+     * Get Telegram deep link (requires JWT)
+     */
+    async getTelegramLink(jwtToken) {
+        const res = await fetch(`${API_URL}/telegram/request-link`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${jwtToken}`,
+            },
+        });
+        if (!res.ok) {
+            throw new Error(`Failed to get Telegram link: ${res.statusText}`);
+        }
+        return res.json();
+    },
+    /**
+     * Check Telegram status (requires JWT)
+     */
+    async checkTelegramStatus(userId, jwtToken) {
+        const res = await fetch(`${API_URL}/telegram/status/${userId}`, {
+            headers: {
+                Authorization: `Bearer ${jwtToken}`,
+            },
+        });
+        if (!res.ok) {
+            throw new Error(`Failed to check Telegram status: ${res.statusText}`);
+        }
+        return res.json();
+    },
+    /**
+     * Save notification preferences (requires JWT)
+     */
+    async savePreferences(userId, appId, settings, jwtToken) {
+        const res = await fetch(`${API_URL}/users/${userId}/apps/${appId}/settings`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${jwtToken}`,
+            },
+            body: JSON.stringify({
+                ...settings,
+                enabled: true,
+            }),
+        });
+        if (!res.ok) {
+            throw new Error(`Failed to save preferences: ${res.statusText}`);
+        }
+        return res.json();
+    },
+    /**
+     * Ensure notification settings exist for a user/app/type combination
+     * Creates default settings if they don't exist
+     */
+    async ensureNotificationSettings(userId, appId, notificationType, jwtToken) {
+        // Get user's connected channels
+        const userData = await this.getUser(userId, jwtToken);
+        const enabledChannels = userData.channels
+            .filter((c) => c.enabled === 1)
+            .map((c) => c.channel_type);
+        if (enabledChannels.length === 0) {
+            throw new Error("No channels connected");
+        }
+        // Create settings with all enabled channels
+        const res = await fetch(`${API_URL}/users/${userId}/apps/${appId}/settings`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${jwtToken}`,
+            },
+            body: JSON.stringify({
+                notificationType,
+                channels: enabledChannels,
+                enabled: true,
+            }),
+        });
+        if (!res.ok) {
+            throw new Error(`Failed to create notification settings: ${res.statusText}`);
+        }
+        return res.json();
+    },
+    /**
+     * Send a test notification (requires JWT)
+     * Automatically creates settings if they don't exist
+     */
+    async sendTestNotification(userId, appId, jwtToken) {
+        // Ensure settings exist for test notifications
+        try {
+            await this.ensureNotificationSettings(userId, appId, "general", jwtToken);
+        }
+        catch (err) {
+            debug("Failed to ensure settings, trying to send anyway:", err);
+        }
+        const res = await fetch(`${API_URL}/send`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${jwtToken}`,
+            },
+            body: JSON.stringify({
+                userId,
+                appId,
+                notificationType: "general",
+                title: "Test Notification",
+                message: "This is a test notification from B3. If you received this, your notifications are working correctly! 🎉",
+            }),
+        });
+        if (!res.ok) {
+            throw new Error(`Failed to send test notification: ${res.statusText}`);
+        }
+        return res.json();
+    },
+};

package/dist/cjs/global-account/react/utils/profileDisplay.d.ts

@@ -6,6 +6,7 @@ import { type Profile } from "thirdweb/wallets";
  */
 export declare function validateImageUrl(url: string | null | undefined): string | null;
 export interface ExtendedProfileDetails {
+    fid?: string;
     id?: string;
     email?: string;
     phone?: string;
@@ -13,6 +14,8 @@ export interface ExtendedProfileDetails {
     name?: string;
     username?: string;
     profileImageUrl?: string;
+    picture?: string;
+    pfpUrl?: string;
 }
 export interface ExtendedProfile extends Omit<Profile, "details"> {
     details: ExtendedProfileDetails;

package/dist/cjs/global-account/react/utils/profileDisplay.js

@@ -58,7 +58,11 @@ function validateImageUrl(url) {
     }
 }
 function getProfileDisplayInfo(profile) {
-    const { type, details } = profile;
+    const { type: originalType, details } = profile;
+    let type = originalType;
+    if (originalType === "siwe") {
+        type = "EOA";
+    }
     // Default display info
     let displayInfo = {
         title: details.email || details.phone || details.address || "Unknown",
@@ -80,9 +84,9 @@ function getProfileDisplayInfo(profile) {
             break;
         case "farcaster":
             displayInfo = {
-                title: details.name || details.username || "Unknown",
+                title: details.name || details.username || "FID:" + details?.fid || "Unknown",
                 subtitle: details.username ? `@${details.username}` : "Farcaster Account",
-                imageUrl: validateImageUrl(details.profileImageUrl),
+                imageUrl: validateImageUrl(details.pfpUrl || details.profileImageUrl),
                 initial: "F",
                 type,
             };
@@ -91,7 +95,7 @@ function getProfileDisplayInfo(profile) {
             displayInfo = {
                 title: details.name || details.email || "Unknown",
                 subtitle: details.email || "Google Account",
-                imageUrl: validateImageUrl(details.profileImageUrl),
+                imageUrl: validateImageUrl(details.picture || details.profileImageUrl),
                 initial: "G",
                 type,
             };

package/dist/cjs/global-account/react/utils/toast.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Re-export toast utilities for easy import
+ * This allows components to import toast from a central location
+ */
+export { toast } from "../components/Toast/toastApi";
+export type { ToastItem, ToastType } from "../components/Toast/ToastContext";

package/dist/cjs/global-account/react/utils/toast.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toast = void 0;
+/**
+ * Re-export toast utilities for easy import
+ * This allows components to import toast from a central location
+ */
+var toastApi_1 = require("../components/Toast/toastApi");
+Object.defineProperty(exports, "toast", { enumerable: true, get: function () { return toastApi_1.toast; } });

package/dist/cjs/shared/constants/chains/supported.d.ts

@@ -53,10 +53,10 @@ export declare function getCoingeckoChainInfo(chainId: number): {
     name: string;
     native_coin_id: string;
 };
-export declare const b3MainnetThirdWeb: Readonly<import("thirdweb/dist/types/chains/types").ChainOptions & {
+export declare const b3MainnetThirdWeb: Readonly<import("thirdweb/chains").ChainOptions & {
     rpc: string;
 }>;
-export declare const b3TestnetThirdWeb: Readonly<import("thirdweb/dist/types/chains/types").ChainOptions & {
+export declare const b3TestnetThirdWeb: Readonly<import("thirdweb/chains").ChainOptions & {
     rpc: string;
 }>;
 export declare const b3Mainnet: import("viem").Chain;
@@ -66,3 +66,4 @@ export declare const baseMainnet: import("viem").Chain;
  * Get a Thirdweb chain by chain ID from supportedChainsTW
  */
 export declare function getThirdwebChain(chainId: number): ThirdwebChain;
+export declare function getChainLogo(chainId: number): string;

package/dist/cjs/shared/constants/chains/supported.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.baseMainnet = exports.b3Testnet = exports.b3Mainnet = exports.b3TestnetThirdWeb = exports.b3MainnetThirdWeb = exports.coingeckoChains = exports.supportedChainNetworks = exports.supportedChainsTW = exports.supportedChains = void 0;
 exports.getCoingeckoChainInfo = getCoingeckoChainInfo;
 exports.getThirdwebChain = getThirdwebChain;
+exports.getChainLogo = getChainLogo;
 const chain_transformers_1 = require("../../../shared/utils/chain-transformers");
 const invariant_1 = __importDefault(require("invariant"));
 // Import the JSON directly
@@ -63,3 +64,6 @@ function getThirdwebChain(chainId) {
     }
     return chain;
 }
+function getChainLogo(chainId) {
+    return getThirdwebChain(chainId)?.icon?.url || "";
+}

package/dist/cjs/shared/utils/ipfs.js

@@ -1,10 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getIpfsUrl = getIpfsUrl;
+/**
+ * List of IPFS gateways to use for converting ipfs:// URLs to HTTP URLs
+ * These gateways must match the allowed list in profileDisplay.ts validateImageUrl()
+ */
 const IPFS_GATEWAYS = [
-    "https://ipfs.io/ipfs",
-    "https://cloudflare-ipfs.com/ipfs",
-    // Can add more gateways as needed
+    "https://cloudflare-ipfs.com/ipfs", // Primary gateway - fast and reliable
+    "https://ipfs.io/ipfs", // Fallback gateway
+    "https://gateway.pinata.cloud/ipfs", // Additional option
+    "https://dweb.link/ipfs", // Additional option
+    "https://nftstorage.link/ipfs", // Additional option
+    "https://w3s.link/ipfs", // Additional option
 ];
 /**
  * Converts an IPFS URL to a gateway URL

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

@@ -2,14 +2,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getDefaultToken, USDC_BASE } from "../../../anyspend/index.js";
 import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
-import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet, useProfile, useRouter, useSearchParamsSSR, useTokenBalanceDirect, useTokenData, useTokenFromUrl, } from "../../../global-account/react/index.js";
+import { Button, ShinyButton, StyleRoot, TabsPrimitive, toast, TransitionPanel, useAccountWallet, useB3, useModalStore, useProfile, useRouter, useSearchParamsSSR, useTokenBalanceDirect, useTokenData, useTokenFromUrl, } from "../../../global-account/react/index.js";
+import BottomNavigation from "../../../global-account/react/components/ManageAccount/BottomNavigation.js";
+import { useAccountWalletImage } from "../../../global-account/react/hooks/useAccountWallet.js";
+import { getThirdwebChain } from "../../../shared/constants/chains/supported.js";
 import { cn } from "../../../shared/utils/cn.js";
 import { formatTokenAmount } from "../../../shared/utils/number.js";
 import invariant from "invariant";
 import { ArrowDown, HistoryIcon, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { toast } from "sonner";
 import { parseUnits } from "viem";
 import { base, mainnet } from "viem/chains";
 import { useAutoSelectCryptoPaymentMethod } from "../hooks/useAutoSelectCryptoPaymentMethod.js";
@@ -30,6 +32,7 @@ import { PanelOnrampPayment } from "./common/PanelOnrampPayment.js";
 import { PointsDetailPanel } from "./common/PointsDetailPanel.js";
 import { RecipientSelection } from "./common/RecipientSelection.js";
 import { TabSection } from "./common/TabSection.js";
+const baseChain = getThirdwebChain(8453);
 export var PanelView;
 (function (PanelView) {
     PanelView[PanelView["MAIN"] = 0] = "MAIN";
@@ -51,6 +54,8 @@ export function AnySpend(props) {
 function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, }) {
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
+    const { partnerId } = useB3();
+    const setB3ModalContentType = 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
@@ -307,6 +312,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     //   [selectedDstChainId, newRecipientAddress, resolvedAddress]
     // );
     const { address: globalAddress, wallet: globalWallet, connectedEOAWallet } = useAccountWallet();
+    const globalWalletImage = useAccountWalletImage();
     // Auto-set active wallet from wagmi
     useAutoSetActiveWalletFromWagmi();
     // Get wallet address based on selected payment method
@@ -611,6 +617,10 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     const onClickHistory = () => {
         setOrderId(undefined);
         navigateToPanel(PanelView.HISTORY, "forward");
+        setB3ModalContentType({
+            type: "anySpendOrderHistory",
+            showBackButton: false,
+        });
         // Remove orderId and paymentMethod from URL when going back to history
         const params = new URLSearchParams(searchParams.toString());
         params.delete("orderId");
@@ -772,7 +782,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         };
     }, [activePanel, navigateBack]);
     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", 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 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 => {
                     // When user explicitly changes payment method, set it as selected
                     setSelectedCryptoPaymentMethod(method);
                 }, points: oat.data.points || undefined, onBack: () => {
@@ -781,43 +791,58 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                     // Reset payment methods when going back
                     resetPaymentMethods();
                 } })) }) }));
-    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && (_jsxs("div", { className: "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: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "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();
-                    setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
-                }, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsx(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") })) : (_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: 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 }) })), _jsx(Button, { variant: "ghost", className: 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: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && (_jsx(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") }))] }), _jsxs(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: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [_jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && _jsx(Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || effectiveRecipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
+    const mainView = (_jsxs("div", { className: "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 && (_jsxs("div", { className: "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: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "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();
+                            setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
+                        }, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsx(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") })) : (_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: 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 }) })), _jsx(Button, { variant: "ghost", className: 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: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && (_jsx(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") }))] }), _jsxs(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: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [_jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && _jsx(Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || effectiveRecipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }), _jsx("div", { className: "w-full", children: _jsx(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: _jsx(BottomNavigation, {}) }) })] }));
     const onrampPaymentView = (_jsx(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");
@@ -832,13 +857,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 = (_jsx(RecipientSelection, { initialValue: effectiveRecipientAddress || "", onBack: navigateBack, onConfirm: address => {
             // User manually selected a recipient
             setSelectedRecipientAddress(address);
             navigateBack();
         } }));
-    const cryptoPaymentMethodView = (_jsx(CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: globalWallet, selectedPaymentMethod: effectiveCryptoPaymentMethod, setSelectedPaymentMethod: method => {
+    const cryptoPaymentMethodView = (_jsx(CryptoPaymentMethod, { selectedPaymentMethod: effectiveCryptoPaymentMethod, setSelectedPaymentMethod: method => {
             // When user explicitly selects a payment method, save it
             setSelectedCryptoPaymentMethod(method);
         }, isCreatingOrder: isCreatingOrder, onBack: navigateBack, onSelectPaymentMethod: (method) => {

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

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { B3_TOKEN } from "../../../anyspend/index.js";
-import { Button, GlareCardRounded, Input, StyleRoot, TextLoop, useHasMounted, useModalStore, useTokenBalance, useUnifiedChainSwitchAndExecute, } from "../../../global-account/react/index.js";
+import { Button, GlareCardRounded, Input, StyleRoot, TextLoop, toast, useHasMounted, useModalStore, useTokenBalance, useUnifiedChainSwitchAndExecute, } from "../../../global-account/react/index.js";
 import { PUBLIC_BASE_RPC_URL } from "../../../shared/constants/index.js";
 import { baseMainnet } from "../../../shared/constants/chains/supported.js";
 import invariant from "invariant";
 import { ArrowRight, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import { useCallback, useEffect, useState } from "react";
-import { toast } from "sonner";
 import { createPublicClient, encodeFunctionData, erc20Abi, formatUnits, http } from "viem";
 import { useAccount, useWaitForTransactionReceipt } from "wagmi";
 import { AnySpendCustom } from "./AnySpendCustom.js";